30時間かけてJavaScriptが練習できるアプリを作りました。

ご存じの通り、JavaScriptが他のプログラミング言語と違うところは、もともとブラウザのために作られたということです。今では、Node.js等でバックエンドでも使用できるようになりましたがその基本は変わっていません。

私がJavaScriptを習い始めたころはコードを書きながら実際にいちいちconsole.log()を加えながらどういう動きをするのか確かめる作業を繰り返していました。

そこでこのJSひろばアプリを作成してみることにしました。
このアプリを通して皆さんにJavaScriptがどう使えるかを、実際の例を使って、自分のコードを書きながら試していただけると嬉しいです。
　　

JSひろばを試す

もともとの使用するテクノロジーはこのような感じです。

では30時間をどのように過ごしたかそれぞれの記事から詳しい内容をみてください。

---

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

• アイディアを絞る
• UIをFigmaでデザインする
• 使用するテクノロジーを決める
• 課題点をクリアする

JSひろばアプリ開発2日目：スタイルの設定

• Figmaのデザインを形にしていく
• ファイル構成を考える
• Vueコンポーネントの作成
• Piniaのインストール

JSひろばアプリ開発3日目：Vueアプリの全体像

• ボタンのコンポーネントの作成
• モックのデータを作成
• グローバルで使うデータをPiniaに保管させる
• Emitを使いデータを親コンポーネントに送る
• ライブラリコンポーネントのRefにアクセスする

JSひろばアプリ開発4日目：Djangoプロジェクトの作成

• Djangoのプロジェクト作成
• virtualenvの設定
• requirements.txtに書き出し
• DRFのインストール
• DBのテーブルの構成
• モデル、URL、ビューの設定
• PostgreSQLに接続

JSひろばアプリ開発5日目：Djangoのデプロイ

• ドメインの取得
• Ubuntuサーバーの設定
• サーバーのユーザー設定
• PostgreSQLのインストール
• リポジトリのクローン
• Djangoのデプロイ
• Nginxの設定
• SSLの取得

JSひろば開発６日目：Vueアプリのデプロイとデザイン

• Djangoに実際のデータを入力
• VueアプリにAxiosをインストール
• APIコールのリスポンスをPiniaに保管
• 実行ボタンの作成
• アニメーションの設定
• Highlight.jsを設定

JSひろば開発7日目：Vueアプリのデプロイとデザイン

• モジュールインポートエラーの対応
• favアイコンの作成
• 英語版に対応させる
• DBモデルの改修
• Google Analyrticsの追加
• ローディング画面の設定
• Vue-routerの追加

では今日もお疲れ様でした。