Vue.jsの基本構文と既存のコンテンツで学びにくい機能の"使いどころ"を習得しよう！

■ なぜ執筆したのか？
Vue.jsを始めとするJavaScriptフレームワークには、コンポーネントやディレクティブといった小難しい機能が数多く存在しています。

しかしSNS等を見ていると、それらの機能をなぜ使う必要があるのか？、どういった場面で有効なのか?、いまいちピンと来ていない方もいらっしゃるような印象を受けました。

そこで本教材では「通常のJavaScriptとVue.jsを使った場合では何が違うの？」「そもそも機能が多すぎて何をどうやって使えばいいかわからない！」といった方に向けて、メモツールの機能を1つずつ作る過程で、段階を踏みながらVue.jsの機能を順序立てて執筆しました。

■ どういう風に学ぶか？

本教材では環境構築からはじまり、Vue.jsのプロジェクト作成、通常のJavaScriptとVue.jsの比較を行った後、Vue.jsの機能について1つずつ解説を行いながらメモツールの機能実装を行っていきます。

Vue.jsにどんな機能が用意されていて、どういった場面でどの機能を使うべきなのかを学ぶことができます。

Vue.jsの学習にチャレンジしたい方やVue.jsの文法や特徴を書籍やネットで学んだけれど、機能の使い方やメリットがイマイチわからない方は、ぜひ手に取ってみてください！

学習内容

• Windows/Mac OSでの環境構築手順
• 双方向バインディングの使い方とメリット
• ルーティングの概念
• ディレクティブの使い方
• コンポーネントの利用と親子間のやり取り
• ライフサイクルの概念とライフサイクルフック
• 各種コンポーネントオプションの使い方と比較
• Herokuを使ったデプロイ

作成物のイメージ

本教材では以下のようなメモツールを作成していきます。

1. ナビゲーションバー

• アプリケーションのタイトルと、ページへのリンクが表示されています
• リンクをクリックすることで別ページに遷移することができます

2. 左メニュー

1つ1つのメモのことを本教材では「ノート」と呼びます

• ノートの一覧が表示されていて、ここでノートの追加や削除、保存が行えます
• ノートは親子関係にすることができ、ドラッグ＆ドロップで移動が行えます

3. 右ビュー

ノートを構成するパーツを本教材では「ウィジェット」と呼びます

• 現在選択中のノートの中身が表示されます
• ウィジェットもノート同様親子関係にすることができ、ドラッグ＆ドロップで移動が行なえます
• ウィジェットのタイプとして以下の3つが選択でき、それぞれで別の見た目が用意されています
  1. 見出し
  2. 本文
  3. ソースコード

動作イメージ

本教材の対象者

本教材は下記のようにVue.jsでまとまった制作物を作ったことがない、JavaScriptフレームワークの入門として体系立てて学んでみたい、という方向けに制作されています。

• JavaScriptは使ったことがあるけどフレームワークを触るのは初めて
• Vue.jsを学んでみたいけど、何からやったらわからない
• Vue.jsの文法や特徴を書籍やネットで学んだけど、実際に成果物を作成してWeb上に公開してみたい
• Vue.jsで用意されている機能の使い方やメリットがわからない

受講における必要条件

• JavaScriptの基礎を理解している

  • 基本構文を理解している
  • 関数を定義して使える
  • 型の概念を理解している
  • オブジェクト型の初期化、値の追加、値の取り出し方を知っている

• HTML, CSSの基礎を理解している

  • WebページはHTMLという言語で構成されていることを知っている
  • タグと属性の概念を知っている
  • スタイルの設定方法を知っている

学ばないこと

本教材ではJavaScript, HTML, CSSの基本は習得済みの前提で、Vue.jsの使い方にフォーカスした内容で構成されています。また、環境構築の際に登場する技術に関しても詳細な説明は省かせていただきます。

• JavaScript, HTML, CSS基本構文
• Node.js, npm, Bablel, ESLintの詳細説明
• Bootstrap, Font Awsome, Sassの詳細説明

本教材の対応バージョン

• Node.js 14.16.0
• VueCLI 4.5.13
• Vue.js 2.6.11
• Bootstrap 4.6.0
• FontAwesome 5.15.3 Free

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

• Windows OS
• MacOS