├── LICENSE
├── README.md
└── handson.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Shohei Okada
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue.js からはじめる JS フレームワーク
  2 | 
  3 | この資料は 2017/04/24 開催の勉強会「Vue.js からはじめる JS フレームワーク」用の資料です。
  4 | 
  5 | 
  6 | ## イベント詳細
  7 | 
  8 | [【勉強会】Vue.js からはじめる JS フレームワーク（ハンズオン形式） - サポーターズCoLab](https://supporterzcolab.com/event/8/)
  9 | 
 10 | 
 11 | ## 進め方
 12 | 
 13 | handson.html というファイルがあるので、このファイルをダウンロードし下記お題に沿って追記していってください。
 14 | 
 15 | ## ハンズオン
 16 | 
 17 | ### Hello World
 18 | 
 19 | `<script>` タグ内で Vue インスタンスを生成します。
 20 | 
 21 | 慣習として変数名に `vm` （ViewModel の略） を使います。
 22 | 
 23 | ```html
 24 | <script type="text/javascript">
 25 | var vm = new Vue({
 26 |     el: '#app',
 27 |     data: {
 28 |         message: 'Hello World'
 29 |     }
 30 | });
 31 | </script>
 32 | ```
 33 | 
 34 | HTML 側で `{{ }}` を用いることで変数を展開できます。
 35 | 
 36 | ```html
 37 | <div id="app" class="container">
 38 |     {{ message }}
 39 | </div>
 40 | ```
 41 | 
 42 | ブラウザで handson.html を開き、 'Hello World' と表示されている事を確認してください。
 43 | 
 44 | なお、コンソールから Vue インスタンスのプロパティを書き換えると、表示内容も更新されます。
 45 | 
 46 | ```js
 47 | vm.message = 'Hello Vue'
 48 | ```
 49 | 
 50 | ### 配列の要素の描画
 51 | 
 52 | `v-for` ディレクティブを使うことで配列の要素を描画することができます。
 53 | 
 54 | ```html
 55 | <script type="text/javascript">
 56 | var vm = new Vue({
 57 |     el: '#app',
 58 |     data: {
 59 |         users: [
 60 |             {name: 'Alice'},
 61 |             {name: 'Bob'},
 62 |             {name: 'Carol'}
 63 |         ]
 64 |     }
 65 | });
 66 | </script>
 67 | ```
 68 | 
 69 | ```html
 70 | <div id="app" class="container">
 71 |     <table class="table table-striped">
 72 |         <thead>
 73 |             <tr>
 74 |                 <th>Name</th>
 75 |             </tr>
 76 |         </thead>
 77 |         <tbody>
 78 |             <tr v-for="user in users">
 79 |                 <td>{{ user.name }}</td>
 80 |             </tr>
 81 |         <tbody>
 82 |     </table>
 83 | </div>
 84 | ```
 85 | 
 86 | ### 画面上で要素の追加入力
 87 | 
 88 | 配列の内容を変更すると連動して表の内容も再描画されます。
 89 | 
 90 | 上記の状態でブラウザのコンソールから配列に要素を追加してみましょう。
 91 | 
 92 | ```js
 93 | vm.users.push({name: 'Dave'});
 94 | ```
 95 | 
 96 | これを利用して入力フォームから要素を追加入力できるようにします。
 97 | 
 98 | #### v-model ディレクティブ
 99 | 
100 | Vue インスタンスのプロパティと `<input>` 要素の入力内容を結びつけるには `v-model` ディレクティブを使用します。
101 | 
102 | まず、`data` プロパティに下記を追加します。
103 | 
104 | ```html
105 | <script type="text/javascript">
106 | var vm = new Vue({
107 |     el: '#app',
108 |     data: {
109 |         users: [
110 |             // 略
111 |         ],
112 |         // 下記を追加
113 |         newUserName: ''
114 |     }
115 | });
116 | </script>
117 | ```
118 | 
119 | そして、HTML 側に `<input>` 要素を追加します。
120 | 
121 | ```html
122 | <div id="app" class="container">
123 |     <table class="table table-striped">
124 |         <!-- 略 -->
125 |     </table>
126 |     <!-- 下記を追加 -->
127 |     <input v-model="newUserName">
128 | </div>
129 | ```
130 | 
131 | この状態で、試しに何か入力した状態でコンソールから `newUserName` プロパティの値を確認してみてください。
132 | 
133 | ```js
134 | vm.newUserName
135 | ```
136 | 
137 | また、`newUserName` プロパティを別の値で上書きすると `<input>` 要素の内容も連動することを確認してみてください。
138 | 
139 | ```js
140 | vm.newUserName = 'Dave'
141 | ```
142 | 
143 | #### methods プロパティ
144 | 
145 | 次に、入力内容を配列に追加するメソッドを作成します。
146 | 
147 | Vue インスタンスの `methods` プロパティに関数を記述することで、メソッドを作成できます。
148 | 
149 | このとき、Vue インスタンス自身には `this` でアクセスすることができます。
150 | 
151 | ```html
152 | <script type="text/javascript">
153 | var vm = new Vue({
154 |     // 略
155 |     methods: {
156 |         append: function () {
157 |             this.users.push({name: this.newUserName});
158 |             this.newUserName = '';
159 |         }
160 |     }
161 | });
162 | </script>
163 | ```
164 | 
165 | #### v-on ディレクティブ
166 | 
167 | 最後に、Enter キーの keyup イベントをハンドリングして、 作成した `append` メソッドが呼び出されるようにします。
168 | 
169 | イベントハンドリングを行うには `v-on` ディレクティブを使用します。
170 | 
171 | `<input>` 要素を次のように書き換えてください。
172 | 
173 | ```html
174 |     <input v-model="newUserName" v-on:keyup.enter="append">
175 | ```
176 | 
177 | これで、入力後に Enter キーを押すことで要素が追加されるようになります。
178 | 
179 | なお `v-on:` は省略記法として `@` で代用することができます。
180 | 
181 | ```html
182 |     <input v-model="newUserName" @keyup.enter="append">
183 | ```
184 | 
185 | ### [応用] 要素の削除
186 | 
187 | ここまでの内容を応用して、クリックすると要素を削除するボタンを作成してみましょう。
188 | 
189 | HTML 部分を次のように変えると、各行に「×」マークが表示されます。
190 | 
191 | ```html
192 | <div id="app" class="container">
193 |     <table class="table table-striped">
194 |         <thead>
195 |             <tr>
196 |                 <th>Name</th>
197 |                 <th></th>
198 |             </tr>
199 |         </thead>
200 |         <tbody>
201 |             <tr v-for="(user, index) in users">
202 |                 <td>{{ user.name }}</td>
203 |                 <td><span @click="remove(index)" class="glyphicon glyphicon-remove"></span></td>
204 |             </tr>
205 |         <tbody>
206 |     </table>
207 |     <input v-model="newUserName" @keyup.enter="append">
208 | </div>
209 | ```
210 | 
211 | 「×」マークをクリックした際に該当行が削除されるようにしてみましょう。
212 | 
213 | 
214 | Hint 1: `v-for="(user, index) in users'` とすることで、ループ中の要素番号（0開始）に `index` でアクセスすることができます
215 | 
216 | Hint 2: 例えば 3 番目の要素を削除するとき、コンソール上では次のようにします
217 | 
218 | ```js
219 | vm.users.splice(2, 1);
220 | ```
221 | 
222 | Hint 3: `v-on` ディレクティブで呼び出すメソッドには `v-on:click="remove(index)"` のようにして引数を渡すことができます
223 | 
224 | ### コンポーネント
225 | 
226 | Vue.js では「コンポーネント」を利用することでコードをカプセル化し、再利用しやすい形にすることができます。
227 | 
228 | コンポーネント指向とは Vue.js 固有ではなく一般的な概念です。
229 | 
230 | 詳細な解説は割愛しますが（私もたいして理解していない）、Vue.js においてはとりあえず下記を認識しておいてください。
231 | 
232 | * コンポーネントは親子関係を持たせられる
233 | * 子から親のデータを直接参照できない
234 | * 親はプロパティを介して子にデータを伝達できる
235 | * 子はイベントを発火することで親に情報を知らせる
236 | 
237 | Vue.js におけるコンポーネントの詳細については公式ドキュメントを参考にしてください。
238 | 
239 | [コンポーネント - Vue.js # コンポーネントの構成](https://jp.vuejs.org/v2/guide/components.html#コンポーネントの構成)
240 | 
241 | 例として `user` をコンポーネント化してみましょう。
242 | 
243 | コンポーネントを作成するには次のように記述します。
244 | 
245 | ```js
246 | Vue.component('user', {
247 |     props: ['name'],
248 |     template:
249 |     '<tr>\
250 |         <td>{{ name }}</td>\
251 |         <td><span @click="remove" class="glyphicon glyphicon-remove"></span></td>\
252 |     </tr>',
253 |     methods: {
254 |         remove: function (index) {
255 |             this.$emit('remove');
256 |         }
257 |     }
258 | });
259 | ```
260 | 
261 | `props` は親コンポーネントから渡されるプロパティです。
262 | 
263 | 親コンポーネントからは直接値を指定する方法と、 `v-bind` ディレクティブを利用してデータを動的に結びつける方法があります。
264 | 
265 | 今回のハンズオンでは後者のみを利用します（後ほど説明）。
266 | 
267 | `template` は文字通りコンポーネントのテンプレートです。
268 | 
269 | テンプレート内ではプロパティの値を参照できます。
270 | 
271 | また、コンポーネントも `methods` を持つことができます。
272 | 
273 | ただし、`remove` メソッドは要素の削除を行っていないことに留意してください。
274 | 
275 | `$emit` を用いると任意の名前のイベントを発火することができます。
276 | 
277 | ここでは remove という名前のイベントを発火しているだけに留まり、親コンポーネントでそのイベントをハンドリングします。
278 | 
279 | 
280 | 上記だけではわかりにくいので全体のコードを見てましょう。
281 | 
282 | ```html
283 | <script type="text/javascript">
284 | 
285 | Vue.component('user', {
286 |     props: ['name'],
287 |     template:
288 |     '<tr>\
289 |         <td>{{ name }}</td>\
290 |         <td><span @click="remove" class="glyphicon glyphicon-remove"></span></td>\
291 |     </tr>',
292 |     methods: {
293 |         remove: function (index) {
294 |             this.$emit('remove');
295 |         }
296 |     }
297 | });
298 | 
299 | var vm = new Vue({
300 |     el: '#app',
301 |     data: {
302 |         users: [
303 |             {name: 'Alice'},
304 |             {name: 'Bob'},
305 |             {name: 'Carol'}
306 |         ],
307 |         newUserName: '',
308 |     },
309 |     methods: {
310 |         append: function () {
311 |             this.users.push({name: this.newUserName});
312 |             this.newUserName = '';
313 |         },
314 |         remove: function (index) {
315 |             this.users.splice(index, 1);
316 |         }
317 |     }
318 | });
319 | 
320 | </script>
321 | ```
322 | 
323 | 親コンポーネントとなる Vue インスタンスには変更はありません。
324 | 
325 | ```html
326 | <div id="app" class="container">
327 |     <table class="table table-striped">
328 |         <thead>
329 |             <tr>
330 |                 <th>Name</th>
331 |                 <th></th>
332 |             </tr>
333 |         </thead>
334 |         <tbody>
335 |             <tr
336 |                 is="user"
337 |                 v-for="(user, index) in users"
338 |                 v-bind:name="user.name"
339 |                 @remove='remove(index)'
340 |             ></tr>
341 |         <tbody>
342 |     </table>
343 |     <input v-model="newUserName" @keyup.enter="append">
344 | </div>
345 | ```
346 | 
347 | `<tbody>` の中身がコンポーネントによってカプセル化されています。
348 | 
349 | `is` 属性によってコンポーネントを指定しています。
350 | 
351 | また、`v-bind` ディレクティブを用いて `user.name` を子コンポーネントのプロパティ `name` に結びつけています。
352 | 
353 | なお `v-bind:` は省略記法として `:` で代用することができます。
354 | 
355 | `:name="user.name"`
356 | 
357 | 更に、`@`（`v-on:` の省略記法）を使って `remove` イベントをハンドリングしています。
358 | 
359 | 子コンポーネントから `remove` イベントが送出されると、該当する要素を削除（自身の `remove` メソッドを呼び出し）するようになっています。
360 | 
361 | 以上でこれまでに作ってきたものをコンポーネント化することができました。
362 | 
363 | コンポーネント化により親と子が疎結合になり、再利用しやすくなっていることがわかると思います。
364 | 


--------------------------------------------------------------------------------
/handson.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <!-- jQuery -->
 4 |     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 5 |     
 6 |     <!-- BootStrap -->
 7 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 8 |     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 9 | 
10 |     <!-- Vue.js -->
11 |     <script src="https://npmcdn.com/vue/dist/vue.js"></script>
12 | </head>
13 | <body>
14 | 
15 | <div id="app" class="container">
16 | </div>
17 | 
18 | <script type="text/javascript">
19 | </script>
20 | 
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------