まえがき
Vue.jsをはじめたきっかけ
はじめまして。Qiita初投稿です！
社内転職でエンジニアになるため、JavaScriptの勉強をしています。(今は整体師です)
5月にProgateの有料会員になり2ヶ月で全コースを修了。
Progateをクリアしたら次に何をするか迷ったのですが…「JavaScriptをマスターしよう！」と思い、JSの本を読み漁りました。
『知識ゼロからのJavaScript入門』とか、『JavaScriptとことん入門』とか『JavaScript本格入門』とか。(技術評論社の本わかりやすくて好き)
本をたくさん読むうちにだんだん自分で何か作りたい欲が湧いてきました。そんな時に出会ったのがこの記事です。
>フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話 (Qiita)
「これなら自分にもできそうだし面白そう！」と思い、Vue.jsをはじめました。
どんな人におすすめ？
この記事はこんな人におすすめです。
- プレーンなJavaScriptやjQueryは使っているけど、Vue.jsはまだ名前くらいしか知らない人
- JSの勉強をしていてフレームワークに興味があるけど、難しそうだと思っている人
2ヵ月前の私がまさにこんな状態でした！
読んだ本
さて、本題です。まずは読んだ本の紹介から。
「そもそもJavaScriptのフレームワークって何なのだろう？」…と思っていたところ、疑問を解決するのにピッタリの本を2冊見つけました。
JavaScriptフレームワーク入門
Vue.jsやAngular、ReactなどJavaScriptの代表的なフレームワークが6個取り上げられています。それぞれの概要を知るのに良さそうな本です。
読んでいて少し戸惑ったのが、Vue.jsの記述が前のバージョン (Vue.js 1.0) だったこと。(現在はVue.js 2.xが主流)
なのでサンプルコードを書くとエラーになってしまうことが…
React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発
通称パンダ本。こちらは初版が2018年5月。
Slackみたいなアプリを作りながらフレームワークを学んでいきます。
この本の良いところは、Part1で「JavaScriptフロントエンドフレームワークの最新動向」が書かれていること。JavaScriptの歴史からフレームワークが広まった背景、さらにSPA (Single Page Application) のしくみが解説されています。
ただチュートリアルは、JS初心者な私にはわからないことが多くてなかなか難しかったです。例えばVue.jsの章ではVuexでアプリケーションの状態管理をしたり、非同期通信をするのにasync/awaitを使ったり。
結局まだ最後まで出来ていません。。
続いて、ねこのイラストがかわいいVue.jsの本。
基礎から学ぶ Vue.js
Vue.jsを学ぼうと思ったらまずこの本を買うのがおすすめです。読みながらサンプルコードを書いていけばVue.jsの基礎がしっかり身につき、わからないことを調べる辞書としても使えそう。
サポートページも充実しています。
>書籍用サポートページ
参考にしたサイト
イメージで伝える「Vue.js とは」 〜コンポーネントとデータバインド〜
コードの説明はなく画像が多めなので、Vue.jsがどんなものかをイメージで捉えられます。わかりやすい！
Vue.js の半分はコンポーネントでできています。もう半分は優しさです。「みんなが簡単に作業できるように」という優しさです。
はい出ました、データバインドというやつです。データバインドを理解することが、Vue.js を使う上で重要なポイントとなります！
Vue.js入門 ―最速で作るシンプルなWebアプリケーション
Vue.js (フレームワーク) 独自の表現があるので最初はちょっとわかりにくいかもしれません。MVVMパターンとか、仮想DOMとか。
Vue.jsの特徴や技術的な仕組みをざっくり理解するのに私は役立ちました。わからないことはひとまずそのままでも良いと思います。
特徴
- シンプルなAPIやHTMLベースの平易なテンプレートで学習コストが低い
- リアクティブなデータバインディング
- コンポーネント指向のUI
- ファイルサイズが軽量（min+gzip圧縮16kb）
- レンダリングが速い
jQuery から Vue.js へのステップアップ (Qiita)
『基礎から学ぶVue.js』の著者mioさんの記事です。jQueryとVue.jsの違いをコードで比較して見られます。
ザーっと眺めるだけでも学べるし、コードを書き写せばVue.jsの理解がぐっと深まりそうです。
要件や規模など作るページによって使い分けるのもいいと思います。個人的にはトランジションがとても楽なので何か動きが入れば割りと気軽に Vue.js を使っています。
SPAを作ろうと思ってやったこと
1. WebページにVue.jsで動きをつけた
この記事を参考にして…
・SPAだけじゃない！Vue.js[1] jQueryをVue.jsに書き換えてみる
・SPAだけじゃない！Vue.js[2] モーダル実装にみるVue.jsの便利機能
練習用に作ったWebページにVue.jsでクリックイベントをつけました。
本や記事を読むだけでなく、実際に手を動かして変更を加えながら書くの大事ですね。勉強になりました。
2. ToDoリストを作った
ToDoリストを作りました！
こちらは『基礎から学ぶVue.js』のサポートページに載っていたチュートリアルを書き写したものです。
流れに沿って作っていくと、「Vue.js の基本機能が何を行ってくれるのか？」がわかります。
1時間くらいで出来ました。まずは何か作ってみたい人に特におすすめです！
3. vue-cliとvue-routerをはじめた
この記事を参考にして…
・Vue.js を vue-cli を使ってシンプルにはじめてみる (Qiita)
・Vue-routerを使って、SPAをシンプルにはじめてみる (Qiita)
vue-cliとSPAをはじめました。
初めてなことに戸惑いながらも、解説がていねいなので最後まで出来てうれしかったです。
4. Vue.jsとFirebaseでメモ帳アプリを作った
この本を読みながらメモ帳アプリを作りました！
正確には、本をもとに作ったwebサービスに、機能を追加したりデザインを修正したりしているところです。
作っていて印象的だったのは、本を読んでいてわからないことがあった時にそのことをツイートしたら、著者の渡邊さんがすぐに返信をくださったこと。
内容がわかりやすいだけでなく、読書へのきめ細やかなフォローまで付いているんです。感動しました！
まとめ
「JavaScriptのフレームワークって難しそう」…と2ヶ月前の私は思っていました。
だけど実際は全然そんなことなかったんです、少なくともVue.jsに関しては。なぜならVue.jsはちいさく始められるから。
まずはjQueryと同じようにCDN読み込みで始めてみる。慣れてきたらvue-cliやvue-routerを使ってみる。そうやって段階的に便利な機能を取り入れていけるのです。
だからできることが増えていく達成感と、新しいことを学ぶわくわくした気持ちが途切れません。Vue.jsすごく楽しいです！
引き続きメモ帳アプリを改良しながら、VuexやNuxt.jsも使ってみたいと思います～