- この記事の対象読者
- vue.jsの勉強のコツ
- そもそもモダンなフロントエンドがわからない
- ECMAScript2015(ES6)以降の記述方法を習得する必要がある
- Youtubeで学習するVue.js
- 書籍で学ぶvue.js
- twitterで学ぶ
- podcastで学ぶ
- 終わりに
こんにちは。エンジニアの仕事をしている、たかふみです。
今日は、Vue.jsの勉強方法について述べます。
私は元々、PHPやJavaを中心としたサーバーサイドエンジニアでしたが、はじめてモダンなフロントエンド開発に携わる機会が有り、Vue.jsを学習しました。
Vue.jsの勉強するにはどうしたらいいのか、記事にまとめたいと思います。
この記事の対象読者
ある程度JavaScriptを理解している方を対象としています。
完全にプログラミング初心者の方が読んでも、難易度が高いです。
vue.jsの勉強のコツ
とにかく、手を動かしましょう
世の中には、技術書や、qiitaなど大量に情報が溢れていますが、いくらインプットしても自分の身にはなりません。
本を読んだり記事を読んだりしたあと、必ず手を動かしましょう。情報を目で読むだけでは習得できません。
実際に動かすとエラーが出たりしてうまく動作することは無いのですが、どうしてそういうエラーが出たのか、なぜ動かないのか、うまく動作するにはどうしたらいいのか、四苦八苦して考えながら手を動かすと、技術を習得できます。
英語の情報を積極的に読む
ネットの記事は、英語の情報が多いです。日本語よりも英語のほうが人口が多いので、英語のほうが情報量が多いです。
日本語の記事がないライブラリを使用する機会もあると思います。英語の記事を見つけたら、ぜひ英語の記事を読みましょう。情報満載です。
英語に抵抗感を持っている方もいらっしゃるかもしれませんが、翻訳ツールを使えば案外理解できます。
私は英語を大雑把にしか理解できませんが、よく英語を理解できない場合は、グーグル翻訳ツールを使用して英語を理解しています。
英語でググると解決方法がわかるかも！？
英語のほうが情報量が多い分、解決方法の検索も、英語で検索すると良い記事がみつかります。可能な限り英語で検索すると、良い記事が見つかります。
悪い例 "vue.js v-show 動かない"
良い例 "vue.js v-show not working"
そもそもモダンなフロントエンドがわからない
私はjQueryはよく知っており、業務にも使っていますが、Reactなどモダンなフロントエンド開発は知りませんでした。
実DOMを操作するjQueryと、仮想DOMを扱うReactなどのフレームワークは別物であると感じました。処理が直線的ではないからです。 根本的にフロントエンド周りの知識が乏しく、学習が必要だと感じました。
2015年頃にReactが登場して以降、フロントエンド開発は急変し、SPAでリアクティブなアーキテクチャが流行しました。これは、AWSやAzureなどのクラウドとの相性も良いという理由もあります。根本的にモダンなフロントエンド開発の流れを知りたい場合は、以下の本を読むとよく理解できました。
ECMAScript2015(ES6)以降の記述方法を習得する必要がある
ECMAScript2015(ES6)の登場以降、JavaScriptの記述方法はそれ以前と大きく違っています。ES6に馴染みのない方は、Vue.jsの学習以前にECMAScriptに関して勉強をしたほうが良いです。
アロー関数や、let,const,や、promiseやasync/awaitなどはよく使いますので学習しましょう。ECMAScript2015以前とそれ以降の書き方では、別物です。
私は以下のサイトなどで学習しました。
Youtubeで学習するVue.js
近年では、YouTubeでプログラミングの学習をすることができます。
YouTubeのほうがわかりやすいですし、初心者の学習にYouTubeがいいのではないかと思いました。
YouTubeを見て、このチャンネルは良いと思ったものをいくつか紹介します。
VueJS入門
大阪コード学園さんがライブコーディングしながら、Vue.jsの動作を一通り説明します。
ライブコーディングなのでわかりやすいです。
ただし、解説内容はvue2系なので最新のものではありません。vue.jsの入門用として大変素晴らしいです。
Vue3とComposition APIの概要を一気に解説
vue3で新規追加となる目玉機能として、composition api が挙げられます。
composition apiとは何なのか、どういうメリットがあるのか、vue2のoptions apiと何が違うのかライブコーディングスタイルでわかりやすく解説しており、vue3の学習以前に見ておくと、キャッチアップが捗ります。
Atomic Design のデザインと実装の狭間
Vue.jsでのatomic designの使用方法に関するお話です。
デザイナーとフロントエンドエンジニアでは、コンポーネントに関する考え方が違っているというお話です。
デザイナーと一緒にお仕事する上で念頭に入れておいたほうがいい考えです。
DevTeam @iCARE
iCARE社の社内勉強会チャンネルです。
フロントエンドのことだけでなく、ruby on railsや組織論に関しても配信しています。
Vue.js日本ユーザーグループ
Vue.js日本ユーザーグループのチャンネルです。
カンファレンスや発表会の様子などがアップロードされます。
書籍で学ぶvue.js
Vue.js 3 超入門
著者の掌田津耶乃氏は色々な技術の入門書をたくさん書いてる方ですが、vueの入門書も書いています。ありがたいことにvue3に対応されています。
vueの公式リファレンスの日本語版はありますが、翻訳された日本語なので、やや分かりづらい面があります。
しかし、掌田津耶乃氏の書かれた本はわかりやすく、やさしく説明して頂けるので、初心者にはありがたい一冊だと思います。
ただし、あくまでも入門書なので深く突っ込んだ内容ではありませんし、公式リファレンスで十分理解できる方には不要な一冊かもしれません。
Vue.js入門 基礎から実践アプリケーション開発まで
内容はvue2系時代のものですが、Vue.jsのコミッターの方々が書いている本です。入門書と書いてあるわりには、内容がかなり本格です。
モジュール登録方法、パフォーマンスチューニング、jQueryからVue.jsへのリファクタリングなど、他の本には書いてないような、一歩深く突っ込んでいる内容が記載されています。
みんなのVue.js
「みんなの」と付いてるので、初心者用のやさしい本かと思いきや、そうではないです。
なぜvuexを使うのか、コンポーネントのprops,emitとストアは何が違うのか、一歩深く突っ込んだ内容です。
おそらく初心者が読んでも理解はできないと思います。オライリーレベルに詳しい本だと思ってます。
twitterで学ぶ
ツイッターも素晴らしい情報収集ツールだと思います。
いくつか、Vue.jsの情報収集に関して役立つ情報を掲載したいです。
Vue.js 日本ユーザーグループ
Vue.js 日本ユーザーグループのアカウントです。
カンファレンスのお知らせなどをツイートしています。
Evan You
Vue.jsの開発者である、EvanYouのツイッターです。
新機能の情報などをツイートしております。要チェックのツイッターアカウントです。
ツイート内容は英語です。
Vue.js
Vue.jsの公式アカウントです。
ツイート内容は英語です。
podcastで学ぶ
podcastでいくつかオススメしたい番組を掲載します。
UIT INSIDE
LINEのフロントエンド開発チームが送るポッドキャストです。
LINEのフロントエンド開発チームでは、Vue.jsを積極的に導入しており、LINえニュースなどはVue.jsで動いているようです。
Vue.jsにまつわる配信だけでなく、ReactやSvelteやSnowpackだのViteなど、最新のフロントエンドに関する情報を届ける、とてもタメになる配信です。
終わりに
以上、私がVue.jsを習得するにあたって参考にしたサイトや勉強法に関して記事にしました。
皆様のVue.js学習の参考にして頂けると幸いです。
