Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【2021年版】サーバーサイドエンジニアがVue.jsでモダンフロントエンド開発を始めるまで

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 の構成要素 - ウェブ開発を学ぶ | MDN

CSS設計完全ガイドを読む

所要時間: 5時間

  • CSS はちゃんと設計しないとカオスになりがちなので、設計について学びました。
  • 業務では BEM 記法を利用しているので、 BEM を中心に理解しました。
  • クラス名に規則を持たせるだけでも CSS を一気に管理しやすくなります。

CSS設計完全ガイド ~詳細解説+実践的モジュール集 | Amazon

webpack

webpack 実践入門 を読む

所要時間: 3時間

  • webpack の設定は、README や参考記事のコピペでなんとかなることも多いです。
  • しかし、ハマるとドツボなので(経験済み)、一度ハンズオンしてざっと理解したほうが、あとあと楽になると思います。
  • サーバサイドに Rails を使う場合は webpacker を使うものの、 webpack の知見は必要かと思います。

webpack 実践入門 | Amazon

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入門〜Part1:環境構築編〜 - Qiita

個人サービスで素振りする

所要時間: 20時間(現在進行中)

  • 仕上げとして個人のサービスに Vue.jsを導入します。
  • 自身固有の環境なのでハマリどころも多いはずですが、ドキュメント等一次情報を頼りに解決することで、実践力が爆上がりするはずです。私は turbolinks や webpacker 周りでハマリました。

GitHub - yuki0920/supplebox

学習ロードマップ参考記事

まとめ

以上の教材を学習したことで、業務ではなんとかフロントエンドの業務を遂行できるようになりました。

フロントエンドを学習してみての感想ですが、「最高に面白いです!!」

画面の動きを確認しながらコードを書けるため、とてもワクワクしながらのめり込むことが出来ます。

サーバーサイドが主担当のみなさまも、モダンフロントエンドを学習して、新しい扉を開いてみませんか?

それでは、お読みいただきありがとうございました。
少しでもいいね、と思っていただいたら「LGTM」していただけると嬉しいです。

yuki_0920
30歳、WEBエンジニア2年目。前職ではエネルギー業界で決算・財務業務に6年間従事。 趣味は筋トレとインデックス投資
https://muscletech.tokyo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away