【参考書と使う言語】パワハラ告発アプリ制作【3】

前回の進捗

前回ワイヤーフレームを作ったので早速コーディングしていきたいところですが、その前に言語とか環境構築をしていきます。

参考書

『Vue.jsとFirebaseで作るミニWebサービス』を使用しました。

この本に従って設定やプログラミングをするとマークダウン記法のメモアプリを作ることができます。

内容紹介には以下のように書かれています。

本書は、簡単なWebサイトを作った事があるWebフロントエンド初心者がSPA（シングルページアプリケーションを）の基本を掴み、簡単なWebサービスが作れるようになることを目的としています。さらにこれを抑えた上で次の段階へステップアップするための足がかりになるような要素も掲載しています。
〈本書の対象読者〉
HTML,CSS,JavaScriptを利用して、簡単なWebサイトを作ったことがある人
複数のページや状態管理をJavaScript使って自力で行い、ごちゃついてしまい消耗している人
普段デザイナーとしてマークアップしており、フロントエンドの新しめな環境でのサイト構築を経験してみたい人
シングルページアプリケーション、Vue.jsってものを触ってみたい、またはそれらの挫折経験がある人
FirebaseのWeb版を使ってみたい人、どんな事が出来るのか知りたい人
普段サーバーサイドやネイティブアプリを作っていて、Webフロントエンドをさらっと触ってみたい人

環境を整える

Node.js
この先ライブラリやツールを管理するのに使います。主にインストールやプロジェクトを立ち上げる時によく使います。コマンドの最初に『npm』をつけます。
ここからダウンロードできます

vue-cli
vueのテンプレートをダウンロードするツールをまずインストールします。
プロジェクトの名前はsotukenにしました。

npm install -g vue-cli プロジェクト名（英語）

webpack-simple
vueのテンプレートをダウンロードします。テンプレートのおかげで環境構築のためのファイルが丸ごとセットで手に入ります。

vue init webpack-simle

実行するとプロジェクトに関する質問がされるのでエンターキーを押していきます。Use saas?のみyを入力します。

? Project name プロジェクト名
? Project description A Vue.js project
? Author ふじこ <メールアドレス@gmail.jp>
? License MIT
? Use sass? Yes

これを入力し終えると以下の文が出てきます

vue-cli · Generated "aaaa".
To get started:

cd プロジェクト名（＝プロジェクトのフォルダ）
npm install
npm run dev

ライブラリ
プロジェクトのフォルダに移動してライブラリ群をインストールします。

cd プロジェクトのフォルダ
npm install

これで終わりです。
だいぶん前にこれをしましたが、どこかでエラーが出ました。そういう時はグーグルで調べます。自分と全く同じことをして同じエラーを出している人はほぼいません（泣）何かをインストールしたりアップデートしたり全部消して最初からインストールし直したり色々しました。エラーが出る時は英語のメッセージが出るのでグーグル翻訳を使うとなんとなく何故エラーになったのかわかると思います。

これで、vueの設定は（たぶん）終わりです。
次回はfirebaseの設定をします。

Vue

ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。（公式サイトより）