Chapter 34

（補遺）プログラミング環境の準備

はっぱ
はっぱ
2023.11.09に更新
このチャプターの目次
  1. プログラミングに必要なツールたち
  2. プログラミング向けフォントのインストール
  3. JavaScript 実行環境 Node.js
  4. ターミナルとコマンドシェル
    1. macOS の場合
    2. Windows の場合
  5. コードエディタ Visual Studio Code
    1. macOS の場合
    2. Windows の場合
    3. VS Code の初回起動とプログラミング用フォントの設定
    4. ESLint と Prettier 用プラグインをインストール
  6. Git の設定と GitHub アカウントの作成
    1. Git と GitHub とは？
    2. GitHub アカウントの作成
    3. Git の設定（ユーザー情報）
    4. SSH 鍵の作成
  7. Git と GitHub の基本的な使い方
    1. Git リポジトリとして初期化する
    2. コードの作成・変更を履歴として記録する
    3. GitHub にリモートリポジトリを作成する
    4. ローカルリポジトリを GitHub 上のリモートリポジトリへプッシュする

プログラミングに必要なツールたち

JavaScript / TypeScript でのプログラミングを進めていく上で、最低限必要なツールが以下のものです。

  • Web ブラウザ
  • プログラミングに適したフォント
  • JavaScript / TypeScript 実行環境
  • CLI（コマンドラインインターフェイス）のためのターミナルアプリとコマンドシェル
  • コードエディタ
  • Git コマンドおよび GitHub アカウント/リポジトリ

Web ブラウザには、Google Chrome または Microsoft Edge の利用をおすすめしますが、すでにインストール済みの他のブラウザでも構いません（ただし、Internet Explorer と Safari を除く）。

https://www.google.com/intl/ja_jp/chrome/

https://www.microsoft.com/ja-jp/edge

これ以外のツールについて、順に見ていきましょう。

プログラミング向けフォントのインストール

ターミナルやコードエディタで使用するフォントには、読みやすさや目の疲れにくさが求められます。
本書では、英文には Cascadia Code フォント、和文には 白源フォントをおすすめします。

それぞれのリリースページ（↑）から、"CascadiaCode-2111.01.zip" と "HackGen_v2.8.0.zip" をダウンロードしてインストールしましょう（バージョン番号は適宜読み替えてください）。

ダウンロードした zip を解凍してフォントファイルを適当な場所へ展開します。
macOS では、そのフォントファイルをダブルクリックすると Font Book.app で開かれ、インストール可能となります。


Font Book.app on macOS

Windows では、そのフォントファイルを右クリックすることでインストールするメニューが表示されます。


右クリック（コンテキスト）メニュー

JavaScript 実行環境 Node.js

Node.js は、JavaScript がブラウザー上で実行されるのと同じように、OS 上で動作する JavaScript アプリケーションを開発するための環境を提供します。
Node.js では、JavaScript を使って OS 側のアプリケーションを構築することができ、Web アプリケーション、ネットワークアプリケーション、コマンドラインツールなどの開発に利用されます。

https://nodejs.org/ja/

Node.js のサイト から LTS （長期サポート）版のインストーラをダウンロードし、これを実行します。
基本的に "Next" をボタンを連打するだけでインストールが完了します。


nodejs.org


使用許諾ライセンスへの同意


インストール先の選択


インストールするモジュールの選択（そのままで可）


（※ Windows 版のみ）C コンパイラと Chocolatey をインストールするか否か（しない）


Install ボタンのクリックでインストール完了

ターミナルとコマンドシェル

コマンドラインインターフェイス (CLI) のためのターミナルアプリとコマンドシェルを用意します。

macOS の場合

標準で搭載されている「ターミナル.app」（「アプリケーション」→「ユーティリティ」に収録されています）を利用しましょう。デフォルトで zsh という UNIX コマンドシェルが利用できます。

ターミナルの「設定」（Command キー + カンマ ,）→ 「プロファイル」画面を開き、上でインストールしたフォントを指定します。その他の設定項目はお好みで良いでしょう。

Command Line Tools (CLT) のインストール

Git コマンドなどを始めとした UNIX コマンド群を利用するには、Command Line Tools のインストールも必要です。上で確認したターミナルから以下のコマンドを実行してインストールを完了させてください。

zsh
xcode-select --install

まだ UNIX コマンドシェルの使い方に慣れていない場合は、以下のオンライン学習サービスの Command Line コース（無料）がおすすめです。

https://prog-8.com/courses/commandline

また、zsh の設定については以下の記事を参考にしてください。

https://zenn.dev/sprout2000/articles/bd1fac2f3f83bc

Windows の場合

Windows では、Windows ターミナル と Git Bash の組み合わせがおすすめです。

Windows ターミナル

「Windows ターミナル」は最初から Windows に含まれているか、もしそうでなければ Microsoft Store アプリから入手することが可能です。


Microsoft Store アプリで "Windows ターミナル" を検索

Windows では、標準のコマンドシェルとして PowerShell が用意されています。もしもすでに PowerShell の扱いに慣れているのであれば、これをそのまま利用しても構いません。

しかし、本書では UNIX シェルである Git Bash の導入方法を紹介します。少なくとも Bash であれば、Linux をはじめとする UNIX 系 OS や WSL (Windows Subsystem for Linux) など、より多くの環境でそのスキルが役立つだろうからです。

そして、まだ UNIX コマンドシェルの使い方に慣れていないのであれば、以下のオンライン学習サービスの Command Line コース（無料）を一通り試すことをおすすめします。

https://prog-8.com/courses/commandline

Git Bash とは？

Git Bash は、Windows 環境で Git を使用するためのコマンドラインインターフェースであると同時に、UNIX コマンドシェル である Bash の機能を提供します。

また、Git Bash には UNIX シェルで使用される主要なコマンド群も同梱されています。これにより SSH キーの生成や Git リポジトリのクローンなど、Git の基本的な操作に必要なすべてのツールが揃います。

Git Bash のインストール

Git Bash のダウンロードページ からインストーラ "64-bit Git for Windows Setup" をダウンロードし、これを実行します。


インストーラのダウンロード

インストール手順としては、基本的に Next ボタンの連打でも支障ありませんが、随時以下の注意書きに従って設定を行ってください。


使用許諾ライセンス (GPL) への同意


インストール先の指定


ファイルの関連付けなどの設定（※）


スタートメニューで表示する名前の設定


標準エディタの設定（そのままで可）


デフォルトのブランチ名の設定（※）


git コマンドのための PATH 設定（そのままで可）


付属の SSH コマンドを利用するか否か（そのままで可）


OpenSSL ライブラリを利用するか否か（そのままで可）


改行コードの設定（そのままで可）


仮想ターミナルの設定（本書では Windows ターミナルを利用するため関係がない）


git pull コマンドの設定（そのままで可）


パスワード入力ダイアログの設定（そのままで可）


ファイルシステム関連の設定（そのままで可）


実験的機能も使うか否か（何も選択せずに Install ボタンをクリック）


インストール完了


Windows ターミナルのプルダウンメニューへ Git Bash プロファイルが追加されている

手動で Windows ターミナルへ Git Bash を追加する

上の Git Bash のインストールオプションで "Add a Git Bash Profile to Windows Terminal" を選択しなかった場合や、Scoop などのパッケージマネージャーで Git (Bash) をインストールした場合には、手動で Windows ターミナルへ Git Bash 用のプロファイルを追加する必要があります。

Control キー + カンマ , もしくはタブバーのプルダウンメニューからクリックで「設定」画面を開きます。


左下の「プロファイル追加」+ ボタンをクリック、「+ 新しい空のプロファイル」を選択


プロファイルの名前を「Git Bash」に指定


「コマンドライン」には Bash の実行ファイルの場所を指定


「開始ディレクトリ」にはユーザーのホームディレクトリを指定


タブに表示するアイコンをお好みで指定し、「保存」をクリック


タブバーのプルダウンメニューに "Git Bash" が追加された


Git Bash を起動した様子

コードエディタ Visual Studio Code

コードエディタには、WebStorm などを利用しても構いませんが、本書では無償で利用できる Visual Studio Code（以下、VS Code）を推奨します。

macOS の場合

VS Code のサイトから zip ファイルをダウンロードし、解凍した Visual Studio Code.app を「アプリケーション」フォルダへドラッグ＆ドロップするだけです。


Intel, Apple Silicon の両方に対応した Universal バイナリをダウンロード


zip をダブルクリックして解凍

Windows の場合

VS Code のサイトからインストーラをダウンロードし、これを実行します。
これも基本的に「次へ」ボタンの連打で問題ありません。


"Download for Windows" からインストーラをダウンロード


使用許諾契約への同意


お好みでオプションを設定（全部チェックでも良いでしょう）


「インストール」ボタンのクリックでインストール完了

VS Code の初回起動とプログラミング用フォントの設定

VS Code では、初回起動時に「表示言語を日本語に変更しますか？」と訊いてくれます。そのままクリックして VS Code を再起動させましょう。拡張機能 Japanese Language Pack for Visual Studio Code が自動的にインストールされます。

プログラミング用フォントを設定

VS Code が再び起動したら、「Ctrl キー + カンマ ,」（macOS では「Command キー + カンマ ,」）で設定画面を開き、Editor: Font Family へ上でインストールした 2 つのフォントとフォールバックとしての等幅フォントを指定します。

settings.json
{
  "editor.fontFamily": "'Cascadia Code', HackGen, monospace"
}

ESLint と Prettier 用プラグインをインストール

JavaScript 向けリンター（文法チェッカー）である ESLint とフォーマッター（コード整形ツール）である Prettier を VSCode で有効に使うためのプラグインをそれぞれインストールします。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Git の設定と GitHub アカウントの作成

前項まででインストールが完了した Git コマンドを設定していきましょう。

Git と GitHub とは？

Git とは、分散型のバージョン管理システムの一つで、プログラムのソースコードやドキュメントなどのファイル変更履歴を管理するためのツールです。

Git では、リモートとローカルに 2 つのリポジトリ（※）を持つことができます。ローカルリポジトリは、開発者が変更を行いバージョンを管理する場所で、リモートリポジトリは、開発者が第三者とコードを共有する場所となります。

この「リモートリポジトリ置き場」として、もっとも多くの人々に利用されているオンラインサービスが GitHub です。

GitHub アカウントの作成

まず最初に、リモートリポジトリを作成する GitHub へアカウントを登録します。

GitHub へアクセスし、右上の Sign up をクリックします（すでに GitHub アカウントを作成済みの場合は "Sign in" をクリックしてログインしてください）。


github.com

基本的には、順に質問に答えていき、登録メールアドレスへ送られた認証コードを入力するだけです。


メールアドレス、パスワード、ユーザー名を設定


認証コードを入力

Git の設定（ユーザー情報）

では、Git へ GitHub アカウントとメールアドレスを設定します。--global オプションを付与することで、今後作成するすべてのリポジトリでのデフォルト値となります。

zsh
% git config --global user.name "GitHubアカウント名"
% git config --global user.email "GitHubへ登録したメールアドレス"

また、デフォルトで作られるブランチ（後述）の名前は、main となるように設定しておくのが無難でしょう （※Git Bash for Windows のインストールオプションで設定済みの場合を除く）。

zsh
git config --global init.defaultBranch main

現在の設定を確認するには --list オプションを使います。

shell
% git config --global --list

user.name=taro_foo
user.email=foo@example.com
init.defaultbranch=main

また、--global オプションを用いて設定した項目は、ユーザーのホームディレクトリへ ~/.gitconfig ファイルとして保存されます。

shell
% cat ~/.gitconfig

[user]
    name = taro_foo
    email = foo@example.com
[init]
    defaultBranch = main

SSH 鍵の作成

ターミナルから以下のコマンドを実行し、新しい SSH 鍵を作成します。

shell
ssh-keygen -t ed25519 -C "GitHubに登録したメールアドレス"

この後は Enter キー連打でも構いませんが、適宜パスフレーズなどを設定しておくことをおすすめします。
上記コマンド実行の結果、ホームディレクトリへ ~/.ssh ディレクトリが作成されました。

shell
% ls ~/.ssh
id_ed25519  id_ed25519.pub

GitHub アカウントへ SSH 公開鍵を登録する

上で作成した SSH 鍵のうち、その公開鍵（pub拡張子付きのファイル）を GitHub アカウントに紐づけましょう。

  1. GitHub サイト右上のプルダウンメニュー（アバター）から Settings を選択します。

  1. 左ペインの "SSH and GPG keys" から "New SSH key" をクリックします。

  1. Title へ適当なタイトルを付け、 Key へ ~/.ssh/id_ed25519.pub の内容をコピー＆ペーストします。
shell
# 公開鍵をクリップボードへコピー
# macOS
% cat ~/.ssh/id_ed25519.pub | pbcopy

# Windows (Git Bash)
$ cat ~/.ssh/id_ed25519.pub > /dev/clipboard

SSH 経由で GitHub へ接続できるかチェックする

ssh github のコマンド実行のみで GitHub へ SSH 接続できるように ~/.ssh/config ファイルを作成します。

.ssh/config
Host github
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519

SSH 接続してみましょう。

shell
$ ssh github

PTY allocation request failed on channel 0
Hi sprout2000! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

「認証できたけど、GitHub ではシェルアクセスを提供していないので切断するよ」という旨のメッセージが表示されれば成功です。

Git と GitHub の基本的な使い方

プロジェクトを Git リポジトリとすることで、コードの変更履歴を管理したり、ある時点からの変更を分岐させたりできるようになります。
また、それを GitHub 上のリモートリポジトリへプッシュしておくと、コードやその変更履歴を共有しつつ、第三者との共同作業を進めることも可能となります。

Git リポジトリとして初期化する

そのプロジェクト（フォルダ）を Git リポジトリとして初期化するには、git init コマンドを実行します。

shell
git init

例えば、本書の第 2 章での Vite プロジェクト作成直後に git init を行うと次のようなメッセージが表示されます。

Initialized empty Git repository in /Users/foo/vite-project/.git/
# 空っぽの Git リポジトリが /Users/~/.git/ に初期作成されました

現在の Git リポジトリの状態を表示するには、git status コマンドを利用します。

shell
% git status

On branch main  # main ブランチでの作業です

No commits yet  # まだコミットされたものはありません

Untracked files:  # 履歴として捕捉されていないファイル
  (use "git add <file>..." to include in what will be committed)
  # （コミットに含めるのであれば "git add <file>" を使ってください）
	.gitignore
	index.html
	package.json
	public/
	src/
	tsconfig.json
	tsconfig.node.json
	vite.config.ts

nothing added to commit but untracked files present (use "git add" to track)
# コミットに追加するものはありませんが、未捕捉のファイルが存在しています

コードの作成・変更を履歴として記録する

コードに対して行った変更などを履歴として記録することを 「コミットする」 と言います。
Git では、ファイルへの変更や未捕捉の新しいファイルの作成などをいったん git add コマンドでステージングした後、コミットメッセージを付けてコミットします。

shell
# ステージング
% git add .

# ステータスを確認
% git status

On branch main

No commits yet

Changes to be committed:  # コミットされる予定のファイル
  (use "git rm --cached <file>..." to unstage)
  # 「アンステージ」するには "git rm --cached <file>..." を使ってください
	new file:   .gitignore
	new file:   index.html
	new file:   package.json
	new file:   public/vite.svg
	new file:   src/App.css
	new file:   src/App.tsx
	new file:   src/assets/react.svg
	new file:   src/index.css
	new file:   src/main.tsx
	new file:   src/vite-env.d.ts
	new file:   tsconfig.json
	new file:   tsconfig.node.json
	new file:   vite.config.ts

git add コマンドの引数へファイル名やフォルダ名でなく、ピリオド . や -A オプションを与えるとすべての変更・作成したものがステージングされます（くわしくは man git-add コマンドでヘルプを参照してください）。

では、コミットメッセージを -m オプションで指定してコミットしましょう。

shell
% git commit -m "第2章まで完了"

[main (root-commit) b688e4e] 第2章まで完了
 13 files changed, 254 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 index.html
 create mode 100644 package.json
 create mode 100644 public/vite.svg
 create mode 100644 src/App.css
 create mode 100644 src/App.tsx
 create mode 100644 src/assets/react.svg
 create mode 100644 src/index.css
 create mode 100644 src/main.tsx
 create mode 100644 src/vite-env.d.ts
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.node.json
 create mode 100644 vite.config.ts

これまでのコミット履歴は git log コマンドで参照することができます。

shell
% git log

commit b688e4ee7d6b266874d155ffa544ed3b6414db49 (HEAD -> main)
Author: foobar <foobar@example.jp>
Date:   Sat Mar 5 16:40:22 2022 +0900

    第2章まで完了

GitHub にリモートリポジトリを作成する

上で作業中のローカルリポジトリをリンクさせるため、 GitHub へリモートリポジトリを作成しましょう。

  1. GitHub サイトの右上プルダウンメニュー（+）から "New repository" を選択します。

  1. リポジトリへ適当な名前を付けて "Create repository" をクリックします。


  1. "Code" タブに "Quick setup" が表示されれば、リポジトリ作成の完了です。
    コピーボタンをクリックして SSH アドレスをクリップボードへコピーしておきましょう。

ローカルリポジトリを GitHub 上のリモートリポジトリへプッシュする

では、前々項で作成したローカルリポジトリへ戻り、これを GitHub 上のリモートリポジトリとリンクさせます。

リモートリポジトリを紐付ける

shell
git remote add origin git@github.com:sprout2000/zenn-todo.git

git remote add は、Git リポジトリへそのリモートリポジトリを設定するためのコマンドです。
このコマンドを使用して、ローカルリポジトリへリモートリポジトリの名前（デフォルトでは origin）と URL（前項でクリップボードへコピーしたもの） を登録して、リモートリポジトリにアクセスできるようにします。

リモートへプッシュする

現在の手元のリポジトリを GitHub 上のリポジトリへ反映させる、つまりプッシュします。

shell
git push --set-upstream origin main

--set-upstream オプション（短縮形は -u）は、手元のリポジトリのブランチ（ここでは main）（※）を初めてリモートへプッシュするときに使います。

このオプションにより、ローカルブランチ main をリモートブランチ origin/main にプッシュし、次回以降のプッシュやプル時にこのリモートブランチが自動的に追跡されるようになります。

なお、次回以降はこの -u オプションは使いません。そして、origin main の部分も省略可能となります。

次回以降
% git push  # リモートへプッシュ
# or
% git pull  # リモートと同期（プル）