シリコンバレースーパーウエア

ホーム ブログ Firebase情報 Vue公式チュートリアル ~入力された値を表示に使う！ 2022年2月20日 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> <input :value="text" @input="onInput" placeholder="Type here" /> ...

ホーム ブログ Firebase情報 Vueでボタンをクリックした時の処理 2022年2月17日 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 button work --> <button>count is: {{ count }}</button> </template> ポイントは二つです Javascript で「count」という変数を作っています。初期値は「０」です。 ...

ホーム ブログ Firebase情報 Vueの公式チュートリアル 表示する文字に色をつける 2022年2月15日 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 を記述できます。 <template>HTMLの記述</template> <script> Javascriptのプログラム; </script> <style> CSSの記述 </style> では、ステップ 3 のサンプル...

ホーム ブログ Firebase情報 Vueの公式チュートリアル 表示内容をプログラムで決める 2022年2月13日 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>HTMLを書く部分</h1> </template> <script＞ // Javascriptのプログラムを書く部分 </script> このステップで学ぶ Javascript の記述です。 <script...

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