この記事はUdemyの講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」の学習を進めながら書いた記事になります。Vue.jsに関する記事の一覧はこちらからご覧いただけます。
新しい技術にはいつもワクワクします。しかし、僕の場合、触ってみてかじっても突き詰めていくことがあまりないので、浅い知識で終わってしまいます。仕事で色々な提案をしていく上で博学な部分はどうしても必要となってくると考えているので、まずは最低限触ってみるということはとても大事にしています。
今回は年末年始にセールを行なっていたUdemyの中から、『Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ』という講座を購入して学習を進めたいと思います。
巷では「jQueryに替わる…」とか言われていたりしますが、実際にはどうなのか手を動かして触ってみたいと思います。
Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。
講座の内容と進め方
内容としてはこんな感じらしいです。（本プログラムのウェブサイトに掲載されている文章を転載します）
- Vue JSを使うメリットがわかるようになります。
- TODO管理アプリ開発を通して、Vue JSによるアプリ制作の一連の流れを理解できるようになります。
- プログラミング関連記事検索APIを用いたリアルタイムサーチ開発を通して、実践的な開発ができるようになります。
- Vue JSの基本的な使い方を速習パートにより短時間で理解できるようになります。
- Vue JSとBitcoin価格取得APIと連携した実践的な開発ができるようになります。
- Vue JSの詳細な機能についても理解できるようになります。
また、学習環境としては、テキストエディタで自分で作っても大丈夫なように解説はされるようですが、講座の中ではjsFiddleを使うとのこと。CodePen的な感じでリアルタイムで書いたコードをすぐに実行できるようなサービスですね。
僕もjsFiddleのアカウントを作って（無料だし）、そちらでとりあえずコードを書いていこうと思います。
個人的にはいつも使っているPhpStormを使ってコードを書くほうが慣れているんですが、そちらの設定などの確認も必要なので、まずは進めるというためにもjsFiddleを使ってみようと思います。
ちなみにですが、講座の講師によって話すスピードやテンションなど変わってくるので、僕は講師に合わせてビデオ速度を調整して受講するようにしています。この講座の場合は、1.25x〜1.5xくらいのスピードで聞きながら手を動かす（そしてブログにまとめる）という感じでやっています。
Vue.jsの基本的な使い方
Vue.jsがReact.jsやAngular.jsなどよりもよく使われる大きな理由の１つとして、手軽に試すことができるということ。
公式サイトのガイドページにも記載があるのですが、CDNでソースを読み込んでしまえば簡単に利用することができます。
<!-- 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>もしくは
<!-- 本番バージョン、サイズと速度のために最適化されています -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>と</body>の上くらいに記述すればすぐに使うことができるとのこと。
ガイドにはこう書いてありますが、講座の中ではマイナーであろうともバージョンアップしている場合、挙動が一貫しない可能性があるので、講座では2.5.16という動画撮影時のバージョンで進めて欲しいとのこと。なので、このような流れでCDNコードを手に入れています。
- Vue.jsサイトの検索窓で「インストール」と検索してページに進む
- こちらのページで#CDNという項目から
scriptコードを取得する。
取得したコードはこちら
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>講座では2.5.16というバージョンで進める必要があるので、
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>と、バージョンを修正します。また、本番で公開する場合にはvue.jsからvue.min.jsに変更することによって、デバッグ機能を持たせず高速化（圧縮済みファイル）させることができるとのこと。
他の読み込み方法
他の読み込み方法は２つあり、上で紹介したCDNとは別に、
- 直接読み込む（ダウンロードしてきてディレクトリに配置してセットする形）
- NPM（npmパッケージ管理でインストールする）
ちゃんと理解してプロジェクトを進めるようになれば、開発環境を整えることにもなると思うの、NPMでインストールすることにはなると思われます。
Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。
まとめ
今回ははじめですので、ガイダンスや講座を進める上で必要な環境などを紹介しました。
今後も順を追って学習を進めていき、ブログにまとめる（アウトプット）することによって自身の理解も深められればと思います。
