すべてのカテゴリ

React と Firebase でブログサービス〜ファイルのアップロード編React と Firebase を組み合わせて利用する例として、ブログサービスを作ってみる事にしました。一度に全部紹介するのは難しいので連載という形で紹介していきます。最初は、ブログの記事をインターネット上にアップロードする機能から紹介していきます。まず最初は投稿の機能ブログサービスで必要になる機能に、記事を投稿する機能が必要になります。 今回は、ブログの記事の原稿となるファイルをインターネットにアップロードする機能について紹介します。 Firebase を利用する場合、データベースに記事を保存する方法もありますが、今回は記事の原稿のファイルそのものを Firebase のストレージに保存する方法を採用しようと考えています。どのようなファイルをブログの原稿にするかを決める必要がありますが、まずは、ファイルを Firebase のストレージに保存する機能が必要です。この記事では、Firebase のストレージにファイルを指定したファイルをアップロードする機能について考えてみました。ファイルの指定まずは、アップロードするファイルを選択する機能が必要です。 ファイルを選択するフォームを作成します。HTML の「input」タグを使ってファイルを選択して、ファイルをアップロードする処理を呼び出すような UI です。 ファイルは、Firebase ストレージの「test」というフォルダの下にアップロードするようになっています。(post.tsx)の例export default () => {  retu

React の「部品」のライフサイクルとリファレンスReact でも、表示に利用する「部品」にはライフサイクルがあります。Vue の公式チュートリアル（英語版）では、この「部品」のライフサイクルをリファレンスの機能を使って体験するステップがありました。React でも似たようなやり方で同じような機能が実現できます。React の表示の更新の例外これまで紹介してきたように、React で表示データが更新に合わせて表示も更新する場合には、「ステート」を利用して管理するのが基本です。 今回取り上げるれでは、例外的にステートを利用しないでも表示の更新ができる例です。import React, { useEffect } from "react";import "./styles/step9.css";export default function Step9() {  return (    <React.Fragment>      <div className="step9">        <p>hello</p>      </div>    </React.Fragment>  );} Vue のチュートリアルと同様に、最初は、単純に「hello」を表示するように、直接、HTML に相当する部分（JSX)に「hello」を書いて表示させています。当然、表示は、「hello」が表示されます。この記述を変更して、HTML に相当する部分で指定した、「hello」を「mounted!」に上書きします。 やり方は

SPAページに特化したJavascriptのライブラリのReact。今回はコンポーネントやJSXの学習と復習もかねてポートフォリオを制作しています。私がReactで便利だなとおもうことは以下の事が挙げられます。1. 再利用性再利用性は、ポートフォリオサイトのコンポーネント設計において大きな利点を提供します。Reactコンポーネントは独立した部品として設計されるため、同じレイアウトやデザイン要素を何度でも使い回すことができます。例えば、ナビゲーションバー、フッター、プロフィールカードなど、ポートフォリオの多くのセクションで同じデザインを繰り返し使用することができます。具体的な例としては：共通部分の再利用：ヘッダーやフッターなど、全ページで共通して表示される部分をコンポーネントとして切り出し、一度作成すれば複数ページで再利用できます。これにより、コードの重複を減らし、保守性を向上させることができます。プロジェクトカード：ポートフォリオ内で複数のプロジェクトを表示する際、同じデザインのカードコンポーネントを再利用できます。プロジェクトごとの内容（タイトル、説明、リンク）を異なるプロパティ（props）として渡すことで、同じコンポーネントで異なる情報を表示できます。再利用性により、コンポーネントの作成が効率的になり、変更が必要な場合も一箇所で修正すれば、全てのインスタンスに反映されるため、手間が大幅に減ります。2. 宣言的なUI宣言的なUIとは、アプリケーションがどのように表示されるかを状態に基づいて記述する手法です。Reactでは、状態が変わると自動的にUIが再描画されます。ポートフ

▼こんな方へオススメ ・既存の古いサービスを最新の技術で作り替えたい ・自社サービスをサブスク化して収益事業にしたい ・Excel、Access等の業務システムをWebアプリ化したい ・開発だけではなく業務知識も持っている開発者に依頼したい ・前任者がいなくなったため引き継ぎをお願いしたい ・アイデアはあるが開発が未経験なのでどのように依頼すればいいかわからない 他にあれば付け加えてください ▼ご提供内容 Laravel・ReactまたはLaravel・VueによるWebアプリ・Webサービスの開発を行います。 ・設計、実装、テスト ・データベース連携(MySQL、PostgreSQL、Firebase、Redis) ・ソース管理(SVN, Github) ▼ご購入後の流れ ①ヒアリングや資料にてお客様の現場やご要望を聞き取り致します。 ②要件洗い出しを行い設計、イメージをご提案します。 ③お見積りをご提示します ④問題なければご契約・仮払いまで行って頂きます。 ④開発・テストを行います。 ⑤納品 ⑥問題なければ完成 ▼料金プランやオプション 画面の複雑さ（低・中・高）と画面工数の多寡（少・中・多）により金額と期間の見積もりを行いますが、長期的パートナーが前提の場合は柔軟な対応可能です。 ▼納期 開発スピードはかなり早い方だと自負しています。 納品日までに確実に対応することが可能です。 また全納期までの期間の70～80%以内に開発を完了し、テスト期日を十分に保証します。

React でイベント処理を行うReact のチュートリアルの第４回目は、Vue の公式チュートリアル（英語版）と同じで、「ボタン」をクリックしたイベントを検出して処理を行う例です。この例では、ボタンをクリックする度にカウンターを１づつ増やして行く処理を行うやり方を紹介しています。React と Vue では少し考え方が違う！Vue の公式チュートリアル（英語版）で同じような課題を紹介していますが、Vue の場合は、単に Javascript の部分で変数を宣言して、その変数に対する処理を実装するだけでしたが、React の場合は少し考え方が違います。React の場合には、「特別な変数」を作って、その変数に対する処理を行います。これが大きな違いです。 このように実装しないと、変数の値が更新されても表示が更新されないような仕組みになっています。特別な変数は、「useState()」を使って宣言する！React の場合には、この特別な変数は、 *useState()*という関数を使って宣言します。 今回は、クリックされた回数を数える変数「_count_」を使いますが、変数の宣言は以下のように行います。const [count, setCount] = useState(0); ＊　count: クリックされた回数を示す変数の名前＊　setCount: 変数を更新する関数の名前　これで、指定された関数で変数を更新するような形で実装します。 変数の宣言もこの二つをペアにする形で行います。さらに、「useState(0)」で変数の初期値を設定します。以下が今回の課題を実装した例です。i

簡単にわかる Web サーバーの仕組み？Web サーバーはインターネットなどのネットワーク上で Web サイトのサービスを提供するためのサーバーです。「サーバー」という言葉はよく利用されますが、簡単に言えば「何かのサービスを提供する」という意味です。 Web サーバーの場合は、インターネットの Web サイトの仕事を提供する「物」ということになります。実際は、Web サイトのサービスを提供するためのシステム（コンピュータとソフトウエア）をまとめて Web サーバーと呼ぶ場合が多いようです。Web サイトの仕組みWeb サイトの仕組みを簡単に説明すると、Web サイトの情報を保存しているコンピュータとその情報をネットワークを通じて提供するためのソフトウエアで成り立っています。Web サーバーはネットワークを経由して送られてくる、Web ブラウザからのリクエストに対して、リクエストされたページ（これが URL と呼ばれる物です）の情報を提供するようになっています。このネットワーク上で Web ブラウザと Web サーバーでやり取りするための仕組みを「プロトコル」と読んでいて、Web サーバーの場合「HTTP」というプロトコルを利用しています。Web ブラウザが表示できるのは、「HTML」と呼ばれる方法で書かれた情報です。従って、基本は、要求された HTML の情報を渡すのが Web サーバーの仕事になります。HTML ファイルには、その体裁を記述した CSS ファイルや、画像（写真や動画、イラスト）のファイル、また Javascript のファイルなどが含まれているので、そうした情

React のリストの表示を条件によって変えるには？Vue の公式チュートリアル（英語版）のステップ８では、「Computed Property」で事前処理したデータを表示する課題があります。React ではどのようにするのかをこの記事で紹介しています。React の基本は Typescript!この連載では何回も触れていますが、React の表示の基本は全てプログラムです。つまり、Typescript (Javascript)で処理することになります。 したがって、Vue の「Computed property」のような概念はありません。 基本は、＊　表示の更新は、「ステート」を利用して管理する＊　データの処理は基本的に関数（method）を使う　この例では、前回に引き続き、「Todo(やる事)」の一覧の表示を、完了したものを表示するかしないかを切り替えるわけですが、元々のやる事リスト（todos）をステートで管理して、実際の表示は、条件によって選別したデータのみを表示するような形で実現します。したがって、「_filteredTodos()_」という関数で条件によって表示するデータを抜き出して、この関数が返すデータを表示するようにします。 ただし、「条件」が変わった場合にも、表示内容を更新する必要があるので、「条件」もステートで管理します。この場合の条件は、「_hideCompleted_」です。条件によって、表示データを選別する関数は以下のようになります。function filteredTodos(): Array<Todo> {  return todos.

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_」をインポートし

React が面倒な理由フロントエンドのフレームワークは、React と Vue がよく利用されています。どちらを学習した良いのかを迷う人も沢山いらっしゃいます。基本的に大きな違いはありませんが、React の方がやや面倒な部分があります。この記事では、React が面倒だと思う人が多い理由を紹介します。基本パッケージのコンセプト一番の大きな違いは、基本パッケージの考え方です。 簡単に言ってしまうのならば、React は Javascript の中に HTML に近い記述（JSX）を書けるようにしたパッケージという事です。 一方で、Vue の方は、フロントエンドの開発の基本的な仕組みという感じです。人によって表現の仕方が多少違っていますが、React の場合は、フレームワークというより、「ライブラリ」というような表現をする人がいます。こちらの方が、フレームワーク（仕組み）というより、React の実態に合っているのかもしれません。一方で、Vue の方は、フレームワーク（仕組み）に近いコンセプトになっています。これでも、まだわかりにくかもしれませんのよね？ もう少し、簡単に言うのならば、Vue は色々な機能が予め詰め込まれています。一方で、React の方は、色々な事をやるのには、外部のパッケージを追加していく必要があるという感じになっています。大きな違いは何処に？よく利用する機能で見てみると＊　データの一括管理（Redux / Vuex)＊　仮想 URL(React Router / Vue Router)　あたりが違います。データの一括管理は、複数の「部品」でデータを共有する

Firebase で React アプリをホスティングするFirebase のホスティングを利用して、作成した Web ページをインターネットに公開する方法は既に紹介しています。この記事では、React で作成したアプリを Firebase のホスティング機能を利用してインターネットに公開する具体的な方法を紹介しています。npm を利用して、React で開発する場合、「create-react-app」のスクリプトを利用して React のプロジェクトを作成すると、自動的に React のサンプルアプリを作成してくれます。このサンプルアプリには、公開用のイメージを作成するスクリプトが既に用意されているので、このスクリプトを利用して公開用のイメージを作成するだけで、あとは基本的な Firebase の管理コマンドを実行すれば、インターネットに簡単に公開できます。React アプリのサンプルプロジェクトを作成最初に React アプリのサンプルプロジェクト（テンプレート）を作成します。プロジェクトの作成には、「create-react-app」をインストールする必要があります。インストールしていない場合は、最初にインストールを行います。React を利用していろいろなアプリを開発する場合、頻繁に利用するので、システムレベルのインストールをすることをお勧めします。$ sudo npm install -g create-react-app　(*) Windows の場合は「sudo」は不要です。「npm install -g create-react-app」でインストールします。

Firebase ホスティングはプログラミングとの相性も抜群です！Firebase ホスティングは、LP との相性が良いことは既に紹介しましたが、勿論プログラミングとの相性も抜群です。Firebase の他の機能である、データベースやストレージと組み合わせて、React や Vue といったフロントエンドのフレームワークと組み合わせれば本格的な Web アプリケーションを短期間で開発する事が可能です。Firebase の他の機能との連携を考えると、一番相性が良いのは Web アプリケーションという事になります。React や Vue と連携する！React や Vue はフロントエンドのフレームワークと呼ばれる仕組みで、Web ブラウザで動作する UI などを作成するのに適した仕組みです。HTML/CSS と Javascript を組み合わせれば、特にフレームワークを利用しなくても Web アプリケーションを作成することは可能です。しかし、React や Vue などのフレームワークを利用すると、より効率的に UI を開発することができるので便利です。一方で、実際のデータなどの処理は Javascript で書くことになりますが、データを保存する必要がある場合は、通常は Web サーバー側で用意したデータベースなどを利用する必要があります。WordPress の場合は、Web サーバー側で、PHP のバックエンドサービスと、SQL データベースを利用してこうした機能を提供する仕組みになっています。Firebase を利用すると、こうしたバックエンドのサービスの機能やデータベー

昨日は「もりけん塾」でフロントエンドエンジニアを目指す方への勉強会でした過去最多の参加希望応募で盛り上がりました。定期的にやっていきたいと思います。ぜひ、自分のサービスをご購入くださいませ。一緒に頑張りましょう

Redux の罠React などでフロントエンドの開発をする場合、Redux を利用するとデータをページ間で共有できるので便利です。しかし、Web ブラウザが動作している PC のメモリを多く消費する場合があるので注意が必要です。Redux の活用React などの開発で、少し複雑なページ構成でフロントエンドのアプリやサービスを開発する場合、ページ間やコンポーネント間でデータの受け渡しが結構面倒になります。シンプルな場合は、パラメータを利用して渡せば良いのですが、ページやコンポーネントの関係が複雑になると結構大変です。そうした場合に利用されるのが Redux です。要はサービス（アプリ）全体でまとめてデータを管理する仕組みで違うページやコンポーネントから共通のデータにアクセスできるので便利です。React のフレームワーク自体はこうした、データをまとめて管理する機能がありません。従って、データをまとめて一元管理する場合は、外部のモジュールである Redux を利用する場合が多くなっています。設定が面倒な Reduxところが、Redux 自体は React とは別のモジュールになるので、慣れないと設定が面倒なので、初めて学習する方には厄介な代物として扱われる事が多くなります。一旦、設定の仕方と、データをやり取りする仕組みを理解して仕舞えばそれほど難しい物ではありませんが、必要な設定を行うファイルや仕組みがわかりにくいので初心者には何をしているのかがよく見えずに使いこなすのに苦労している方が多い様です。やっている事自体はシンプルで、データを更新する際には、「Reducer」と呼ばれ

▼こんな方へオススメ ・既存の古いサービスを最新の技術で作り替えたい ・自社サービスをサブスク化して収益事業にしたい ・Excel、Access等の業務システムをWebアプリ化したい ・開発だけではなく業務知識も持っている開発者に依頼したい ・前任者がいなくなったため引き継ぎをお願いしたい ・アイデアはあるが開発が未経験なのでどのように依頼すればいいかわからない 他にあれば付け加えてください ▼ご提供内容 Laravel・ReactまたはLaravel・VueによるWebアプリ・Webサービスの開発を行います。 ・設計、実装、テスト ・データベース連携(MySQL、PostgreSQL、Firebase、Redis) ・ソース管理(SVN, Github) ▼ご購入後の流れ ①ヒアリングや資料にてお客様の現場やご要望を聞き取り致します。 ②要件洗い出しを行い設計、イメージをご提案します。 ③お見積りをご提示します ④問題なければご契約・仮払いまで行って頂きます。 ④開発・テストを行います。 ⑤納品 ⑥問題なければ完成 ▼料金プランやオプション 画面の複雑さ（低・中・高）と画面工数の多寡（少・中・多）により金額と期間の見積もりを行いますが、長期的パートナーが前提の場合は柔軟な対応可能です。 ▼納期 開発スピードはかなり早い方だと自負しています。 納品日までに確実に対応することが可能です。 また全納期までの期間の70～80%以内に開発を完了し、テスト期日を十分に保証します。

はじめまして。イプシロンと申します。ココナラブログはじめました。まずは、自己紹介をします！！・・・と、言いたいところですが、自己紹介については、ココナラのプロフィールをご参照ください(笑)↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓https://coconala.com/users/2549559さて、このブログでは以下のカテゴリーに分けて、技術的なコラムや、独り言を徒然なるままに書いていこうかと考えています。①Excel/VBAに関するブログ②Reactに関するブログ③firebaseに関するブログ④コラム的なブログ※カテゴリーは今後変更するかもしれませんが、、、wなぜこのカテゴリーにしているかというと、、、好き！！！だからです。VBAに関してはプログラミングの基本的な構造を学びつつ、Excelを自動化したり、webスクレイピングをしたりと遊べる範囲が広いですし、Reactに関しては、コードにかなりクセがありますが、webアプリをサクサク作れる点に魅力を感じます。どちらの言語も習得するまでに私はかなり時間がかかりましたが、自分に対する備忘録的な意味合いも含めて、少しでも面白可笑しく綴っていこうかと思います！なお、私のサービスにもExcel/VBA、React/firebaseを利用したサービスを展開しておりますので、一度足をお運びくださいwExcel&VBAを活用したスクレイピングサービスになります。サイトの情報をExcelに抽出したり、入力したり、単純作業を自動化するサービスです。BUYMAのバイヤー様必見のサービスです。最近TVCMも放送していて盛り上がってきてますね！

少し簡単になった ReduxReact でデータを一括管理したい場合には、Redux を利用するのが一般的です。Redux は React 専用のデータ管理モジュールというわけではなく、Vue などでも利用可能な仕組みです。しかし、Vue の場合には、VUEX や Pinia などの使いやすいモジュールを利用するのが一般的です。VUEX や Pinia に比べると、Redux の設定は面倒で、初心者が躓くポイントの一つです。しかし、Redux Toolkit を活用すると、必要な設定も少なく、以前に比べると使いやすくなっています。React の基本の紹介が一通り終わったので、Redux Toolkit を利用した、Redux の活用法を何回かに分けてお届けします！React で Redux を利用するための設定Vue の場合は、Vue のプロジェクトを作成する際に、VUEX や Pinia を利用する設定を選択すると、必要な設定をやってくれる為、あとはデータと、その処理を記述すれば利用可能で、比較的簡単にデータを一括管理できます。一方で、React の場合、多くの場合は、自分自身でモジュールをインストールして必要な設定を行う必要があります。慣れてしまえば、それほど難しい物ではありませんが、初心者には何をやっているのか分かりにくいです部分も多く、Vue で利用する、VUEX や Pinia に比べるとハードルが高いと言われていました。実際に必要な設定は大きく分けて以下の三つの設定です：＊　ストア（store)の作成＊　アクション(action)の定義＊　各アクションに対応した、ス

React のスロット機能Vue では、スロットを使って「親」の部品から、「子」の部品にデータを渡す事ができます。React でも似た様な機能を使うことができます。この記事では、React のスロット機能の使い方を紹介します。スロットとは？HTML のタグで囲まれた部分です。<h1>スロット</h1> この例では、「h1」のタグで囲まれた「スロット」の部分です。 この部分のデータを呼び出している「部品」（子）に渡す事ができます。Vue の場合には、呼び出される側の部品（子）の方で、<template>  <slot>子で設定したデータ</slot></template> の様に「slot」のタグで囲んでおくだけで利用できます。 この場合、「子で設定したデータ」は、親でスロットのデータを設定している場合には上書きされる仕組みです。親側でスロットのデータを設定していない場合には、この「子で設定したデータ」が表示される仕組みです。React の場合はどうなっているか？React でも同じ様な機能を利用できます。 React の場合は、このスロットのデータも「プロパティ」の一部として、呼び出される部品（子）に渡されます。React の呼び出される側（子）の「部品」の例です。import React from "react";interface IProps {  children: string | undefined;}export default function Step14Child(props: IPro

React で変数の更新を監視するには？React で変数の値が更新された場合、その変数を使った表示を更新するのは、ステートで監視すれば良いので簡単です。しかし、変数が更新された際に、その変数を使って別の操作をする場合の記述方法を紹介します。基本はステート管理React でデータの更新に合わせて、表示データを更新するには、ステートを使って管理するのが基本です。 今回の課題は、Vue の公式チュートリアル（英語版）のステップ１０を基にしています。この課題は、「JSON placeholder」と呼ばれるサイトから、 ID を基にしたデータを取得して表示する物です。ボタンがクリックされる度に ID を更新して、それに伴うデータを取得して表示するというのが課題です。一番シンプルなのは、ボタンがクリックされたイベントを検出して、その際に一緒にそれに対応するデータを取得して表示データの更新を行うという方法です。この方法を使う場合、これ迄のステートを使った、データ管理を行えば実現可能です。import React, { useEffect, useState } from "react";import "./styles/step10.css";interface TodoData {  userId: number;  id: number;  title: string;  completed: boolean;}export default function Step10(): JSX.Element {  const [todoId, setTodoId]: [    number

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

React の公式チュートリアルを見てみましたWeb 開発のショートカットとして、フロントエンドのフレームワークのチュートリアルをやってみると言う学習方法を紹介しました。この記事では実際に React のチュートリアルを見てみました。React のチュートリアルリアクトの公式サイトにチュートリアルが紹介されています。このチュートリアルは、「tic-tac-toe」と言うゲームです。日本だと「🟡 ❌」という感じで、縦・ 横・斜めのいずれかで三つ揃えるゲームです。これを順番に従って作っていくと、簡単な React のアプリが作れる様になっています。 まずは、React を使うための設定から始まって、React を使ったコードの書き方を解説しています。React の簡単な仕組み最初に、簡単に React とは何かを書いておくと、「Web ブラウザ上で動くアプリを簡単に作るための仕組み」です。HTML と CSS は Web ページを書くための言語です。一方で Javascript は Web ブラウザで動かすプログラムを書くためのプログラミング言語です。もちろん、Javascript を使って、 Web ブラウザの表示も作る事ができますが、HTML で直接書くよりわかりにくいコードになってしまいます。そこで、HTML の記述を Javascript の中に組み込む様な形で使えるようにしたのが React がやっている事です。HTML に似た記述で「JSX」と呼ばれています。JSX は HTML に非常に似た記述方法なので、HTML を学んだ上で学習した方が良いというのが通常の学習方法

効果的な Web 開発の学習のやり方プログラミングの学習のやり方には色々ありますが、この記事では Web 開発の上手いやり方を考えてみました。Web 開発の基本は？当然ですが、Web 開発の基本は、HTML と CSS になります。 従って、いずれにしても、HTML と CSS の基本は学習する必要があります。 これは、ページの記述をするのに必要最低限の内容です。これに加えて、実際のデータを処理するためには、プログラムを書く必要があります。これには、Javascript が必要になります。最初に学習する際は、とりあえずバックエンドの開発は必ずしも必要はないので、まずはバックエンドの件は「今すぐに学習する必要はない」と割り切って先送りすると考える事にします。もう一つは、フレームワークです。全て、Javascript で書くとなると大変大きな労力です。そう考えると、フロントエンドのフレームワークを学習の候補に入れておく方が開発がスムーズに進みます。このように考えると、Web アプリの開発に必要な学習項目は：＊　HTML＊　CSS＊　Javascript＊　フロントエンドのフレームワーク　と言う事になります。始める前に考える事一応、学習項目が揃いました。ではもう少し、具体的な内容を決めて行くのが次のステップです。普通に考えると、一つ一つ順番に学習して行くと言うのが一般的な手順です。 しかし、HTML、CSS、Javascript、フロントエンドのフレームワークも学習する内容が沢山あります。 時間を十分にかけられる場合は、ある程度順番に学習していけば良いので、まずは、HTML と CS

Reactは、Webアプリケーション開発で最も人気のあるフレームワークのひとつです。コンポーネントという仕組みを使って、UI（画面）を部品のように組み立てられるため、規模の小さなアプリから大規模サービスまで幅広く開発できます。この記事では、Reactで実際に作れるアプリの代表例をカテゴリごとにまとめました。「何を作ろうかな……」と悩んだときのアイデア集としてご活用ください。1. フロントエンドで完結する“小さめアプリ”サーバー不要でサクッと作れる、初心者が最初に取り組みやすいアプリです。● ToDoアプリタスクの追加・削除・完了チェックなど、状態管理の基礎を練習できます。● 電卓アプリボタン操作・数値処理・表示の更新など、UIとロジックのつながりを理解できます。● タイマー / ポモドーロタイマーsetInterval や useEffect の使いどころが学べる、実務でもよく使う構成です。● クイズアプリ配列データの扱い、現在の問題番号、得点管理など良い練習になります。● メモ帳アプリローカルストレージに保存すれば「消えないアプリ」に進化します。2. APIと連携する“実践っぽいアプリ”外部サービスと通信することで、グッと実務に近いアプリが作れます。● 天気予報アプリOpenWeatherMap(API)などからデータを取得して表示します。● 為替レート・株価表示アプリリアルタイムにデータが更新されるので、APIの扱いが自然と身につきます。● 画像検索アプリUnsplash APIなどと組み合わせると、複雑なUIの作り込み練習にもなります。● チャット風アプリ（AI API連

こんにちは！今回は React Three.js を使った3D表現の魅力をご紹介します。今回のプロジェクトでは、3Dモデルを動的に配置し、蝶が羽ばたきながら舞い、花びらが風に揺れて落ちるような美しいシーンを実装しました。 完成イメージ 今回実装したシーンでは以下のような動きが実現できます： 蝶がランダムに羽ばたきながら空間を舞う動き 花びらがゆらゆらと風に揺れながら落ちる自然な動き 美しい背景に合うようにモデルのサイズや配置を調整 それぞれのアニメーションや配置には、Three.jsの強力な機能を利用しました。

～シンプルで使いやすい健康管理アプリの制作記録～1. はじめに制作の動機（健康管理アプリが増える中、自分のニーズに合ったものを作りたかった）Reactを選んだ理由（コンポーネントベースで再利用性が高く、効率的な開発が可能）2. アプリの概要アプリ名MyFitTracker主な機能ユーザーの認証機能（ログイン/新規登録）運動や食事内容の記録機能カロリー消費量の計算トレーニングや食事の提案機能ユーザープロフィールの管理機能コンポーネント構成Header: アプリのナビゲーションを担当Auth: 認証ページ（ログインや新規登録）Record: 運動やカロリー記録の管理ページProfile: 個人情報や進捗の確認ページSuggestions: ユーザーに最適化された提案を提供Footer: サイトのフッターDashboard: ホーム画面で各機能にアクセス可能なまとめページ３必要なツール:Node.js（npm含む）任意のエディタ（VSCodeを推奨）パッケージ（React, React Router, Tailwind CSS, Chart.js など）とりあえずここまでの機能の実装と構成を目指していくつもりです。このアプリの目的としては個人ユーザーが日々の運動や食生活の記録や提案をしてもらい目標体重まで目指していく事をサポートするアプリです。

みなさんこんにちは。 小学2年生になる息子がいるのですが、 ポケモンが大好きです。 かつ、今後のICT教育を見据え、パソコンにはどんどん触れてほしいと思い、ポケモンアプリを開発しました。 アプリの詳細については過去のブログで紹介させていただいております。また、アプリの中でポケモンのBGMを流しているのですが、 そちらの再生方法、停止方法については以下で解説しております。この記事がおすすめな人今回の記事は以下の人に特におすすめです。 　・React：初学者、初級者～中級者 　・アプリを開発したい人 　・手順だけを知りたい人 　・コードだけを知りたい人コンポーネントを作成するテキストボックスに任意の数字を入れて、 「ポケモンの名前」を表示するコンポーネントを追加します。 前回の画面構成については、過去記事の内容をご参照ください。=============================  {/* ポケモンの名前 */}   <Grid item xs={12} align="center">     <Typography>       ポケモンの名前：{pokemonname} </Typography>   </Grid> </Grid>=============================画面は以下のようになります。変数と関数をコーディングするPokemonAPI取得できるポケモンの名前は英語表記になっているので、以下のコードのようにして日本語表記にする必要があります。======================

ご覧いただきありがとうございます！ 要件定義・設計・実装・テスト・リリース・技術相談と幅広くが対応可能でございます。 LaravelやStripeなどの決済システムや外部APIの実績も多数ございますので、まずはお気軽にお問い合わせください。 迅速丁寧な対応を心がけておりますので、よろしくお願いいたします。 『例』　 →Webシステムの開発のお手伝いをしてほしい →HTML・CSS・Javascriptを使ったWebサイト作成・修正 →既存システムの修正・機能改修をお手伝いしてほしい →Webサービスの仕様・設計をお手伝いしてほしい その他ご相談承ります。 『対応実績』 →Laravelを使用したAPIの開発 →Stripeを使った決済機能の追加 →外部APIを使ったシステム開発 →テーブル設計 【 対応言語 】 ・PHP/Laravel ・HTML/CSS ・Javascript/Vue.js/Nuxt.js・Python(Django or Flask)・Java(SpringBoot)

React で呼び出し元の部品にデータを渡すには？Veu の場合、呼び出し元（親）の部品に、呼び出される（子）の部品からデータを渡す機能があります。React の場合にも似たような機能を実装できますが、考え方が少し違っています。この記事では、React で「子」から「親」にデータを渡す例を紹介します。Vue の場合は？Vue の場合は、公式チュートリアル（英語版）のステップ１３で紹介されているように、「_emit_」を使うと、「子」の部品から「親」の部品にデータを送る事ができます。<script>export default {  emits: ["response"],  created() {    this.$emit("response", "hello from child");  },};</script> この場合、「_emits_」で定義している、「_response_」という名前で、「_this.$emit('response', 'XXXX')_」を使うと、データを「親」の部品に送る事ができます。この例では、「hello from child」というデータを「親」に送っています。「親」の部品では、最初は「No child msg yet」というデータをセットしておいて、データが送られてきた場合には、送られてきたデータに更新するという処理を行なっています。React ではどうするか？実は、React の場合、基本的な考えとして、「子」の部品から「親」の部品にデータを送るような Vue の機能はサポートされていません。基本的に、データのや

Reactの「部品」React も Vue と同様によく使う表示のパターンを部品化して再利用する事ができます。この記事では React の部品の使い方を紹介します。基本は「部品」！部品化と言っても特別な事はありません。 これまで、紹介してきた記述は基本的に全て「部品」です。 今までの記述は、React のトップレベルの「部品」であるの「App.tsx」から呼び出しています。今回は、意図的に一つの部品を作成して、React の上位（親）の部品から呼び出すやり方を紹介しています。今回の部品は、「A Child Component！」を表示するだけのシンプルな物です。import React from "react";export default function Step11Child(): JSX.Element {  return (    <React.Fragment>      <div>        <h2>A Child Component!</h2>      </div>    </React.Fragment>  );}　　基本的な記述は、これまで紹介してきた書き方と同じです。 違いは、別に部品を作って呼び出す点です。呼び出し元の記述呼び出し元（親）の記述は、必要な部品を「import」して呼び出すだけです。import React from "react";import Step11Child from "./step11Child";import "./styles/step11.cs

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>      &lt

Vite でプロジェクトを作る従来は、Vue CLI や create-react-app などのスクリプトを利用してサンプルのプロジェクトを作っていました。最近は、「Vite」というビルドツールがよく利用されているようなので簡単に紹介します。色々なフレームワークで利用可能React や Vue などのフレームワークを利用する際は、多くの場合は、パッケージ管理アプリのnpmなどを利用して開発するケースが多くなっています。もちろん、HTML に組み込む形で、利用する事も可能ですが、多様なモジュールを利用する場合も多く余り現実的ではありません。以前は、Vue の場合は、「Vue CLI」や、React の場合は、「create-react-app」などのスクリプトを利用してサンプル（テンプレート）のプロジェクトを作って利用するというのが一般的でした。これに対して、Vite を利用すると、Vue でも React などのフレームワークでも、同じような要領でサンプルのプロジェクトを作成することができて、開発用のサーバーや公開用のイメージの作成もできるという結構便利なツールです。簡単な使い方使い方は極めて簡単です。$ npm create vite と入力するだけです。コマンドラインで細かい指定をすることもできますが、単純に上のコマンドを実行すると、プロジェクト名や、利用するフレームワークを聞いてくるので、質問に答えて行くと目的のサンプルプロジェクトを作成できます。プロジェクトを作成した後に、プロジェクトのフォルダに移動して$ npm install を実行して、必要なモジュールをインス

React Router で良く起きる問題！　〜　ページがない！React Router を利用すると、React で作成したアプリを複数のページで構成する Web サイトとして構成することができます。しかし、実際に Web サーバーで公開すると「ページがない！」というエラーが発生する場合があります。一体何が起きているのでしょう？React Router は何をしているのか？React Router は一体何をやっているのでしょうか？ React Router は、React の拡張機能で、Web ブラウザでページの URL を指定すると、別のページがあるように表示できる機能です。この時、どのページを表示するかを決めているのは実は React が作った、Javascript のコードでページを作っています。ところが、この処理を普通は Web サーバーが行なっています。通常は、Web サーバーが Web ブラウザが指定された URL をもとに Web サーバーにリクエストを送って、Web サーバーがどの表示するかを決めて Web ブラウザに表示するページを送っています。このどのページを表示するかを決める処理を「ルーティング」と呼んでいます。サーバーにはページがない！React で React Router を使って利用している場合には、React が表示するページを作って、index.htmlに表示させています。つまり、「サーバーにはそのページはない」のでエラーになります。でも、React の開発用のサーバーを「npm start」で起動して動かすと問題なく動きます。 これは、R

Typescriptの基本設定は？先日投稿した記事で、機会があれば Typescript を学習することをお勧めするという事を書きました。今日は実際にどのように Typescript を使うのかもう少し具体的な事を記事にしてみました。実行は Javascript!ご存知の方も多いと思いますが、実際に Web ブラウザが実行できるのは、Typescript ではなく、コンパイルして作られた Javascript です。従って、Typescript で書いたからと言って Typescript を実行するわけではありません。理由は簡単で、互換性の制限もあって、Web ブラウザーが実行できるのはあくまで Javascript だからです。つまり、Typescript で書いたプログラムはコンパイルをして、Javascript に変換しないと実行できません。Typescript を使うメリットは？実行されるのが Javascript なら、なぜ Typescript を使うのが良いのかと疑問に思う方がいるかもしれません。実は、この Typescript から Javascript に変換するコンパイルが最大のメリットです。このコンパイルが Javascript では見つけづらいコーディング上の問題をチェックしてくれるのが Typescript が利用される理由です。型の宣言をきちんと守って書かれた Typescript の場合、宣言と違う型の代入や、要素の一致しない JSON や、関数のインターフェース、変数の初期化などをコンパイルする際にチェックして、知らせてくれます。従来の Java

VueとReactで迷ったらどうする？Web 開発のフロントエンドのフレームワークとしてよく利用される Vue と React ですが、どちらを学習すれば良いか迷うことも多いと思います。この記事では、迷った時にどうしたら良いのか、独断と偏見ですがガイドラインを書いてみました。人によって考え方は色々だと思いますが、一人の意見として読んで頂ければと思います。迷うと言うことは強制力はない最初に言えることが、どちらか迷うと言う事はその選択に「強制力」はないと言う事です。「強制力」とは顧客の要求や、会社の方針でどちらを使うかが指定されていたりする場合を指します。この場合は、選択の余地は殆どないので、方針に従うと言うのが選択肢だといえます。就職を目指す場合は、就職を目指す会社を調べてみると良いかと思います。会社の方針として、利用するフレームワークをある程度決めていることがわかった場合は当然その方針に合った方を学習した方が有利です。案件によっては、両方使い分ける方針の場合は迷いますのでこの後を読んでみてください。！統計的な数値は？インターネットで検索をしてみると、世界的には React を利用するケースが多いようです。実際にシリコンバレーの求人をみてみると React ができる人を求める方が多いようです。ただし、日本に注目すると、Vue と React は結構近い数字が出てきます。最近では、Vue の人気も高まっているように見えます。フリーランスの場合は、仕事はある程度自分で選べますが、会社で働くことを考えると React の方が有利に見えます。初心者が学習する場合初心者が学習する場合はどう

FirebaseでWebサイトを作れるの？Firebaseにはホスティング機能があるので、FirebaseでWebサイトを作れます。 しかも、最初は無料でスタートできます。運営してく過程でアクセス数や使用している容量が無料の範囲を超えると料金が発生しますが、殆どのサイトの場合は無料の範囲内でも十分運営ができる場合が多いです。 Firebaseを利用したWebサイトとして考えられるのは大きく分けて３種類です。 * 従来のHTML/CSSなどを主体としたシンプルなサイト * フロントエンドのフレームワーク（ReactやVue）を利用したサイト（Webアプリも含みます） * サーバー側のレンダリングも含めたサイト（Next/Nuxtなどを利用） です。 多くのWebホスティングは、WordPressを主体としたWebサイトのホスティングを前提にしている物が多いですが、Firebaseの場合は、必要に応じて目的のサイトにあったWebホスティングの形態を選ぶことができます。Webサイトだけではなく、ランディングページも簡単に作成できます。 従来のHTML/CSSを主体にしたシンプルなサイト HTMLやCSSを中心に構成される従来型のシンプルなサイトは、簡単にFirebaseでWebホスティングできます。もちろん、HTMLファイルからJavascriptなどのプログラムも動かす事も可能です。 こうしたサイトを作るのに必要な事は、必要なHTML/CSSのファイル、さらに必要な場合は画像ファイルなどの素材やJavascriptなどのファイルを準備するだけです。 後は、Firebas

最近 Web制作やフロントエンド開発の分野で Vite という言葉をよく見かけるようになりました。Reactを学び始めた方や JavaScriptで動きのあるサイトを作りたい方にとって Viteは非常に便利な開発ツールです。この記事では Viteを初めて触る方向けにViteとは何かなぜ便利なのか基本的な使い方をできるだけ分かりやすく解説します。Viteとは何かViteは Web制作のための開発環境を作るツールです。難しく考えずに言うと WebサイトやWebアプリを作るときの作業をとても速くしてくれる道具です。最大の特徴は 開発中の動作がとにかく速いことです。なぜViteは速いのか従来の開発ツールでは プロジェクトを起動するたびに多くのファイルをまとめて処理していました。そのため 起動や更新に時間がかかりがちでした。Viteでは ブラウザの仕組みをそのまま活かし 必要なファイルだけを読み込みます。その結果保存するとすぐ画面が更新される開発サーバーがほぼ一瞬で起動するといった 快適な開発環境が実現します。ViteでできることViteは次のような制作に使えます。HTML CSS JavaScriptを使ったWebサイト制作ReactやVueなどのフレームワーク開発Three.jsを使った3D表現やアニメーション画像 音声 3Dモデルなどの素材管理特に 動きのあるデモやエンタメ性のあるWeb表現と相性が良いのが特徴です。Viteの基本構成Viteの特徴として index.html がプロジェクトの一番上に配置されます。このHTMLファイルから JavaScriptを直接読み込む仕組みに

Web開発の世界では多くのフレームワークやライブラリが存在しますが、その中でも長く支持され続けているのが React。Facebook（現Meta）が開発し、世界中のプロダクトで使われていることから、信頼性の高い技術として定着しています。では、Reactを使うことで、開発者はどんな恩恵を受けられるのでしょうか。1. UIを部品化して使い回せるReactの最大の特徴は、画面を「コンポーネント」という小さな部品に分けられること。ボタン、ヘッダー、カードなどを一度作れば、何度でも使い回しができ、サイト全体で統一感が保てます。変更があっても、そのコンポーネントだけを直せば全体に反映されるため、メンテナンスも非常に楽になります。2. コードが読みやすく、管理しやすいコンポーネント単位でファイルが分かれるので、「どこで何をしているか」が非常に把握しやすいのがReactの魅力。プロジェクトが大きくなっても、構造が崩れにくく、複数人での開発にも向いています。3. 状態管理がスムーズアプリが複雑になってくると、「どのページでどんなデータを扱っているか」がややこしくなりがち。Reactは“状態（state）”を扱う仕組みが整っており、ユーザーがボタンを押したり、入力したりするたびに、UIが自動的に正しい状態へ更新されます。「動く部分の多いUI」でも整然と管理できるのは、大きなメリットです。4. 高速で滑らかな操作性Reactは「仮想DOM」という仕組みで、画面の更新を最小限に抑えてくれます。必要な部分だけが効率的に書き換えられるため、ページ遷移やアニメーションが軽快に動き、ユーザー体験が良くなりま

Webサイト制作の現場では、近年 Astro と React が大きな注目を集めています。どちらもモダンな開発体験を提供しますが、目的や得意分野が異なるため、選択によって制作フローや完成後のパフォーマンスに大きな違いが生まれます。ここでは、両者の特性とメリットを整理します。Astroの特徴とメリットAstroは「静的サイト生成（SSG）を中心に、必要な箇所だけを動的化する」というコンセプトのフレームワークです。以下の点が特に魅力です。高速な表示速度Astroはデフォルトで「HTMLのみ」を出力し、必要最小限のJavaScriptだけを読み込む「ゼロJS by default」思想を採用。静的ページやコーポレートサイト、ブログなどでは非常に高速なページ表示を実現します。自由なフロントエンド統合React・Vue・Svelteなど、複数のコンポーネントフレームワークを同時に利用可能。部分的にReactを埋め込むなど、既存のUIパーツを活かせます。SEOと運用に強いSSR（サーバーサイドレンダリング）やISR（増分静的再生成）にも対応しており、SEOを意識したサイトや更新頻度が高いメディアでも柔軟に運用できます。シンプルで学習コストが低いHTMLに近いテンプレート構文で、静的サイト中心の開発に馴染みやすい。デザイナーやフロントエンド初学者でも取り組みやすい点が大きな魅力です。Reactの特徴とメリットReactはFacebook（現Meta）が開発した「UI構築のためのJavaScriptライブラリ」で、Webアプリ開発のデファクトスタンダード的存在です。強みは以下の通りです。コンポ

今回は、私が制作中のケーキ屋さん向けWebページの Header、背景、商品紹介部分に動きをつけたアニメーション をYouTubeショートで公開しました。動画では次の3つのポイントを紹介しています：Headerのアニメーションロゴが斜めから正面に回転しながらフェードインナビリンクは小さく縮んだ状態から拡大SNSアイコンは下からスライドして登場背景の動きThree.jsのシェーダーでグラデーションがゆっくり変化クッキー型の3Dモデルが画面上から下に回転しながら降るパーティクル演出MenuItemsのスクロールアニメーション商品説明のテキストが左右からスライドイン画像が画面外から滑り込む動きスクロールに合わせた自然な表示でユーザーの目を引くこれらのアニメーションを組み合わせることで、Webページ全体に 華やかさと動き が加わり、ケーキ屋さんの魅力をより直感的に伝えられるようになります。🔗 YouTubeショート動画はこちら ↓

React はUI（ユーザーインターフェース）を構築するためのライブラリなので、「画面が動的に変化する」「ユーザー操作が多い」ものに特に向いています。具体的にどんなものが作れるか、代表例をいくつか紹介します。1. WebアプリケーションSNS系アプリ例：Twitter風の投稿・いいね・コメント機能を持つアプリ→ 状態管理（useState、Context）でリアルタイムに表示を更新。タスク管理・ToDoアプリ例：チェックリスト、期限付きタスク管理、ドラッグ&ドロップで並べ替え→ state でリストを保持、React DnDなどのライブラリを利用。チャットアプリ例：Slack風のリアルタイムチャット→ WebSocketやFirebaseなどと連携して双方向通信。2. 企業・個人サイト（動きのあるUI）ポートフォリオサイト例：アニメーション付きの自己紹介ページ、作品ギャラリー→ Framer Motion などを使ってスムーズなアニメーションを実現。企業サイトや製品紹介ページ例：ニュースの自動更新やFAQのアコーディオン表示→ データをAPIで取得して表示を自動更新。3. EC（通販）系サイトオンラインストア例：カート機能、在庫管理、購入フォーム→ 状態管理とAPI通信で商品数や金額をリアルタイムに反映。商品検索・フィルタ機能→ 入力に応じて商品一覧を即座に絞り込み表示。4. データを視覚化するツールダッシュボード・管理画面例：売上グラフ、アクセス解析、レポート→ Chart.jsやRechartsなどでグラフを描画。リアルタイムモニタリング画面例：IoTセンサー値のラ

今回は、Reactを使ってケーキ屋さん向けのメニュー紹介コンポーネントを作る際の工夫を紹介します。ポイントは 画像と説明を交互に配置するレイアウト です。これにより、見た目が動きのあるおしゃれなデザインになります。実装のイメージ左右に画像とテキストが交互に並ぶレイアウトテキスト部分は商品名と説明文画像サイズは統一（例：350×350px）背景は明るくケーキ屋さんらしい色（薄い黄色など）コード解説<div className="menu-container">  {items.map((item, index) => (    <div      key={index}      className={`menu-item ${index % 2 === 0 ? "left-image" : "right-image"}`}    >      <div className="menu-text">        <h2>{item.title}</h2>        <p>{item.description}</p>      </div>      <img src={item.img} alt={item.title} />    </div>  ))}</div>ポイントmapでループ配列 items の中身（商品データ）を順番に表示。交互レイアウトの判定index % 2 === 0 → 偶数は画像左、奇数は画像右→ CSSで le

なぜReactにTypeScriptを組み合わせるのか？ReactはJavaScriptで動作するUIライブラリですが、JavaScriptは動的型付け言語であり、型の不一致によるバグが起きやすいという課題があります。TypeScriptを導入することで、静的型付けによる型チェックが可能になり、開発の安全性と保守性が大幅に向上します。特に中規模以上のアプリケーションでは、型情報の存在が大きなメリットになります。主なメリット1. コードの安全性が向上する開発中に型の不一致や未定義のプロパティへのアクセスなどを検出できるため、実行時エラーのリスクを減らせます。2. オートコンプリートが充実する型情報が明確なため、エディタ上での補完機能が強化され、コーディングのスピードと正確性が向上します。3. ドキュメント代わりになる型定義がそのまま仕様書のような役割を果たすため、チーム開発での認識のズレが減り、コードの可読性も高まります。注意点と学習のコツ最初は型の記述に戸惑うかもしれませんが、基本的な型から少しずつ慣れていくことでスムーズに使いこなせるようになります。特に、PropsやState、イベントなどに対する型の扱い方に慣れることが重要です。また、型を厳密に管理することで、複数人開発でもバグの発生を防ぎやすくなるため、結果的にメンテナンスコストの削減にもつながります。まとめReactとTypeScriptを組み合わせることで、バグの少ない、安全で効率的な開発が可能になります。最初は学習コストがかかるかもしれませんが、慣れてくるとそのメリットを大きく実感できるはずです。これからReact

私はstable diffusionが好きでAI美女画像を生成しています。巷ではXLやmedium 3が話題のようですが、私は初代のstable diffusionのWebUI forgeというシステムを愛用しております。そこで、数多くの美女たちを生成してきましたが、常々「何かこの美女たちを活用できないものか？」と考えてきました。そこで、このたび、その美女画像を素材としてスロットマシーンゲームを企画し、開発しました。私は日頃pythonを愛用しておりますが、今回はReactでの開発です。生まれて初めてReactを用いましたので勉強しながら手探りで開発を進めております。これはWebブラウザで動きますので、同Reactで別ページを作成すれば、スロットマシーンが遊べるWebサイトなども出来るはず。大当たりした場合に、大きめの画像をスライドショーで流したり、効果音を付けたりと、オーソドックスなスロットマシーンの演出は思いつきます。私にとってこれは自由課題と研究の一環ですが、時間があるときに楽しみながら完成度を高めていきたいプロジェクトだと思っております。

Reduxのデータ処理に値を渡すには？前回の記事では、Redux Toolkit を利用して、Redux を React で利用する簡単な事例を紹介しました。今回は、Redux のデータの処理をする際に値を渡す例を紹介します。Redux のデータ処理は、「slice reducer」前回の記事で紹介した通り、Redux Toolkit を利用して、Redux で管理しているデータを処理するのは「slice reducer」です。前回の例では、Redux で管理するデータはカウンタの値でサポートする処理は二つでした。＊　カウンタを１づつ増やす＊　カウンタをリセットする（「０」に戻す）　この処理は、データを処理する際にデータを渡す必要はありませんでした。今回の記事は、カウンタに特定の値をセットするという処理を追加します。この処理をするためには、セットする値を指定する必要があります。まずは、前回紹介した「slice reducer」に「init」という処理を追加した例です。 追加した処理は、指定された値をカウンタの値（value）にセットする処理を行なっています。import {  ActionReducerMapBuilder,  createSlice,} from "＠reduxjs/toolkit";interface SampelState {  value: number;}interface Action {  type: string;  payload: any;}const initialState: SampelState = {  value: 0,};exp

React でリストを表示するには？この記事では、React でリストを表示する方法です。リストのデータの一覧を表示する事は簡単です。しかし、このリストのデータを変更する場合はちょっと複雑です。この記事ではその辺も含めて紹介しています。React はプログラムで表示データを作る！前回の条件によって表示を変える場合と同じで、React を利用する場合には、基本的にプログラムで表示データを作ります。今回の、リストのデータを表示する場合も考え方は同じです。Vue の場合には、「_v-for_」を使って、本来の HTML にはない書き方でリストの中身を表示していました。React の場合は、このような機能が HTML に相当する部分（JSX）にはないので、Typescript(Javascript)で記述する方法を使います。色々書き方はありますが、比較的よく利用されているのは、「_map()_」という予め用意されている関数を使います。この機能を利用する事で、リストのデータを表示するための HTML に相当する記述（JSX）を作る事ができます。以下の部分がそれに相当する部分になります。<ul>  {todos.map(    (todo: Todo): JSX.Element => (      <li>        {todo.text}        <button className="btn btn-secondary" onClick={() => removeTodo(todo)}>          X        &lt

React で条件によって表示を変えるには？React で変数の値（状態）によって表示内容を変える方法を紹介しています。React の場合は、HTML に相当する JSX の記述が Typescript (Javascript)の一部なので、Typescript(Javascript)の書き方を使って表示を切り替えます！React は全てプログラム！Vue の場合には、HTML の記述の部分にもプログラム的な要素を書けるようにして「_v-if_」を使って表示の切り替えをおこなっていました。 React の場合には、HTML に相当する部分（JSX）は Typescript（Javascript）の一部なので、表示の切り替えには、Typescript（Javascript）を使って切り替えます。Typescript(Javascript)の「xxx ? OOOO : _XXXX_」を使って切り替えます。 この記述は、「_xxx_」が真（true）の場合は、「_OOOO_」、「_xxx_」が偽（false）の場合には、「_XXXX_」という処理を行う場合に使います。 今回は、この「_OOOO_」と「_XXXX_」の部分に HTML に相当する JSX の記述を入れて利用します。以下が Typescript を利用した実装例です。import React, { useState } from "react";import "./styles/step6.css";export default function Step6(): JSX.Element {  const [awesom

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）なので、その型を宣言しておくと、プログラムでこの定数を使う際にチェックしてくれます。この例では、使うのは表示の部分のみなのであまり、大きなメリットはありませんが、例えば、この定数を関数に渡したりする場合には、関数側の型と一致しているかをチェックしてくれるので、型が違っている場合には、コンパイル時にわかるという仕組みです。ステップ２のコードの例以下のコードがステッ

Facebook投稿支援アプリにReact/Vueは必要か (6)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 これまでに、HTMLファイルをベースとした実装例として、シンプルなHTMLとJavascript、jQuery、CDNをベースにしたReactとVueの実装例を紹介してきました。前回の記事でまとめたように、ReactやVueを使う場合、「npm」を利用してReactやVueのプロジェクトを作成して開発した方が便利です。ReactやVueを利用した開発の殆どは、CDNではなく、「npm」が利用されています。この記事では、「npm」を利用したReactの実装例を紹介しています。パッケージを管理する「npm」Node.jsをインストールすると、合わせてインストールされるのが「npm」というパッケージ管理ツールです。このツールを利用すると、インターネット上で公開されているNode.js（Javascript）のパッケージを自分のWebアプリやサービスに取り込んで簡単に利用できます。少し規模の大きなWebアプリやサービスの場合、そうした既存の公開されているパッケージを利用できるので開発の効率が向上します。もちろん、CDN(Contents Delivery Network)で、HTMLファイルから読み込めばこうしたパッケージも利用できるのですが、規模が大きなアプリやサービスの場合、npmで取り込んでしまった方が便利です。Node.jsは、オフィシャルサイトからダウンロードして簡単にインスト

Reactを学んでいると、必ず出てくる言葉が**「レンダリング」**です。でも、何をもって「レンダリングされた」と言うのかいつレンダリングが起きているのかここが曖昧なまま進んでしまう人も多いです。この記事では、Reactにおけるレンダリングの意味を、できるだけ噛み砕いて解説します。一言で言うと、Reactのレンダリングとは？「画面に表示する内容を決め直す処理」これがReactのレンダリングです。Reactは「今の状態（state）に応じて、画面はこうあるべき」という判断を毎回行い、その結果を画面に反映します。この「判断して画面を作り直す」一連の流れを、Reactではレンダリングと呼びます。レンダリング＝DOMを全部書き換えている？ここでよくある誤解があります。レンダリングって、画面を全部描き直してるってこと？答えは NO です。Reactは毎回「画面の完成イメージ」を作りますが、本当に変わった部分だけをDOMに反映します。この仕組みを支えているのが、**Virtual DOM（仮想DOM）**です。Reactのレンダリングの流れ（ざっくり）Reactの内部では、こんな流れが起きています。state や props が決まる「この状態なら画面はこうなる」という設計図を作る前回の設計図と比較する差分だけを実際の画面に反映するこの 2〜4 の一連の処理をまとめて「レンダリングが走る」と言います。いつレンダリングは起きるのか？Reactでレンダリングが起きる代表的なタイミングは次の3つです。① state が更新されたときsetCount(count + 1)このように setStat

Reactを勉強していると、「useStateは分かった」「コンポーネントも書ける」ここまでは比較的すぐに到達します。でも、実務でReactを使うとなると、必要になる力は少し変わってきます。この記事では「現場で本当に求められるReactの力」を整理します。1. コンポーネント設計の力実務では「とりあえず動く」よりも、あとから触る人が理解できるかが重要です。求められるのは以下のような視点です。1コンポーネントの責務が明確か見た目（UI）とロジックが分離されているか再利用できる形になっているか例えば、ボタンフォームの入力欄モーダルこういったものを使い回せる部品として切り出せるかが実務ではよく見られます。2. state（状態）を正しく扱う力Reactで一番事故が起きやすいのが「stateの管理」です。実務では、どこにstateを持たせるかpropsで渡すべきか親で管理すべきかを常に考えます。ありがちなNG例は、あちこちにstateが散らばっているどこで値が変わっているのか分からない「この値は誰が管理するのが自然か」これを考える力が、実務ではかなり重要です。3. API通信・非同期処理の理解実務のReactは、ほぼ必ずAPIと通信します。必要になるのは、データ取得の流れを理解しているローディング・エラーを考慮できる「まだデータが無い状態」を想定できる画面は常に「理想的な状態」ではありません。取得中失敗データが空こういったケースを考慮できるかどうかが、「実務を分かっているか」の分かれ目になります。4. React以外とのつながりを理解する力現場では、React単体で完結することはほぼあ

Next.js（ネクストジェイエス）は、Reactベースで動くフレームワークで、モダンなWebサイトやサービスの開発でよく使われています。「効率よく作れる」「高速」「SEOに強い」など、今のWeb制作に必要な要素をまとめてサポートしてくれるのが特徴です。ここでは、Next.jsで実際にどんなことができるのかを分かりやすく紹介します。1. 高速でSEOに強いサイトが作れるNext.jsはページをサーバー側であらかじめ生成した状態で返せるため、表示が速く、Googleにも評価されやすい構造になります。普通のReactでは弱かった「SEO」「初期表示の遅さ」を解消できるのが大きな魅力です。2. Reactの強みをそのまま活かせるNext.jsはReactのフレームワークなので、コンポーネントの再利用や管理のしやすさはそのまま。UIを細かく作り込む制作にも向いています。3. ルーティング（ページ遷移）が超シンプル通常のReactだとルーティングの設定が必要ですが、Next.jsではフォルダにファイルを置くだけでページになります。ブログ、コーポレートサイト、LPなどでもすぐにページが増やせて管理がラクです。4. API機能を内蔵しているNext.jsには、サーバーサイドで動くAPIを簡単に作れる機能があります。外部のサーバーを用意しなくても、以下のような仕組みを実装できます。お問い合わせフォーム会員登録・ログインデータベースとのやり取り外部APIとの連携「フロントとバックエンドを一つにまとめられる」のが大きなメリットです。5. 画像最適化が自動でできるNext.jsは画像を自動で容量圧縮

MUI（旧Material-UI）は、GoogleのMaterial Design思想をベースにしたReact向けUIライブラリ群です。ボタンやフォーム、ダイアログといった基礎パーツから、データグリッドなどの高度なコンポーネントまで幅広く提供し、デザインの一貫性と開発スピードを両立させます。現在は「MUI Core」「MUI X」「Base UI」「Joy UI」などのサブブランドに分かれ、用途に応じて選べる構成になっています。なぜMUIが選ばれるのか1) すぐ使える完成度の高いコンポーネントフォーム、ナビゲーション、フィードバック、レイアウト等の網羅的な部品が揃い、状態遷移やアクセシビリティ配慮も初期から考慮されています。実装の“つまずき”を減らし、要件定義やビジネスロジックに集中できます。2) 強力なテーマとデザイントークン色、タイポグラフィ、余白、ブレークポイントなどをテーマで一括管理。ブランドカラーやトーン＆マナーの変更も全体へ波及させやすく、デザインシステム運用に向きます。ダークモード対応も容易です。3) アクセシビリティを内包キーボード操作、フォーカス管理、ARIA属性などの下回りを標準でケア。要件として見落としがちなA11y品質を底上げできます。4) 柔軟なカスタマイズ性ユーティリティクラス、スタイルprops、CSS-in-JSなど複数のアプローチで見た目を調整可能。“Materialっぽさ”を残すことも、独自ブランドへ寄せることもできます。5) エコシステムの厚み日付ピッカーやデータグリッドといった業務向けの拡張（MUI X）、ミニマルなBase UI、プレー

React Developer Tools（リアクト・デベロッパー・ツールズ）は、React で構築されたウェブアプリケーションを効率的に開発・調査・デバッグするための公式ブラウザ拡張機能です。Google Chrome や Microsoft Edge、Firefox など主要なブラウザに対応しており、React 開発者にとって欠かせないツールのひとつです。主な機能1. コンポーネント構造の可視化React では UI がコンポーネント単位で組み立てられます。React Developer Tools を使うと、ページ内のコンポーネント階層をツリー構造で確認できます。どのコンポーネントが親で、どの部分が子コンポーネントなのかが直感的にわかり、複雑なアプリでも全体像を把握しやすくなります。2. PropsとStateの確認・編集コンポーネントが受け取っている props（外部から渡される値）や、内部で保持している state（状態）をリアルタイムで確認できます。さらに必要に応じてその場で値を変更し、UI の変化を即座にテストすることも可能です。バグ調査やデザイン調整の際に非常に便利です。3. パフォーマンスの分析パフォーマンスを可視化する機能（Profiler）を使えば、どのコンポーネントが何度レンダーされているか、描画にどのくらいの時間がかかっているかを詳しく調べることができます。これにより無駄な再レンダーや処理の重さを見つけやすくなり、パフォーマンス改善の指針が得られます。使い方の流れブラウザの拡張機能ストアから React Developer Tools をインストールし

1. はじめに現在、React + Three.js を使ってケーキ屋さん向けのWebサイトを制作しています。前回までにヘッダー部分にシェーダー背景を導入しましたが、次のステップとして 背景に3Dクッキーが降る演出 を加える予定です。このアニメーションを追加することで、サイト全体の雰囲気が「お菓子の世界」に包まれ、より楽しい印象を与えられると考えています。2. 実装する予定の内容次の Main.js において、以下のような背景アニメーションを導入する予定です。3種類のクッキーを用意星型、ハート型、円型のクッキーそれぞれに色付きの表面テクスチャを設定（焼き色やアイシング風の色合い）3Dモデルは自作ツールで作成予定ランダムに散らばせる画面上部にランダムな位置・サイズで配置奥行きを出すためにZ軸方向にもばらつきを持たせる落下アニメーション常に回転しながら上から下に降りる画面下まで来たら再び上に戻り、繰り返す仕組みパーティクル風の演出30個程度のクッキーを同時に動かす予定回転速度や落下速度をランダムにすることで自然な見た目を目指す3. 実装の流れ（予定）useLoader(GLTFLoader, [model1, model2, model3]) で3種類のクッキーを読み込む配列を使って複数のクッキーインスタンスを管理useFrame フックで毎フレームごとに回転＋落下処理を行うposition.y が一定以下になったらリセットして再利用4. 完成イメージヘッダーのグラデーション背景と合わせると、全体が柔らかくて可愛い印象に星やハートのクッキーが回転しながら降ることで「まるでお菓子の世

ホームページやブログのコンテンツの中で画像が異なるものに切り替わったり、違うコンテンツが表示されるような動きがあるとおもうのですが今回これらの実装を学習用に解説しましたのでよかったら参考にでもどうぞ！１　まずはcreate-react-appでプロジェクトをつくる（今回はケーキ屋さんをイメージしたサイトにしました。）２そして各コンポーネント「Header.js 、Main.js、Footer.js]をつくる。３　そしてそのなかみは...今回は画像の実装のあるMain.js中心に解説します。1️⃣ 画像の配列を用意const images = [img1, img2, img3];3枚の画像を配列にまとめています。images[0]、images[1]、images[2] のように インデックスでアクセス できます。この配列をループして使うことで、どんどん切り替えが可能になります。2️⃣ 現在表示中の画像を state で管理const [currentIndex, setCurrentIndex] = useState(0);useState は React の状態管理フック です。currentIndex は今表示している画像の番号（0, 1, 2…）を持ちます。setCurrentIndex を使うと状態を更新でき、React が自動で再レンダリングして 画面を切り替える ことができます。3️⃣ タイマーで自動切り替えuseEffect(() => {  const interval = setInterval(() => {    setCurrentInde

Javascriptのライブラリ、フレームワークにReact、Next.jsがありますがそれぞれ関数を効率よく機能させるために使うhooksがありますよね？今回は自分にとっても学習と参考用までに使い方を解説してみます。🔁 フック（Hooks）とは？Reactの機能で、コンポーネント内で状態（state）を使う → useStateライフサイクル処理 → useEffectアニメーションや座標更新など → useFrame（React Three Fiber）モデルの読み込み → useGLTF（drei）などを使うときに「フック」として書きます。✅ フックを書く場所（大原則）function MyComponent() {  // ✅ OK：関数の最上部に書く  const [count, setCount] = useState(0)  // ❌ NG：if 文やループの中では使えない  if (count > 0) {    // useState() ←ここに書いたらエラー！  }  return <button onClick={() => setCount(count + 1)}>+</button>}🧠 なぜ関数の中に書くの？Reactは「フックの呼び出し順」によって状態を管理しています。そのため、必ず「関数コンポーネントのトップレベル（直下）」に書く必要があります。🦋 たとえばさっきの例：function FlyingButterfly({ seed = 0 }) {  const ref = useRef()  const {

こんにちは！LaravelとReactを使ってSNS系Webアプリの開発を行っている現役Webエンジニアです。現在は、以下のような機能を含むアプリの開発に対応しています。投稿・いいね・コメント機能ユーザー検索・フォローメール認証付きのユーザー登録 / ログインプロフィール編集や画像アップロード個人チャット・グループチャット（WebSocket対応）管理画面（ユーザー・投稿の管理）主にLaravelをAPIとして構築し、ReactでSPAとして表示する形で実装しています。現在は実績構築中のため、初回3名限定で格安にて対応中です。仕様が固まっていなくても、ヒアリングしながら一緒に要件を整理していきますので、初心者の方も安心してご相談ください。サービス詳細・ご依頼はこちらからご覧いただけます。https://coconala.com/services/3781406柔軟に対応しますので、「こんなの作れる？」などのご相談もお気軽にどうぞ！

こんにちは！現役エンジニアの日高です。今回は、最新のWeb技術であるReactを使ったWebサイト制作についてお話しします。WordPressからReactへ - 時代は変わりつつある多くの企業サイトやブログで使われてきたWordPress。簡単に美しいサイトが作れる便利なツールですが、ビジネスの差別化が求められる現代では「みんなと同じ」では目立てなくなってきています。そこで注目したいのが、Facebook発のフロントエンドライブラリ「React」です。多くの大手テック企業が採用するこの技術、なぜ今注目されているのでしょうか？Reactを使ったWebサイトの5つのメリット1. 圧倒的な表示速度ReactはSPA（Single Page Application）という技術をベースにしており、ページ遷移時に必要な部分だけを更新します。その結果、従来のサイトと比べて体感速度が格段に向上。Googleの検索ランキングでも速度は重要な要素なので、SEO効果も期待できます。2. インタラクティブな体験スクロールに合わせたアニメーションや、スムーズな動きを実現しやすいのがReactの強み。訪問者を飽きさせない、印象に残るWebサイトが作れます。3. 高いカスタマイズ性テンプレートに縛られず、ビジネスの目的に合わせた完全オリジナルのUI/UXデザインが可能。「このボタンをこう動かしたい」という細かな要望も実現できます。4. モバイルファーストレスポンシブデザインが標準で、スマホ・タブレット・PCのどのデバイスでも美しく表示されます。特にモバイルでの体験を重視した設計が容易です。5. 将来性の高

こんにちは！今回は、Reactを使用して「家計簿アプリ」を作る方法を紹介します。このアプリでは、月ごとの収支を簡単に管理でき、ユーザーが自由にカテゴリーを追加できる柔軟性があります。また、視覚的に収支のバランスが分かりやすいグラフを表示することができます。目次収支の設定自由にカテゴリー名を追加視覚的なグラフ表示ダークモードとモーダルの導入1. 収支の設定アプリを使用する際、最初に表示される収支は「250,000円」と固定されていますが、この金額はユーザーが変更できるように設計されています。収支額は動的に更新可能なので、自分の状況に合わせてカスタマイズできます。2. 自由にカテゴリー名を追加ユーザーは支出のカテゴリー名を自由に追加できます。これにより、「食費」「交通費」など、自分に合ったカテゴリーを設定でき、より個別の支出管理がしやすくなります。3. 視覚的なグラフ表示Chart.jsライブラリを使って、収入と支出を円グラフや棒グラフで視覚的に表示します。これにより、数値だけでなく、グラフを見ればすぐに収支の状況がわかります。4. ダークモードとモーダルの導入さらに、アプリのテーマをダークモードに切り替えられる機能を追加しました。夜間でも目に優しいデザインに変わり、使用者の快適さを考慮しています。また、モーダルウィンドウを使って、詳細情報を簡単に確認できるようにしています。使用技術React（フロントエンドライブラリ）Chart.js（グラフ描画ライブラリ）CSS Flexbox（レイアウト調整）このアプリの作成過程を通じて、Reactの基本的な使い方や、動的なUIの作成方法を学

みなさんこんにちは。小学2年生になる息子がいるのですが、ポケモンが大好きです。かつ、今後のICT教育を見据え、パソコンにはどんどん触れてほしいと思い、ポケモンアプリを開発することにしました。ゲームボーイカラー風ポケモンアプリ(エイチ)ttps://pokemon-app-ff27a.web.app/※リンクが貼れない仕様なので頭文字をカタカナにしてます。見た目はこんな感じです。仕様の詳細は以下の通りです。前提条件小学2年生だとPCでのマウス操作やキーボード入力もこれから頑張って習得していく時期かと思います。ですので、あくまでも子供たちに対してPCの操作に慣れてもらうことを目的としています。主な操作はクリック操作、テンキー入力、エンターキー入力をベースに作成しています。実装環境React × firebaseで実装しております。UIについてゲームボーイ世代大興奮(?)なゲームボーイカラーを模倣しております。画像は使用しておらず、フォントの選定からすべて実装で表現しております。ポケモンの情報についてPokemonAPIを使用してポケモンの画像と名前をランダムに表示しています。ポケモンのBGMについてPokemon Game Sound Libraryから音楽データを取得しています。初代ポケモン世代としては開発していく中でBGMを聞くのが一番楽しかったですｗフォントについてゲームボーイのフォントに近いDotGothic16を採用しています。ゲームの内容について小学2年生でも簡単な1桁同士のたしざん、ひきざん、かけざんを使用しています。ポケモンが大好きなお子様をお持ちのお父さんお母さん

Redux Toolkit を使った Redux 活用法Redux Toolkit を使うと Redux の設定が簡素化されます。この連載では、何回かに分けて Redux Toolkit を使った Redux の活用事例を紹介していきます。Redux Toolkit を利用する利点React などで Redux を利用する際のハードルになるのは、Redux を利用する為の細かい設定が初心者には面倒という点がありました。Vue などでよく利用される、Vuex や Pinia などの場合は、Redux に比べると設定の部分が大幅に簡素化されていて、初心者でも扱いやすいというのが大きな利点になっています。Redux Toolkit を利用すると、この設定の部分を大きく簡素化する事ができます。Redux Toolkit をする場合に必要な設定は：＊　ストアの作成＊　React への組み込み＊　Slice Reducer の作成とストアへの登録　この三点です。ストア(store)は、データを一括管理するための、Redux の仕組みと考えてください。 このストアには、後から説明する、「slice reducer」と呼ばれる、実際に一括管理するデータの定義と、そのデータの処理方法を記述するモジュールを登録する必要がありますが、最初はまずその「型」を作ります。「slice reducer」は作成後に追加で登録すれば OK です。その後で、作成したストア（store）を React に組み込んで、あとは、実際のデータとその処理方法を記述した、「slice reducer」を作成して、最初に作成し