Vue の公式チュートリアル（ステップ１）をやってみる！
記事IT・テクノロジー
Vue の公式チュートリアル（ステップ１）をやってみる！
フロントエンドのフレームワークの学習を通して、Web 開発の基本をマスターする実施例として、Vue の公式サイトにあるチュートリアルをやってみるという連載を紹介する事にしました。初めて、Web 開発のプログラミングの学習をされる方是非見てみてください！
Vue の公式チュートリアル
フロントワークのフレームワークを最初に学習するスタイルで Web 開発に必要なプログラミングを学ぶ実施例として、Vue の公式チュートリアルを使った学習例を紹介してみる事にしました。このチュートリアルは、Vue の公式ベージの一部として紹介されている物です。（日本語版のサイトはサイトはサイトはこちら）
日本語のサイトは英語のサイトと同じではないようです。（2022 年 2 月現在） 英語のサイトの公式チュートリアルを見た感じでは、初心者の学習には良さそうなので、これを元に学習する初心者のための記事を少し連載の形で書いてみることにしました。
全部で 14 のステップになっていて、一つづつ学習した場合、14 日間で基本をマスターできる事になるので興味のある独学者はやってみると良いと思います。
チュートリアルの形式は、画面の右側に、コードを入力できる部分と、その結果を表示する部分が作られていて、一番最初は開発用の PC などに設定する事なく学習できるのも魅力です。
まずは、このオンラインでコードを入力しながら学ぶというスタイルでやってみる方法を紹介します。
最初の課題は？
最初の課題はシンプルに、単純な HTML の記述を Vue の部品として表示させるというシンプルな物です。表示させるのは、プログラムの最初のステップでよく使われる「Hello World!」を表示させるだけです。ステップ１のページはこちらです。
最初の課題はシンプルで、既にコードが右上の画面に入力されています。 その結果が右下の画面に表示されています。
特にやることはないステップですが、初めて Web 開発を学習する方には何をやっているのかが、よくわからないと思います。そこで、この連載では、少し解説を加えて何を学習しているのかをもう少し詳しく理解できるようにします。
このステップで学習していることは？
右上の画面の一番上に「App.vue」というのが表示されています。 これは、Vue をパッケージ管理アプリのnpmなどを利用して、プロジェクトを作成して開発する際に使われるファイルの名前です。Web ブラウザに表示させる「部品」を示すファイルです。
このファイルは、「.vue」というのがついていて、このファイルは Vue の部品のファイルに使われます。Vue の用語で言うと「SFC(Single-File Component」と呼ばれるファイルです。
このステップでは解説されていませんが、このファイルは通常は三つの部分に分けられています。
* 「<template>」と「</template>」で囲まれた部分
* 「<script>」と「</script>」で囲まれた部分
* 「<style>」と「</style>」で囲まれた部分
です。この例では、「template」の部分しかありませんが、基本的には、この三つの部分で「部品」 を構成しています。
このうち、「template」の部分は HTML を書く部分で表示の枠組み（＝テンプレート）を作ります。「script」の部分は Javascript を書く部分でプログラム（＝スクリプト）の本体になります。最後の「style」の部分は CSS を書く部分でスタイルを作る部分になっています。
これが、基本的に、HTML/CSS/Javascript の知識が学習に必要と言われている理由です。
このステップでは、特にプログラムの部分とスタイルの部分がないので省略されていて、シンプルに HTML の部分だけで記述している例になっています。
今回の例はこのようにシンプルな HTML を表示させるだけの学習です。
<template>
<h1>Hello World!</h1>
</template>
今回は、HTML/CSS/Javascript の知識がなくても学習可能と言っていますので、補足で説明も追加しておきます。ここで書かれている
<h1>Hello World!</h1>
が HTML の記述です。ここで使われている「h1」は見出しのための文字を表示させるのに使われる「タグ」と呼ばれている物です。要は目印です。 HTML の記述は基本的に二つのタグで挟んで場所を指定するようになっています。 この例では
「<h1>」と「/」をつけた「</h1>」をペアにして、この二つの部分で挟んで文字を書きます。
見出しをつけるタグはこの他に
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
などがあって、見出しの大きさや階層によって、文字の大きさや表示する位置を調整できるようになっています。
本来は、Web ブラウザで表示するには、HTML ファイルとして、決まった形で記述する必要があります。 例えば以下のような感じになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
のようにして、これをファイルに保存（例えば「index.html」）に保存して、Web ブラウザで表示させるようになっています。
Vue を利用すると、「template」にシンプルな記述を書いておけば、Vue の仕組みが Web ブラウザで表示できるような処理をしてくれます。
このステップでは、その作業の例を体験すると言うのが目的です。
他にやってみる事は？
このステップはほとんどやる事はありませんが、これだけで終わらせてしまうのはもったいのでもう少し体験する事を増やしてみるのが、学習の効果を上げる秘訣です。
例えば、
＊ h2,h3,h4,h5,h6 のタグを試してみる
＊ 「Hello Workd!」の文字を別の文字に変えてみる
＊ もう少し HTML を書いてみる
などをすると良いと思います。結果は想像できるかもしれませんが、実際に変えてみて、「どう変わるかを見る」のは学習する上でとても効果的です。
他の HTML 例として以下のような記述も試してみてください！
<template>
<h1>Vueのチュートリアル ステップ１</h1>
<p>
HTMLの記述をVueを利用して表示させる練習
</p>
</template>
（＊）「p」は本文を書く時などに利用する HTML のタグです。これもよく使います。
まとめ
今回は、Vue の公式サイトにある公式チュートリアルを利用して、Web 開発の学習を進める例を紹介しました。ステップ１でやる事は実は殆どないのですが、それだけで終わりにしないで、少し検索などをして何を学習すればよいか「考える」のが効果的に学習を進めるポイントです。
HTML その物を知らなくても、「出てきた時点で調べて学ぶ」事をすれば、知らなくても問題はありません。このステップだけで、初めて学習する人でも、沢山の新しいことを学習できることがわかるかと思います。また、「出てきた時点」で必要な事を学習するので無駄がないこともお分かりかと思います。
これから Web 開発を学習しようと考えている方、是非この後の連載もお読みいただけたらと思います。
