0-2

前提知識の説明

Vue.jsとは

Vue.jsはJavaScriptのフレームワークの一つで、JavaScriptでの開発を効率的に進めることをサポートしてくれるものです。

JavaScriptのフレームワークにはいくつか種類がありますが、その中でもVue.jsの特徴は

導入が非常に容易
学習コストが低い
アプリケーションの規模拡大に対応できる機能が備わってる

といった、初学者に優しいという特徴を兼ね備えています。

始めはデータの反映やコンポーネントの分離といった小さな規模の開発に始まり、徐々にページの分割や状態管理へと段階を踏んで拡大していくことができる仕組みが備わっているのも、安心して学べる材料になるかと思われます。

【用語解説】フレームワークとライブラリ

いずれも「他者が作成したプログラムを使って開発を楽にしましょう」というものですが、以下のような違いがあります。

▼ フレームワーク

開発でよく使うような処理の流れが詰め込まれた、システム全体の「枠組み」
独特のルール下で開発を行う必要があり、ある程度の習得コストが必要

▼ ライブラリ(パッケージ)

開発でよく使う機能がひとまとまりになったプログラムの「部品」
先人が作ったプログラムを拝借して、複雑な機能を実現できる代物

Image from Gyazo

コマンドラインツールの基本

「コマンドラインツール」とは、マウスでボタンをクリックするといった視覚的な操作は使わずに、キーボードの入力だけで操作を行えるプログラムのことを指します。Windowsでは「コマンドプロンプト」、Macでは「ターミナル」がこのコマンドラインツールに該当します。

本教材ではプログラムのインストールやVue.jsの開発環境の構築のためにコマンドラインツールを使用していくのですが、使用する箇所では必ず下記のように「console」というタイトルの黒枠表示にてコマンドやその実行結果を示していきます。

console
 
Copied!
コマンドの内容

また、この際に以下に示す2通りの書き方を使っていくので、コマンドを実行するのか、あるいは単純に内容の確認を行うだけなのかを判断するようお願いします。

1. コマンドの実行

お手元でコマンドを実行してほしい箇所は、$マークで始まる命令として記述します。この書き方が出てきた場合は、コマンドをコピーしてコマンドラインツールに貼り付けた後、エンターを押すことで実行を行います。

console
 
Copied!
$ vue --version

ここで一つ注意なのですが、黒枠右側のコピーボタンを押した際にはこの「 $」も一緒にコピーされてしまうのですが、実行時には必ず「$ 」を除いた内容で実行するようお願いします。

上記の例ですと「vue --version」という部分だけ貼り付けて実行する、という形です。

2. ログの確認

コマンドの実行結果としてコマンドラインツールに表示される内容を示すこともあるのですが、その場合は逆に$マークは付けずに説明を行います。

その場合は、お手元でも同じ様な表示が行われているかどうかを確認するだけで、コマンド実行を行う必要はありません。

下記例ですと、$がないので、「@vue/cli 4.5.13」という内容表示されるかどうかを確認できればOKです。

console
 
Copied!
@vue/cli 4.5.13

JavaScriptの前提知識

1. 基本構文を理解している

let, constを使った変数の定義
四則演算（+, -, *, /）
比較演算（==, ===, !=, >, < , >=, <=）
論理演算（&&, ||, !）
繰り返し処理（for, while）
条件文（if else, switch）

2. 関数を定義して使える

引数というものがあって、外から渡す引数を変えると関数の挙動が変わること
returnを使って結果を返せること

javascript
12345
     
Copied!
function add(a, b) {
    return a + b;
}
console.log(add(1, 3));   // => 4
console.log(add(10, 43)); // => 53

3. 型の概念を理解している

数値の2と文字列型の"2"が違うことを知っている
===では厳密に型を含めて比較し、==では数値のみ比較をすることを知っている

javascript
123456
      
Copied!
const a = 2;
const b = '2';
console.log(typeof(a)); // => number
console.log(typeof(b)); // => string
console.log(2 === '2'); // => false
console.log(2 == '2');  // => true

4. オブジェクト型の初期化、値の追加、値の取り出し方を知っている

ドット記法(object.member)とブラケット記法(object['member'])の2種類の扱い方があることを知っている

javascript
1234567891011121314151617
                 
Copied!
// 初期化時にプロパティを定義
let fruitColors1 = {
    'apple'  : 'red',
    'banana' : 'yellow',
    'grape'  : 'purple'
};

// 初期化後にプロパティを追加
let fruitColors2 = {};
fruitColors2.apple = 'red';        // ドット記法で追加 
fruitColors2['banana'] = 'yellow'; // ブラケット記法(角括弧)で追加
const grapeKey = 'grape';
fruitColors2[grapeKey] = 'purple'; // ブラケット記法だと変数を使って追加もできる

// 値を取り出す
console.log(fruitColors1.grape);     // ドット記法で取得    => 'purple'
console.log(fruitColors2['grape']);  // ブラケット記法で取得 => 'purple'

HTMLの前提知識

1. WebページはHTMLという言語で構成されていることを知っている

html
1234567891011121314
              
Copied!
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページのたいとる</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <p>Webページは</p>
  <p>タグで構成された</p>
  <p>HTMLで構成されています</p>
</body>
</html>

上記のようなコードを組むことで以下のような画面が生成されます。

Image from Gyazo

2. タグと属性の概念を知っている

タグは < > で囲まれたかたまりで、< 直下の文字列に応じて特別な意味合いを持つことを知っている
主要なタグ（div, table, button, inputなど）を使ったことがある
属性はタグに対して補足的な情報を持たせることができる
主要な属性（id, class, style, valueなど）を使ったことがある

3. スタイルの設定方法を知っている

セレクタ {プロパティ: 値;}によって要素のスタイルを変更できること
クラスは「.」IDは「#」を使って指定することができること

html
1234
    
Copied!
div.red {
    color: red;
}
<div class="red">赤色</div>

間違いや改善の指摘

質問ポリシー①

教材の内容に関する質問を投稿しましょう

Notion風メモツールを開発しながら、Vue.jsの基本構文と使いどころを学ぼう！

0章 : はじめに

1章 : VueCLIでプロジェクトを作成してみよう

2章 : 見た目を整えよう

3章 : Vueでできることを学んでみよう

4章 : ノートの作成／削除をしてみよう

5章 : ノートに親子関係を持たせてみよう

6章 : ウィジェット機能を作ってみよう

7章 : 機能を充実させよう

8章 : アプリをデプロイしよう

9章 : 付録