udzura/vuejs-fukudoku.md

## vuejs-fukudoku.md

      
    Raw
  

              vuejs-fukudoku.md
            
          
    副読本について


Vue.js を一通り動かしてみましょう！
たくさん疑問が出ると思いますが、メモをして一旦置いておいて、ともかく完走してみましょう！

メモはまとめてSlack、日報でご質問ください！
（フロントエンドは比較的経験が浅く、答えるのに時間がかかることもあります...）


基本は Vuejs 公式ガイド の通りに実施します
少しわかりづらいかも？という箇所をここで補足します

もちろん、ここで出てきた有益そうな内容は本家にcontributeします


とはいえガイドの冒頭にある通り、 公式ガイドは、HTML、CSS そして JavaScript の中レベルのフロントエンドの知識を前提にしています。 としているので、
わからないときはまずProgateなどの事前課題（HTML, JS）をしっかり見直してみてください！


「はじめに」の前に


コンソールを開くので、Chromeのデベロッパーツールの開き方を覚えておきましょう

https://developers.google.com/web/tools/chrome-devtools/?hl=ja
日本語では、「右上のメニュー　→　その他のツール　→　デベロッパーツール」


ローカル環境の構築については書かれていないので、今回は用意しました。

$ git clone https://github.com/daimyo-college/frontend-lesson.git
$ cd frontend-lesson
$ npm install
$ npm run server
これで http://localhost:8080 に今回の開発のサーバが立ち上がります！ 今回は JS なので、 ブラウザ側のリロードのみ で諸々反映されていきます。
ここで使ったツール（npm と package.json）の話は最後に座学でします。
index.html の配置場所


さっきのプロジェクトの public/index.html においてください。ダウンロードコマンドは以下です。長いのでコピペミスに注意してください。

$ curl https://gist.githubusercontent.com/chrisvfritz/7f8d7d63000b48493c336e48b3db3e52/raw/ed60c4e5d5c6fec48b0921edaed0cb60be30e87c/index.html -o public/index.html
これからの手順でも、 public/index.html を編集しリロード、という感じで進めてください。
script tag

ダウンロードしたものは <script src="https://unpkg.com/vue"></script> になっていますが、
ここはガイドに出てくるscriptタグのサンプルのどちらかに置き換えて構いません。そのままでもいいと思う...
「宣言的レンダリング」のヒント

<div>タグ、JSのコードが二回出てきますが、もとのHTMLでいうと

<div> タグは <body> のすぐ下に
JSのコードは下部の <script> タグに追記していく

という形がいいでしょう。以下の章も同じです。長い場合、一回ごとに全部置き換えてもよさそうです。
「Hover your mouse over me」という英語は、単純にマウスオーバーしてポップアップするまで待ってね、ということです。
ユーザー入力の制御あたりのヒント


この辺からブラウザからの操作が反映されるようになって面白いですね。余談。
ここまで、たくさん v-XXX という属性が出てきたと思います、なんとなくどういうのが出てきたか振り返りつつやるといいです。

コンポーネントによる構成


ここからはHTMLを育てていく感じでやります。
出てきたHTMLで一回一回置き換えるといいですね。

おまけ


1ページ目でも最後まで走り切ったら（「(架空の)アプリケーションのテンプレート」は置いておいて）、その前のアプリケーションでも今まで出てきた部品を何点か追加すれば「ToDoアプリケーション」にすることができます。考えてみましょう。

ヒント


ユーザー入力の制御
メソッド
双方向バインディング

HTML: フォームの追加

  <input v-model="task">
  <button v-on:click="addTodo">Add!</button>
Vue: メソッドの追加

var app7 = new Vue({
  // ...
  methods: {
    addTodo: function () {
      // id を内部で使ってないのでこれで動きます。
      // idの自動インクリメントは、宿題 --;
      this.groceryList.push({id: 0, text: this.task});
      this.task = "";
    }
  },
})

ということで


今日の授業で完走してほしい範囲は ここまで 、「https://jp.vuejs.org/v2/guide/」1ページ目までです。
それ以降は発展となります。自信があれば基本的には自力で解く形で進めてください。

質問は、 https://jp.vuejs.org/v2/guide/ 1ページ目をされている受講生優先です。
実際に動くものを作りたい方は、たとえば Vue.jsミニハンズオン（TODOリスト作成） というQiita記事 はいかがでしょうか。

どなたか存じ上げなかったのですが、鹿児島の方のようですね。九州〜
講師による完成形を frontend-lessonリポジトリのtodo-app-handsonブランチ に置いておくので、詰まったときは見比べてみましょう