すべてのカテゴリ

Vue 公式チュートリアル　〜　スロットの使い方？Vue の公式チュートリアルを使った、Web 開発の学習例もステップ１４まで来ました。このチュートリアルはこれで基本的に最後です。ステップ１４では、スロットの使い方を学習します！前回までのポイントはポイントは？これまでの学習をまとめると大きく分けて二つです。＊　基本的な Vue の部品の記述方法＊　Vue の部品の基本的な使用方法　です。基本的な Vue の基本的な記述方法は、メインのページでも、呼び出される側の「部品」でも同じでした。 基本は、HTML の部分で表示の基本的な構成を作って、Javascript で表示に使うデータを管理・処理します。これに加えて、CSS で表示の「飾り」をするという構成です。これをベースに、HTML、Javascript、CSS の連携のやり方に加えて、部品を呼び出す方（親）と呼び出される部品側（子）の間でのデータのやり取りのやり方を学んできました。これまでの、13 のステップで基本的な書き方をカバーして来ました。こうした基本を改めて振り返っって見てください。今回学ぶのは？今回学ぶのは、「スロット」の使い方です。 「スロット」を使うと、部品の呼び出し元（親）から、「部品」（子）にデータを渡す事ができます。まずは、変更前のコードを見てみます。(App.vue)<script>import ChildComp from "./ChildComp.vue";export default {  components: {    ChildComp,  },  data() {    retu

Vue 公式チュートリアル　〜　部品からデータを渡すVue 公式チュートリアルのステップ 13 は、「部品」の方から呼び出し元（親）にデータを渡す方法を学習します。前回までのポイントは？ステップ１０までは、基本的に、 「Vue の部品」の基本的な記述の仕方を中心に学習しました。 ステップ１１からは、メインのページから別に作成した「部品」を呼び出す方法を学習しています。記述の仕方は基本的に同じですが、ポイントは、「部品」を呼び出す側（親）と呼び出される側（子）の間でのデータのやり取りです。前回のステップ１２では、呼び出し側から「部品」にデータを渡すやり方を学習しました。呼び出し側と、呼び出される方の両方に記述が必要でした。今回学ぶのは？ステップ１３では、前回とは反対に、呼び出される側（子）から、呼び出し側（親）にデータを渡す方法を学習します。まずは、変更前のコードです。(App.vue)<script>import ChildComp from "./ChildComp.vue";export default {  components: {    ChildComp,  },  data() {    return {      childMsg: "No child msg yet",    };  },};</script><template>  <ChildComp />  <p>{{ childMsg }}</p></template>これが、呼び出し元（親）のコードです。特に新しい点は

Vue公式チュートリアル　〜　部品にデータを渡すVue の公式チュートリアルを使ってゼロから Web 開発の学習をする方法を紹介しています。今回は、メインのページから呼び出す「部品」にデータを渡す方法を学習します。前回までのポイントは？前回のステップでは、これまで学習に使っていたメインの部品（ページ）から新たに作成した部品を呼び出す方法を学習しました。 これまで、学習した基本的な「書き方」は、Vue で使う「部品」を作る場合には同じ容量で使う事ができます。つまり、これまで学習した事が使いこなせるようになれば、「部品」を作ることに役立てることができます。そこで、改めてこれまで学習した「Vue の部品の基本」をもう一度見直してみてください。今回の学ぶのは？今回、学習するのは既に書いていますが、作成した Vue の「部品」を呼び出す際にデータを渡す方法を学習します。なぜ部品にデータを渡す事ができると、部品が使いやすくなるからです。例えば、ページの先頭に書く情報（ヘッダーと呼ばれる場合もあります）に例えばアプリのタイトルをこの部分に入れたい場合です。 部品にデータを渡せない場合は、部品の中でタイトルのデータを作る方法になります。しかし、この場合は、アプリごとに「別の物」になってしまいます。 部品を呼び出す際にデータを渡せれば、同じ部品を利用する事が可能になります。Vue は、そうした事を考慮して、部品にデータを渡す機能をサポートしています。このステップではそれを学習します。今回の変更前のコードです。(App.vue)<script>import ChildComp from

Vue 公式チュートリアル　〜　「部品」を呼び出す！Vue の公式チュートリアル、ステップ 11 は、これまでは一つの大きな「部品」を扱ってきました。このステップでは、別の「部品」を作成して、呼び出すと言う使い方を学習します。どちらかというとこちらの方がよく使う方法です。前回までのポイントは？前回までは、メインの表示部分だけを作って、その「部品」を表示するという課題でした。 メインの表示部分の部品を作る基本を中心に、その書き方を学習してきました。これは、部品の作り方の基本をカバーしているので、別の部品を作る場合にも利用できます。今回学習するのは？今回学習するのは、新たに「別の部品」を作成して、「メインの表示部分で使う」やり方を学習します。例によって、変更前のコードから見ていきましょう！今回は二つの部分に分かれています。 コードが表示されている右側の画面の上にファイルの名前が書かれています。 今回扱うのは、メインのページの部品の「App.vue」ともう一つの部品「ChildComp.vue」の二つです。（App.vue）<script>export default {  // register child component};</script><template>  <!-- render child component --></template>　今まで学習してきた、「メインのページ」の「部品」です。 現時点では、基本的に何もない状態です。（ChildComp.vue)<template>  <h

Vue 公式チュートリアル　〜　変数の変化をチェックするVue 公式チュートリアルのステップ 10 は、変数の状態が変わるのをチェックする方法です。Javascript の変数を表示に使う場合、変数が変わったら表示も更新したい場合が多くなります。そういう場合のやり方です。前回までのポイントは？Vue の公式チュートリアルもステップ 10 まで来ました。 何となく Vue で、Web ブラウザに表示させるやり方がわかってきたのではないかと思います。 ステップ９までで、基本的な Vue の部品の書き方がわかって、HTML と Javascript、HTML と CSS、CSS と Javascript の連携のやり方も一部は体験しているので、あとは「回数」を増やして実際に使えるようになる様な練習が必要になってきます。今回のポイントは？ステップ１０では、新しいポイントがいくつかあります。まずは、変更前のサンプルコードを見てみましょう！<script>export default {  data() {    return {      todoId: 1,      todoData: null,    };  },  methods: {    async fetchData() {      this.todoData = null;      const res = await fetch(        `h t t p s://jsonplaceholder.typicode.com/todos/${this.todoId}`      );      this

Vue 公式チュートリアル　~ Vue の部品の状態とテンプレートのリファレンス今回は、今までとは違ったステップです。Vue の仕組みを理解するには意味のある内容ですが、初めて Vue を学習する人には、知識として覚えておけば十分です。では、早速内容を見てみましょう。前回までの復習Vue の部品の書き方の基本を使って、少しプログラムらしい例として、「やる事の一覧を管理」をするための、シンプルなアプリを前の二つのステップで学習しました。ちょっとしたアプリにしたので、初めて、HTML や Javascript を学習している人には、ちょっと学習する項目が多くなっていました。 今回の、ステップはシンプルなので、時間が許すようならば、前回までの復習を今一度やってみてください！今回学ぶのは？今回学ぶのは、「Vue の部品」の状態と、HTML の記述（template のタグの部分）で利用できる「リファレンス」の使い方です。「Vue の部品」は、Vue の中で「部品が作られる（準備される）」状態から、Web ブラウザで表示できるような状態に「組み込まれた状態」など、いくつかの違った「状態」があります。この「状態」によって、実際に表示される内容が微妙に違ってきます。変更前のコードです。<script>export default {  // ...};</script><template>  <p ref="p">hello</p></template> この変更前のコードだと、HTML の部分（template の部分

Vue 公式チュートリアル　〜　処理したデータを表示に使うVue 公式チュートリアルのステップ８は、予め処理したデータを表示に使う方法を学習します。Javascript のプログラムで持っているデータは、「生」のデータの場合が多く、実際の表示をする際には、そのデータを「加工」して利用したい場合が、たくさんあります。そうした場合の処理の仕方を学習します。前回までのポイントは？一通り、Vue の「部品」の基本的な、書き方がわかったところで、前回のステップ７からは、プログラミング的な要素が増えてきました。前回の、チュートリアルのタイトルは、「データの一覧表示」がテーマでしたが、実際は、HTML や Javascript で新しい部分がたくさん出てきました。＊　配列（array）という同じ形のデータをまとめて扱うためのデータの型が出てきました。＊　「＠keyup.enter」は、リターンキーが押された場合の処理を HTML の部分に書くやり方です。＊　「v-for」は、配列（array）のデータの一覧を表示するための、繰り返しなるような表示の HTML の書き方です。＊　処理を行うメソッド（関数）に値を渡すやり方も出てきました。「filter()」というメソッド（関数）を使うと、配列（array）の要素を選ぶことができます。＊　「++」という「１を加える」という演算子が出てきました。＊　HTML の記述で「箇条書き」を行うやり方が出てきました。（「ul」と「li」のタグ）　と実際の内容では、新しく学習した項目が多いステップでした。この他にも、以前のステップで出てきた書き方が使われていた

Vue 公式チュートリアル　〜　データの一覧を表示するVue 公式チュートリアル　〜　データの一覧を表示するVue の公式チュートリアルのステップも、ステップ７まできました。だんだん、プログラミングの要素が入ってきてプログラミングの学習らしくなってきました。このステップでは、データの一覧を表示する方法を学習します。前回までのポイントは？前回までに、Vue の表示で使う「部品」の基本を中心に、HTML、CSS、Javascript の簡単な書き方と、連携のやり方を学んできました。 前回は、Javascript のプログラムの条件で表示を変える方法を学びました。Vue では、HTML の方にも「プログラム」のような記述ができるのが特徴の一つです。標準の HTML には、ない書き方を中心に覚えていく必要があることがだんだんわかってきたと思います。今回学ぶのは？今回学ぶのも、HTML の中にプログラムのような書き方をするやり方です。 今回は、同じようなデータの集まり、プログラムでは配列（array）の中に入っているデータをまとめて表示するやり方です。例題では、「todo（やる事）」の一覧を表示するという内容になっています。<script>// give each todo a unique idlet id = 0;export default {  data() {    return {      newTodo: "",      todos: [        { id: id++, text: "Learn HTML" },        { id: id++,

Vue 公式チュートリアル　〜　条件によって表示を変えるVue 公式チュートリアルのステップ６は、Javascript の条件によって表示の内容を変える事を学習します。前回までのポイントは？前回までに、Vue の表示に使う「部品」になる、「*.vue」ファイルの基本の三つの部分、「template」、「script」、「style」の書き方を学習しました。そして、Javascript と HTML、HTML と CSS の連携についても少しづつ学習しています。HTML、Javascript、CSS の基本の書き方は、それぞれの標準的な書き方に「近い」書き方です。しかし、実際には、「Vue 独特の書き方」があります。特に、HTML の細かい書き方は、微妙に違っています。そう考えると、初心者が混乱を避けるには、直接 Vue 独特の書き方をその都度学習するのは、意外に効果的かもしれません。今回学ぶのは？今回のステップ６の課題は、ボタンを押す度に表示する内容をプログラムで変えるやり方です。これが今回の変更前の課題のコードです。<script>export default {  data() {    return {      awesome: true,    };  },  methods: {    toggle() {      // ...    },  },};</script><template>  <button ＠click="toggle">toggle</button>  <h1>Vue is

Vue 公式チュートリアル〜入力された値を表示に使うVue 公式チュートリアルのステップ５では、入力フォームに入力した文字を表示に反映させる方法を学習します。前回までのポイントは？例によって、まずは前回までの復習です。 これまで、Vue の「部品」である、「.vue」ファイルの書き方を学習してきました。 HTML/CSS/Javascript の三つの部分から、Vue の表示の部品である「.vue」は、構成されています。それぞれの、基本の書き方と、ボタンを作成して、ボタンをクリックした場合の処理のやり方を前回までに学習しました。特に前回は、ボタンをクリックしたという「利用者の操作」をイベントとして検出して、それに対応した処理（メソッド／関数）を呼び出す方法を学習しました。これには、Vue 特有の HTML の書き方と、Javascript との連携が必要になります。 こうした書き方には、基本的な決まりがあるので、それを覚えれば Vue の色々な機能を使えるようになります。今回学ぶのは？今回のステップ５で学ぶのは、文字を入力する入力フィールドに入力された文字を、表示に反映させるやり方です。最初に示されているコードは以下の通りです。<script>export default {  data() {    return {      text: "",    };  },  methods: {    onInput(e) {      this.text = e.target.value;    },  },};</script><template&

Vue でボタンをクリックした時の処理Vue 公式チュートリアルのステップ４です。このステップでは、Web ブラウザ上に作成した「ボタン」をクリックした時の処理を学習します。前回までのポイントをもう一度例によって最初は、前回までの復習です。 前回までに、Vue の「部品」を記述するファイル「.vue」は、HTML・CSS・Javascript の記述を書く部分に分かれています。＊　HTML は、「template」のタグの部分に記述します。＊　CSS は、「style」のタグの部分に記述します。＊　Javascript は、「script」のタグの部分に記述します。　Vue では、この三つの部分をうまく連携させて、色々な機能を実現しています。 特に、HTML の部分は、標準の HTML の書き方とは、若干違う部分もあるので、その辺りを意識しながら、Vue 独自の書き方をマスターする必要があります。これまでは、この三つの基本部分を使った例と、簡単な連携を学習してきました。今回学ぶのは？今回は、HTML と Javascript の連携で、新たに「ボタン」を使った事例を学習します。 ボタンをクリックする度にボタンに表示されている数字を１づつ増やして表示をするという機能を実現します。以下のコードが変更を加える前のコードです。<script>export default {  data() {    return {      count: 0,    };  },};</script><template>  <!-- make this bu

Vue の公式チュートリアル　表示する文字に色をつけるVue の公式チュートリアルの第３回目です。ステップ３では、表示する文字に色を付けるやり方を学びます。これまで、Vue の「部品」のファイル「.vue」ファイルに HTML と Javascript を埋め込むやり方を学んできました。今回は、CSS を使って文字に色をつけます。前回までのポイントをもう一度まずは、前回までの復習です。 Vue の「部品」として表示する内容をまとめたファイルが「.vue」ファイルです。 このファイルには、三つの部分があります。＊　HTML を書く部分：「template」のタグの部分に書きます＊　Javascript のプログラムを書く部分：「script」のタグの部分に書きます＊　CSS を書く部分：「style」のタグの部分に書きます。　Javascript で、表示に使うデータを指定することもできます。 Vue のフレームワークでは、標準の HTML とは少し書き方が違っています。また、Javascript も特有の書き方で書くので、まずは標準的な書き方を覚えてしまう方法で学習を進めます。今回の学ぶのは？ステップ３で学ぶのは「表示する文字に色をつける」やり方です。標準的な HTML の文字も CSS を使うと、「体裁（見た目）」を整える事ができます。Vue でも、同じコンセプトで、表示のデータの「体裁（見た目）」を整える事ができます。これまでの復習で書いた通り、Vue の部品の「.vue」ファイルの中は、三つの部分から構成されていて、HTML/CSS/Javascript を記述できます。

Vue の公式チュートリアル　表示内容をプログラムで決めるVue の公式チュートリアルのステップ２です。このステップでは、Javascript のプログラムから表示に使うデータを決める方法です。前回のポイントは？ステップ２を始める前に、前回のステップ１の内容を簡単に復習しておきます。前回のポイントは、基本的な HTML の記述を Vue で表示させる方法でした。<template>  <h1>Hello World!</h1></template> のように、「tempalte」のタグの間に表示させたい文字を書けば良いだけでした。 あとは、Vue が勝手に処理して表示してくれます。「.vue」ファイルには、「template」の他に、「script」のタグには、Javascript のプログラムを、「style」のタグには CSS の記述を書くことができます。 あとは、少し HTML のタグを幾つか学習しました。今回学ぶのは？ステップ２では、表示に使うデータを Javascript のプログラムで決めるやり方です。こうすることで、プログラムで処理したデータを Web ブラウザで表示する事ができるようになります。このステップでは、その前段階で Javascript で設定した値を表示する方法を学習します。「.vue」ファイルの構造はステップ１で学習した通りです。今回は、「template」のタグ以外に、「script」のタグに Javascript のプログラムを書きます。<template>   <h1>H

Vue の公式チュートリアル（ステップ１）をやってみる！フロントエンドのフレームワークの学習を通して、Web 開発の基本をマスターする実施例として、Vue の公式サイトにあるチュートリアルをやってみるという連載を紹介する事にしました。初めて、Web 開発のプログラミングの学習をされる方是非見てみてください！Vue の公式チュートリアルフロントワークのフレームワークを最初に学習するスタイルで Web 開発に必要なプログラミングを学ぶ実施例として、Vue の公式チュートリアルを使った学習例を紹介してみる事にしました。このチュートリアルは、Vue の公式ベージの一部として紹介されている物です。（日本語版のサイトはサイトはサイトはこちら）日本語のサイトは英語のサイトと同じではないようです。（2022 年 2 月現在） 英語のサイトの公式チュートリアルを見た感じでは、初心者の学習には良さそうなので、これを元に学習する初心者のための記事を少し連載の形で書いてみることにしました。全部で 14 のステップになっていて、一つづつ学習した場合、14 日間で基本をマスターできる事になるので興味のある独学者はやってみると良いと思います。チュートリアルの形式は、画面の右側に、コードを入力できる部分と、その結果を表示する部分が作られていて、一番最初は開発用の PC などに設定する事なく学習できるのも魅力です。まずは、このオンラインでコードを入力しながら学ぶというスタイルでやってみる方法を紹介します。最初の課題は？最初の課題はシンプルに、単純な HTML の記述を Vue の部品として表示させるというシンプ