株式会社トリアナのブログtriBlogトリアナのブログ。webサイト制作なら、トリアナへ。連休中にインターンがVue.jsをコード書きながら学んでみたWEB制作フロントエンド2019.8.19連休中にインターンがVue.jsをコード書きながら学んでみた2019.8.19前回の大型連休(GW)は10年間我流だったタイピングを矯正しました。おくだどうも!9連休明けの奥田です。実際にいろいろな機能を作ってみた!入力したデータをリアクティブに表示する入力中にもリアクティブに計算する計算結果を日付とともに記録する成果物まとめはじめにこの記事で書くこと奥田が公式ドキュメントを読んで、実際にコードを書いてみて、感想を書く。以上!ちなみに私は生のJavaScriptとjQueryを書くことはありますが、Vue.jsはまったくの無知。本当に0からのスタートで学習してみました。この記事ではVue.jsの特徴とか、気づいたこととか、そういうのをシェアしたいなぁと!詳しい文法的なことは神公式に丸投げです。できることを理解するための記事です。この記事を読み終わったらみなさんも公式ドキュメント読んでVue.js書いちゃいましょう😉Vue.jsとはJavaScriptのフレームワークの1つ。Vueの読み方はビュー。あんぎゅらーとかよりは読みやすいですね。フレームワークっていうのはJSを書きやすくするための雛形のようなものです。ちなみにjQueryとReactはフレームワークじゃなくて、ライブラリ。今回はこの超わかりやすい神公式サイト見ながら学びました。FrameworkなんでVue.jsを選んだの?これはいくつか理由があります。田中さんがVue.jsいいぞって言ってたなどなど。今年中に福岡あたりで勉強会があったら参加してみようかなと思います。福岡の勉強会はconnpassでイベントが登録されているのでとても探しやすいですね。(大分もconnpassでイベント作ってほしいなんて言えない...!)言いたいことも言えないこんな世の中じゃ、ポイズン。エンジニアをつなぐIT勉強会支援プラットフォームhttps://connpass.com/dashboard/connpassはイベントやIT勉強会の開催、さらに参加者の集客に便利です。コミュニティやグループの運営やイベントの検索、事前決済もできます。公式ドキュメントとか言いながらドキュメントだけではありません。動画まで用意してくれています。音声オフにしてもだいたい何してるかわかります。(聞き取りやすい英語なので、英語がわかる人は音声を聞こう!)私は基本的に動画でだいたいの内容を理解して、それからドキュメントをじっくり読んでいくスタイルにしました。実際にコードを書きながらVue.jsの特徴を見ていきましょう〜!(Resultを押すと実際にその機能がご覧いただけます!)入力したデータをリアクティブに表示するこれいっちばん簡単。データと表示を紐付けるデータバインディングによって実現しています。*データバインディングデータと表示が同期(連動)すること。JS側のデータを更新すると、表示も同期的に変わる。jQueryだとKeyupイベントなどをトリガーにしてデータバインディングを再現することはできますが、Vue.jsのほうが圧倒的にコードが短いです。身長と体重を入力すると同時に表示されます。*KeyupイベントjQueryのイベントハンドラの1つ。キーの押下後、そのキーから指が離れたときにイベントを発火させる。入力中にもリアクティブに計算するわざわざ「計算する」ボタンなんか作らず、同時に計算すればいいじゃない的な。今回はBMIを計算してみました。大人の体格(身長・体重のバランス、「肥満」や「やせ」など)を示す目安になるものです。計算式は「体重(kg)÷身長(m)÷身長(m)」。コトバンクちなみにBMIは22が最も病気になりにくい値だと言われています。※諸説ありcomputedプロパティが用意されていて、計算するときはだいたいそれを使います。身長と体重が入力されていないとBMIの欄にNaNが出てしまうので、v-ifで表示を制御しています。(身長と体重が入力されず、BMIが計算されていなければ非表示)計算結果を日付とともに記録する日付の計算はmethodsの中に関数(addItem)を書いて行います。計算したデータはオブジェクトとしてdataに格納します。それをv-forでリストレンダリングしてテーブルを生成しています。成果物そしてできあがった簡易的なアプリがこちら。なんで、たくさん計算して記録しまくってください!※バックエンド側の実装をしていないので、更新すると記録は消えます。初学者の方でも始めやすいと思います。(ある程度生JSが書ければ◯)厳密にはCLIで云々かんぬんする必要があるそうですが、そんなのうるせえ!って人はjQueryみたいにCDN読み込むコードを1行書けばOK。開発用と本番用で書く内容が違うので、そこは公式を参照されたし。Framework文法も比較的初心者に優しいです。v-if、v-modelなどのディレクティブはHTMLに直接書き込みます。生JSみたいにdocument.getElementById(‘hoge’).innerHTML=’Hello’;みたいな冗長な記述は不要です。今年も残るところあと半分。【静的サイトジェネレータ】WordPress不要!2020年注目のVuePressの特徴をまとめてみたホームページ制作費が分割払いできます【WEB制作編】2019年の記事を振り返る。インターンインタラクティブ表現とUIを極めたい。自称トリアナの新しい風。常に焦りを感じながら、誰よりも戦略的に成長します。インターンインタラクティブ表現とUIを極めたい。自称トリアナの新しい風。常に焦りを感じながら、誰よりも戦略的に成長します。reserverd.。