１つの価値３つの領域 思想と技術 HomeArchivesTagsCategories
環境構築から始めるテスト駆動開発 ~プログラミング環境の共通基盤を構築する~
|技術プログラミング

はじめに

この記事はソフトウェア開発者を目指す入門者を対象に、IT リテラシの基本とプログラミング学習とソフトウェア開発の基盤となる環境構築の手順を解説しています。以下の構成の Windows マシンで作業を進めていきます。

os-version.png

6S

本記事では 5S + セキュリティの 6S の考えを基本とします。
まず 5S について、それからセキュリティについて解説します。

5S

5S（ごエス、ごーエス）とは、製造業・サービス業などの職場環境の維持改善で用いられるスローガンである。各職場において徹底されるべき事項を 5 つにまとめたもので、4S 運動に「躾」（習慣化の場合もある）を加えた 5 項。

— Wikipedia https://ja.wikipedia.org/wiki/5S

具体的には、

  • 整理（せいり、Seiri） いらないものを捨てる

  • 整頓（せいとん、Seiton） 決められた物を決められた場所に置き、いつでも取り出せる状態にしておく

  • 清掃（せいそう、Seisou） 常に掃除をする

  • 清潔（せいけつ、Seiketsu） 3S（上の整理・整頓・清掃）を維持し職場の衛生を保つ

  • 躾（しつけ、Shitsuke） 決められたルール・手順を正しく守る習慣をつける

これがソフトウェア開発とどのように関係していくのでしょうか？まずは、いらないものを捨てるのが 整理 ですがそもそもいらないものが何なのかを決めなければなりません。プログラミングで扱う対象はモノではなく情報です。ではどうやって情報を扱っていけばよいでしょう？ここは、分類するな。ひたすら並べよ の考えに従い一箇所に記録をまとめていきましょう。そのためのテクニックとして エンジニアリングデイブックス があります。これは何をやったか何を学んだかをノートに時系列に記録していくことです。

Engineering Dayboks

Eventually Dave asked the obvious question. It turned out that they’d been trained to keep an engineering daybook, a kind of journal in which they recorded what they did, things they’d learned, sketches of ideas, readings from meters: basically anything to do with their work.
When the notebook became full, they’d write the date range on the spine, then stick it on the shelf next to previous daybooks. …​

— Pragmatic Programmer: your journey to mastery 20th Anniversary Edition

ノートは市販のものならどれでも構いませんがおすすめは ソフトリングノード の B5 サイズが手元に置いてもかさばらず使いやすいです。情報を一箇所に集めて必要なものと不要なものを分ける準備が出来ました。次は必要なものをすぐに取り出せるようにする 整頓 をどのように実践していくかを解説します。

整頓 の基本は 分類するな。ひたすら並べよ です。デジタルデータも一箇所に保存していきましょう。具体的に保存する場所は後で解説します。また、分類するなといっても分類をする必要は当然発生します。分類にあたっては一貫したネーミングルールを適用していきます。

Name Well; Rename When Needed.

Name to express your intent to readers, and rename as soon as that intent shifts.

— Pragmatic Programmer: your journey to mastery 20th Anniversary Edition

基本は実践しなければ意味がありません。そして習慣にすることで初めてものにできるものです。そのためには自ら躾けて習慣化していかなければなりません。

私がかつて発見した、そして多くの人に気づいてもらいたい効果とは、反復可能な振る舞いを規則にまで還元することで、規則の適用は機会的に反復可能になるということだ。

— テスト駆動開発

ここで、Kent Beck が自ら語ったセリフを思い出しました。「僕は、偉大なプログラマなんかじゃない。偉大な習慣を身につけた少しましなプログラマなんだ」。

— リファクタリング(第 2 版)

セキュリティ(Security)

5S に続いてセキュリティに関してですがここで扱う内容は 情報セキュリティ に関する内容です。

情報セキュリティ（じょうほうセキュリティ、英: information security）とは、情報の機密性、完全性、可用性を維持すること。

— Wikipedia
https://ja.wikipedia.org/wiki/%E6%83%85%E5%A0%B1%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3

ここではパスワードに関する基本だけ抑えておいてください。

  • 誕生日や電話番号など、親が見てパッと理解できる文字列はダメ

  • 1 単語で“読めてしまう”文字列はダメ

  • 8 文字以下の文字列は短すぎるからダメ

— 子どもに「パスワード」の付け方を教えられますか？
子どもを守る IT リテラシー学

実際にパスワードを設定するときは

  • サービスごとに、3 単語以上の英文字を並べる（例：pekinese-optimal-start）

  • なるべく長いパスワードを用意する（例：nagai-pasuwa-do-wo-youi-suru-amari-iirei-deha-naiga）

  • 辞書に載っていないような文字列を用意する（例：Itags80vZyMp）

— 子どもに「パスワード」の付け方を教えられますか？
子どもを守る IT リテラシー学

を参考にしてください。

IT リテラシ

以上が基本となる考えです。この記事では 6S を軸としたソフトウェア開発のための IT リテラシ 習得のベースとなる環境構築をすることを目的としています。

今日のソフトウェア開発の世界において絶対になければならない 3 つの技術的な柱があります。
三本柱と言ったり、三種の神器と言ったりしていますが、それらは

  • バージョン管理

  • テスティング

  • 自動化

の 3 つです。

— https://t-wada.hatenablog.jp/entry/clean-code-that-works

アカウントの登録

まず各種サービスのアカウントを登録します。ここでは以下のアカウント設定で作業を進めていきますが各自作業の際は読み替えてください。
Microsft newbie4649@outlook.jp
Google newbie4649@gmail.com
GitHub newbie4649
Windows newbie4649@outlook.jp
WSL newbie4649

また、パスワードに関しては セキュリティ を参考に設定してください。アカウント ID に関しては可能な限り共通の ID 名を設定すると管理しやすくなります。登録アカウントとパスワードは一箇所に記録していつでも確認できるようにして置いてください。理想はパスワードマネージャーの使用ですがクラウドストレージでもいいです。他人にみられることがないように注意して管理しましょう。クラウドストレージで安全に保存する自信が無い場合は エンジニアリングデイブックス に記録しておきましょう。その際、もし落として他人にみられてもわからないような工夫をしておきましょう。手段はどうあれ 保存する場所は一箇所 が原則です。

Microsoft アカウントを作成する

アカウントの作成 から新しいメールアドレスを取得を選択します。

ms 001

ms 002

ms 003

ms 004

ms 005

ms 006

Google アカウントを作成する

Google アカウントの作成 から Googleアカウントを作成する を選択します。

ggl 001

ggl 002

ggl 003

GitHub アカウントを作成する

GitHub に登録する から GitHubに登録する を選択します。

ghb 001

ghb 002

Free プランを選択します

ghb 003

アカウントにサインインする

Microsoft アカウントにサインインする方法を参考にしてローカルアカウントから Microsoft アカウントに切り替えます。

login 001

login 002

login 003

login 004

login 005

login 006

login 007

クラウドストレージのセットアップ

Keep Knowledge in Plain Text

Plain text won’t become obsolete.It helps leverage your work and simplifies debugging and testing.

— Pragmatic Programmer: your journey to mastery 20th Anniversary Edition

Office365 から OneDrive の設定を確認します。

drive 001

drive 002

drive 003

アカウントのパスワードなど機密情報は Personal Vault で OneDrive ファイルを保護する を使って管理すると良いでしょう。もしくは 1Password などパスワード管理ツールの導入を検討してください。

PC の OneDrive にあるようにデータはローカルとクラウドの両方にあるので破損・紛失をしても復旧することが出来ます。

開発環境のセットアップ

パッケージ管理ツールのインストール

アプリケーションの管理にはパッケージ管理ツール Scoop を使います。インストールの詳細はScoopを使ったWindows環境構築のススメ -Super!!を参照してください。

スタートメニューから Windows PowerShell を選択します。

pkg 001
以下のコマンドを入力します。

1
2
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

pkg 002

gitのインストール

Always Use Version Control

Vsersion control is a time machine for your work;you can go back.

— Pragmatic Programmer: your journey to mastery 20th Anniversary
Edition

スタートメニューから Windows PowerShell を選択します。

pkg 001

以下のコマンドを入力します。

1
scoop install git

追加パッケージをインストールします

1
scoop bucket add extras

git 001

PowerShellCoreのインストール

最新バージョンのセットアッププログラムをダウンロードします

GitHub

Previewでない最新バージョンを選択します。

pwsh 001

pwsh 002

pwsh 003

ダウンロードしたセットアッププログラムを実行します。

pwsh 004

pwsh 005

pwsh 006

pwsh 007

pwsh 008

Windows Terminalのインストール

Use the Power of Command Shells

Use the shell when graphical user interfaces don’t cut it.

— Pragmatic Programmer: your journey to mastery 20th Anniversary
Edition

画面左下のスタートメニューから Microsft Store を選択します。

terminal 001

検索欄に terminal と入力したら表示されられる候補の中から Windows Terminal を選択します。

terminal 002

WSLのインストール

画面左下のスタートメニューから歯車のアイコンを選択してWindowsの設定画面を表示します。

wsl 005

アプリ を選択します。

wsl 006

アプリと機能 から プログラミングと機能 を選択します。

wsl 007

Windows Subsystem for Linux にチェックを入れてOKボタンを押します。

wsl 008

今すぐ再起動 を押してWindowsを再起動します。

wsl 009

Dockerのインストール

Docker Desktop
をインストールします。

docker 001

OKを押します。

docker 002

インストールが完了したら再起動します。

docker 003

再起動後に以下の警告が表示されるのでリンクをクリックします。

docker 004

Linxuカーネル更新プログラムパッケージをダウンロードして実行します。

docker 005

docker 006

docker 007

完了したら、Restartを押します。

docker 008

チュートリアルを実行して動作を確認しておきましょう。

docker 009

Ubuntuのインストール

スタートメニューから Windows PowerShell を選択します。

pkg 001

以下のコマンドを入力します。

1
wsl --set-default-version 2

画面左下のスタートメニューから Microsft Store を選択します。

wsl 001

続いて、検索欄に ubuntu と入力して候補の中から Ubuntu を選択します。

wsl 002

入手を押してアプリケーションをインストールします。

wsl 003

インストールが終わるとセットアップが始まるのでユーザーIDとパスワードを設定してください。

wsl 011

wsl 012

エディタのセットアップ

Achieve Editor Fluency

An editor is your most important tool. Know how to make it do what you
need, quickly and accurately.

— Pragmatic Programmer: your journey to mastery 20th Anniversary
Edition

インストール

Download Visual Studio Code Java Pack Installer からVSCodeをダウンロードしてセットアッププログラムを実行します。

vscode 001

vscode 002

vscode 003

設定

エディタが起動すると画面右下にWSL拡張機能インストールのポップアップが表示されるので Install を押して拡張機能をインストールします。

setting 001

続いて画面左下の歯車を選択してメニューから Settings を選択します。

setting 002

検索欄に trim と入力します。

setting 003

チェックをオンにします。

setting 004

同様に検索欄に format on save と入力してチェックをオンにします。

setting 005

必要に応じてキーバインドなども自分が使いやすいようにカスタマイズします。

拡張機能の追加

エディタのメニューが英語なので日本語に変更する拡張機能をインストールします。

Japanese Language Pack for Visual Studio Code

画面左のExtensionアイコンを選択して検索欄に japanese と入力したら日本語拡張パッケージが表示されるので Install を押します。

package 001

Restart Now を押してエディタを再起動します。

package 002

メニューが日本語になりました。

package 003

同様の手順で以下の拡張機能をインストールします。

  1. vscode-icons

  2. GitLens

  3. Prettier

  4. Git History

  5. Bracket Pair Colorizer

  6. Bookmarks

  7. TODO Highlight

  8. Path Autocomplete

  9. Rainbow CSV

  10. Partial Diff

  11. Duplicate action

  12. GitHub Pull Requests

  13. gitignore

  14. Todo+

  15. Output Colorizer

  16. Trailing Spaces

設定の同期

エディタの設定をして拡張機能をインストールしました。再インストールなどでエディタを再インストールする場合に上記の作業を再度するのは手間なので設定をオンライに保存してすぐにセットアップできるようにしておきます。

サイドバーから設定の同期をオンにするを選択します。

sync 001

オンにする を押します。

sync 002

サインインしてオンにする を押します。

sync 003

GitHubでサインイン を選択します。

sync 004

ブラウザが起動するので Continue を押します。

sync 005

GitHubのアカウントとパスワードを入力します。

sync 006

Authorize github を押します。

sync 007

もし、GitHub連携で以下のような画面になった場合は登録メールアドレスに認証コードが送られているので確認してください。

sync 009

sync 010

Hello world

プログラムを作成する

エディタのセットアップが出来たのでかんたんなプログラムを作ってみましょう。 お題は Hello world です。
まず、プログラムを作成する場所ですが今回はディスクトップの直下に Projects というフォルダを作成してその中に配置したいと思います。

hello 001

Projects フォルダの中に PowerShell フォルダを作成します。

hello 002

hello 003

エディタを起動します。

hello 004

エディタを起動したらエクスプローラアイコンから フォルダを開く を選択して作成したフォルダを開きます。

hello 005

hello 007

フォルダを開いたらファイルアイコンを選択して HelloWorld.ps1 ファイルを作成します。

hello 008

hello 009

まず、以下のコードを入力してキーボードのF5を押します。

1
2
3
4
5
Describe "HelloWorld" {
    It "何か便利なものだ" {
        $true | Should Be $false
    }
}

hello 010

プログラムの実行と一緒にテストの実行結果が表示されます。

hello 011

テストが通るように修正します。

1
2
3
4
5
Describe "HelloWorld" {
    It "何か便利なものだ" {
        $true | Should Be $true
    }
}

hello 012

テスティングフレームワークの動作が確認できたのでプログラム作成に入ります。

1
2
3
4
5
6
7
8
Describe "HelloWorld" {
    It "何か便利なものだ" {
        $true | Should Be $true
    }
    It "簡単な挨拶を返す" {
        HelloWorld | Should Be "Hello from PowerShell"
    }
}

hello 013

HelloWorld 関数を追加します。

1
2
3
4
5
6
7
8
9
10
11
12
Describe "HelloWorld" {
    It "何か便利なものだ" {
        $true | Should Be $true
    }
    It "簡単な挨拶を返す" {
        HelloWorld | Should Be "Hello from PowerShell"
    }
}

function HelloWorld {
    return "Hello from PowerShell"
}

hello 014

F5キーを押してテストが通ったことを確認したらテストケースを追加します。もしテストが失敗するようなら保存のタイミングあっていない場合があるので再度F5キーを押して実行してみてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Describe "HelloWorld" {
    It "何か便利なものだ" {
        $true | Should Be $true
    }
    It "簡単な挨拶を返す" {
        HelloWorld | Should Be "Hello from PowerShell"
    }
    It "指定された名前で挨拶を返す" {
        HelloWorld "VSCode" | Should Be "Hello from VSCode"
    }
}

function HelloWorld {
    return "Hello from PowerShell"
}

hello 015

HelloWorld 関数は既定の挨拶しか返さないのでテストが失敗します。

...
Describing HelloWorld
 [+] 何か便利なものだ 41ms
 [+] 簡単な挨拶を返す 12ms
 [-] 指定された名前で挨拶を返す 56ms
   Expected string length 17 but was 21. Strings differ at index 11.
   Expected: {Hello from VSCode}
   But was:  {Hello from PowerShell}
   ----------------------^
...

HelloWorld 関数に引数を追加して表示できるように変更します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Describe "HelloWorld" {
    It "何か便利なものだ" {
        $true | Should Be $true
    }
    It "簡単な挨拶を返す" {
        HelloWorld | Should Be "Hello from PowerShell"
    }
    It "指定された名前で挨拶を返す" {
        HelloWorld "VSCode" | Should Be "Hello from VSCode"
    }
}

function HelloWorld($name) {
    return "Hello from $name"
}

F5を押します。

hello 016

指定された名前で挨拶を返す テストは通りましたが今度は 簡単な挨拶を返す テストが失敗してしまいました。

Describing HelloWorld
 [+] 何か便利なものだ 39ms
 [-] 簡単な挨拶を返す 23ms
   Expected string length 21 but was 11. Strings differ at index 11.
   Expected: {Hello from PowerShell}
   But was:  {Hello from }
   ----------------------^
...
 [+] 指定された名前で挨拶を返す 29ms
...

HelloWorld 関数にデフォルト引数を設定してテストを通るようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Describe "HelloWorld" {
    It "何か便利なものだ" {
        $true | Should Be $true
    }
    It "簡単な挨拶を返す" {
        HelloWorld | Should Be "Hello from PowerShell"
    }
    It "指定された名前で挨拶を返す" {
        HelloWorld "VSCode" | Should Be "Hello from VSCode"
    }
}

function HelloWorld($name = "PowerShell") {
    return "Hello from $name"
}

F5を押します。

hello 017

仕上げに不要なテストを削除してテストケースの文言をわかりやすくしておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
Describe "HelloWorld" {
    It "何も指定されていない場合は既定の挨拶を返す" {
        HelloWorld | Should Be "Hello from PowerShell"
    }
    It "指定された名前で挨拶を返す" {
        HelloWorld "VSCode" | Should Be "Hello from VSCode"
    }
}

function HelloWorld($name = "PowerShell") {
    return "Hello from $name"
}
`

hello 018

HelloWorld プログラムの完成です。

プログラムをデバッグする

プログラムを作成していると思った通りに動かないことが多々あります。そのようなときにプログラムの動作を確認するにはエディタのデバッグ機能を使います。

まず確認したいプログラムの行を左部分を押してブレークポイント（赤丸）を設定します。

hello 019

ブレークポイントを設定したらF5を押してプログラムの実行します。そうするとブレークポイント部分でプログラムが停止して変数などの情報が確認できるようになります。

hello 020

画面上の実行ボタンを押すと次のブレークポイントに移動します。

hello 021

hello 022

hello 023

デバッガを終了するには終了ボタンを押します。

hello 024

ブレークポイントを再度押すことで解除ができます。

hello 025

プログラムをレポジトリに保存する

作成したプログラムをレポジトリに保存します。まずソース管理アイコンを選択して リポジトリを初期化する を押します。

hello 026

hello 027

変更をステージ を選択します。

hello 028

変更内容を入力します。ここでは feat: HelloWorld を入力しておきます。

hello 029

コミット を押します。

hello 030

初回登録時は以下の警告が表示されるので追加作業が必要になります。

hello 031 1

hello 031 2

以下のコマンドをターミナルに入力します。

1
2
git config --global user.name "newbie4649"
git config --global user.email newbie4649@outlook.jp

user.nameとuser.emailには自分のアカウント情報を登録すること。

hello 032

再度 コミット を押してレポジトリに保存します。

hello 033

レポジトリの記録内容は ソース管理 から確認することが出来ます。

hello 035

開発言語のセットアップ

Ruby 環境のセットアップ

Ruby 環境のセットアップ(WSL 版)

参照

参考図書

  • The Pragmatic Programmer: your journey to mastery, 20th Anniversary Edition David Thomas (著), Andrew Hunt (著): Addison-Wesley Professional; 2 版 (2019/7/30)

  • 達人プログラマー 熟達に向けたあなたの旅（第2版）Andrew Hunt (著), David Thomas (著), 村上雅章 (翻訳): オーム社; 新装版 (2020/11/21)

  • テスト駆動開発 Kent Beck (著), 和田 卓人 (翻訳): オーム社; 新訳版 (2017/10/14)

  • 新装版 リファクタリング―既存のコードを安全に改善する― (OBJECT TECHNOLOGY SERIES) Martin Fowler (著), 児玉 公信 (翻訳), 友野 晶夫 (翻訳), 平澤 章 (翻訳), その他: オーム社; 新装版(2014/7/26)

  • リファクタリング(第 2 版): 既存のコードを安全に改善する (OBJECT TECHNOLOGY SERIES) Martin Fowler (著), 児玉 公信 (翻訳), 友野 晶夫 (翻訳), 平澤 章 (翻訳), その他: オーム社; 第 2 版(2019/12/1)

Author: k2works
Link: https://k2works.github.io/2020/04/07/2020-04-08-1/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
テスト駆動開発VisualStudioCode