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

ホーム ブログ Firebase情報 Reactで入力フィールドの文字を表示する 2022年5月31日 React で入力フィールドの文字を表示する ステップ５では入力フィールドに入力された文字を Reactde 表示する方法です。これも、React と Vue では若干違ったやり方になります。この記事では React で実現する二つの方法を紹介しています。 リファレンスを使う方法 Vue では「v-model」という方法を使って、入力フィールに入力された文字と変数を結びつけていました。（binding）React でも似たような機能としてリファレンス（reference）ができます。 import React, { useState } from "react"; import "./styles/step5.css"; export default function Step5(): JSX.Element { const fieldValue: React.RefObject<HTMLInputElement> = React.createRef<HTMLInputElement>(); const [value, setValue] = useState(""); return ( <React.Fragment> <div className="step5"> <input type="text" ref={fieldValue} onChange={() => getValue()} /> <p>{value}</p> </div> </React.Fragment> ); function getValue(): void { if (fieldVa

ホーム ブログ Firebase情報 Reactでイベント処理を行う 2022年5月26日 React で表示する文字に色をつける！ Vue の場合も表示する文字に色をつけるために、CSS の記述が必要でした。React でも同じように CSS の記述が必要です。React の場合は、別のファイルに CSS を記述して「部品」のファイルである、「 xxxx.tsx 」でインポートする方法を使います。 CSS で記述すれば簡単！ 前回の連載の Vue 公式チュートリアル（英語版） をご覧になった方ならば、今回の課題は簡単です。同じように CSS を記述すれば簡単に実現できます。 今回のステップ３の実装例です。 import React from "react"; import "./styles/step3.css"; export default function Step3(): JSX.Element { const titleClass: string = "title"; return ( <div className="step3"> <h1 className={titleClass}>Make me red</h1> </div> ); } この「部品」の記述は、「Make me red」を Web ブラウザで表示するための、HTML に対応する部分(JSX)を作っています。実際に文字を赤くするのは、HTML に対応する部分（JSX）に CSS で装飾を指定するためのタグ（className）をつけて、CSS ファイルで指定します。 今回は、「 ./styles/step3.css 」をインポートしています。 .title { color: red; } これで文字は赤くなります！ 今回のポイントは？ 今回のポイントは、「文字を赤くする」というのが課題ですが、幾つか他にも理解しておくと役に立つことが

ホーム ブログ Firebase情報 Reactでイベント処理を行う 2022年5月29日 React でイベント処理を行う React のチュートリアルの第４回目は、 Vue の公式チュートリアル（英語版） と同じで、「ボタン」をクリックしたイベントを検出して処理を行う例です。この例では、ボタンをクリックする度にカウンターを１づつ増やして行く処理を行うやり方を紹介しています。 React と Vue では少し考え方が違う！ Vue の公式チュートリアル（英語版） で同じような課題を紹介していますが、Vue の場合は、単に Javascript の部分で変数を宣言して、その変数に対する処理を実装するだけでしたが、React の場合は少し考え方が違います。 React の場合には、「 特別な変数 」を作って、その変数に対する処理を行います。これが大きな違いです。 このように実装しないと、変数の値が更新されても表示が更新されないような仕組みになっています。 特別な変数は、「useState()」を使って宣言する！ React の場合には、この 特別な変数 は、  useState() という関数を使って宣言します。 今回は、クリックされた回数を数える変数「 count 」を使いますが、変数の宣言は以下のように行います。 const [count, setCount] = useState(0); count: クリックされた回数を示す変数の名前 setCount: 変数を更新する関数の名前 これで、指定された関数で変数を更新するような形で実装します。 変数の宣言もこの二つをペアにする形で行います。さらに、「useState(0)」で変数の初期値を設定します。 以下が今回の課題を実装した例です。 import React, { useState } from "react"; import "./styles/step4.css"; export default function Step4(): JSX.Element { const [co

ホーム ブログ Firebase情報 Reactで変数を表示する！ 2022年5月24日 React で変数を表示する！ React のフレームワークを利用して、Vue の公式チュートリアルと同じことをやっています。二回目は、Javascript の変数を表示する方法です。あまり Vue と変わりません！ Javascript の変数 Vue では HTML、CSS、Javascript を記述する場所が、 xxxx.vue ファイルのタグで決められていました。React で Typescript を利用する場合には、 xxxx.tsx というファイルがこれに相当するファイルになりますが、基本的にこのファイルは、 Typescript を記述するファイル です。 したがって、普通に Typescript の変数（定数）を作れば良いだけなので簡単です。 Tαypescript で書いているので、変数（定数）の型名を明示的に書くとコンパイル時に、変数（定数）を利用する際の型のチェックをしてくれるので、実際にプログラムを実行する前にミスを見つける事ができます。 今回の例では、「count」という定数を作って表示させているので、変数の宣言は const count: number = 0; のように行います。この定数の型は数値（number）なので、その型を宣言しておくと、プログラムでこの定数を使う際にチェックしてくれます。この例では、使うのは表示の部分のみなのであまり、大きなメリットはありませんが、例えば、この定数を関数に渡したりする場合には、関数側の型と一致しているかをチェックしてくれるので、型が違っている場合には、コンパイル時にわかるという仕組みです。 ステップ２のコードの例 以下のコードがステップ２のコードの例です。 定数「count」を「Hello World!」の下に表示する例です。 前回の、ステップ１と同じように、CSS は別のファイルに書いてインポートしています。 // src/tutorial/step2.tsx import React from "react

ホーム ブログ Firebase情報 ViteでRactのプロジェクトを作成する 2022年5月22日 Vite で Ract のプロジェクトを作成する Vue のフレームワークを中心にお届けしてきましたが、React でやったらどうなるのというお問い合わせも多いので今回は、これまで Vue で紹介してきた事を React でやったらどうなるかということで、React の実施例をお届けします。 アメリカでは React の方が主流 Vue は便利なフレームワークで初心者でも React に比べると少しですが入りやすいという利点があります。しかし、アメリカの開発現場では React の方が利用されるケースも多く求人も多くなっています。 そこで、今回は、これまで Vue で紹介してきた事を React のフレームワークを使って書くとどんな感じになるかを紹介していく事にしました。 Vue の際は、Javascript を利用するケースを中心にお伝えしてきましたが、今回は、アメリカの開発現場で React と組み合わせて利用される事の多い、Typescript でプログラムを書く方針でお届けしていきます。 Typescript を利用する理由 Typescript は Javascript の拡張版です。記述自体はとても似ています。Typescript が利用される理由は、Javascript に比べると変数の「型」の制約が厳格で、大きなプロジェクトなどで、複数の人が開発に関わる場合、インターフェースなどをより厳格に決める事ができることを初め、コードを管理する上で型が厳密に管理されるので有利など幾つかの理由が挙げられています。 Typescript で記述されたコードはそのままでは、Web ブラウザなどで実行できないので、コードをコンパイルして Javascript の記述にして利用します。 Javascript との混在が一応可能になっているので、徐々に移行することも可能です。しかし、今回の連載では最初から Typescript を利用する前提で紹介していきます。 したがって今回の連載の

ホーム ブログ Firebase情報 Vue CLIを使った場合の環境変数 2022年5月19日 Vue CLI を使った場合の環境変数 これまで、Vite で Vue のプロジェクトを作成した場合の環境変数の扱い方を紹介してきました。しかし、Vue のプロジェクトを作成する際に、Vue が提供している「Vue CLI」を利用している方もたくさんいらっしゃるようなので、この記事では、Vue CLI でプロジェクトを作成した際の環境変数の扱いについて紹介しておきます。 なぜやり方が違うか？ Vue の中で使う環境変数なのに、なんでやり方が違うか不思議に思われる方も多いと思います。まずは簡単になぜやり方が違うのかを簡単に説明しておきます。  npm などのパッケージ管理アプリを利用して、Vue などのフレームワークを利用する場合には、作成したアプリを公開するためのイメージを作る仕組みが必要です。この仕組みが、Vue CLI だったり Vite というように違うの一番の理由です。 インターネットに公開する際は、作成したアプリを HTML と Javascript、そして CSS のファイルにして Web ホスティングをする Web サーバーにコピーする必要があります。開発用のサーバーの場合でも同様で、Web ブラウザでアプリを動作させるためには、基本的に Web ブラウザが扱える「形」にする必要があるためです。 その仕組みが違うので、環境変数の扱い方も違っています。 Vue CLI で環境変数を利用する場合は？ Vite でプロジェクトを作成した場合には、環境変数を「 .env 」というファイルで、最初に「VITE＿」をつけて、「VITE_XXXX」のように記述して、Javascript のプログラム側では「import.meta.env.VITE_XXXX」のように呼び出します。 Vue CLI でプロジェクトを作成した場合も、やり方自体は似ています。 環境変数のファイルは基本的には同じ「 .env 」 環境変数の最初（prefix）は「VUE APP 」をつける(例：VUE_APP_

ホーム ブログ Firebase情報 VueとViteの環境変数でFirebaseのプロジェクト情報を設定する！ 2022年5月17日 Vue と Vite の環境変数で Firebase のプロジェクト情報を設定する！ 前回の記事では、環境変数の基本的な使い方を紹介しました。今回は、Firebase のプロジェクト情報を環境変数で扱う具体的な方法を紹介します。 Firebase のプロジェクト情報 Firebase を利用するには、Firebase のプロジェクト情報を使って、Firebase を使うための初期設定が必要になります。Vue や React などのフレームワークを利用する場合には、 npm などのパッケージマネージャを利用する場合が多いと思いますが、その場合は、Javascript で Firebase の初期設定を行う際に Firebase のプロジェクト情報を使います。 直接コードに埋め込む事もできるので、プログラムを再利用したり配布したりしない場合にはこの方法でも問題ありません。しかし、プログラムを再利用したり、配布・公開する場合には、特定の Firebase の情報をそのまま拠有するのはセキュリティ上余り好ましい事ではありません。 もちろん、フロントエンドから Firebase を利用する場合には、いずれにしてもプロジェクト情報はソースコードの一部になるので、Web ブラウザを利用すれば取得できるわけですが、それでも、プロジェクト情報は共有しない方が無難です。 また、再利用する方でも、プログラムのコードを変更するよりは、環境変数として設定する方が、間違いも少なく安全です。 環境変数を利用した Firebase の初期化のコード では、早速 Firebase のプロジェクト情報を環境変数として設定する方法を紹介します。 Firebase コンソールから取得できる Firebase のプロジェクト情報は以下のようになっています。 環境変数を利用しない場合には、このコードをコピーしてそのまま利用すれば良いだけです。 // Import the functions