triBlog

トリアナのブログ。

連休中にインターンがVue.jsをコード書きながら学んでみた

2019.8.19 Vue.js 学習 コード
前回の大型連休(GW)は10年間我流だったタイピングを矯正しました。
ライター画像
おくだ

どうも!9連休明けの奥田です。
連休中はゆった〜り映画とGTOのドラマを観てたんですが、

やっぱりプログラミングをしないと落ち着かない…!

ということでVue.jsを学んでみました!
今回はその概要をみなさんにお届けします🍨
レッツスタディ!

はじめに

この記事で書くこと

奥田が公式ドキュメントを読んで、実際にコードを書いてみて、感想を書く。以上!
ちなみに私は生のJavaScriptとjQueryを書くことはありますが、Vue.jsはまったくの無知。
本当に0からのスタートで学習してみました。
この記事ではVue.jsの特徴とか、気づいたこととか、そういうのをシェアしたいなぁと!
詳しい文法的なことは神公式に丸投げです。あくまでできることを理解するための記事です。
この記事を読み終わったらみなさんも公式ドキュメント読んでVue.js書いちゃいましょう😉

Vue.jsとは

JavaScriptのフレームワークの1つ。
Vueの読み方はビュー。あんぎゅらーとかよりは読みやすいですね。
フレームワークっていうのはJSを書きやすくするための雛形のようなものです。
ちなみにjQueryとReactはフレームワークじゃなくて、ライブラリ。何が違うねん。
今回はこの超わかりやすい神公式サイト見ながら学びました。

なんでVue.jsを選んだの?

これはいくつか理由があります。
– 学習コストがReactやAngularに比べて低いと言われている
– 九州(とくに福岡)ではVue.jsの学習コミュニティが多く、勉強会もそこそこある
– GitHubのスター数的に今一番将来性がある(JSライブラリ・フレームワークの中で)
– 田中さんがVue.jsいいぞって言ってた

などなど。
今年中に福岡あたりで勉強会があったら参加してみようかなと思います。
福岡の勉強会はconnpassでイベントが登録されているのでとても探しやすいですね。
(大分もconnpassでイベント作ってほしいなんて言えない…!)

言いたいことも言えないこんな世の中じゃ、ポイズン。
(これ言いたかっただけ)

公式サイトの構成

公式ドキュメントとか言いながらドキュメントだけではありません。
ちゃっかり動画まで用意してくれています。
全編英語だけどイラストで示してくれてるし、書いたコードと結果が画面に映ってるので、
音声オフにしてもだいたい何してるかわかります。
(聞き取りやすい英語なので、英語がわかる人は音声を聞こう!)
私は基本的に動画でだいたいの内容を理解して、それからドキュメントをじっくり読んでいくスタイルにしました。

実際にいろいろな機能を作ってみた!

Vue.jsの機能を少しずつ紹介しながら、徐々に簡易的なアプリを作っていくスタンスでやっていきます🚶‍♂️
実際にコードを書きながらVue.jsの特徴を見ていきましょう〜!

(Resultを押すと実際にその機能がご覧いただけます!)

入力したデータをリアクティブに表示する

これいっちばん簡単。
データと表示を紐付けるデータバインディングによって実現しています。

*データバインディング
データと表示が同期(連動)すること。JS側のデータを更新すると、表示も同期的に変わる。


jQueryだとKeyupイベントなどをトリガーにしてデータバインディングを再現することはできますが、
Vue.jsのほうが圧倒的にコードが短いです。

身長と体重を入力すると同時に表示されます。

*Keyupイベント
jQueryのイベントハンドラの1つ。キーの押下後、そのキーから指が離れたときにイベントを発火させる。

入力中にもリアクティブに計算する

わざわざ「計算する」ボタンなんか作らず、同時に計算すればいいじゃない的な。
今回はBMIを計算してみました。

BMI(びーえむあい)とは
Body Mass Indexの略。大人の体格(身長・体重のバランス、「肥満」や「やせ」など)を示す目安になるものです。計算式は「体重(kg)÷身長(m)÷身長(m)」。 – コトバンク

ちなみにBMIは22が最も病気になりにくい値だと言われています。※諸説あり


computedプロパティが用意されていて、計算するときはだいたいそれを使います。
身長と体重が入力されていないとBMIの欄にNaNが出てしまうので、
v-ifで表示を制御しています。
(身長と体重が入力されず、BMIが計算されていなければ非表示)

計算結果を日付とともに記録する

日付の計算はmethodsの中に関数(addItem)を書いて行います。

また、計算したデータはオブジェクトとしてdataに格納します。
それをv-forでリストレンダリングしてテーブルを生成しています。

成果物

そしてできあがった簡易的なアプリがこちら。

せっかくなんで、たくさん計算して記録しまくってください!
※バックエンド側の実装をしていないので、更新すると記録は消えます。

まとめ

Vue.jsは環境構築もめちゃくちゃ楽だし、
初学者の方でも始めやすいと思います。(ある程度生JSが書ければ◯)

厳密にはCLIで云々かんぬんする必要があるそうですが、
そんなのうるせえ!って人はjQueryみたいにCDN読み込むコードを1行書けばOK。
開発用と本番用で書く内容が違うので、そこは公式を参照されたし。

文法も比較的初心者に優しいです。
v-if、v-modelなどのディレクティブはHTMLに直接書き込みます。
生JSみたいにdocument.getElementById(‘hoge’).innerHTML=’Hello’;みたいな冗長な記述は不要です。

今年も残るところあと半分。
みなさんも自分でできることを増やすために新しい言語を学んでみませんか?

ではまた☺

記事を書いた人

ライター画像
おくだ インターン

インタラクティブ表現とUIを極めたい。自称トリアナの新しい風。ミニマリスト。 常に焦りを感じながら、誰よりも戦略的に成長します。

ライター画像
おくだ インターン

インタラクティブ表現とUIを極めたい。自称トリアナの新しい風。ミニマリスト。 常に焦りを感じながら、誰よりも戦略的に成長します。

ページ上部へ