Learn by reading real code

Programming Deep Readingプログラムを、
動きの物語として読む。

文法を順番に暗記するのではなく、実際のコードが、なぜその形で動くのかを読み解く。小さなプログラムから設計の考え方までつなぐ学習サイトです。

reading-map.txt

> このプログラムは、何を繰り返している?

01全体の地図をつかむMAP
021つの出来事を追うTRACE
03設計の意味まで考えるWHY ↻
01公開中のDeep Reading教材
12 min最初のレッスンの読了目安
0 setup登録・インストールなしで読める
01
Lessons

公開中の教材

最初の題材は、約1000行で作られた小さなテキストエディタKilo。入口の main() からプログラム全体の呼吸を読みます。

Published

Kilo main()
イベントループ

起動から入力、状態変更、再描画まで。22行のコードを、構造図・時系列・設計意図の3方向から読み解きます。

  • C言語
  • 初学者向け
  • 約12分
  • 英語補足つき
Lesson 01 を読む
NEXT / PLANNED

Kiloの状態はどこにある?

struct editorConfig とグローバル変数 E から、状態管理の入口を読みます。

LATER / IDEA

1文字はどう保存される?

キー入力から行データの変更まで、関数呼び出しを縦にたどります。

02
Method

Deep Readingの読み方

「分からない単語を全部調べる」より先に、コードが作る関係と時間の流れをつかみます。

01

地図から入る

ファイルの先頭から読まず、入口・反復・状態の置き場所を見つけ、プログラム全体の骨格を先に作ります。

02

1つの動きを追う

「aを押す」など具体的な出来事を選び、入力がどの関数を通り、いつ画面に現れるかを時間順に追います。

03

設計まで広げる

Whatだけで終わらず、How、Why、背景にあるCS概念、変更時のReview観点まで理解を広げます。

03
Roadmap

これから育てる学習トラック

小さな題材を深く読むことから始め、言語・UI・設計・AIによるコード変更のレビューへつなげます。

TRACK 01

C & Terminal Programs

Kiloを題材に、イベントループ・状態・メモリ・端末I/Oを読む。

IN PROGRESS
TRACK 02

Web Programs

HTML、CSS、JavaScriptが、入力・状態・表示をどう分担するか読む。

PLANNED
TRACK 03

Reading AI Changes

AIが変更したコードを、意図・影響範囲・テストの観点からレビューする。

CONCEPT
Start here

読めるコードが増えると、書けるコードだけでなく、直せるコード、説明できるコードも増えていく。

Kilo Deep Reading #01 を始める