JavaScript
JavaScript | 再帰とループの性能比較
フレームワーク
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第4章：実用的React – データ取得（fetch）
APIとは何か「データください」をお願いするための窓口React / Next.js で「データを画面に表示したい」とき、どこかからデータを「取ってくる」必要があります。そのときに話に出てくるのが A...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第4章：実用的React – useEffect入門
useEffectとは「画面の変化に合わせて“副作用”を実行する仕組み」ここまで扱ってきた useState は、「値（状態）を覚えておく仕組み」でした。useEffect は、それとは別の役割を持っ...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – 簡単なミニアプリ②
ここで作る「Next.jsらしい」ミニアプリの全体像ここまでで、React の基本（コンポーネント・state・props・イベント）Next.js の基本（ページ分割・Link・layout・Met...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – Metadata（SEO基礎）
Metadataとは何か（Next.jsでの位置づけ）まず「Metadata（メタデータ）」という言葉から整理します。これは、ページの「裏側の情報」です。HTML でいうと <head> の中に書く情...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – 画像表示（Image）
Next.jsの画像表示の全体イメージ画像を出したいとき、ふつうのHTMLなら <img src="..."> を使いますよね。Next.js でも <img> は使えますが、「Next.jsらしさ」...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – CSSの当て方
Next.jsでCSSをどう当てるかの全体像React / Next.js は「JSXで見た目を書く」ので、最初は「CSSはどこに書けばいいの？」となりがちです。Next.js ではいくつか方法があり...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – レイアウト（layout.tsx）
Next.js のレイアウトの全体像React 単体だと、ページごとにヘッダーやフッターを書きがちです。でも実際のサイトを想像すると、ほとんどのページで「共通の部分」があります。画面の一番上にあるヘッ...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – ページ遷移（Link）
「Next.jsらしさ」とページ遷移ここまでで「1ページの中で動く React」はかなりイメージできてきたと思います。ここからは「Next.js らしさ」がグッと出てくるところ――ページ遷移と複数ペー...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – 簡単なミニアプリ①
簡単なミニアプリを作る理由ここまで、React の「部品」を一通り見てきました。JSXコンポーネントpropsuseState（状態管理）イベント処理条件分岐配列と mapコンポーネント分割いよいよ、...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – コンポーネント分割
コンポーネント分割とはコンポーネント分割は、ざっくり言うと「画面を小さな部品に分解して、意味のある単位ごとに整理すること」です。ひとつのコンポーネントの中に、ヘッダーも、メインも、フッターも、ボタンも...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – 配列の表示（map）
配列の表示（map）とはReact では、「同じ形のデータがたくさんある」ときに、それをまとめて画面に並べることがとても多いです。例えば、Todoリスト・商品一覧・コメント一覧などは、まさに「配列を画...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – 条件分岐表示
条件分岐表示とは「状況に応じて表示内容を変える」ための仕組みReact では、画面に表示する内容を 状態（state） に応じて切り替えることがよくあります。例えば、ログインしているときだけユーザー名...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – イベント処理
イベント処理とはイベント処理は、「ユーザーの操作に反応して、何かを実行するしくみ」です。ボタンをクリックしたり、入力フォームに文字を打ったり、Enterキーを押したり――これらはすべて「イベント」です...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – useState（状態管理）
stateとは「時間とともに変わる値」を扱うための仕組みReact でいう state（ステート）は、ひと言でいうと「画面の中で変わる値」です。逆に言うと、「一度決めたら変わらないもの」は state...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第2章：Reactの基本操作 – props（データの受け渡し）
propsとは何か「コンポーネントに渡す“引数”のようなもの」props（プロップス）は、React コンポーネントに渡す「データの入れ物」です。少しプログラミング寄りに言うと、「コンポーネント版の関...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – Reactコンポーネントの基本
コンポーネントとは「画面を小さな部品に分けて再利用する考え方」コンポーネントは、ひと言でいうと「画面の部品」です。もっと言うと、「ある見た目と振る舞いをひとつのまとまりとして名前をつけたもの」です。例...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – JSXとは何か
JSXとは何か「JavaScriptの中でHTMLっぽく書ける特別な文法」JSX は、React で画面を作るときに使う「JavaScript拡張文法」です。ぱっと見は HTML にそっくりですが、正...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – Next.jsのフォルダ構造
Next.js のフォルダ構造の全体イメージNext.js は「フォルダの構造 ＝ URL の構造」という、かなり直感的な仕組みを持っています。特に新しい App Router（app ディレクトリ）...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – 開発環境の準備
Node.jsとは「ブラウザの外で動くJavaScriptエンジン」JavaScript はもともと「ブラウザの中で動く言語」でした。Node.js は、その JavaScript を「パソコンの中（...
Next.js Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – React / Next.js とは何か
プログラミング初心者向けに、できるだけ専門用語をかみ砕いて、「React」と「Next.js」の世界をゆっくり案内していきます。ただ知識として覚えるだけでなく、「自分なら何を作れるかな？」と想像しなが...
JavaScript JavaScript 逆引き集 | filter で条件抽出
JavaScript配列の条件抽出（filter）の基本と実践「条件に合う要素だけを取り出して新しい配列を作りたい」なら、filterが最短で安全。元の配列は変えず、判定関数がtrueを返した要素だけ...
JavaScript JavaScript 逆引き集 | map で配列変換
JavaScript配列変換（map）の基本と実践「配列の各要素を加工して、新しい配列を作りたい」なら map が最短ルート。元の配列には触れず、処理結果だけを返してくれるので、初心者でも安全に“変換...
JavaScript JavaScript 逆引き集 | 配列のループ（forEach）
JavaScript配列のループ（forEach）の基本と実践「配列の全要素に同じ処理をサッと当てたい」なら、forEachがいちばん手軽。カウンターや終了条件を意識せず、読みやすく安全に“全件処理”...
JavaScript JavaScript 逆引き集 | 配列のループ（for…of）
JavaScript配列のループ（for...of）の基本と実践最初は「インデックスって必要？」と迷うかもしれないけれど、値だけ順に扱いたいなら for...of がいちばん素直で読みやすい。配列から...
JavaScript JavaScript 逆引き集 | 配列のループ（for）
JavaScript配列のループ（for）の基本と実践最初の一歩って、つまずきやすい。でも「for」は味方。配列を順番に処理するためのいちばん素直なやり方で、仕組みがわかると一気に視界が開けます。ここ...
React React/Vue | Reactなどのフレームワークでの this とアロー関数の使われ方
では「Reactなどのフレームワークでの this とアロー関数の使われ方」を整理してみましょう。ReactはJavaScriptクラスや関数を多用するので、this の扱いが特に重要になります。⚛️...
JavaScript JavaScript | クラス内でアロー関数を使う理由
クラスの中でアロー関数を使う理由は、主に this の扱い にあります。初心者がよくつまずくポイントなので、例を交えて整理しますね。通常のメソッドとアロー関数の違い通常のメソッドclass Count...
JavaScript JavaScript | アロー関数とbindの違い
アロー関数とbindの違いを初心者向けに解説JavaScriptで「thisが思った通りにならない！」というときによく出てくるのが アロー関数 と bind。どちらも「thisを固定する」ために使われ...