プログラマへの道_第2話開発環境の構築と学習方針の決定

2021年6月7日 21:52

第1話では、突如プログラマに転向しMacを入手してはしゃぐ様子を書いた。
第2話では、いよいよプログラマとして第一歩を踏み出す。

プログラマとして最初にやったこと

社内のプログラマに教えてもらいながら私が最初に行ったことは以下の通りだ。以下をすべて行うのに3~4時間かかっただろうか。
ちなみに、今回私がまず取り組むのはReactを用いたフロントエンドの開発なので、以下の手順もそのためのものになる。

1. Visual Studio Codeのインストール
2. Git関連の諸々
　- Gitのインストール
　- Gitの仕組みについてレクチャーを受ける
　- GitHubからソースコードを取得
　- Git Upのインストール
3. Yarnのインストール

1. Visual Studio Codeのインストール

Microsoftの公式サイトに行き、ダウンロードするだけだった。
プログラミングをするためにはエディタが必要で、世には様々なエディタがあるが、高機能で使い勝手もよいVS Codeがおすすめだそうだ。
様々な拡張機能も用意されており、とりあえずこちらの記事を参考に一通り入れてみた。

2. Git関連の諸々

結論から言うと、「Gitのインストール」から何をやっているのかわからなかった。Gitというのは「バージョン管理システム」の1種で、「ソースコードの更新履歴を管理してデグレを防ぐ仕組み」ということらしい。
複数人でパワポの作業するとき、修正しているページや箇所が重複して一部の作業が消えてしまう等の現象を防ぐために以下のような工夫をしているかと思う。

・ファイル名を「ファイル名_v1.0.pptx」という風にして最新版を管理する
・特定の1人（マスター管理者）がマスターファイル（本体）を管理し、他の作業者は自身の作業ページを個別にマスター管理者に渡して作業重複がないようにする

そういったことをコードで、大規模に行うのがGitという仕組みだそうだ。

概念的にやっていることはわかる。だが実際にGitをインストールするという動作はよくわからない。
私の場合Homebrewという「パッケージ管理ツール」を使ってGitをインストールした。サイトの見た目が怪しすぎるが、開発者なら誰もが利用する鉄板ツールらしい。

Terminalという、Windowsでいうコマンドプロンプトのようなものを用いて、PCにHomebrewをインストールする以下のコマンドを打った。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

早くもTerminalで作業が必要なことには驚いた。最初は流石にGUIを中心に色々やるものだと思っていた。

その後、以下のHomebrewコマンドでGitをインストールした。

brew install git

インストール後、Gitの仕組みについてもサル先生のGit入門を見ながら教えてもらったが、初学者にとっては如何せんリアリティがない。私はこのあたりの仕組みやら処理やらを理解しようと数時間を費やしたが全容を捉えきることはできなかった。なので、最初は「そういうものか」という感じで良いと思う。

その後、GitHubから最新のソースを取得する "git clone" なるコマンドをTerminalに打ち込み私のPCに組織のリポジトリ（フォルダ構造、ファイル等の状態を記憶したもの）のコピーを作成した。

3. Yarnのインストール

弊社ではフロントエンドの開発にReactを使用している。そのため、Yarnというパッケージマネージャーらしい。Homebrewもパッケージ管理システムということだったが、ざっくり以下のような違いがあるようだ。
感覚的には最高裁判所と地方裁判所みたいなものだろうか？

・Homebrew：Mac OS上で動作するアプリケーション全般のインストールを管理する
・Yarn：あくまでもJavaScriptに関連するもののみを扱う

まあ何にせよ、ここまでで晴れてReactを用いた開発ができるようになった。

終わりに

ここまで書いておいてなんだが、今の所私は「React」「Git」「パッケージ管理システム」等に関しておそらく10%も理解していない。最初はそれぞれの仕組みをしっかり理解しながら進もうと思っていたが、今となっては真逆の考え方になった。
すべてを理解して進むにはスコープが広すぎると思い知ったし、一旦のゴールは社内の開発チームの一員としてアウトプット（動くプログラム）を出すことだ。
なので、わからない気持ち悪さはありながらもとにかく進んでみることにした。

一方で、直近の業務で使うであろうhtml, css, jsの基本的な仕組み、加えてその発展型であるReactの基本的な理解は最低限必要だと感じている。
同時に、俯瞰的な視野も忘れないようにWeb技術全般に関する広く浅い知識の獲得も順次行いたい。
基本的な記述方法や用語等を知らないと、先人のコードを読んで学ぶこともできないし、同僚に質問する際のコミュニケーションコストが高すぎるからだ。

上記の事情を踏まえて、まずはしばらく時間を掛けて以下に取り組むことにした。学習を進めながら、簡単な開発実務ができそうになったら実務と学習を並行させるイメージでいる。

・Progateの「HTML&CSS」「JavaScript」「React」の3コースを修了する
・Progateの復習を兼ねたJavaScriptの入門書学習
・Web技術の基礎的な理解を進めるための書籍学習

次回からはこれらの学習状況を書いていこうと思う。