CodePenを使ってWeb開発を体験する 後編（Vue.js）
Vue.jsのセットアップ
引き続き、CodePen上で作業を行います。
画面右上のSettingsを選択します。
ダイアログが表示されたら、JavaScriptタブを選択し、Search CDNjs欄にvueと入力します。
するとリストにvueが表示されますので選択します。
上記のようになればOKです。Closeを選択してください。
Vue.jsをサンプルで学ぼう
ここから先は、下記の繰り返しでVue.jsの役割について理解します。
- まずサンプルアプリを触ってみる
- サンプルアプリの完成一歩手前のものを開く
- 説明に従って完成させる
最初のサンプル
See the Pen Basic Binding by Robert (@ipl068) on CodePen.
まず、JS欄のdata内に下記のように「nameデータ」を記載します。今回はnameデータにはJiroさんを入力します。
次に、HTML欄のTaroと書かれている部分を{{name}}に置き換えてください。
{{ name }}のように書くことで、表示部分とdataを「紐付け」ることができます。
（Vue.jsはこれをバインディングという用語で呼びます）
name: "Taro"の部分を変更すると、名前が変更されることを確認してください。
入力欄を作る
See the Pen Basic: v-model by Robert (@ipl068) on CodePen.
新たにinputタグというものを学びます。
上記のように書くと、文字入力欄を作ることができます。
v-modelを使うと、data内の文字列をこのinputで変更することができます。
HTMLを下記のように書き換えてみましょう。
文字入力欄を変更すると、下記のように書き換わることを確認してください。
Vue.jsが便利なのは、このような「紐付け」がとても簡単に行えることです。 プログラミングでは「紐付け」を適切に行うことで便利なものを作ることができます。
はんこメーカー
上記で学んだことを使って、実用的？なものを作ってみましょう。
See the Pen hanko-simple by Robert (@ipl068) on CodePen.
HTMLでは、円などの図形も書くことができます（SVGといいます）。 また、今回はCSSを工夫して縦書きの文字も書いています。
さて、名前を自由に変更可能にしましょう。
下記のようにv-modelと{{name}}を書いてください。
これではんこの氏名を自由に変えられるようになりました。
次に、色を自由に変更できるようにしましょう。
inputの種類の中には、色を選ぶものもあります。
type="color"を使います。
クリックすると、色を選択するダイアログが表示されます。
さて、ここで選んだ色をはんこに反映させたいので、下記のように変更します。
これでinputとcolorデータがひも付きました。 次に、文字色や円の色にcolorデータを紐付けます。
:（コロン）を紐付けたい項目の前に付けます。=の後に紐付けたいデータ名を入れます（今回はcolor）
これで、好きな色のはんこが作れるようになりました。 ここまで、必要なのはただ「つなげる」ことだけです。
会いたくて震えるやつ
See the Pen 会いたくて震える by Robert (@ipl068) on CodePen.
さて、「ボタンを押すとなにかする」というものを作ってみたいと思います。 下記のように書くとボタンを作ることができます。
ボタンを押すとなにか起きるようにするには、@clickを使います。下記のように書き加えてください。
ボタンをクリックすると、furueruデータにtrueという値が入ります。ボタンを押すと絵文字が震えます。
すでに下記のようなコードを組んであります。v-ifというのは、値が「true」だった場合に表示するようにするものです。今回の場合は、furueruデータがtrueだった時に震える絵文字を表示するようにしてあります。
逆に、furueruデータが逆のfalseだった場合には、震えない絵文字を表示しています。
さて、震えを止められるようにしましょう。 下記のように書き加えてください。
これで震えを止められるようになりました。
MP3プレーヤー
See the Pen MP3 Player by Robert (@ipl068) on CodePen.
audioタグは小型のオーディオプレーヤーを表示するタグです。srcにmp3を指定すると、再生をすることができます。
今回はsrcを変更すると自動的に再生が始まるように「autoplay」を付けています。
では、曲を切り替えられるようにしましょう。下記のように変更してください。
その後、buttonタグに書いてある @clickの中にURLをコピペします。
これで、ボタンがクリックされたときにselectedにmp3ファイルが指定されるようになります。
すべて指定すると、ボタンに応じて曲が切り替わるようになります。
画像ビューア
ここから先は少し難しくなります。 JavaScriptの文法の一つ「リスト（配列）」が出てきます。 さらっと流しますが、理解のためにJavaScriptの初心者向けの本を読んでみてください。
See the Pen Cat Viewer by Robert (@ipl068) on CodePen.
この部分が「リスト」です。お気に入りの猫の写真をたくさんリストに入れてあります。
このリストを一覧表示できるようにしましょう。 下記のように記入します。
これで、下記のように写真のリストが表示されるようになります。
v-forが登場しました。
これはリストの内容（この場合はcats）を取り出して、その数画像を作ってくれるものです。
取り出された一つ分は「cat」に入ります。
srcに画像URLを入れることで、それぞれの画像を表示することができます。
では、縮小画像をクリックしたら、拡大画像を表示するように変更しましょう。
拡大画像の方をzoomCatデータに紐付け、縮小画像をクリックしたときにzoomCatデータにcatを移します。 クリックして、画像が切り替わることを確認してください。
一工夫として、選択されている縮小画像がわかるようにしたいです。下記のように書きます。
これは、zoomCatとcatの内容が同じであれば、その画像にactiveというクラスをつけるものです。やや慣れが必要ですが、使いこなすと下記のように選択されている画像がわかりやすくなります。
推奨書籍
本稿著者のおすすめ書籍をリストアップします。すべて初心者向けです。また、2019年現在で古い記載が無いかどうかもチェック済みです。
- JavaScript 1年生
- かなり噛み砕いて書かれた Webアプリ作成の入門書です。
- 知識ゼロからはじめるゆっくり・ていねいJavaScript
- 前述の本よりもう少し事細かに幅広く書かれていますが、専門用語なども控えめで読みやすいです。
- 動かして学ぶ！Vue.js開発入門
- 本稿で学習した内容を復習するのにピッタリな本です。前述のJavaScript本のどちらかを先に読むことをおすすめします。
- 基礎から学ぶ Vue.js
- やや専門用語が増えており中級者向けですが、Vue.jsを仕事で使う上での知識がわかりやすく書かれています。
