Added instructions

Author: k-miyake

README.md

@@ -14,9 +14,9 @@ Visual Studio Code, TypeScript, Element 編
 ## ハンズオン手順書
 
 - [Lab 0 - 開発環境の準備](instructions/lab00.md)
-- Lab 1 - プロジェクトの作成 `後日公開予定`
-- Lab 2 - 基本的なレンダリング `後日公開予定`
-- Lab 3 - テーブルの作成 `後日公開予定`
-- Lab 4 - フォームの作成 `後日公開予定`
-- Option 1 - API の接続 `後日公開予定`
-- Option 2 - さまざまなレンダリング `後日公開予定`
+- [Lab 1 - プロジェクトの作成](instructions/lab01.md)
+- [Lab 2 - 基本的なレンダリング](instructions/lab02.md)
+- [Lab 3 - テーブルの作成](instructions/lab03.md)
+- [Lab 4 - フォームの作成](instructions/lab04.md)
+- [Option 1 - API の接続](instructions/opt01.md)
+- [Option 2 - さまざまなレンダリング](instructions/opt02.md)

instructions/lab00.md

@@ -26,4 +26,4 @@
 
 ---
 
-[Next(準備中)](../README.md)
+[Next](lab01.md)

instructions/lab01.md

@@ -0,0 +1,75 @@
+# Lab 1 - プロジェクトの作成
+
+## Exercise 1: Vue CLI でのプロジェクト新規作成
+
+1. ターミナルやコマンドプロンプトで、プロジェクトを作成するディレクトリに移動します。 `˜/src` 以下に作成する場合は以下のように実行します（ディレクトリの場所は任意です）。
+
+    ```bash
+    cd ˜/src
+    ```
+
+1. Vue CLI でプロジェクトを新規作成します。まず、以下のコマンドを実行します（コマンド実行後はそのまま待機しておいてください）。以下ではプロジェクト名を `vue-lab` としています（プロジェクト名は任意です）。
+
+    ```bash
+    vue create vue-lab
+    ```
+
+1. 実行後のプロンプト `Please pick a preset` では、以下のように `Manually select features` を選択します。
+
+    ```bash
+    ? Please pick a preset:
+      default (babel, eslint)
+    ❯ Manually select features
+    ```
+
+1. 次のプロンプト `Check the features needed for your project` では、以下のよう `TypeScript` と `Router` を選択します。
+
+    ```bash
+    ? Check the features needed for your project:
+    ◯ Babel
+   ❯◉ TypeScript
+    ◯ Progressive Web App (PWA) Support
+    ◉ Router
+    ◯ Vuex
+    ◯ CSS Pre-processors
+    ◯ Linter / Formatter
+    ◯ Unit Testing
+    ◯ E2E Testing
+    ```
+
+1. **（重要）** 次のプロンプト `Use class-style component syntax?` では、 `n` を選択してください。
+
+    このハンズオンでは、 TypeScript では開発に、クラススタイルではなく、 `Vue.Extend` を使った記法を採用しています。主な理由は、[[Abandoned] Class API proposal: Update: the Class API proposal is being dropped.](https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121) によるためです。
+
+1. 次以降のプロンプトでは以下の設定になるように選択してください。
+
+    ```bash
+    ? Use Babel alongside TypeScript for auto-detected polyfills? No
+    ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
+    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
+    ? Save this as a preset for future projects? No
+    ? Pick the package manager to use when installing dependencies:
+     Use Yarn
+    ❯ Use NPM
+    ```
+
+    Yarn に慣れている方は `Use Yarn` を選択しても構いません（このハンズオンでは、npm を前提に説明を進めますので、適宜読み替えてください）
+
+## Exercise 2: プロジェクトの起動
+
+1. `vue create` の処理が完了したら、カレントディレクトリを Vue CLI で生成したディレクトリに移動し（この例では `vue-lab`）、以下のコマンドを実行してプロジェクトを起動します。
+
+    ```bash
+    cd vue-lab
+    npm run serve
+    ```
+
+1. `npm run serve` の実行が完了したら、ブラウザで `http://localhost:8080/` にアクセスします。
+
+1. ブラウザに 「Welcome to Your Vue.js + TypeScript App」 等と表示されていれば、無事にプロジェクトの作成が成功しています。
+
+`vue create` コマンドの詳細は [Creating a Project \| Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html) を確認してください。
+
+---
+
+[Previous](lab00.md) | [Next](lab02.md)

instructions/lab02.md

@@ -0,0 +1,132 @@
+# Lab 2 - 基本的なレンダリング
+
+## Exercise 1: テキストバインディング
+
+1. トップページを、TypeScript で定義したプロパティをレンダリングするように変更してみます。まず `src/views/Home.vue` を開き、 `<script>` タグ内を以下のように編集します（既存のコードは削除して構いません）。
+
+    ```ts
+    <script lang="ts">
+    import Vue from "vue";
+
+    export default Vue.extend({
+      data() {
+        return {
+          msg: "Hello Vue.js!"
+        };
+      }
+    });
+    </script>
+    ```
+
+1. 次にHTML部分となるテンプレートを変更して、 TypeScript で実装した `msg` をレンダリングするうように変更します（既存のマークアップは削除して構いません）。
+
+    ```html
+    <template>
+      <div class="home">
+        <h3>テキストバインディング</h3>
+        <span>{{ msg }}</span>
+      </div>
+    </template>
+    ```
+
+    ブラウザに「Hello Vue!」と表示されていれば成功です。
+
+1. 次に `Home.vue` のスタイルが左寄せになるように `<style>` タグを追加します。
+
+    ```css
+    <style scoped>
+    .home {
+      text-align: left;
+    }
+    </style>
+    ```
+
+## Exercise 2: リストレンダリング
+
+1. まず、リスト要素の型を定義するインターフェース `Item` を定義しておきます。ここでは、便宜的にインターフェースの定義箇所を Home.vueのscriptタグ内にそのまま追加するようにしています。
+
+    ```ts
+    <script lang="ts">
+    import Vue from "vue";
+
+    // ここにインターフェースを追加
+    declare interface Item {
+      id: number;
+      name: string;
+    }
+
+    // 以下省略
+    </script>
+    ```
+
+1. scriptタグ内の `data()` 内に、リストを表現する配列 `items` を実装します。
+
+    ```ts
+    import Vue from "vue";
+
+    // 途中省略
+
+    export default Vue.extend({
+      data() {
+        return {
+          msg: "Hello Vue.js!",
+          items: [
+            {
+              id: 1,
+              name: "キーボード"
+            },
+            {
+              id: 2,
+              name: "マウス"
+            }
+          ] as Item[]
+        };
+      }
+    });
+    ```
+
+1. 続けて、TypeScript で実装した `items` をレンダリングするうように `<template>` に以下を追加します。
+
+    ```html
+    <template>
+      <div class="home">
+        <!-- 途中省略 -->
+        <h3>リストレンダリング</h3>
+        <ul id="item-list">
+          <li v-for="item in items" :key="item.id">
+            {{item.name}}
+          </li>
+        </ul>
+      </div>
+    </template>
+    ```
+
+    ブラウザに Item のリストが2行表示されていれば成功です。
+
+## Exercise 3: イベントハンドリング
+
+1. クリックイベントに対応するイベントハンドラを `<script>` タグ内にメソッドとして実装します。
+
+    ```ts
+    data() {
+      // 途中省略
+    },
+    // ここにメソッドを追加する
+    methods: {
+      onClick(): void {
+        alert(this.msg);
+      }
+    }
+    ```
+
+1. テンプレートには `v-on` を使ったイベントに対応するをボタンを実装します。
+
+    ```html
+    <h3>イベントハンドリング</h3>
+    <button v-on:click="onClick">実行</button>
+    ```
+
+    ボタンをクリックして「Hello Vue!」アラートが表示されれば成功です。
+
+---
+[Previous](lab01.md) | [Next](lab03.md)

instructions/lab03.md

@@ -0,0 +1,164 @@
+# Lab 3 - テーブルの作成
+
+## Exercise 1: Element の導入
+
+1. Vue.js で利用できる UI ライブラリとして提供されている [Element](https://element.eleme.io/) を導入します。Element は Vue CLI のプラグインとしてインストールすることができますので、以下のコマンドを実行します。
+
+   ```bash
+   vue add element
+   ```
+
+1. CLI のプロンプトでは以下のように設定します。
+
+   ```bash
+   ? How do you want to import Element? : Fully import
+   ? Do you wish to overwrite Element's SCSS variables? : No
+   ? Choose the locale you want to load: ja
+   ```
+
+1. Element のインストール後、全体のレイアウトを調整するために `App.vue` を以下のように書き換えて下さい。( `<script>` タグは不要です)
+
+   ```html
+   <template>
+     <div id="app">
+       <el-container>
+         <el-aside>
+           <el-menu id="nav">
+             <el-menu-item>
+               <router-link to="/">Home</router-link>
+             </el-menu-item>
+             <el-menu-item>
+               <router-link to="/about">About</router-link>
+             </el-menu-item>
+           </el-menu>
+         </el-aside>
+         <el-main>
+           <router-view />
+         </el-main>
+       </el-container>
+     </div>
+   </template>
+
+   <style>
+     #app {
+       font-family: 'Avenir', Helvetica, Arial, sans-serif;
+       -webkit-font-smoothing: antialiased;
+       -moz-osx-font-smoothing: grayscale;
+       text-align: center;
+       color: #2c3e50;
+       margin-top: 60px;
+     }
+   </style>
+   ```
+
+## Exercise 2: テーブル画面の追加
+
+1. `views` ディレクトリ配下に `Table.vue` ファイルを新規に追加します。この時点ではファイルの中身は何も実装しなくて構いません。
+
+1. 次に、 [Vue Router](https://router.vuejs.org/ja/) の機能を使って、テーブル画面に遷移できるように `router.ts` を以下のように編集します。
+
+   ```ts
+   // （途中省略）
+   // 1. importに以下を追加します
+   import Table from './views/Table.vue';
+
+   Vue.use(Router);
+
+   export default new Router({
+     mode: 'history',
+     base: process.env.BASE_URL,
+     routes: [
+       // （途中省略）
+       // 2. routesに以下を追加します
+       {
+         path: '/table',
+         name: 'table',
+         component: Table
+       }
+     ]
+   });
+   ```
+
+1. 画面左のメニューにテーブル画面へのリンクが表示されるよう `App.vue` に以下を追加します。
+
+   ```html
+   <el-menu-item>
+     <router-link to="/table">Table</router-link>
+   </el-menu-item>
+   ```
+
+   この時点では、コンソールに `[Vue warn]: Failed to mount component: template or render function not defined.` の警告が出ますがそのまま進めます。
+
+## Exercise 3: Element の Table コンポーネント を使ったテーブルの実装
+
+1. テーブルのデータとなるオブジェクトを TypeScript 側に実装するため、 `Table.vue` を開き、 `<script>` タグを以下のように実装します。
+
+   ```ts
+   <script lang="ts">
+   import Vue from "vue";
+
+   // NoteBook型の定義
+   declare interface NoteBook {
+     id: number;
+     brand: string;
+     name: string;
+     isUsed: boolean;
+   }
+
+   // Table画面のビューモデル
+   export default Vue.extend({
+     data() {
+       return {
+         noteBooks: [
+           {
+             id: 1001,
+             brand: "Microsoft",
+             name: "Surface Go",
+             isUsed: false
+           },
+           {
+             id: 1002,
+             brand: "Apple",
+             name: "MacBook Air",
+             isUsed: true
+           }
+         ] as NoteBook[]
+       };
+     }
+   });
+   </script>
+   ```
+
+1. 次に [Element の Table コンポーネント](https://element.eleme.io/#/en-US/component/table) は 以下のように `<template>` タグをマークアップすることで簡単に高機能なテーブルを作成することができます。
+
+   ```html
+   <template>
+     <div class="table">
+       <el-table
+         :data="noteBooks"
+         :default-sort="{prop: 'id', order: 'ascending'}"
+       >
+         <el-table-column prop="id" label="ID" sortable> </el-table-column>
+         <el-table-column prop="brand" label="メーカー"> </el-table-column>
+         <el-table-column prop="name" label="機種名"> </el-table-column>
+         <el-table-column prop="isUsed" label="利用中">
+           <template slot-scope="scope">
+             <i class="el-icon-check" v-if="scope.row.isUsed"></i>
+           </template>
+         </el-table-column>
+       </el-table>
+     </div>
+   </template>
+
+   <style scoped>
+     .table {
+       text-align: left;
+     }
+   </style>
+   ```
+
+   ブラウザで `http://localhost:8080/table` を表示し、ソート機能付きのテーブルがレンダリングされていれば成功です。
+
+---
+
+[Previous](lab02.md) | [Next](lab04.md)