close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 JUnit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 Wireshark パケットキャプチャ 管理職研修 部下育成 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 テスト技法 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上 データモデリング サーバーサイドJava Webサーバー基礎 Webサーバー応用 Watson IBMWatson Learning Topics OS モバイル コンテスト トレーニング手法 アーキテクチャ 人材モデル インフラ CI/CD Infrastructure as a Code チーム開発 制度づくり Special_Intro AI市場分析 研修ロードマップ 仕事術 デジタルトランスフォーメーション 財務分析手法 情報整理 PowerPoint 新しい研修 オンライン研修 見どころ紹介 統計分析 ディープラーニング G検定 情報処理技術者試験 販売管理 C# テスト計画 Linuxサーバー WEBサーバ構築 http/2 Postfix イーサリアム プロジェクト・メンバ 正規化 パケット実験 作業分解 トラブル調査 ネットワーク設計 Windows server 2016 ネットワーク機器 DX 管理職 最新動向 ポストコロナ時代 IoTデバイス マイコンボード センサ サーバー仮想化 仮想ルータ WAN インターネットVPN 若手エンジニア ITプロジェクト 人事面談 DX人材育成 Java基礎 ZAP 脆弱性診断 NWサービス構築 イノベーション・マネジメント ネットワークセキュリティ ストレッチ Google Cloud Platform 不動産業界 テレワーク(WFH) ドリル GCP ( Google Cloud Platform ) システム業界 PMS テレワーク ビッグデータ NoSQL OWASP CentOS8 ネットワーク技術 データ分析 デザインシンキング 保険業界 会議リーダー システムエンジニア 段取り術 プロジェクト原論 文章書き換え術 ノーコード No Code MongoDB Redis Cassandra 運用管理 Windows10 仮想マシン リモートワーク 働き方 生産性 IPSec Office セキュリティマナー

3時間で入門する Vue.js 研修コースに参加してみた


2020-11-25 更新

今回参加したコースは 3 時間で入門する Vue.js です。

おなじみのチャットツール Slack のような UI、 SPA ( Single Page Application ) がトレンドになるにつれ、それを実現するフロントエンドフレームワーク React / Vue / Angular の人気が高まっています。


モダンな UI が作れそうですよね。憧れがあります。。と言いながら、かれこれ 3 年近く眺めているだけの人生でしたが、いつもの SE カレッジの 3 時間コースで、やっと入門できました!

しかも、わかりやすい!

他のフレームワークと違って、 TypeScript や JSX がデフォルトではなく、 HTML で書けるのも、初心者にはうれしいポイントでした(ちょっとこのまま勉強し続けたい気持ちです)。

 

では、そのコース内容をレポートします!

コース情報

想定している受講者 JavaScript プログラミングの基礎
受講目標 Vue.js の特徴や構文がわかる

講師紹介

このコースで登壇されたのは前回の CSS のレポートにも登場された 米山 学 さんです。

米山 学
米山 学
Java はもちろん Python / PHP などスクリプト言語、 Vue / React など JS だってなんだってテックが大好き。原点をおさえた実践演習で人気

JavaScript では過去にも ↓ のように登壇いただいています。

1日で習得する JavaScript 入門 研修コースに参加してみた
Modern JavaScript 入門 -開発環境編- 研修コースに参加してみた

Vue.js とは

  • UI の構築するためのフレームワーク
  • SPA を作るのに使われることが多い
    • React (Facebook) / Angular (Google) とともに使われている
  • Angular の開発に入っていた Evan You が 2014 年に開発
  • 年内に新しいバージョン Vue 3 が出てくる
    • 今回のコースは Vue 2

このコースが修了後、 Vue 3 がリリースされましたね。

Release v3.0.0 One Piece · vuejs/vue-next

ちなみに、リンク先のページにはマンガ “ワンピース” のロゴが出ていますが、 Vue は 0.9 からリリースのたびにマンガやアニメのキャラクターで名前付けしているようです。 Andoroid のコードネームのようでカワイイ。

過去には エヴァンゲリオン や 攻殻機動隊 なども出たようですね。

インストール !?

  • <script> タグを書くだけ
    • 楽すぎる!!
    • ただし、開発と本番でわけるように注意
    • 開発用(警告など表示):
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    • 本番用(軽量):
      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>

npm や Webpack などを使わなくても出来るところがステキです。

Hello Vue

では、サンプルを用意頂いていたので、まずはそれを動かしてみましょう。

codehtml

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Lesson</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- この app で Vue を呼び出してる -->
      <h1>{{ message }}</h1>
    </div>

    <script src="js/ex01.js"></script>
  </body>
</html>

codeex01.js

new Vue({
  el: "#app", // これで id='app' が呼ばれる
  data: {
    message: "Hello Vue!", // これが {{ message }} に対応している。 {{ }} で変数名を記述する
  },
});

ブラウザで開いてみます。 HTML のままで動く~ favoritefavorite

一人でキャッキャウフフしていたところで、先程の Vue の構文を解説いただきました。

  • new でインスタンス化
    • ちなみに公式ドキュメントをたとき オプション/hoge となっている場合、これはインスタンスのこと
  • DOM と JS のアプリケーションを結びつけるものとして ムスタッシュ構文が採用されている
    • {{}}: ムスタッシュ

MVVM ( Model View ViewModel )

続いて、 Vue のアーキテクチャ ? の解説です。ふーむ、フレームワークなだけに構造があるのですね。

  • Vue は MVVM というアーキテクチャを使っている
    • React / Angular も採用
  • バックエンドの MVC をフロントに持ち込んだもの
  • 基本的に ViewModel は触らなくてよい
    • 双方向バインディングと呼ばれる技術で自動で結びつけている
    • 開発者は View と Model だけを開発すれば良い

なるほど、フロントのフレームワークにおいても、DB のようなデータを扱う層と、リクエスト/レスポンスなどをコントロールする層、見た目の View を扱う層に分かれるんですね。

ちょっつずつ見えてきました。

Vue の構文

Vue とはどのようなものなのか、ちょっとずつ見えてきたところで、実際にどのように書くのか、サンプルを動かしながら構文を学びます。

Vue インスタンスのプロパティ

先程の Hello! Vue のサンプルをもう少し詳しくいきます。

new Vue({
  el: "#app", // これが id='app' が呼ばれる
  data: {
    message: "Hello Vue!", // これが {{ message }} に対応している。 {{ }} で変数名を記述する
  },
});
  • el:data: をプロパティと言う
  • el プロパティで DOM のエレメントを指定する
  • data プロパティはインスタンスが持つデータ
    • 注意点は HTML から呼ぶときに {{ data.message }} としない
    • もう一点、あとで data を追加しても再マウントしない限り読まれない
  • もともとプロパティがある
  • new Vue({ }){ } でプロパティを入れている

個人的には CSS のプロパティと似ていて、わかりやすいですね。

data プロパティの解説が続きます。

const dataObj = { message: "Hello Vue!" };

new Vue({
  el: "#app",
  data: dataObj,
});
  • 変数も持てる
  • ちょっと改造してみよう
const dataObj = {
  message: "Hello Vue!",
  userName: "Evan",
};

new Vue({
  el: "#app",
  data: dataObj,
});

html も変更します。

codehtml

<div id="app">
  <h1>{{ message }}</h1>
  <h2>from {{ userName }}</h2>
</div>

動かしみましょう。

 

それだけでなく、 {{ }} 内で js の標準関数も使えます!

codehtml

<div id="app">
  <h1>{{ message.toUpperCase() }}</h1>
  <h2>from {{ userName.toLowerCase() }}</h2>
</div>

動かしみましょう。

toUpperCase() ですべて大文字に、 toLowerCase() で小文字になってますね。

 

なお、プロパティは外部からデータ参照できませんが、 $ をつけると見える、とのことで、これもやってみましょう。

const dataObj = {
  message: "Hello Vue!",
  userName: "Evan",
};

const app = new Vue({
  el: "#app",
  data: dataObj,
});

console.log(app.$el); //app.el では出ない
console.log(app.$data);
console.log(app.$data.message);

デバッグのときに重宝しそうですね。

メソッドの書き方

インスタンスの中にはメソッドも書けます。いろいろな言語のクラスと同じですね。

new Vue({
  el: "#app",
  data: {
    userName: "Evan",
  },
  methods: {
    sayHello: function () {
      return `Hello ${this.userName}!`; // ES6 以降の JS の構文 ${} で指定したものが文字列に変わる。this は #app
    },
    sayGoodbye: function () {
      return `Goodbye ${this.userName}!`; // this は必須
    },
  },
});

codehtml

<div id="app">
  <h1>{{ sayHello() }}</h1>
  <h1>{{ sayGoodbye() }}</h1>
</div>
  • methods というプロパティを書いて、その以下に書ける
  • `${this.userName}!`;
    • ES6 以降の JS の構文
    • ${} で指定したものが文字列に変わる
    • this でオブジェクトを指すwarningthis を忘れやすいので注意
      • ここでは el を指す
      • this を使う場合はアロー関数( sayHello: () => { // 処理 } )は使えない

これも動かしてみましょう。

インスタンスのライフサイクル

このインスタンスが生成されてから破棄されるまでのライフサイクルをたどります。

なぜライフサイクルが出てくるのか、それは window.onloadなどのイベントハンドラのように、そのタイミングで処理が入れられるからです。

  1. new でインスタンス化
  2. init で初期化
    • 2 段階ある
    • この時点ではまだ mount されてない( HTML との連携はできてない)
  3. el があるか
  4. テンプレートオプションがあるか {{ }}
  5. HTML を生成
  6. el 要素にマウント
    • VirtualDOM に入る
    • data の変更検知と更新
  7. destory が呼ばれる前後

ライフサイクルフックを使ってみよう

  • それぞれのイベントでライフサイクルフックスが用意されている
    • 先の図の赤丸のところ
app = new Vue({
  data: { message: "Hello Vue!" },
  created: () => {
    console.log("A Vue instance was created.");
  },
  mounted: () => {
    console.log("The Vue instance was mounted.");
  },
  updated: () => {
    console.log("The property was updated.");
  },
  destroyed: () => {
    console.log("The Vue instance was destroyed.");
  },
});
  • 実行してみる
  • ただし el が指定されてないので、マウントされていない
    • created のタイミングで止まっている
  • コンソールで動かしてみよう
    • app.$mount('#app')` // マウント
    • app.$data.message = 'Goodbye Vue!'` // プロパティの値を変更

JS の画面のイベントハンドラより、細かく設定できて、やりやすいように見えますね。

ディレクティプ(属性)を使ってみよう

ディレクティブと言っているのは <div hoge="fuga"></div> の hoge のことですね。

  • html 内のディレクティプに書いて、それにより DOM を変化させられる
    • <div v-text=""></div> のように v- がつく
  • 14 あるうちからよく使うものを紹介

どんなことができるのでしょう。

v-for で繰り返し

  • for と同じ
  • JS の構文、 for of ではなく for in で書く

codehtml

<div id="app">
  <h3>Colors:</h3>
  <ul>
    <li v-for="color in colors">{{ color }}</li>
  </ul>
  <h3>Users:</h3>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }} - {{ user.age }}
    </li>
  </ul>
</div>
new Vue({
  el: "#app",
  data: {
    colors: ["Red", "Blue", "Yellow"], // 単純な配列
    users: [
      // オブジェクト配列
      { id: 1, name: "John", age: 19 },
      { id: 2, name: "Eric", age: 32 },
      { id: 3, name: "Bill", age: 25 },
    ],
  },
});

実行してみます。

なんでしょうか、私には HTML タグと混合させる PHP のように見えますが、かと思うとそうでもない、不思議な書き方ですね。

これは慣れが必要かも知れません(私にとってですが、、、)。

v-on イベントハンドリング

ライフサイクルフックだけでなく、 JS のイベントリッスンに対応したものもあります。

それがこの v-on です。

  • 一般の JS と同じイベント名 on や click

codehtml

<div id="app">
  <h1>{{ message }}</h1>
  <button v-on:click="message='Goodbye Vue!'">Click Me!</button>
</div>
new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!",
  },
});

実行してみます。

<button v-on:click="message='Goodbye Vue!'">Click Me!</button><button @click=""> と省略することも可能)

これをメソッドと引数を組合わせて書くこともできます。

new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!",
  },

  methods: {
    sayGoodbye: function () {
      this.message = "Goodbye Vue!";
    },
    changeMessage: function (message) {
      this.message = message;
    },
  },
});

codehtml

<button @click="changeMessage('OK')">Click Me!</button>

 

そのほか、 $event という特殊な変数もあり、例えば、ログなどを残すときに、どのイベントが起こったのか知りたいときは、この変数を使えばわかります。

codehtml

<button v-on:click="changeMessage($event, 'OK')">Click Me!</button>

 

そのほか、詳細は割愛しますが、この v-on をフックに動的にページを変えられます。例えば、 CSS のスタイルを変えることもできます。

以下の例は、クリックで h1 タグのスタイルを変えて赤色にしています。

v-model フォームで双方向バインディング

続いて、一度は聞いたことのある双方向バインディング。

特にフォームでよく使われるもので、素の JS で書こうとすると大変なんですが、 v-model ディレクティプを使うと簡単でした。

動作としては ↓ のようなものです。

このサンプルのコードはこちらです。

new Vue({
  el: "#app",
  data: {
    // 初期値
    message: "Hello Vue!",
    selected: "A",
    checked: false,
  },
});

codehtml

<div id="app">
  <h1>Input: {{ message }}</h1>
  <form>
    <input v-model="message" />
    <select v-model="selected">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
    <input type="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
  </form>
</div>

これはなかなかにわかりやすいですね。

 

このコースではこのディレクティブに続いて、 el や data, method などのプロパティのほかに、 データの変更があったときに検知できる computed や watch というプロパティを紹介いただきました。

Vue コンポーネントを作ってみよう

最後に、コンポーネントです。

細かなボタンなどから部品を作って、それを組み合わせてサイトを作るときに使うもので、具体的には Atomic デザインをやるときに使うものですね。

補足Atomic デザインとは ?
Atomic Design Methodology | Atomic Design by Brad Frost
Atomic Design を分かったつもりになる | DeNA DESIGN BLOG

  • UI の部品をコンポーネントにできる
  • よく使う部品をコンポーネントにしておくと再利用しやすい
  • グローバルとローカルにわかれる

グローバルコンポーネントを作ってみよう

グローバルコンポーネントはどこからでも使える部品です。

  • view.component() 関数を使う
  • template というプロパティで HTML を指定する
    • ケバブケース (-ハイフンで区切る。vue-component ) か キャメルケースを使う (VueComponent)
  • ただし data プロパティに関数を書いて、オブジェクトを返すようにする
Vue.component("hello-component", {
  // コンポーネント名
  data: () => ({ message: "Hello Vue!" }), // ⚠️ Arrow関数でオブジェクトを直接返す場合 () が必要
  template: "<h1>{{ message }}</h1>",
});

new Vue({
  el: "#app",
});

codehtml

<div id="app">
  <hello-component></hello-component>
</div>

h1 タグが表示されましたね。

ボタンなどの小さいものから、ヘッダーやサイドバーなどで使いやすそうです。

ローカルコンポーネントを作ってみよう

ローカルコンポーネントは特定のページ内や部品内で使うものです。

  • vue.component を使わず、インスタンス処理の中に書く
  • components というプロパティを使う

ふむふむ、確かにインスタンス内だけで書けば、影響範囲は限られますね。

const GoodbyeComponent = {
  data: () => ({ message: "Goodbye Vue!" }),
  template: "

{{ message }}

", }; new Vue({ el: "#app", components: { "goodbye-component": GoodbyeComponent, }, });

codehtml

<div id="app">
  <hello-component></hello-component>
  <goodbye-component></goodbye-component>
</div>

実行してみます。

続いて、 Vue 3 がリリースされることに触れて、コンポーネントの使い方 ( Composition API が導入される ) ので、関連記事を紹介いただきました。

正式リリース前に総予習!! Vue3の変更点まとめ – Qiita

 

最後に Vue を使って現場ではどのように書いているのか、参考までに、米山さんが用意された買い物かごリストを表示するアプリケーションを紹介いただき、このコースは修了しました。

まとめ

SPA な Web アプリケーションのフロントエンドを書くとき、ほぼデファクトになっているものの一つ、 Vue をインストールから構文までザッと触りました。

普段、私は HTML や CSS などを書くことが多いので、ほかの React の JSX や Angular の TypeScript が無く、普段の HTML や CSS から学べて、とてもすんなり馴染めました。とってもわかりやすいですね(もちろん実務では TypeScript をデフォルトで使うものだと思いますが)。

個人的な感想ですが、もしかすると Web デザインなどをやっている方には Vue 、バックエンド中心にやっている方には React などが学びやすいのかも知れないと思っています。

 

SPA を構築するフロントエンドフレームワークをそろそろ触ってみるか、という方には、このコースに参加して「 Vue ちょっと合わない」 or 「 Vue いいかも」と判断するのも良いのかも知れません。

ちなみに、私は「 Vue いいかも」「もっとやりたい」勢です!


SEカレッジについて

午前免除 FAQ

タグ一覧