脱初心者を目指して
Vue.jsを毎日粛々と書き続けております。基本文法や局所局所の機能は少しずつ理解し始めていますが、まだまだ初心者の域を出られていません。せめて、何かを作ろうと思ったときにVueで一通りのことはできるようになりたいと思っています。
この域に達するのには、やはり自分で苦労しながら作ってみることだと常々思っていますが、「自分で作ってみよう！」という気持ちにまだなれていません。作りたいものがないということもありますが、そもそもどんなものが作れるものなのかをわかっていないというのも大きいと思います。Webアプリを一から作った経験がほぼないので、いくつかサンプルを見ながら自分の手で作っていくなかで「こういうの作ってみようかな」となってくるのではと考えています。
そこで、
- ある程度の複雑さがあるアプリを
- 使用されている機能の解説を見ながら
- 一行一行コードを書いていく
ようなチュートリアルをやってみよう！ということで、Udemyの下記のコース*1を受講し始めました（もちろんセール期間中に購入）。
https://www.udemy.com/vuejs-2-essentials/www.udemy.com
コースの概要と本記事で扱う範囲
このコースでは、3つのアプリケーションを作成しながらVueを学んでいきます。内容については、無料サンプルビデオのCourse introductionで見ることができるほか、教材のコードがGitHubに上がっています。作成する3つのアプリケーションとそこで利用する技術は以下の通りです。
- Project 1: Vue.js Poster Shop（ImgurのAPIを利用したECサイト風の画面）
- Vue.jsの基本的な文法
- Project 2: Vue.js Cinema
- シングルページアプリケーション （SPA）
- コンポーネント
- vue-router
- Webpack
- Project 3: Vue.js Calendar（Google Calendar のクローン）
全編で14時間のコースとなっています。内容的にはProject 2以降が最も欲している部分ではありますが、せっかくなのでProject 1から取り組んでいこうと思います。というわけで、今回はProject 1を終えた段階での感想記事となります。
The Ultimate Vue JS 2 Developers CourseのProject1で新しく学んだ内容
1つ目のアプリケーションではVue.jsの基本文法を学ぶということで、あまり新しく学ぶことはないかなと思っていましたが、下記については初めて使ったり存在を知ったりという経験ができました。最初からやった甲斐があった！
filters
v-forで算出プロパティを呼ぶやつしか使ったことありませんでした。『速習Vue.js』でも言及はありましたが、プラグインの章で補足的に言及されていただけだったので、自分で実際に定義して使ったのは初めてでした。
mounted
存在は知っていたけど使ったことありませんでした。ライフサイクルについては、いちど一通り使ってみながら整理した方がいいかなーと感じました。
scrollMonitorライブラリ
Twitterで馴染み深い、ページ末尾までスクロールすると追加でロードが走るやつを実装するのに使います。意外と簡単に書けてびっくり。
Chrome開発者ツールのNetworkパネル
3G回線の場合の通信の状態のエミュレーション機能なんてあったんですね・・・ごく一部の機能しか使っていない自覚はあったので、便利な使い方を身につけていきたいですね。
The Ultimate Vue JS 2 Developers Courseの良いところ
少しずつ段階を踏んで実装が進んでいく
このコースでは、GitHubリポジトリに上がっている初期状態のコードを、動画で説明しながら少しずつ修正していきます。初期状態として与えられているのは、ほぼ設定ファイルとライブラリ、それにCSSのみで、htmlとjsはほぼ自分で書いていきます。最初の画面にはロゴとレイアウト設定しかありません。
この状態から、「まずはこれを表示するようにしてみよう」、「次はこの機能を実装しよう」、「これだとUI的に好ましくないからこうなるようにしよう」と一歩一歩進んでいきます。「先を見据えてこういう風にしておく」ということがなく、「ある機能を実装する」→「足りない機能を考える」→「その機能を実装する」→……というサイクルを回していくので、「なんでそうするの？」と躓くことがありません。
やりそうな間違いを講師が実際にしてみせてくれる
動画の強みを生かし、追加するソースコードは全て動画の中で実際に講師のアンソニーさんが書いてみせてくれます。そしてその中では、答えに一直線でたどり着くのではなく、結構な頻度で間違えます（たぶんわざと）。間違えると、当然動作確認したときに動かないわけですが、そのときにChromeの検証モードでエラーメッセージをみて、「あ、こういうエラーが出ているということは、ここはこうしなくちゃいけなかったね」とエディタに戻って修正するところも動画に含まれています。
アンソニーさんが動画の中でする間違いにはタイプミスのような些細な間違いも含まれているのですが、なかには変数のスコープや処理の順番などの仕様の理解に関わる「間違い」もあり、それを修正していく過程を見ることから学ぶことは多いです。
印象に残っているのは、thisのスコープの問題に関わる「間違い」です。少し前にコードを書いている時に、まさにその問題で躓き、（あとから典型的な間違いだということもわかったのですが）かなり悩んでしまった経験があったので、「あるある間違い集」のようなものは本当にありがたいです。
英語の発音が聴き取りやすい＆字幕が読みやすい
このコース、音声が全編英語で、字幕も英語のみです。日本語でVue.jsをアプリを作りながら学べる教材はあまり見つけられなかったので、大学受験以来錆び付いていく一方の英語をたまには使おうという意味も込めて英語の教材にチャレンジしてみました。
英語でもよいとなると、教材の選択肢はかなり広がります。Udemyだけに絞っても、英語のコースは36件あります。その中でも、下記のコースが、同サイト内のVueのコースで受講者が圧倒的トップで、評判が良かったので、当初はこちらにしようかと思っていました。
https://www.udemy.com/vuejs-2-the-complete-guide/www.udemy.com
しかし、上記のコースのサンプルの動画を見てみると、日本語字幕は自動生成であるため読めたものではなく、英語字幕もちょいちょい間違っています。特に、技術的な用語については英語の段階で誤った字幕になっていることが多いので、肝心なところで字幕が頼りにならないという不安を覚えました。また、音声の英語についても、講師の方の英語には少し癖があり、聴き取りづらく感じました。
以上のような理由で、「英語が聴き取りやすいやつがいいな・・・」と思い、今回の"The Ultimate Vue JS 2 Developers Course"のサンプルを見てみたところ、「めっちゃ聴き取りやすい！！！」となりました。僕にとって聴き馴染みのある英語というと、ほぼ受験英語ということになるのですが、講師のアンソニーさんの英語はとても聴き取りやすく感じますので、おそらく日本での英語教育を受けてきた方の多くが同じように感じるのではないでしょうか。
また、コースの冒頭で、アンソニーさんは「このコースには英語ネイティブじゃない受講生もいるだろうからゆっくり喋るよ！速くしたい人は画面の再生速度で調整してね！」と宣言していて、本当にコースの中でもとてもゆっくりと、はっきりとした発音で喋っています。
The Ultimate Vue JS 2 Developers Courseの「もうちょっと」なところ
まだ一部しか視聴していないので、欠点を述べ立てるには早いのですが、褒めてばかりなのもアレなので一点だけ。
ソースコードに工夫の余地がありそう
これは無い物ねだりというか、コースの目的に照らして不可欠なものだとも思わないですが、敢えて欠点を挙げるとすれば、ソースコードがあまり美しくないように感じます。変数の作り方（命名）やロジックの実装の仕方には、コースの中では頓着せず、「こうすればいいねー」と進んでいってしまいます。2以降ではまた違ってくるのかもしれませんが、コードが美しいとプログラマとして信頼が増すので、講師としてはもっと気を遣ってもよかったのでは？と思います。
おわりに
今のところ、楽しく視聴を続けられています。細かく動画が切られていますし、章立てもあるので、毎日少しずつ進めていくのにはちょうどいい教材だと思います。6月中にはコース全て終えられることを目標に、がんばります！乞うご期待。
*1:カカカカックさん（@kakakakakku）に教えていただきました。ありがとうございます。
