はじめに
この記事では、HTML / CSS から学び、Nuxt.js で webアプリを開発するまでの過程を紹介します。
本記事は、以下のような方が対象です。同じ初学者を意識しています。
- web開発に興味がある。
- HTML / CSS を学んだが、そこからどうすれば良いか謎。不可思議。
- フレームワークとは何ぞや。フレームワークのフレームワーク？
- どこまでやれば、どういうものができるのか具体的に知りたい。
- とりあえず、web開発に興味はあるよ。
その道の方でも、「趣味で学ぼうとする人は、こういう学び方をしているんだな」と参考になるかもしれません。
筆者であるうたかたは、web開発を始めて早２ヶ月ですが、わからないことでいっぱいです。基本的に表面的な理解に終始しています。ただ「初学者でも、今あるものを使うと、こういうものができるよ」という具体例とその学習過程を紹介することで、何か少しでもお役に立てたらと思います。Qiita も利用し始めたばかりなので、何かありましたら色々とご指摘いただけると助かります。
開発中の音楽SNS「UTAKATA」の紹介・解説動画を YouTube に投稿しているので、「この記事で紹介しているもの（Vue.js・Vuetify.js・Nuxt.js・Firebase）を学ぶと、少なくともこういう webアプリを作ることができるよ」という具体例として参考にしていただければと思います。近日中にベータ版（？）を公開する予定です。
- 紹介・解説動画：UTAKATA - How to Use
最後に、本記事は各言語・フレームワークについて詳細な解説をするものではありません。「何を学べば良いかわからない」「何を学べば、何ができるかわからない」という方に、一つの指針を提供することが目的です。
少し前置きが長くなりましたが、最後までお読みいただけると嬉しいです。
ロードマップ
これまでの学習の軌跡を振り返りつつ、web開発のロードマップを紹介します。
学習の流れは、HTML / CSS → JavaScript → Vue.js & Firebase → Vuetify.js → Nuxt.js でした。
学習期間と内容は、概ね以下の通りです。
- 前半（１ヶ月）：HTML / CSS / JavaScript の基本を学び、その後何を学べば良いか調べてた。もはや「web開発」とは何ぞや状態。そして今も。
- 後半（１ヶ月）：Vue.js → Firebase → Vuetify.js → Nuxt.js の存在を辿り、動画を見て、公式ドキュメントを見ながらコードを書いた。
主に前半は The Net Ninja さんの動画（YouTube & Udemy）、後半は公式ドキュメントを頼りにしています。
The Net Ninja さんについては、偶然見つけただけで、特に深い理由はありません。運命の出会いでした。英語ですが、とてもわかりやすいです。このわかりやすさに慣れると、少しつらいものもあります。ストリートファイターの春麗（Chun Li）が好きみたい。マリオも出てくる。ほぼ全て無料で見ることができるのには、感謝しかないです。謝謝。
「どこまでやれば、どういうものができるのか」が想像もできなかったので、一度動画を（コードを書かないで）見るだけみて、Nuxt.js に行き着いてから、公式ドキュメントを参照しつつ、コードを書き始めました。
この記事を参考にする場合も、一度最後まで読み通して見通しをつけてから、各言語・フレームワークを学習し始めると良いと思います。知らない用語が出ても、「そういうものがあるんだね」と思って進んでください。知らないことばかりですもん。
学習項目は以下の通りです。
- HTML
- CSS
- JavaScript
- Vue.js：JavaScript のフレームワーク。
- Vuetify.js：Vue.js のデザイン担当。
- Nuxt.js：Vue.js の開発環境・機能強化担当。
- Firebase：ユーザー認証（登録・ログイン）やデータベースを管理。
1. HTML / CSS
- The Net Ninja - HTML & CSS Crash Course Tutorial
自分は「Flexbox とは何ぞや」という人間だったので、以下の動画も見ました。あとで紹介する Vuetify.js で採用されている Grid システムをそのまま理解することができます。
- The Net Ninja - CSS Flexbox Tutorial
動画が洗練されていくのを肌で感じることができるのは、複数見た人の特権です。
今回紹介している動画は有料（Udemy）２つを含みますが、それ以外はほぼ全て無料なので、ぜひ覗いてみてください。
最近では、Firebase Functions に関するシリーズ（無料）が投稿されていたようです。まだ見ていませんが、きっと参考になると思います。
2. JavaScript
- The Net Ninja - Modern JavaScript Tutorial
フルバージョンは Udemy（有料） で公開されています。動画の説明欄にクーポン付きのリンクがあるので、そちらからご利用ください。
基本的な文法（「こうやって書くよ」）・関数（「こういうことがしたい時、こういう機能があるよ」）・概念（「こういう考え方で、コードを組み立てるよ」）を一通り学ぶことができます。
学習の指針としては、動画を見て基本的な概念を理解しつつ、文法・関数（の存在）を何となく知っておきます。実際にコードを書く段階で、その関数名やしたいことで検索して、例を見ながら書きます。「検索できるようになる」こと、そして「書かれている内容を理解できるようになる」ことが大事だと思います。全てのコードを覚えておく必要はありません。未だに何でも調べてます。
この後も基本的に、動画を見て何となく理解する → ドキュメントを参照してコードを書くという流れです。
3. Vue.js& Firebase
- The Net Ninja - Build Apps with Vue & Firebase - Udemy Course
Udemy（有料）で公開されている動画の紹介動画です。動画の説明欄にクーポン付きのリンクがあるので、そちらからご利用ください。
web開発を学ぶのにかけた費用は、以上の動画２つ分（約2400円）です。
安いと思います。感謝しかないです。
Vuex については、以下の動画（無料）を参考にしました。
- Vue School - Vuex for Everyone
Vue については、以下のサイトも参考になりました。Vuex についての記事を載せておきます。目を通せてはいないですが、初学者にも、とてもわかりやすい解説です。謝謝。
- REFFECT - 【vue.js】ショッピングカートを作ってVuexを理解
一応、Firebase [Firestore/Storage] セキュリティルールの具体例を以下の記事で紹介しています。とても参考になったブログ・記事についても触れているので、いつの日か覗いてみてください。喜びます。
4. Vuetify.js
- The Net Ninja - Vuetify Tutorial
使用しているコンポーネント（デザインを形作るパーツ。Buttonコンポーネントなど）や使い方が古い場合もありましたが、コメント欄で有志により全て補足されていました。
コードを書くときには公式ドキュメントの例を見ながら書くので、まずは動画で雰囲気を掴めれば良いと思います。その点で、とても参考になりました。
5. Nuxt.js
存在は Vuetify.js の公式ドキュメントで知りました。
Nuxt.js については、はじめから公式ドキュメントのガイドに沿って何となく理解していきました。一応、Vue School の動画も見たと思います。
- Vue School - Nuxt.js Fundamentals
Vue.js・Vuetify.js・Nuxt.js・Firebase は、いずれも日本語の公式ドキュメントが充実しているので、動画を見て雰囲気を掴んだら、そのまま公式ドキュメントを読むと何となく理解できます。どんなにわかりやすいサイトがあっても、参照しているのは最終的に公式ドキュメントのはずなので、それを読むことで安心感を得るのです。公式ドキュメントのわかりにくいところは、検索すれば先人が知恵を貸してくれます。
おわりに
この記事では、HTML / CSS から学び、Nuxt.js で webアプリを開発するまでの過程を紹介してきました。
「何があるかわからない」「何から手をつけていいかわからない」という方の参考になれたら幸いです。
web開発を学ぶ上で、数多くのサイト・記事を参考にさせていただいています。本記事では全て列挙することはできませんが、この場を借りてお礼申し上げます。いつもありがとう。謝謝。
趣味で NCS 等の和訳を YouTube に投稿しているので、よければそちらもご覧ください。
YouTube チャンネル：うたかた / UTAKATA
少し長くなりましたが、ここまで読んでいただきありがとうございました。ではでは！