シェアハウス生活に潜む問題をテックで解決するゾ【Day2】

Day1はこちら

まえがき

おい!平成あと1ヶ月だってよ!

どうも、ワシです。次の元号が「令和」に決まり、皆様におかれましては、ますますご活躍のこととお喜び申し上げようかと思っていた次第である。世間は新年度 & 改元で持ち切りの華やかムードだが、ワシらはそんな世間を横目に淡々と作業を進めていくとしよう。

今回やったこと

今日はアプリケーションを作っていく前座として、VueCLIを用いて新規のアプリ作成をした。VueCLI、なんとGUIからの操作モードがついていた。コマンドラインからしかアプリ作成をしたことがなかったので、Vue.jsの環境のモダンさ具合に正直驚いてる。
全部コマンドライン上で完結させるのがいかにもエンジニアっぽくてすこではあるのだが、今回はいろいろ新しいことを知りたいので敢えて遠回りな選択肢を取ることも許容している。が、このGUIモードはめちゃ使いやすいので正直もう自分でnpmだのyarnだの使って依存関係インストールするのやめちゃうかも。って思うくらいすごい。やめないけど。

VueCLIでVue.jsアプリケーションの新規作成

話が長くなった。サクッと行こう。まずは、

npm install -g @vue/cli

でVueCLIをインストール。今日(2019/04/01)時点でVer. 3.5.5が入った。ちなみにこの「@vue/cli」の「@」は、モジュールに名前空間つけるための記法である。詳しくはこっちの記事(【菅江真澄備忘録】npmでのインストール時に使う「@」の意味)見てね。

無事インストールが終わったら、GUIモードでVueCLIを立ち上げる。

vue ui

ブラウザでhttp://localhost:8000にアクセスすると、以下のような画面が表示されるはずだ。これがVueCLIのGUIである。

プロジェクトが何もねぇ!!(吉幾三)

ということで、新規プロジェクトを作成しよう。真ん中の「作成」を押して、プロジェクト名を入力。今回は、「風呂予約システム」をつくるので「reservation + bath = reserbath」とした(適当)

名前を入力したら画面下の「次へ」を押そう。

プリセット選択と呼ばれる画面に来る。追加する機能のプリセットを選択できるようだが、ここでは「デフォルトプリセット」でOK。あとで必要な機能は追加する。これで「プロジェクトを作成する」を押して、必要なライブラリがインストールされるのを待とう。

待つ。

松。

インストール完了!無事新規プロジェクトができた。

ディレクトリの中を見てみると、ちゃんとファイル群が作成されてる。素晴らしい。

じゃあコレで今回は終わり!…と行きたいところだが、あとちょっとだけインストール作業をしよう。

今回のWebアプリはSPAで組む予定なので、vue-routerを使う。それからバックエンドはFirebaseにまかせるので、Firebaseのライブラリも必要だ。したがって、GUI上からこの2つをインストールをする。

サイドバーメニュー内の「依存」タブを開き、検索窓に「vue-router」と入力しよう。

すると検索結果が出てくるので、一番上の「vue-router」を選んでインストール。

同様にして、Firebaseもインストールしよう。

これで無事に2つともインストールできた。

これで今日は終わり。なかなかアプリ作るとこまで行けないねぇ。早くモノを作りたみ。

次回やること

今日はインストールで終わってしまったので、次回は実際にアプリケーションの中身を作っていくことにする。Firebaseちょっとでもさわれたらいいな〜くらいのイメージ。終わり。

Day3はこちら

\Twitterも要チェックやで!/