プログラミングの「コード」とは?コードリーディングのやり方をわかりやすく解説!

プログラミングのコードのイメージ画像 プログラミング

この記事では、プログラミングの「コード」を解説します。

プログラミングの初学者にもわかりやすく解説します。

コードとは?

プログラミングにおける「コード」とは「コンピュータへの命令を書いたテキスト」のことです。

プログラミングをしている人が、黒い画面に英数字や記号でなにやら書いていますよね。

あれがコードです。

コードのイメージ

コードとプログラムの違い

プログラミングの勉強をしている人なら「コードとプログラムは何が違うの?」って思いますよね。

「プログラム」は「コード」を包括する言葉です。

「プログラム」は「複数のコードを組み合わせてソフトウェアとして組み上げたもの」を指します。

コードとプログラム

※実のところ「コード」と「プログラム」という言葉には明確な定義がなく曖昧で、エンジニアの間でも議論になることがあります。コードがコンパイルされて機械語になったものを「プログラム」と呼ぶ人もいます。

英語におけるCodeとProgramの違い

Cambridge Dicitionaryによれば、コード(Code)とは「コンピュータをプログラムするために使われる言葉」であり、プログラム(Program)とは「コンピュータに何かをさせるための一連の命令」です。

プログラムは「複数の命令がひとまとめになったもの」、コードは「命令のためのテキスト」と解釈できます。

コーディングとプログラミングの違い

コーディングとプログラミングの違いも同様です。

「コーディング」は、コンピュータへの命令を「テキストで書くこと」です。命令の中身を「考えること」ではなく「コードを書くこと」に主眼が置かれます。

「プログラミング」は、システムの設計やコーディング、テスト・バグ修正などを経て、システムを作ること全体を指す言葉です。

コーディングとプログラミングの関係

まとめると以下のようになります。

  • コード … コンピュータへの命令をテキスト(文字や記号)で書いたもの
  • プログラム … 複数のコードを組み合わせてソフトウェアとして組み上げたもの
  • コーディング … コードを書くこと
  • プログラミング … コンピュータへの命令を設計・実装し、システムを作ること

言葉の使い方の例

「コード」「プログラム」「コーディング」「プログラミング」の言葉の使い方の例を示します。

  • Visual Studio Codeは、コードを書くためのソフトウェアです
  • HTMLコーダーの仕事は、HTMLを書くことです
  • 更新プログラムとは、OSを最新の状態にするためのプログラムです
  • 設計書が完成したのでコーディング作業をインドの会社に外注します
  • 競技プログラミングは、問題を効率的に解くアルゴリズムを設計して実装するコンテストです
  • 文部科学省の「小学校プログラミング教育」は論理的に考える力の育成を目指しています

コードの種類

コードにはいくつかの種類があります。

ソースコード

プログラミング言語やマークアップ言語(HTMLやXML)で書かれたコードを「ソースコード」といいます。

ソースコードは「人間が読める」コードです。

単に「コード」と呼ぶこともあります。

ソースコードには、以下の種類があります。

プログラミング言語のソースコード

C言語やJava、Python、JavaScript、Goなどの(高水準)プログラミング言語で書かれたテキストは「ソースコード」のひとつです。

このサイトを見ている方にとって「コード」といえば「プログラミング言語のソースコード」を意味する場合がほとんどでしょう。

プログラミング言語のソースコードの例

マークアップ言語のソースコード

HTML・CSSやXMLなどのマークアップ言語で書かれたテキストも「ソースコード」と呼びます。

ただし、マークアップ言語の場合は「コード」と呼ぶことよりも「HTMLファイル(HTMLソース)」「CSSファイル」「XMLファイル」などのように具体的な名称で呼ぶことが多い印象です。

マークアップ言語のソースコードの例

アセンブリ言語のソースコード

アセンブリ言語(低水準プログラミング言語)で書かれたテキストも「ソースコード」と呼ばれます。

アセンブリ言語とは、コンピュータへの命令をコンピュータのハードウェア的な動き(メモリやレジスタなど)を意識しながら書くプログラミング言語です。C言語やPythonのような言語よりもハードウェアに近い(低レイヤを意識して書く)ため「低水準言語」とも呼ばれます。

この記事を読んでいる方のほとんどは、アセンブリ言語のソースコードを見る機会はないと思います。しかし、これも人間が読み書きできるコードのひとつです。

アセンブリ言語のソースコード

オブジェクトコード(バイナリコード)

ソースコード以外にも「オブジェクトコード(バイナリコード)」と呼ばれるコードがあります。

オブジェクトコードとは、コンピュータへの命令が機械語で書かれたコードです。

ソースコードはコンピュータが解釈できるように翻訳する

私たちはソースコードを書いてコンピュータに命令を出します。

しかし、コンピュータはソースコードを直接読めません。

そのため、ソースコードをコンピュータが読める言葉である「機械語」に翻訳します。

ソースコードを機械語に翻訳することを「コンパイル」といいます。

オブジェクトコードは、ソースコードを翻訳することで作られるコードです。

機械語で人間が読み書きすることは困難ですが、これもコードのひとつです。

※コンピュータがどのようにしてソースコードを解釈できるようになるのかについては「テキストファイルに書いたプログラムが動く仕組み」を参照してください。

オブジェクトコード(バイナリコード)の具体例

オブジェクトコード(バイナリコード)の具体例として、私たちがパソコンで使う「エクセル」や「ワード」のようなアプリケーションがあります。

これらのアプリの実行ファイルの中身は、人間には読めない形に翻訳されたプログラムであり、その中身はオブジェクトコードで書かれています。

ソースコードの読み方

プログラミングをマスターするには、ソースコードの読み書きができなければいけません。

ソースコードの読み書きの上達にはコツがあります。

ここからは、ソースコードの読み方の基本と上達のコツを紹介します。

ソースコードの開き方

ソースコードはテキストエディタやコードエディタで開きます。

たとえば、Visual Studio Code(VSCode)を使えば、ほとんどの言語のソースコードを読むことができます。

VSCodeをインストールした後、ヘッダーのメニューバーから[File]→[Open…]をクリックしてファイルダイアログを開き、ソースコードのファイルを選択して「開く」をクリックするだけです。

VSCodeでソースコードを開く

ソースコードの構成要素

プログラミング言語のソースコードは、以下の要素で構成されています。

プログラミング言語を学んで、これらの構成要素を理解できるようになりましょう。

ソースコードの構成要素を理解したら、読みたいソースコードを見つけてコードリーディングに挑戦できます。

コードリーディングに挑戦しよう

コードリーディング(code reading)とは、その名の通り「コードを読むこと」です。

同じ機能を実現するコードでも、書き方は人によって様々です。

優れたコードを読むことは実装の勉強になります。

コードリーディングを始めるには、まず、題材となるコードを見つける必要があります。

オープンソースのソースコードは、コードリーディングの題材として最適です。

オープンソースとは?

オープンソースとは、ソースコードが無償で公開されているプログラムのことです。

通常、ソフトウェアのソースコードは公開されません。

ソフトウェアは企業の資産ですし、大事な商品であるソフトウェアをコピーペーストして販売されては困ります。

また、ソースコードにセキュリティ上の問題が見つかると、ハッキングなどの攻撃を受ける可能性もあります。

そういうわけで、商用のソフトウェアのソースコードを読むことはできないのですが、非商用として無償で公開されているソフトウェアが存在します。

それがオープンソースソフトウェア(OSS, Open Source Software)です。

OSSのソースコードは無償で公開されており、自由に利用、改変、再配布ができます。プロジェクトによって利用制限は異なるものの、ほとんどのソースコードは自由に読めるようになっています。

OSSの例として、先ほど紹介したコードエディタである「Visual Studio Code」はソースコードが公開されています。

このようなOSSのソースコードは、コードリーディングの練習に最適です。

オープンソースのソースコードの見つけ方

オープンソースのソースコードはGitHub(ギットハブ)で探すことができます。

GitHubはソースコードを保管するためのサイトです。世界中で使われています。

GitHubには、たくさんのOSSのプログラムが存在しており、ソースコードの宝庫です。

参考までに、いくつかのOSSのソースコードのページを紹介しましょう。

  • WordPress(PHP)… ブログを書くためのソフトウェア
  • Flask(Python)… PythonでWEBアプリを作るためのソフトウェア
  • Visual Studio Code(TypeScript、JavaScript)… コードエディタ
  • RubyGems(Ruby)… Rubyのパッケージ管理システム
  • NewtonSoft.JSON(C#)… JSONのシリアライズ・デシリアライズができるライブラリ

これらに加えて、ふだんのプログラミングで使っているライブラリがあったら、そのソースコードがGitHubで公開されていないか調べてみましょう。開発用のライブラリはオープンソースになっていることも多いです。

コードリーディング

コードリーディングの題材になるソースコードを見つけたら、コードリーディングを始めましょう。

優れたソースコードを読むことはとても勉強になります。

しかし、やみくもに読むのは非効率です。

ここではソースコードを読む手順を説明します。

1. ソースコードを読む目的を決める

プロのITエンジニアは目的を持ってソースコードを読みます。

たとえば、

  • 機能の実装方法がわからないのでOSSのソースコードを参考にする
  • オープンソースのライブラリを使っているが、原因不明のエラーが出ているのでソースコードを読んで原因を見つけたい

などの目的があります。

このように目的を決めることで、コードリーディングに集中しやすくなります。

プログラミング初学者の場合は、何でもいいので問いを立ててからソースコードを読みましょう。

  • この機能はどうやって実現しているんだろう?
  • このソフトのこの機能の実装はどこに書かれているのかな?
  • このプロジェクトではクラスの継承関係をどう整理しているんだろう?

問いが思いつかない方は、以下の課題に挑戦してみてください。

  • Visual Studio Codeのソースコードを読んで「ファイルの新規作成」の機能がどこで実装されているかを探してみましょう

ここからは、この課題を例にコードリーディングの手順を説明します。

2. 目的のソースコードのある場所を探す

ソースコードを読む目的が決まったら、目的のソースコードを探します。

GitHubのプロジェクト(リポジトリ)の中には、たくさんのディレクトリがあります。

ディレクトリがたくさんある

この中から見たいソースコードを探します。

今回の目的は「ファイルの新規作成」機能の実装箇所を調べることです。

そのコードがどのファイルに書かれているかを探して特定します。

有名なオープンソースのプロジェクトなら、ディレクトリやファイルはきちんと整理されています。

ディレクトリ名やファイル名をヒントに、コードを探しましょう。

Visual Studio Code(以下、VSCode)のプロジェクトでは「src」というディレクトリにメインの処理に関するコードがまとめられています。

srcは「source」の略ですから、わかりやすいですね。

「src」以下には「typing」「vs」「vscode-dts」の3つのディレクトリがあります。「VSCode」という名前から「vs」に主要な機能のコードがありそうだな、と推測します。

vs以下に重要なコードがありそう

「vs」以下を見ると「base」「code」「editor」「platform」「server」「workbench」の6つのディレクトリがあります。

vs以下のディレクトリたち

ここは推測が難しいところですが、名前から察するに「ファイルの新規作成」は「base」「code」「platform」のどれかにありそうです。

それぞれの階層を潜ってみると「platform」以下に「files」というディレクトリがあることに気が付きます(ファイル数が多いときは検索を駆使して探します)。

ファイル関係のソースコードがありそう

明らかに「ファイル」に関係がありそうな名前です。

さらに潜って「files/common」の階層に移動すると「fileService.ts」というファイルを発見できます。

fileService.tsというファイルを発見

ここに「ファイルの新規作成」機能がありそうです。

このように、最初はプロジェクト全体をざっと眺めつつ、ディレクトリ名やファイル名をヒントにして、読みたいコードが書かれていそうな場所を探します。

ディレクトリを潜って、関係がありそうなファイルを絞りこみます。

難しい場合はGitHubやWEBブラウザの検索機能を駆使します。

それらしいファイルが見つかったら中身を読みます。

なかなか大変な作業ですが、一度プロジェクトの構成を把握できたら、あとは簡単です。

この作業に慣れれば、知らない言語のプロジェクトでも目的のソースコードをすぐに見つけられるようになります。

3. ソースコードを読んで実装箇所を探す

目的のソースコードがありそうなファイルを見つけたら、その中身を読みます。

クラス名や関数名、変数名をヒントにして実装箇所を探しましょう。

著名なオープンソースのプロジェクトでは、それなりにわかりやすい命名がされているはずです。

VSCodeでは「fileService.ts」に「ファイルの新規作成」に関するコードがありそうです。

このファイルから「ファイルの新規作成」の実装箇所を探します。

「新規作成」の機能なので、「create」や「write」「save」などの単語で検索します。

すると「createFileメソッド」と「writeFileメソッド」が見つかります。

ここに「ファイルの新規作成」が書かれています。

実装箇所を見つけましたね。

これで今回の目的は達成です!

4. 関数やメソッドの実装を読む

OSSのプロジェクトから目的のソースコードを見つけることができました。

ソースコードを探す中で、プロジェクトのディレクトリ構成や、ファイルや関数の命名について学べることがあったかと思います。

それでは、発見した「createFile」メソッドの実装を読んでみましょう。

async createFile(resource: URI, bufferOrReadableOrStream: VSBuffer | VSBufferReadable | VSBufferReadableStream = VSBuffer.fromString(''), options?: ICreateFileOptions): Promise<IFileStatWithMetadata> {

		// validate
		await this.doValidateCreateFile(resource, options);

		// do write into file (this will create it too)
		const fileStat = await this.writeFile(resource, bufferOrReadableOrStream);

		// events
		this._onDidRunOperation.fire(new FileOperationEvent(resource, FileOperation.CREATE, fileStat));

		return fileStat;
	}

参考:https://github.com/microsoft/vscode/blob/main/src/vs/platform/files/common/fileService.ts#L343

関数やメソッドの実装を読むときは、まず「引数」と「戻り値」を確認します。

引数は「そのメソッドへの入力」で、戻り値は「そのメソッドからの出力」です。

たいていの関数は、引数から受け取ったデータを加工し、加工したデータを戻り値で返すように実装されています。

そのため、引数と戻り値を押さえれば、その関数の機能がだいたいわかります。

ここで、引数は以下の3つです。

  • resource: URI
  • bufferOrReadableOrStream: VSBuffer | VSBufferReadable | VSBufferReadableStream
  • options?: ICreateFileOptions

第一引数は「resource」です。型が「URI」となっています。ファイルの場所を示すURIが入ると考えられます。

第二引数の「bufferOrReadableOrStream」は、引数名と型から推測すると「バッファー」「リーダブル」「ストリーム」のいずれかの型でファイルへの入力データを受け取るのでしょう。

第三引数の「options」は、そのほかのオプションを指定できる引数ですね。

次に、戻り値を見ます。

戻り値は「fileStat」と命名されています。型は「Promise<IFileStatWithMetadata>」です。「Stat」はおそらく「State」の略称でしょう。ファイルの状態を返しているようです。

ファイルの作成は非同期で行われ、その状況を「Promise<IFileStatWithMetadata>」で返すように実装されています。

以上をまとめると、createFileメソッドは「URI」「書き込みデータ(bufferOrReadableOrStream)」を受け取り、ファイルを非同期で作成しながら、「ファイルの状態(stat)」をPromiseで返すメソッドであることがわかりました。

「TypeScriptで引数に複数の型を指定するときは『|』でつなげばいいんだな」とか「ファイルを作成する関数を作るときは、非同期処理にして、戻り値を『状態』を示す値にするといいんだな」といった学びが得られます。

他にも、このメソッドには、先頭でvalidateが実行されている点や、データの入力に3つの型が使える点に特徴があります。

そのあたりを掘り下げていくと学びが多いかもしれません。

コードリーディングのまとめ

ここでは、VSCodeの「ファイルの新規作成」を題材にして、コードリーディングのやり方を説明しました。

初学者のうちはオープンソースの巨大なソースコードを読むことには抵抗があるかもしれません。

しかし、慣れれば簡単で、とても楽しいことです。

仮にソースコードの理解が間違っていたとしても、何かしらの気付きがあればOKです。

楽な気持ちでコードリーディングをやってみてください。

読みやすいソースコードの書き方

ソースコードは読み方だけでなく、書き方も大切です。

ここからは「読みやすいソースコードの書き方」を解説します。

なぜ読みやすいコードを書くべきなのか?

ソースコードは読みやすく書くべきです。

理由は2つあります。

  1. ソースコードが長く複雑になると、後から読み返したときに何のコードかわからなくなるため
  2. 複数人で開発するとき、他の人が読みやすいコードを書くことで開発が円滑になるため

開発を続けているとソースコードはどんどん長く複雑になっていきます。書いているときはコードの内容を覚えていますが、時間が経つと、何を実現するコードなのかわからなくなります。すると、コードの編集や修正が大変になるのです。

ソースコードが読みやすく整理されていれば、思い出すのが楽になり、コードの編集や修正も簡単になります。

チーム開発やOSSのプロジェクトなど、複数人で開発をする場合は、他の開発者にも理解できるソースコードを書く必要があります。自分にしか読めないソースコードでは、他の開発者がどう取り扱っていいのかわかりません。

他の開発者が読みやすいコードを書くことで、複数人での開発が円滑になります。

「読みやすいコード」の書き方を学ぶのにオススメの本

ここからは、読みやすいコードを書くための注意点を説明します。

より詳しく知りたい方は以下の本を参考にしましょう。

「読みやすいコード」を書くための本で、ITエンジニアなら知らない人はいない名著です。

リーダブルコード

読みやすいコードを書くには?

読みやすいコードを書くには、以下の点に気をつけましょう。

  1. 変数や関数をわかりやすく命名する
  2. 機能をクラスや関数にまとめる
  3. ひとつのクラスにひとつのことだけをさせる(単一責任の原則)
1. 変数や関数をわかりやすく命名する

変数や関数はわかりやすく命名しましょう。

VSCodeのソースコードで「ファイルの新規作成」は「createFile」と命名されていました。

かなりわかりやすいですね。

「ファイルを作成する(create file)」メソッドであることが明らかです。

このようなわかりやすい命名になっていると「そのコードが何をするのか」が一目瞭然でわかるようになり、読みやすいコードになります。

◎良い命名の例(何をする関数か一目でわかる)

  • createFile
  • sendEmail
  • openFileDialog

X悪い命名の例(何をする関数かわからない)

  • cFl
  • method0123
  • tmpMethod
2. 機能をクラスや関数にまとめる

機能をクラスや関数にまとめましょう。

まとまりのない長いソースコードは、どの部分を重点的に読めばいいのかわかりにくくなります。

VSCodeのプロジェクトでは、ファイルに関する処理が「fileService.ts」の「FileServiceクラス」にまとめられていました。

さらに「createFile」「readFile」「doCopyFile」など機能が、きちんとメソッドにまとめられてます。

このように、機能がクラスや関数にまとまっていると、読むべきポイントがはっきりして、コードを読みやすくなります。

機能をクラスや関数にまとめましょう。

3. ひとつのクラスにひとつのことだけをさせる(単一責任の原則を守る)

ひとつのクラスにはひとつのことを、ひとつの関数にはひとつのことをさせます。

こうすることで、ソースコードが読みやすく、使いやすくなります。

これを「単一責任の原則」といいます。

VSCodeの「createFile」メソッドは「ファイルの新規作成」という、たったひとつのことを実現していました。

これはとてもわかりやすいです。

それでは、もし「createFile」メソッドの中に「ファイルダイアログを開き、新しいファイルを作成し、画面を更新し、ファイルダイアログを閉じ、シンタックスハイライトを適用する」という複数の機能が書かれていたらどうでしょうか?

「createFile(ファイルを作成する)」という命名以上に、多くのことが実装されています。

こうなると「ファイルダイアログを開く機能」のコードを読みたい人も、「シンタックスハイライトを効かせる機能」のコードを読みたい人も、createFileメソッドを見つけなければなりません。機能と名前が一致しないので、コードを探すのが大変になります。

たとえば「ファイルダイアログを開く機能」を読みたい人は「openDialog」のような名前でメソッドが実装されていることを期待します。それは「openDialog」という名前で実装されているべきものです。「createFile」メソッドの中にあるべきものではないのです。

クラス名や関数名・メソッド名と、それらの機能が一対一で対応するようなコードを書きましょう。

ひとつのクラスにはひとつのことを、ひとつの関数にはひとつのことをさせるように、単一責任の原則を守った実装を心がけることで、読みやすく、使いやすいソースコードになります。

ソースコードの読み書きの勉強方法

最後に、ソースコードの読み書きを上達させるためのオススメの勉強方法を紹介します。

ソースコードの読み書きを上達させるには、以下の方法がオススメです。

  1. コードリーディング
  2. リファクタリングを学ぶ
  3. 既存のコードをリファクタリングする
  4. コードレビューを受ける

1. コードリーディング

この記事でも詳しく説明しましたが、コードリーディングはコードの読み書きの勉強になります。

上手いコードを見て気付きを得たり、他人の書いたコードを「自分ならどう修正するか」と考えながら読むことで、きれいなコードの書き方が身につきます。

2. リファクタリングを学ぶ

機能を変えずに、読みやすいコードに書き換えることを「リファクタリング」といいます。

リファクタリングを学ぶことは、きれいなコードを書く方法を学ぶことに直結します。

リファクタリングには代表的な手法がいくつかあり、それらを知るだけでコーディングが上達します。

リファクタリングを学ぶには、以下の書籍が圧倒的にオススメです。

この本1冊でリファクタリングの基本を完全に学べます。

リファクタリング 既存のコードを安全に改善する 第2版

3. 既存のコードをリファクタリングする

リファクタリングを学んだら、既存のソースコードをリファクタリングしてみましょう。

これまでに書いたコードでも、OSSのソースコードでも構いません。

リファクタリングをすることで、読みやすいコードの書き方を体得できます。

4. コードレビューを受ける

きれいなコードを書けるようになるために、最も効果が大きいのはコードレビューを受けることです。

コードレビューとは、他のエンジニアにコードを読んでもらい、フィードバックをもらうことです。

自分が書いたコードが何を実現するものなのかを説明したうえで、技術力の高いエンジニアにコードを見てもらい、フィードバックをもらいます。

技術力の高いエンジニアは、きれいなコードの書き方を知っています。

あなたのコードの「どこが読みにくいのか」「どうすれば読みやすくなるのか」をすぐにアドバイスしてくれるでしょう。加えて「より効率的なコードの書き方」や「より安全な実装にする方法」も教えてくれるかもしれません。

コードレビューを受けると、新たな視点が得られるため、必ず学びがあります。

技術力の高いエンジニアにコードレビューをお願いしてみましょう。

まとめ

この記事では、プログラミングにおける「コード」を解説しました。コードリーディングやコードの読み書きを上達させるコツも紹介しました。

  • コードとはコンピュータへの命令をテキストで書いたもの
  • コーディングはプログラミングの一部である
  • コードには「ソースコード」や「オブジェクトコード」がある
  • ソースコードは人間が読めるコードである
  • OSSのソースコードはコードリーディングの題材として最適
  • リファクタリングの練習やコードレビューでコードの読み書きが上達する

コードの読み書きは練習すればするほど上達します。コードの読み書きに自信がない場合は、OSSのソースコードを活用して練習を重ねましょう。

練習の積み重ねが上達への一番の近道です。

タイトルとURLをコピーしました