JSひろばアプリ作成まで～1日目

JSひろばアプリ開発1日目：プロジェクトのセットアップ

by

私がプログラミングを独学で始めたのた2020年の3月、ニューヨークでコロナがちょうど発生した時でした。

それから片手間にPythonを１年くらい学び、その後にJavaScriptを後に学び始めました。

それからチケット管理アプリをデモで作りましたが、もっと実践で使えそうなアプリを作りたいと思い、今回のJSひろばアプリを作ることに決めました。

今回はプログラミングを始めたい人の為にすべての作業をゼロから行い、コードもすべてオープンソースで公開いたします。

作業の内容

作業日2022年12月8日
作業にかけた時間３時間
合計作業時間３時間
作業内容アイディアを絞る
UIをFigmaでデザインする
使用するテクノロジーを決める
課題点をクリアする

JSひろば

JSひろばという名前でアプリを進めていきます。これは、ユーザーがJSエンジンのコンソールにウェブページからインプットできて、ファンクションやWindowオブジェクトの仕組みを実際に試しながら学ぶアプリです。

下記がアプリのイメージになります。

これは無料デザインツールのFigmaを使って作りました。詳しいFigmaの使い方はこの記事で紹介しています。

当初はユーザー登録をしてユーザーが好きなコードの投稿や、お気に入りのコードを登録する機能までつけてみようかと思いましたが、機能の実装までにかなり時間がかかりそうなのでとりあえずはなしで進めます。

今回のスタック

JSひろばアプリは今まで使ってきたPtyhonのウェブフレームワークのDjangoとそれをREST APIにしてくれるライブラリを使います。

フロントエンドはReactを使おうかなと思ったけどVueの方が慣れているのでそちらを使います。

Djangoだとついてくるアドミンパネルからデータのエントリーができるのでこれもプラスですね。

では、今回のスタックDjango＋PostgreSQL＋Vueのイメージ図です。

eval()の脅威

今回、ユーザーがウェブページからeval()のメソッドを使ってコンソールと同じようにリスポンスを返すようにしたいのが一番の目的でした。しかしeval()はセキュリティ上使わない方がよいようですね。

有名なハッキング手法のうちの一つにEVAL インジェクション(eval injection)があることを知りました。

これは、JavaScriptのデーターフォーマットをであるJSON (JavaScript Object Notation)に不正なコードを挿入し想定外の動作を誘導する攻撃手法です。特にPHPをサーバーで使っている場合は危険のようですね。

今回は下記の点からeval()を使っても良いと判断しました。

  • そもそもクライアントサイドでのeval()のみ使用
  • Django RESTでAPIキーのマッチしたリクエストのみ受理
  • APIはGETのみ
  • Django REST APIのCORSポリシーでAPIのアクセス制限

Vueのプロジェクト作成

Vueのスタックはこんな感じです。

Vue + PrimeVue（UIライブラリ）＋ Vite + Pinia

今回はさくさくに動くViteのビルドツールを使います。

とりあずJavaScriptでコンソールをウェブページに実装できるところまで進めます。

npm create vite@latest
cd 
npm i

UIで使うCSSライブラリはPrimeVueにします。詳しいライブラリの説明はこちらで見てください。

TailwindCSSでもよかったのですが、PrimeVueに使えそうなターミナルのコンポーネントを発見しました！

まさにこれをアプリのメインのターミナルとして使いたいですね。

ではPrimeVueもインストールしましょう。詳しいPrimeVueの設定の仕方はこちらを参照してください。

#最新のものをインストールする場合
npm install primevue

#コンポーネントで使うアイコンのインストール
npm install primeicons --save

とりあえずここまでできました。

ではPrimeVueのコンポーネントを使ってキレイにしましょう。

細かいインプットの制限やコードの整理はまた次回に行います。

GitHubでコードを公開しているので見てください。

GitとGitHubの使い方もYouTubeで説明しているのでよかったらどうぞ。

完成したアプリはこちらからどうぞ。

　JSひろば