【参考書と使う言語】パワハラ告発アプリ制作【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 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。(公式サイトより)

Vue.jsを使用するメリット

学習コストが低い
初心者向けである
日本語での技術ブログが充実(公式ガイドも日本語化されている)
DOM操作が簡単(ディレクティブなど)
双方向バインディングである(コードが短くなる簡単になる)

参考サイト

Vue.jsとは何かを現役エンジニアが解説【初心者向け】
 
【Vue.js入門】特徴や他のフレームワークとの比較などを紹介!

はじめてのVue.js(双方向バインディング)

 

Firebaseを使用するメリット

サーバサイドの処理を担ってくれる(ためフロントの開発に集中できる)
ログイン、データベース、ホスティングの機能をまとめて提供
大学生はグーグルのアカウントを持っているのでそれでログインしてもらう
 

 

 

 

公開日 いいねによる獲得 投げ銭による獲得 サポーター
: : :
2019/09/18 14.80 ALIS 0.10 ALIS
ふじこ's icon'
  • ふじこ
  • @tokumeikibou
【twitter@AuudnnF】パワハラ告発アプリを作るんだ
コメントする
コメントする