「プログラムを読む技術」を読んで、TypeScriptで実践する

Last updated at 2025-02-09Posted at 2025-02-09

書籍「書くスキルも設計スキルも飛躍的に上がる！プログラムを読む技術」について

社内で有識者の方がオススメされていたので、プログラム未熟者の自分も読もうと思い、すぐKindleで購入しました。

全体的な感想としては、書籍のタイトル通り、プログラムを読むことに関して、「なぜ・どのように」を網羅してくれているように感じました。

実際に例で出されていたのはPythonが多いように感じましたが、他のプログラム言語にも応用できるように抽象化されており、非常に勉強になりました。

プログラムについての書籍は他にもたくさんありますが、どちらかというとプログラムの記述視点からの書籍が多いような？？
読む側の視点はかなり新鮮なところがありました！！オススメです！

プログラムを読む技術で抑えるポイント

本記事では、プログラムとコードという単語が混在してしまっています。
本来はプログラム=コードではないですが、同じようなイメージで使用しています。
ご了承ください...

本書を読んで個人的に重要だったポイントを列挙します。

コードリーディングは技術力向上のとてもいい手段

私自身、振り返ってみるとコードを理解する技術や書く技術が飛躍的に伸びたのは他の人のコードをたくさん読んでいた時のような気がします。（まだまだ不足している気がしますが...）

最近は生成AI時代真っ只中であり、AIエージェントという名の自律的にコードを書いてくれるツールがたくさんでてきています。その中で、自分がしっかりコードを読み込むということが疎かになってしまっている気がするので、改めて心得ておきたいな思いました。

コードリーディングで学習効率を向上させられる

本書では、いくつかコードリーディングのメリットが列挙されていましたが、学習効率を向上させられるという点が今の自分にはとても重要なポイントに映りました。

やはりコードを読み込むと、1つのプログラムでもかなり多くを学ぶことができますし、学んだ知見を抽象化して他の機会で使うこともできます。また、コードを読む癖をつけておくと、エラーの原因を推測する力が伸びる一因にもなりますし、目の前のコードを自分のものにできるような気がします。

こうして、1つずつ身につける、いわゆる基礎力というのが結局最近のAI時代においては重要な気がするので、こちらもしっかり心得ておきたいです。

プログラムを読む技術をTypeScriptで実践

例題：クラスを読む - クラスの役割、メソッド、プロパティを理解する

/**
 * 本を表すクラス
 */
class Book {
  private title: string;
  private author: string;

  constructor(title: string, author: string) {
    this.title = title;
    this.author = author;
  }

  /**
   * 本のタイトルを取得します。
   * @returns タイトル
   */
  getTitle(): string {
    return this.title;
  }

  /**
   * 本の著者を取得します。
   * @returns 著者
   */
  getAuthor(): string {
    return this.author;
  }

  /**
   * 本の情報を文字列として取得します。
   * @returns 本の情報
   */
  getBookInfo(): string {
    return `Title: ${this.title}, Author: ${this.author}`;
  }
}

const book = new Book("プログラムを読む技術", "岩松 洋");
console.log(book.getBookInfo()); // Output: Title: プログラムを読む技術, Author: 岩松 洋

コードリーディングのステップ

このクラスの目的は何か？ → 本を表すクラス
全体像を把握する
- クラス名: Book (本を表すクラス)
- プロパティ: title: string, author: string (本のタイトルと著者)
- コンストラクタ: constructor(title: string, author: string) (Book クラスのインスタンス生成時にタイトルと著者を設定)
- メソッド: getTitle(), getAuthor(), getBookInfo() (本のタイトル、著者、情報を取得するメソッド)
詳細を読み解く

プロパティ: private 修飾子が付いているので、クラス外部から直接アクセスできない
コンストラクタ: 引数で渡されたタイトルと著者を、クラスのプロパティに代入している
メソッド: 各メソッドは対応するプロパティの値を返している。getBookInfo() はテンプレートリテラルを使って本の情報を文字列として取得

先の例題をReact+TypeScript verでやってみる

先ほどのクラス機能をReact+TypeScriptの技術スタックの時にはほぼ使用しない気がするので、組み込みHooksを使った場合のコードを読んでみる

import React, { useState } from 'react';

interface BookProps {
  initialTitle: string;
  initialAuthor: string;
}

/**
 * 本の情報を表示する React コンポーネント (関数コンポーネント + Hooks)
 * @param props - 初期タイトルと著者の Props
 * @returns JSX.Element
 */
const BookComponent = (props: BookProps) => {
  // State Hook を使用して、本のタイトルと著者を状態として管理
  const [title, setTitle] = useState<string>(props.initialTitle); // React.useState → useState
  const [author, setAuthor] = useState<string>(props.initialAuthor); // React.useState → useState

  return (
    <div>
      <h2>Book Information (React Hooks)</h2>
      <p>Title: {title}</p>
      <p>Author: {author}</p>
    </div>
  );
};

// App コンポーネント (親コンポーネント) で BookComponent を使用する例
const App = () => {
  return (
    <div>
      <BookComponent initialTitle="プログラムを読む技術" initialAuthor="岩松 洋" />
    </div>
  );
};

export default App;

このコンポーネントの目的は何か？
- 本の情報を画面に表示する React コンポーネント (関数コンポーネント + Hooks)
全体像を把握する
- コンポーネント名: BookComponent (本情報を表示するコンポーネント)
- 型定義 (interface BookProps): initialTitle: string, initialAuthor: string (初期タイトルと著者を Props として受け取ることを定義)
- 関数コンポーネント: Props (BookProps)を受け取る関数コンポーネントとして定義
- Hooks (useState): title, author という2つの状態 (state) を管理するためにuseState Hook を使用
- JSX (return (...)): <h2>、 <p>要素を使って、本のタイトルと著者を画面に表示
- コメント: コンポーネントの説明、Props の説明が記述されている
詳細を読み解く
- Props (BookProps): initialTitle, initialAuthor という Props を受け取ることを型定義で明示
- State Hook (useState)
- const [title, setTitle] = useState(props.initialTitle);
- useState Hook を呼び出し、title という状態変数と、setTitle という状態更新関数を取得
- 初期値として props.initialTitle を設定 (Props から初期タイトルを受け取る)
- で title の型を string 型と明示的に指定 (TypeScript の型推論も働くため、省略可能)
- const [author, setAuthor] = useState(props.initialAuthor); も同様に著者情報を状態として管理
- JSX (return (...)):
- <h2>Book Information (React Hooks)</h2>見出しを表示 (コンポーネントの種類を明示)
- <p>Title: {title}</p>: <p> 要素内で title 状態変数の値を {} で囲んで表示 (JSX の式展開)
- <p>Author: {author}</p>: 同様に author 状態変数の値を表示
  App コンポーネント: BookComponent を実際に使用する例 (initialTitle, initialAuthor Props を渡している)

まとめ

本記事を読んでいただきありがとうございました！
どなたかのお役に立てれば嬉しいです

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up