スポンサーリンク
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」の世界をゆっくり案内していきます。ただ知識として覚えるだけでなく、「自分なら何を作れるかな?」と想像しなが...
Java

Java | 1 日 120 分 × 7 日アプリ学習:初級編

この初級編7日間プランの全体像この「1 日 120 分 × 7 日・初級編」は、あなたがすでにmain メソッド変数・if・forメソッド配列など「超初級」で触った前提で、そこから一段階レベルを上げる...
Java

Java | 1 日 60 分 × 7 日アプリ学習:超初級編

この7日間プランの全体像このプランは「Java はまったく初めて」「プログラミングもほぼ初めて」という人を想定しています。毎日 60 分 × 7 日で、コンソール(黒い画面)で動く小さなアプリを作れる...
Java

Java | Java 標準ライブラリ:CompletableFuture 基礎

CompletableFuture を一言でいうとCompletableFuture は、「将来終わる“非同期の計算結果”を表す箱(Future)に対して、『終わったらこれをして、その後これをして…』...
Java

Java | Java 標準ライブラリ:Future

Future を一言でいうとjava.util.concurrent.Future は、「別スレッドで走っている“将来の計算結果”を受け取るための“約束の箱”」です。時間のかかる処理を Executo...
Java

Java | Java 標準ライブラリ:ExecutorService 概要

ExecutorService を一言でいうとExecutorService は、「スレッドを自分で new せずに、”仕事(タスク)だけ” を投げれば、いい感じに別スレッドで実行してくれる仕組み」で...
Java

Java | Java 標準ライブラリ:Timer / TimerTask

Timer / TimerTask を一言でいうとTimer と TimerTask は、「指定した時間後に、あるいは一定間隔で、“別スレッドで” 処理を実行してくれるシンプルなタイマー機能」です。「...
Java

Java | Java 標準ライブラリ:Base64

Base64 を一言でいうとjava.util.Base64 は、「バイナリデータ(画像・PDF・任意のバイト列)を、テキスト(英数字+記号)だけで安全にやり取りできるように変換するためのクラス」です...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 実務でのベストプラクティス

実務でのベストプラクティスとは何か「ベストプラクティス」とは、現場で繰り返し使われてきた“安全で効率的なやり方”のことです。JavaScript の配列・オブジェクト操作では、可読性・性能・安全性のバ...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – データ構造選択

データ構造選択とは何かデータ構造選択は「どの形(配列、オブジェクト、Map、Set、派生構造)でデータを持つか」を決めることです。ここが重要です:用途に合った構造を選ぶと、計算量が下がり、コードが短く...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 関数分割

関数分割とは何か関数分割は「大きな処理を、明確な役割ごとの“小さな関数”に切り出して組み合わせる」設計です。ここが重要です:1つの関数は1つの責務(Single Responsibility)。入力と...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 可読性優先 vs 速度優先

可読性優先 vs 速度優先とは何かコードには「誰が読んでも意図が分かる」「実行が速い」という2つの価値があります。ここが重要です:大半の業務コードでは“まず可読性”を優先し、速さは“必要な箇所だけ”最...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 大量データ処理の考え方

大量データ処理とは何か大量データ処理は「配列やオブジェクトが数万〜数百万件規模になっても、時間とメモリを破綻させずに目的を果たす」ための考え方です。ここが重要です:やみくもに map や filter...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – メモリ参照の注意点

メモリ参照とは何かJavaScript の配列・オブジェクトは「参照型」です。ここが重要です:変数には“値そのもの”ではなく“値への参照(ポインタのようなもの)”が入ります。参照が同じだと、片方を変更...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 破壊的 / 非破壊的操作

破壊的 / 非破壊的操作とは何か破壊的操作は「元の配列・オブジェクトを直接書き換える」こと、非破壊的操作は「元を保ったまま、新しい配列・オブジェクトを返す」ことです。ここが重要です:共有されているデー...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – reduce の使いどころ

reduce とは何かreduce は「配列を1回なめて、“累積器(accumulator)”に結果を積み上げ、最後に1つの値(数値・文字列・配列・オブジェクト)にまとめる」ための関数です。ここが重要...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – map / filter のコスト

map / filter のコストとは何かmap / filter は「要素ごとにコールバックを呼び、結果配列を新しく作る」処理です。ここが重要です:計算量は基本的に (O(n)) ですが、時間とメモ...
JavaScript

JavaScript | 配列・オブジェクト:パフォーマンス・設計 – 配列操作の計算量

配列操作の計算量とは何か「計算量」は、要素数を (n) としたとき操作に必要なステップ数の目安です。ここが重要です:操作ごとに増え方が違います。例えば末尾に追加(push)はほぼ一定時間ですが、先頭に...
Python

Python | Web フレームワーク:背景タスク

概要(背景タスク=「レスポンスの後で、裏でこっそり動く仕事」)背景タスクは、「HTTP レスポンスはすぐ返したいけど、そのあとにやりたい処理がまだ残っている」ときに使う仕組みです。例えば、ログを外部サ...
Python

Python | Web フレームワーク:CORS

概要(CORS は「別ドメインからの JS リクエストを許可するルール」)CORS(Cross-Origin Resource Sharing)は、「ブラウザ上の JavaScript が、別のドメイ...
スポンサーリンク