Vue.jsを使ったモダンなWeb開発を身につけよう！HTMLやjQueryからのステップアップのつまずきをサポート

■ なぜモダンなWeb開発をするのか
Vue.jsやReactといった、モダンな技術の開発が、現場では多く使われ始めています。

モダンな技術は、システムのメンテナンスや更新がしやすいです。そのため直接HTMLを書くといったWebフロントエンド開発は減少しています。

しかしHTMLやJQueryからステップアップするときにつまずくことが多いため、モダンなWeb開発言語であるVue.jsの入門講座を執筆しました。

■ どういう風に学ぶのか

日程調整アプリを題材に、Vue.jsやNuxt.jsの基礎的な知識はもちろん、Firebaseを使ったデータベースとの連携、実際にインターネット上に公開するところまで学習することで、基礎的なVue.jsの基礎を身につけることができます。

そして日程調整アプリを題材にすることで、下記の内容が学習できます。

• HTMLとVue.jsで書いたWebページの違い
• Vue.jsを使った開発の一連の流れ
• 実装したアプリをインターネット上に公開する方法

ぜひ、日程調整アプリの開発を通じてモダンな技術の習得にお役に立てたら幸いです。

学習内容

• HTMLで書いたページとVueで書いたページの比較
• Nuxt.jsでのページ作成、ルーティング
• Nuxt.jsでのコンポーネント作成、使い方
• Vueコンポーネント内での状態管理
• Vuexを使った状態管理
• ディレクティブ
• Vueコンポーネントのライフサイクル
• Firestoreの使い方、プログラム上の操作
• Firebase Hostingを使ったアプリの公開
• Vuetifyの使い方
• JavaScriptにおける同期処理と非同期処理、Promiseについて

作成物のイメージ

本教材の対象者

• VueやNuxtが気になっているけどハードルが高いと思っている方
• モダンなWeb開発を体験したい方
• HTMLでホームページを作ってみたものの、ソースファイルが散らかって管理が難しいと感じている方

受講における必要条件

• ターミナルを開いて pwd / cd / ls など基本的な操作ができる
• JavaScriptの基本的な文法
• HTMLを使って簡単なホームページ制作をしたことがある（あるとより理解しやすいです）

学ばないこと

• Vueの記法や仕様に専念するため、Nuxt.jsにカプセル化されている周辺機能 (Vue Routerなど) については詳しくは触れません。
• スタイリング・デザインについてはVuetifyを使用するため、CSSやデザインについての解説はしません。
• リファレンス実装の共有にGitHubを使用していたり、Nuxt.jsがGitやGitHubと高い親和性を持っていたりしますが、本筋ではないので触れません。

本教材の対応バージョン

• Node v16.11.0
  • v12あたりまでであればおそらく問題はありませんが、思わぬエラーに遭遇しないとも限りませんので、可能な限りv16をおすすめします。
• Nuxt v2.15.7
  • これもピッタリ同じである必要はありませんが、筆者の環境はこれです。

本教材で質問対応可能なOSや環境

• OS
  • macOS (筆者はIntel機しか持っていません)
  • Windows (WSL2)
• エディタ
  • VSCode