Next.js-2.React Hooks編- Reace Hooks その③
useStateで配列を更新しリアルタイムで表示を変える今回はuseStateで配列の値を管理し、それをリアルタイムで表示していきます。今回の書き方は管理者側の更新画面などでReactで頻繁に出てくるものなので、少し複雑ですが頑張っていきま...
2025-01
Next.js-2.React Hooks編- Next.js-2.React Hooks編- Reace Hooks その②
useStateでテキスト入力useStateを使って入力したテキストがリアルタイムで表示されるようにしてみましょう。まずはapp/componentsフォルダにtextInput.jsを作成しTextInputコンポーネントを定義します。...
Next.js-2.React Hooks編- Reace Hooks その①
HooksとはReact の Hooks（フック） とは、関数コンポーネントで「状態（state）」や「ライフサイクル」の機能を使うための仕組み です。頻繁に使うHooksの解説をしていきます。useStateHooksの一つであるuseS...
Next.js-1.構築編- Next.js構築 その⑩
スプレッド構文とはスプレッド構文について説明します。スプレッド構文は配列やオブジェクトを「展開」する機能を持ちます。まずは下記のようなpersonというオブジェクトがあったとします。const person = { name: "Alice...
Next.js-1.構築編- Next.js構築 その⑨
propsを使ってデータを渡そう今回はコンポーネント間でデータを受け渡す方法について見ていきます。Propsとはprops（プロップス）は、親コンポーネントから子コンポーネントへデータを渡す仕組みです。親から子へ一方向に渡されるデータで、子...
Next.js-1.構築編- Next.js構築 その⑧
Javascriptの扱い方これまでWebページを構成するHTML(JSX)、CSS、画像ファイルの使い方を見てきました。もう一つWebページに欠かせないJavascriptの扱い方について見ていきましょう。まずは今回記述する内容のためのコ...
Next.js-1.構築編- Next.js構築 その⑦
CSSをあてようCSSをあてていきましょう。まずは「public」フォルダ内に「asset」フォルダを作成し、その中に「css」フォルダを作成し、更にその中に「style.css」ファイルを作成します。style.cssの中にスタイルを記述...
Next.js-1.構築編- Next.js構築 その⑥
ページの追加現在はトップページのみですので、ページ追加をしてみましょう。まず、appフォルダ内にページのフォルダを作成します。ここでは「about」ページを作る想定です。次にaboutフォルダ内にpage.jsを作成します。page.jsに...
Next.js-1.構築編- Next.js構築 その⑤
コンポーネントとはコンポーネントの言葉の定義から見ていきます。まず、REACTにおけるコンポーネントというのは、画面の各構成要素をREACTで定義したものだと捉えてください。ページにはいろいろな部品。例えばヘッダーやサイドバーがあったりしま...
Next.js-1.構築編- Next.js構築 その④
プロジェクト構造の理解（App Router版）主なフォルダとファイルapp/: ルート構造を管理するディレクトリ。各サブフォルダがルート（ページ）になります。フォルダ内のpage.jsが、そのルートのコンポーネントを定義します。publi...