Convict English：(400) ザ・アイディエーター：ヴァンスの「理論」がトランプの「実践」にぶつかるとき
J.D. Vance's theory of Trumpism is no match for the practice — Lexington column, The Economist, 16 April 2026 (print headline: "The ideator")
続きをみる
note更新
続きをみる
Understanding TypeScript: TypeScript の基本を活かしたデモプロジェクト：ターミナルで動く投資計算機を作る (第4/20課)
Convict English：(399) カラカスの条件：解放と宙吊りのはざまに立つベネズエラ
Understanding TypeScript: TypeScript コンパイラとその設定 (第3/20課)
tsconfig.json は、TypeScript を「単一ファイルのコンパイラ」から「プロジェクト全体を理解する開発ツール」へと格上げする中心的な設定ファイルです。
すべてのオプションを暗記する必要はなく、target 、 rootDir 、 outDir 、 strict など、日々の開発に効く少数の設定を理解することが重要です。
本セクションでは、コンパイラ設定の代表的な項目、JavaScript との相互運用、型チェックの厳格化、tsc --watch 、 @types/* パッケージなど、実務で繰り返し登場する考え方を整理します。
続きをみる
Convict English：(398) 結び目を解く：中国女性、離婚、そして国家主導の婚姻政策の限界
Understanding TypeScript: TypeScript の基礎と基本型 (第2/20課)
TypeScript の本質は、プログラムが扱える値の形を「実行前に」記述・検証できる点にある
プリミティブ型・ユニオン型・配列型・タプル・オブジェクト型・列挙型・リテラル型・型エイリアスを使い分け、データの形をできるだけ具体的に表現する
any を避け、ユニオン型や unknown で「精密な柔軟性」を確保する
void ・ never ・関数型を理解し、関数値そのものを型として扱えるようにする
null ・ undefined ・型アサーション・オプショナルチェイニング・非 null アサーション・ ?? を使って欠落値を明示的に扱う
続きをみる
Convict English：(397) スローモーション飢饉：ホルムズ海峡閉鎖が揺るがす世界の食料安全保障
Understanding TypeScript: はじめに — TypeScript への、ゆっくりとした最初の一歩 (第1/20課)
TypeScript は JavaScript のスーパーセット であり、静的型システムを追加した上で、最終的にはプレーンな JavaScript にコンパイルされて実行される。
6 分の「Why Would You Use TypeScript?」レクチャーで示される 19% 税込み計算のデモは、JavaScript が黙って受け入れる文字列と数値のミスマッチを、TypeScript が確実に拒否することを示す象徴的な例である。
このセクションのゴールは、Node.js（LTS）と tsc をインストールし、VS Code をセットアップし、コース全体のロードマップを把握して、次のセクションに進む準備を整えることである。
続きをみる
Convict English：(396) Mythosの瞬間：アメリカがAIの危険な力に目覚めるとき
Convict English：(395) 消えゆく後継者：世界のファミリー企業を襲う大承継ウェーブ
Convict English：(394) カニエ・テスト：言論・人種差別・メンタルヘルスをめぐる英国の繊細な妥協
Convict English：(393) コロナ後の病院が抜け出せない「死の悪循環」
Convict English：(392) 意外な仲介者と超大国の変容：パキスタンの湾岸外交とアメリカの戦争観の転換
React - The Complete Guide 2025 (incl. Next.js, Redux): ユーザーディレクトリをゼロから構築する: フォーム入力・バリデーション・エラーモーダルを備えたユーザー管理アプリを一から作り上げる (第40-2/40課)
空のプロジェクトからコンポーネントツリー全体を自力で構築する
useStateによる双方向バインディング、状態のリフトアップ、条件付きレンダリングを実践する
再利用可能なCard・Button・ErrorModalコンポーネントを設計する
バリデーション付きフォームとエラーモーダルで堅牢なUIを実現する
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): 投資計算アプリを構築しよう: 静的なコンポーネントを完全に動作するアプリケーションに変える (第40-1/40課)
モノリシックなコンポーネントを論理的な構成要素に分割する方法
イベントハンドリング、状態管理、二方向バインディングの実装
stateの持ち上げと派生stateの活用
条件付きレンダリングとリストレンダリングの実践
CSS Modulesによるスタイルのスコープ化
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): リストのレンダリングと条件付きコンテンツ: .map()による動的リスト生成、keyプロパティの役割、.filter()によるフィルタリング、そして条件付きレンダリングの4つのアプローチを学ぶ (第39/40課)
.map()を使ったデータ配列からJSX要素への動的変換
keyプロパティがReactのリスト更新に不可欠な理由
.filter()とstateを組み合わせたリストのフィルタリング
条件付きレンダリングの4つのアプローチ（三項演算子、&&演算子、変数＋if文、早期リターン）
コンポーネント分離と再利用可能なチャートの構築
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): Reactのステートとイベント処理: アプリケーションを静的な表示から動的でインタラクティブなUIへと変える、ステートとイベントの基礎 (第38/40課)
Reactにおけるイベントリスニングの方法と、onClick・onChangeなどのonプロップスの使い方
useStateフックを使ったステート管理と、コンポーネントの再レンダリングの仕組み
フォームの構築、双方向バインディング、フォーム送信の処理
子から親へのデータ通信と「ステートの引き上げ（Lifting State Up）」パターン
派生値の計算と、制御コンポーネント・ステートレスコンポーネントの考え方
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): コンポーネントの基礎を実践しよう: モノリシックなコンポーネントを分割し、再利用可能なReactアプリに変える (第37/40課)
モノリシックなAppコンポーネントから始めて、段階的にコンポーネントに分割する
JSXの中括弧を使って動的データを出力する方法を学ぶ
propsを使った再利用可能なカスタムコンポーネントの作成方法を習得する
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): 裏側で起きていることを知り、プロジェクトの整理術と関数構文の選択肢を身につける: JSX、ファイル構成、アロー関数 (第36-2/40課)
JSXはReact.createElement()呼び出しへと変換されるシンタックスシュガーである
コンポーネントファイルをサブフォルダに整理することで、プロジェクトの拡大に対応できる
アロー関数は従来の関数宣言と機能的に同等であり、好みで使い分けられる
Reactの基礎とコンポーネント操作モジュールの主要概念を総復習する
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): Reactの基礎とコンポーネントの使い方: コンポーネント、JSX、props、コンポジションを実践的に学ぶ (第36-1/40課)
Reactのコンポーネントベースアーキテクチャの考え方と宣言的アプローチを理解する
JSXの構文ルール、動的データの出力方法、propsによるデータの受け渡しを習得する
コンポジションとchildren propを使ったラッパーコンポーネントの作り方を学ぶ
経費トラッカーアプリを通じてReactの基礎を実践する
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): コース更新と旧コースコンテンツ (第35/40課)
React自体は変わっていない——既存の知識はそのまま有効
コース前半が再構成され、より良い例とセクション分割が行われた
旧コンテンツは「LEGACY」として残されており、ダウンロードも可能
既存の受講生はアップデートを無料で受け取れる
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): 長い学習の旅を終えて — Reactの基盤を活かし、さらなる成長へ (第34/40課)
コース全体を振り返り、バニラJavaScriptからReact Server Componentsまでの学習の軌跡を確認
知識を定着させるための復習・再構築の実践的アドバイス
React Native、Next.js、MERNスタックなど、Reactエコシステムの次の学習方向を紹介
Maximilianの著書『React Key Concepts』を補足リソースとして紹介
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): Reactを現実世界に接続する: SPAをバックエンドAPIに接続し、React Routerでクライアントサイドルーティングを実装する方法 (第33-2/40課)
Reactのフロントエンドとバックエンド間のHTTP通信の仕組み
useEffectを使ったデータ取得とローディング状態の管理
React Routerによるクライアントサイドルーティングの導入
ルートローダーとアクションを使ったデータ管理の大幅な簡素化
動的ルートによる個別投稿の詳細表示
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): Reactの要約とコア機能ウォークスルー: ゼロからはじめるアプリ構築 (第33-1/40課)
Reactとは何か、なぜ使うのかを理解する
Reactプロジェクトのセットアップ方法を学ぶ
コンポーネント、props、state、イベントリスナー、条件付きレンダリング、動的リスト出力を習得する
宣言的アプローチと命令的アプローチの違いを理解する
続きをみる
React - The Complete Guide 2025 (incl. Next.js, Redux): React + TypeScript: props、イベント、refs、state、コールバック、Context APIまで型付けする方法 (第32-2/40課)
TypeScriptはReactのパターンを変えるのではなく、既存の知識の上に型安全性のレイヤーを追加する
React.FC<T>を使ったpropsの型付け、クラスによるデータモデル、ジェネリクスを使ったuseStateが基本パターン
イベントハンドラ、refs、コールバック関数にはすべて明示的な型注釈が必要
Context APIもTypeScriptの型エイリアスとcreateContext<T>で完全に型付けできる
続きをみる
自己紹介
化学の研究者としてアカデミックな分野でキャリアをスタートさせましたが、プログラミングへの好奇心から流体解析とFortranプログラミングの世界を探求することになりました。5年前に日本に帰国した後、ウェブ開発の世界に飛び込み、HTML、CSS、JavaScriptの基礎を独学で学びました。現在はデータサイエンティストとして、その知識と経験を生かし、この分野における革新と成長を推進しています。自由時間には、体操で体を動かし、Oculus Quest 2でバーチャルリアリティに没頭しています。学問とプログラミングの両方の強力なバックグラウンドを持つHafniumは、どんなチームにもユニークな視点とスキルセットをもたらします。
今後のプロジェクトとウェブ開発およびデータサイエンスの分野への貢献にご期待ください。
ポートフォリオへようこそ!
こんにちは！AIユーザー兼プログラマーのHafniumです。このウェブサイトでご覧いただけるように、私はAIとプログラミングの分野に情熱を注いでおり、これらの分野で活躍するために必要なスキルと知識を得るために努力してきました。ここでは、私が携わったプロジェクトなどの作品例や、履歴書、連絡先などをご紹介しています。このウェブサイトが、私のスキルと経験についてご理解いただけることを願っています。常に学び、成長する機会を求めていますので、ご質問やプロジェクトでのコラボレーションをご希望の方は、ご遠慮なくご連絡ください。私のポートフォリオを見て楽しんでいただければと思います。
