はじめに：なぜ作ったのか
高専の情報科に通っていますが、正直に言います。
C言語のポインタで何度も挫折しかけました。
「変数の住所が入る箱だよ」と教わっても、*p とか &a が入り乱れると、脳内でメモリのイメージが崩壊するんです。
教科書の図は動かないし、文字だけの解説では「なぜそうなるのか」という深い部分（スタックやメモリ配置の理屈）がわかりにくい。
「なら、自分が納得できる『動く教科書』をAIと一緒に作ればいいじゃないか」
そう思って、Pythonの Streamlit と図解ツールの Mermaid.js を使い、
「ポインタの仕組みを視覚的に、かつ深く理解するためのWebアプリ」 を開発し始めました。
🚀 今回の公開：Vol.1「徹底解説編」
現在は開発中のα版ですが、まずは**「ポインタ」**が完成したので公開します。
📚 特徴：教科書の「行間」を可視化する
ただの入門サイトではありません。学校では教えてくれない、でもエンジニアとして知っておくべき「裏側の理屈」を解説しています。
- L値 (L-value) と R値 (R-value) の違い
- 変数が宣言されたとき、メモリで何が起きているか
- 16進数とメモリアドレスの関係
これらを、Mermaid.js を使った図解付きで、インタラクティブに読めるようにしました。
「なんとなく動く」で終わらせず、メモリの中で起きていることを言語化することにこだわっています。
🛠️ 技術スタック
- Frontend: Streamlit (Python)
- Visualization: Mermaid.js
-
Development: AI Co-pilot (Cursor/ChatGPT)
- C言語が苦手な私が、AIにコードを書かせながら、AIと一緒にC言語を学び直して作りました。
🏁 今後のロードマップ
現在は「解説パート」のみですが、次は**「ポインタ実験室」**を実装予定です。
ボタン操作でポインタを繋ぎ変えたり、値を書き換えたりして、メモリ図がリアルタイムに動くシミュレーターを開発しています。
「C言語で挫折する人をゼロにする」ためにアップデートを続けます。
もしよかったら GitHub に Star⭐️ をいただけると、開発の励みになります！
[GitHubリポジトリはこちら]
https://github.com/afmi2120/c-learning-hub/tree/main