学びのノートへようこそ

知識を整理し、学びのプロセスを記録するための明確で整然としたスペース。

学びの旅へようこそ

書き、分析し、振り返ることで、知識はより長く定着する。ここは、アイデアを集め、知識を記録し、文章を書くことで思考を研ぎ澄ます場所です。

理解しているから書くのではない — 理解するために書くのです。

基本原則#

意図的な学習
書くことで考える
知識を整理して保つ

意図的な学習とは、適切なタイミングで重要なポイントを復習すること。¹

このノートで見つかるもの#

知識の流れ#

記憶に残るコンセプト
実践的・技術的なノート
ツールとメンタルモデル

トピック#

プログラミング
システム思考
生産性と習慣
個人の成長と明晰さ

Markdownデモ & スタイルプレイグラウンド#

このセクションは、Markdown/MDXコンポーネントが正しく動作し、デザインが整っていることを確認します。

Desk with notes and coffee — ローカルアセットは、必要であればテーマ設定に従います。
Source: Custom desk illustration

サイドノート#

サイドノートは、読みの流れを途切れさせずに文脈を補足します。 ¹

テキストスタイル#

強調のための太字
注意を引く斜体
~~もはや信じていないこと~~
インラインコード

書くことで知識はより強固になる。

タブ#

console.log("Hello, World!");
 
function sum(a, b) {
  return a + b;
}
 
console.log("Sum =", sum(5, 7));

#include <iostream>
 
int main() {
    std::cout << "Hello, World!" << std::endl;
    int a = 5;
    int b = 7;
    std::cout << "Sum = " << a + b << std::endl;
    return 0;
}

print("Hello, World!")
 
a = 5
b = 7
print("Sum =", a + b)

ステップガイド#

01
ステップ1: プロジェクトを初期化
create-next-app コマンドを実行してクリーンな開発環境と依存関係をまとめて整える。
02
ステップ2: Tailwind CSS を導入
tailwind.config.js を調整し、globals.css に @tailwind ディレクティブを追加し、長文向けの本文スタイルやカスタムフォントも確認する。この説明文はあえて長めにして、複数行にまたがっても縦のコネクターが崩れないことをテストしている。
03
ステップ3: デプロイ
コードをGitにプッシュし、Vercelプロジェクトを用意して最初のデプロイを監視する。ブランチプレビューを有効にしたり、レビュアーを招待したり、リリースノートを書くといった作業を付け加えても縦のガイドが整ったままになることを確かめよう。

Tree View#

WORKSPACE

Button.tsx

Header.tsx

package.json

README.md

タスクと計画#

このスペースを初期化する
定期的に書いて公開する
振り返り・修正・改善を行う

リンク & リソース#

私のGitHubを見る

表の例#

トピック	学習目標			現状
	計画	期間		レベル	進捗
	計画	開始	終了	レベル	進捗率 (%)	完了項目
テクニカルスキル
Programming (Algorithms)	中級レベル到達	01/10	15/12	中級 (Intermediate)	85%	アルゴリズム部分完了
System Design	基本アーキテクチャの理解	20/11	—	初級 (Beginner)	30%	High-level Designを学習中
思考法 & モデリング
Systems Thinking	基礎モデルの習得	05/10	—	初級 $\rightarrow$ 中級	60%	複雑性(Complexity)について執筆済
Systems Thinking	実践へのモデル適用	15/11	31/12	中級 (Intermediate)	20%	複雑性(Complexity)について執筆済
Productivity	Atomic Habitsの実践		期限なし	上級 (Advanced)	95%	安定した習慣の形成
自己成長
Personal Growth	分析記事を5本執筆	01/11	15/12	入門 $\rightarrow$ 初級	40%	2本執筆済み
Personal Growth	1ヶ月後の復習	$x^2 + y^2 = x^2$		発展中	—	該当なし
平均進捗率			約 60–70%
総評			順調に進行中、安定維持

数式#

$F = ma$ 、 $\vec{p} = \gamma m \vec{v}$ 、 $E^2 = (pc)^2 + (m_0 c^2)^2$ などのインライン式。

標準模型のラグランジアン

\begin{aligned} \mathcal{L}_{SM} = &-\frac{1}{4} \color{#34d399}{F_{\mu\nu} F^{\mu\nu}} \\ & + i \bar{\psi} \not D \psi + h.c. \\ & + \psi_i y_{ij} \psi_j \phi + h.c. \\ & + |D_\mu \phi|^2 - V(\phi) \\ & - \frac{1}{4} \color{#34d399}{B_{\mu\nu} B^{\mu\nu}} - \frac{1}{8} tr(\mathbf{W}_{\mu\nu}\mathbf{W}^{\mu\nu}) - \frac{1}{2} tr(\mathbf{G}_{\mu\nu}\mathbf{G}^{\mu\nu}) \end{aligned}

入れ子の微積分と行列: この組み合わせは、根号、入れ子の分数、および行列のレイアウトが崩れないかどうかを確認するために使用されます。

\color{#34d399}{J_{\alpha}(x)} = \sum_{n=0}^{\infty} \frac{(-1)^n}{n! \Gamma(n + \alpha + 1)} \left( \frac{x}{2} \right)^{2n+\alpha} \quad \text{および} \quad \mathbf{H} = \begin{pmatrix} \frac{\partial^2 f}{\partial x^2} & \frac{\partial^2 f}{\partial x \partial y} \\ \frac{\partial^2 f}{\partial y \partial x} & \sqrt[3]{ \frac{\int_{-\infty}^{\infty} e^{-t^2} dt}{\zeta(s)} } \end{pmatrix}

アインシュタイン方程式: 上付き・下付き文字（添字）の表示機能をテストするために使用されます。

\color{#34d399}{R_{\mu \nu}} - \frac{1}{2}R g_{\mu \nu} + \Lambda g_{\mu \nu} = \frac{8 \pi G}{c^4} T_{\mu \nu} \implies \int \left( \frac{c^4}{16 \pi G} (R - 2\Lambda) + \mathcal{L}_M \right) \sqrt{-g} \, d^4x

コードブロック#

テストでは、キーと値の文字列、ネストされた配列、および null/boolean 値を強調表示します。

{
  "app_name": "MDX_Renderer",
  "version": 1.0,
  "features": ["syntax-highlighter", "math-jax"],
  "config": {
    "dark_mode": true,
    "deprecated_field": null,
    "max_retries": 5
  }
}

括弧なしでインデントとリストの可視性をテストします。

server:
  host: "0.0.0.0"
  port: 8080
routes:
  - path: /api/v1
    handler: main_handler
  - path: /health
    check: true

テーブル名と文字列に対してキーワード (SELECT、WHERE) の色をテストします。

SELECT u.id, u.username, o.total
FROM users u
JOIN orders o ON u.id = o.user_id
WHERE o.status = 'completed'
  AND o.created_at > '2023-01-01'
ORDER BY o.total DESC;

::、&、'a (有効期間) などの特殊文字やマクロ println! をテストします。

struct User<'a> {
    username: &'a str,
    active: bool,
}
 
fn main() {
    let user = User { username: "Dev", active: true };
    println!("User: {}", user.username);
}

追加された行 (+) と削除された行 (-) の背景/テキストの色をテストします。

function calculateTotal(price, tax) {
-   return price + price * tax;
+   return price * (1 + tax);
  }

16進カラーコード #0f172a をテストします

.button-primary {
  background-color: #0f172a;
  color: rgba(255, 255, 255, 0.9);
}
.button-primary:hover {
  transform: translateY(-2px);
}

カスタムコンポーネント#

現代のMDXでは、投稿内にインタラクティブな要素を直接埋め込むことができる — データ可視化にとても便利です。

チャートデモ#

学習実験#

学ぶ最良の方法は実践を通じてであることが多い。以下はモデル実験のトレーニングログであり、小さな一歩が積み重なって進歩となることを思い出させてくれます。

小さくても、継続的な成長は時間とともに大きな成果を生む。

Epoch 1/5
166/166 ━━━━━━━━━━━━━━━━━━━━ 84s 415ms/step - loss: 0.1110 - val_loss: 0.0959
Epoch 2/5
166/166 ━━━━━━━━━━━━━━━━━━━━ 79s 472ms/step - loss: 0.0874 - val_loss: 0.0802
Epoch 3/5
166/166 ━━━━━━━━━━━━━━━━━━━━ 78s 463ms/step - loss: 0.0789 - val_loss: 0.0765
Epoch 4/5
166/166 ━━━━━━━━━━━━━━━━━━━━ 78s 467ms/step - loss: 0.0769 - val_loss: 0.0731
Epoch 5/5
166/166 ━━━━━━━━━━━━━━━━━━━━ 77s 464ms/step - loss: 0.0753 - val_loss: 0.0712

Callouts#

パフォーマンスに関する注意

クライアント側でコンポーネントを多くレンダリングすると、FCP（First Contentful Paint） が低下する可能性があります。

可能であれば Server Components の使用を検討してください。

非推奨

getStaticProps 関数は v15 で非推奨になります。fetch API へ移行してください。

.env ファイルを GitHub にコミットしてはいけません。

$x^2+y^2=z^2$

結びの言葉#

訪問してくれてありがとう。

このスペースは、創り手とともに進化し、変化し、改善し続けていきます。

閲覧数

— 閲覧数

Nguyen Xuan Hoa

nguyenxuanhoakhtn@gmail.com