前回の記事でフロントエンド未経験Webクリエイターの最初の覚書としてGitについて書かせていただきましたが、今回は最近フロントエンド界隈でポストjQueryとして有名な『Vue.js』について0から学んだことを覚書していきます。
『Vue.js』
『Vue.js』とは、「Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション（SPA）を構築することも可能である。」[wikipedia]
初心者には文章で読んだだけでは全然イメージが湧かないと思いますので、とりあえず初心者向けでわかりやすそうな講座を探してみました。
ちなみにVue.jsを学ぼうと思ったのは以下の理由からです。
- 〇スキルアップして作りたいと考えているSPAが制作可能
- 〇「他のJavaScriptフレームワークのReact/Angularよりも習得するのがかなり容易」と随所で説明されていた
最初に学んだこと：『Vue.js入門』(たにぐちまことさんのYoutube)
まず最初に勉強させていただいたのが、Git学習の際にも最も参考にさせていただいた たにぐちまことさんの『Vue.js入門#01～#08』(Youtube)です！
『Git+GitHub入門』同様、初心者でも躓かないような構成でとても丁寧かつしっかりとVue.jsの基本のついて説明してくださっている動画講座となります。
ざっと全8回分(時間にして１時間弱)観るだけでも、Vue.jsの特徴が理解できる、初心者に最適な教育動画だと感じました。
個人的に新しいフレームワークなどを学ぶときは最初の概念の理解で躓くと、もうそこで挫折してしまい、全く前に進めなくなってしまうイメージがあります。
なので、最初の一歩としてとてもわかりやすくVue.jsの概要を説明してくださっているたにぐちまことさんのYoutube講座には今回もとても助けられた感があります＾＾
2番目に学んだこと：『Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ』(Udemy)
ただSPAまで作ることを目標にするとなると、さすがに基本を理解しているだけのレベルでは全く歯が立たないことがわかりました。
なので次に、最近色々なところで見聞きする「Udemy(ユーデミー)：動画学習サービス」でVue.jsの講座を探して以下の講座を購入・学習してみました。
『Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ (中村祐太さん)』
こちらは講座はさすがUdemyでベストセラーをとっているだけあり、全８時間でVue.jsのディレクティブの機能などについて１つ１つ丁寧に解説されており、制作するサンプルも[TODO管理アプリ/Bitcoin価格表示アプリ(API連携)/ APIを用いたリアルタイムサーチ]の3つがありました。
講師の方が話されていたように「公式ドキュメントだけでは理解が難しい初心者向けに学習時間短縮効果が出るように制作したコース」とのことで、フロントエンド初心者の私には、難易度もピッタリでテンポよく多くのことを学べました！
またSPA制作に必須だと思われる「Vue Router」の基本についてのボーナスレクチャーが入っているのも、ありがたかったです＾＾
このコースの学習環境として使用している「JSFiddle(JavaScriptの学習に便利なWebサービス)」を使ったサンプルコード作成も使い勝手が良く、履歴管理もできるし、シンプルなコードの検証にはかなり使えると感じました。
Udemy講座のセール価格について
Vue.jsの内容からは外れてしまいますが、Udemy講座を今回初めて受講して購入価格が複雑で迷った部分があったのでまとめておきます。
Udemyにはセール期間というものが多くあるようで、セール期間中は大きく価格が割引されます。
どのくらいの割引かというと私の場合は上記の『Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ』講座は、現在の定価\7,200のところ80%以上OFFの【\1,400】で購入できました！
またログイン時、非ログイン時でも価格が変わることがあるようなので、少しでも安く購入したい場合には注意が必要となるかと思います。
※購入者特典として、同じ講師の方の講座を特別セール価格で購入可能だったりもするようなので、しっかり調べればかなり購入価格を抑えられるように感じました。
上記のように動画講座中心にVue.jsの基本を学ぶことができました。
しかし、プログラムはまず自分で考えて書いてみないことには全くスキルアップできないイメージがあります。
そのため、次回は学んだことを活かしてVue.jsの基本的な機能のみで実装できるサンプルを制作し、それを自分なりに解説するような記事を書きたい！と考えています。