株式会社リクルートスタッフィングと、株式会社ディー・エヌ・エー（以下DeNA)が協同で開催するDeNAスキルアップイベント。その第5回目となる、「Vue.jsではじめるMVVM入門 ハンズオン勉強会＠DeNA」が、6月9日に渋谷ヒカリエのDeNA社で開催されました。
ITSTAFFINGから、研修やスキルアップに役立つ情報をご紹介
まず最初に、リクルートスタッフィングからご挨拶を兼ねて、2,000件以上を誇る豊富な案件から、IT系職種専任のお仕事紹介担当者が、仕事選びをお手伝いするITSTAFFINGについてご紹介をさせていただきました。
ITSTAFFINGではエンジニアの皆さんにそれぞれのワークスタイルに合ったお仕事をご紹介し、その後の就業上のサポートや、今回のようなスキル向上を支援する研修プログラムセミナーを定期的に開催しています。対人力アップのセミナーや、エンジニア向けに開催される勉強会の選び方セミナー、技術力を上げるためのセミナーなど、ご要望の多い内容のセミナーを今後も多数開催致します。
また、ITSTAFFINGサイトを2016年2月にリニューアルし、お仕事が探しやすくなりました。他にも、エンジニアスタイル（本コンテンツ）で派遣エンジニアとして働く方のインタビューや、今回のようなセミナーレポートを定期的に掲載しています。また、メルマガでの情報配信も開始し、皆さんが更に情報を得やすい環境を今後も整えていきます。興味のある方はぜひITSTAFFINGにご登録いただき、スキルアップにお役立てください。
Vue.jsを使って、MVVMの世界を体験してみよう
今回のハンズオン勉強会は、Vue.jsを用いて簡単なToDoアプリを作るというもの。AngularJSやBackbone.jsよりもシンプルでわかりやすいと言われるVue.jsを、ハンズオンを通じて体験してみようというコンセプトで行われました。
▲ 今回の講師：株式会社ディー・エヌ・エー 榎戸徹さん
2014年入社。元々Flashエンジニアだったが、Flashの利用が減る中でフロントエンドエンジニアに転向。ブラウザ内外でどういった表現ができるか日々模索中。2014年1月～10月は怪盗ロワイヤルのフロントエンドを担当。その後、KenCoMのフロントエンドを担当している。
MVVM初心者向けの技術用語解説
今回の勉強会で榎戸さんに解説していただいた技術用語をいくつかご紹介します。
●Vue.js
Vue.jsはMVVMと呼ばれる設計パターンを採用しているJavaScriptフレームワーク。双方向データバインディングを実現することに特化しているため、jQueryを使うととても複雑になってしまう処理をシンプルかつわかりやすく書くことができます。また、軽量で他のライブラリに依存しないため、必要なところだけVue.jsで作り、他のライブラリやフレームワークを組み合わせて使うという方法も可能です。
Vue.jsがサポートするブラウザは最近のモダンブラウザのみ（ECMAScript 5のサポートブラウザ）で、Internet Explorer 8以下には対応していないため、実際に業務などで使う際にはサポートするブラウザの確認が必要となります。
●Vue.js におけるMVVM
MVVMとはモデル(M)とビュー(V)間のやり取りをビューモデル(VM)を介して行うアーキテクチャのことです。
●ViewModel
Vue.jsのインスタンスのことで、ViewとModelをとりもつオブジェクトをさします。
●Model
dataオブジェクトとmethodsオブジェクトのことで、dataオブジェクトの属性はv-textやv-modelといったディレクティブによってバインドされます。
●View
elで指定されたDOM要素のことです。elでDOM要素を指定することで、ViewModelの適用範囲を指定することができます。Vue.jsは【こちら】からダウンロードできるほか、サイト内の【ガイド】に従ってサンプルコードなども見ることができます。
● 参考：Hello Worldの【サンプルコード】
ToDoアプリを作ってみよう！
今回はcodepenを使ってToDoアプリを作っていきます。
まずはcodepenの設定です。
上記を設定後、codepen画面の「JS」パネルに以下を入力し、ViewModelを作成します。
次に「HTML」のパネルに移動して画面をマークアップしていきます。まずは、以下のHTMLとCSSを書きます。
次に、Modelを書いてTodoリストを登録していきます。
登録したToDoリストを表示してみる
登録したToDoリストを画面に表示させたいのですが、その前にディレクティブに関する解説をしていただきました。
●ディレクティブ
ディレクティブはViewをコントロールするための特殊なコマンドのことです。Vue.jsではHTMLにv-***ではじまる属性を記述することで様々なDOM操作を行うことができます。
●v-for ディレクティブ
配列をレンダリングするためのディレクティブ。今回は以下のように書きます。
●v-model ディレクティブ
form input要素で双方向データバインディングするためのディレクティブ。checkboxで使用する場合はboolean値が返ります。
●v-bind ディレクティブ
HTMLの属性値をバインドするためのディレクティブ。前述のcheckboxにチェックされているかどうかによって<span>タグのclassを動的に変化させるため、以下も書き加えます。
これらのディレクティブを追加し、画面を確認すると、ToDoリストが表示されるようになります。
新たにToDoを追加できるようにする
フォームから新たにToDoタスクを追加できるようにするため、Modelのdataオブジェクトに“newTask”というオブジェクトを追加し、Viewと結びつけます。
次に【Add】ボタンをクリックした際に、ToDoを追加するための処理を書いていきます。
●v-on ディレクティブ
ユーザーのキーボード操作やクリックなどのイベントを受け取るため、v-onディレクティブを使います。
このように記述することで、【Add】ボタンをクリックした際に addTask という関数が呼ばれるようになります。
次に、methodsの中に addTask 関数の処理を書いていきます。
さらに、ToDoを削除できるようにしたり、ToDoの数を表示したりするチュートリアルなども紹介されました。
講義の合間もDeNA社員スタッフの方々が、丁寧にチューターを務めてくださったので、参加者の皆さんもスムーズに手を動かしていました。
勉強会のあとは懇親会で交流を深める
ハンズオン終了後は、お酒も軽く飲みながら立食形式の懇親会が開催されました。DeNAでのフロントエンド開発の裏側や最新のITスキル、仕事内容についてなどざっくばらんに話したり、参加者同士が交流したりと、皆さん懇親会を楽しんでいました。
次回はVue.jsでコンポーネント入門！と題して、コンポーネント化の仕組みを利用して、DeNAの現場で使われているVue.jsの使い方を掘り下げて紹介していきます。こちらのサイトやメルマガでお知らせしておりますので、次はぜひ参加してみたいという方は是非チェックしてくださいね。
