2020年12月からのプロジェクトで、Vue.js(2系)によるモダンフロントエンドの開発の一端を担うことになりました。そこで、プライベートで2ヶ月ほどフロントエンド開発の学習をし、なんとかフロントエンドの業務をこなせるようになってきましたので、やったことをご紹介します。
意外とやるべきことが多かったため、体系的にまとまっていると今後復習する際に役立つかと考え、この記事を執筆することにしました。
これまで
Web系の受託開発会社に入社し、1年ほどサーバーサイド開発をメイン行ってきました。
この1年間はRuby, Ruby on Rails, RSpec にどっぷり浸かっている一方、フロントエンド開発はほぼゼロの状態からのスタートでした。
やったこと
JavaScript
JavaScript Primer を読む & ハンズオン
所要時間: 20時間
- まずは JavaScript の言語仕様を理解することを重視し、時折ハンズオンを交えながら進めました。
- プログラミング言語を Ruby しか知らない私でもだいたいは理解することが出来ました。(1つの言語を知っておくと、意外と応用が効くものだなと嬉しくなりました。)
- 非同期処理はなかなか理解できなかったため、初回では理解しきれず、後から何度も読み返し徐々に理解度を上げています。
JavaScript Primer - 迷わないための入門書 #jsprimer
Vue.js
Udemy の 「Vue.js + Firebaseで作るシングルページアプリケーション」 を ハンズオン
所要時間: 5時間
- Vue.js の概要を把握するため、隙間時間を利用して1.5倍速で視聴しました。
- JSFiddle の環境が用意されているため、自身の環境を用意なくてもよいという手軽さが良かったです。
Vue.js + Firebaseで作るシングルページアプリケーション | Udemy
Vue.js 入門 を読む & ハンズオン
所要時間: 30時間
- Vue.js について体系的な知見を得ることを目的とし、書籍を利用しました。
- 「Vue.js 入門」はVue.js のコミッターの方が執筆されているため、信頼度がとても高いです。
- いくつものアプリケーション開発を交えながら、仕様が説明されているため、理解しやすかったです。
- 扱っている内容が幅広く(Vuex, テスト, Lint, Atomic Design)、今でも辞書的に確認しています。
Vue.js入門 基礎から実践アプリケーション開発まで | Amazon
YouTube の「3 Ways To Debug Your Vuejs Apps With VS Code And Chrome」 を学ぶ
所要時間: 1時間
- 開発を効率的にすすめるには、デバッグツールを使いこなすことが重要です。
- デバッグの方法は「Vue.js 入門」にも載っていますが、実際に画面を見たほうが、手の動かし方がわかるので、理解度が増しました。
3 Ways To Debug Your Vuejs Apps With VS Code And Chrome
CSS
MDN の CSS のコースを読む & ハンズオン
所要時間: 15時間
- CSS は意図したスタイルがうまくあたらないことが多く意外と難易度が高いですが、克服する必要があります。
- MDN は情報が正確で、かつ丁寧でわかりやすいです。たまに翻訳が怪しいところがあるのはお愛嬌です。
- サンプルコードが豊富で、コースによってはインタラクティブなエディタが用意されていてハンズオン環境があるのも良い点です。
CSS設計完全ガイドを読む
所要時間: 5時間
- CSS はちゃんと設計しないとカオスになりがちなので、設計について学びました。
- 業務では BEM 記法を利用しているので、 BEM を中心に理解しました。
- クラス名に規則を持たせるだけでも CSS を一気に管理しやすくなります。
CSS設計完全ガイド ~詳細解説+実践的モジュール集 | Amazon
webpack
webpack 実践入門 を読む
所要時間: 3時間
- webpack の設定は、README や参考記事のコピペでなんとかなることも多いです。
- しかし、ハマるとドツボなので(経験済み)、一度ハンズオンしてざっと理解したほうが、あとあと楽になると思います。
- サーバサイドに Rails を使う場合は webpacker を使うものの、 webpack の知見は必要かと思います。
StoryBook
Storybook for Vue tutorial を読む & ハンズオン
所要時間: 5時間
- Storybookを導入するとサーバーサイドと分離してフロントエンド開発を進められます。
- 小さなコンポーネント単位で開発をすすめられて、とても楽しいツールです。
-
npx -p @storybook/cli sb initでまるっとセットアップができるのも良いです。 - 残念ながら Vue.js に対応したチュートリアルは日本語版はありませんが(React版はある!!)、翻訳ツールを駆使すればなんとかなります。
Storybook for Vue tutorial | Storybook Tutorials
サーバーサイド(Rails)との連携
Qiita の記事を読む & ハンズオン
所要時間: 15時間
- 業務では、Vue.js とサーバーサイドとの連携する機会が多いかと思います。
- 自身がそこそこ知っているサーバーサイドの技術(僕ならばRails)とVue.jsを一緒に学べると、より実践力が高まります。
- 下記 Qiita の記事は解説が丁寧で、迷わず進められました。最終的には Docker 化までカバーされていて、有料の書籍級の濃度です。
Rails+Vue.jsに係るCRUD入門〜Part１：環境構築編〜 - Qiita
個人サービスで素振りする
所要時間: 20時間(現在進行中)
- 仕上げとして個人のサービスに Vue.jsを導入します。
- 自身固有の環境なのでハマリどころも多いはずですが、ドキュメント等一次情報を頼りに解決することで、実践力が爆上がりするはずです。私は turbolinks や webpacker 周りでハマリました。
学習ロードマップ参考記事
-
【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog
=> 記事の内容や書き方、構成などを参考にさせていただきました。 -
Developer Roadmaps の日本語版
=> フロントエンドに加え、バックエンド、DevOps と分野ごとに、必要な技術を網羅している Developer Roadmaps の日本語版です。これをみるだけで、自分に備わっている技術、不足している技術が一目瞭然です。翻訳していただいた方に感謝。
まとめ
以上の教材を学習したことで、業務ではなんとかフロントエンドの業務を遂行できるようになりました。
フロントエンドを学習してみての感想ですが、「最高に面白いです!!」
画面の動きを確認しながらコードを書けるため、とてもワクワクしながらのめり込むことが出来ます。
サーバーサイドが主担当のみなさまも、モダンフロントエンドを学習して、新しい扉を開いてみませんか?
それでは、お読みいただきありがとうございました。
少しでもいいね、と思っていただいたら「LGTM」していただけると嬉しいです。
最後に
本来は一次情報を頼りに、APIドキュメントや公式のチュートリアルから手をつけるべきですが、フロントエンドの経験がほぼゼロかつ英語だと理解に時間がかかるため、書籍を多めに取り入れて学習を進めました。
Vue.jsである程度のフロントエンド経験をつめたので、他のReactなどのフロントエンドライブラリを扱う際には、初手から公式ドキュメントを読見始めても理解できるのではと思います。