Node.js 8 64bit & TypeScript の インストール

急遽 TypeScript を 使うことになり… インストールとか環境構築とか. ちょっと手を広げすぎている感があるけど、勉強する機会があるのはよいこと、と考えることにして Let’s Go!

作業環境

  • Windows 10 64bit
  • Node.js 8.4.0 64bit
  • TypeScript 2.4.2

バージョン と インストールする環境について検討

ブログ環境を構築する Hexo を インストールした際に、Node.js 6.9 LTS を インストールしました. その際には “開発用途ではないので LTS(Long Term Support) である v6.9.1 LTS” としてました. が、今回はバージョン指定があり Node.js 8.x に なります.
指定があるということは、考えることがないですね.

なお Hexo の 方も、この際バージョンアップしてしまうことにします. 2つのバージョンを管理したり行き来するのが手間ですし、そもそも v6 LTS の 選択は Hexo 以外に用途がなかったのでサポートが長い LTS にしていたという経緯になります. 今回開発に使うので、ちゃんと新しいバージョンへの追随やトラブルシュートもやる(たぶn)ので、あまり困らないかなぁと.

Node.js の インストール と 動作確認

Node.js の トップ・ページ https://nodejs.org/en/ へ アクセスします.
画面中ほどにダウンロードリンクがあります.
今回は、ちゃんと Windows の 64bit であることを認識して、[Download for Windows (x64)] で 表示してくれています. と、いうことで素直に [v8.4.0 Current] を クリックしてダウンロードします.

チェックサム は ダウンロード・ページ https://nodejs.org/en/download/current/ に [Signed SHASUMS for release files] が あります. 今回ダウンロードした node-v8.4.0-x64.msi は 8efbd1b94ff8338bd36a1c30a86aba4fae3b80b61e265401fa97e7a4c5478ab2 でした.
確認方法は Windows PowerShell 4.0 以降の Get-FileHash コマンドを使います.

1
2
3
4
5
c:\> powershell Get-FileHash -Algorithm SHA256 c:\node-v8.4.0-x64.msi

Algorithm Hash
--------- ----
SHA256 8EFBD1B94FF8338BD36A1C30A86ABA4FAE3B80B61E265401FA97E7A4C5478AB2

ダウンロードした node-v8.4.0-x64.msi を ダブルクリックして、インストーラーを起動します.

End-User License Agreement が 表示されます. 内容を確認し、同意できたら [I accept the terms in the Lisence Agreement] に チェックして [Next] を クリックします.

インストール先を指定します. 今回は C:\Develop\sdk\nodejs8\ と しました.

Custom Setup で オプションを聞かれます. 今回は特に変更なしで、すべて インストールしました.

インストール確認が表示されるので、[Install] ボタンをクリックしてインストールします.

インストールが完了しました.

動作確認としてコマンド プロンプト で バージョンを出力してみます. コマンドは node --version もしくは node -v です. インストール・オプションで [Add to PATH] に チェックした(変更しなかった)ので、パスが通っており、直接 node コマンドが実行できます.

1
2
3
4
5
6
7
8
c:\> echo %PATH%
C:\Develop\sdk\nodejs8\;C:\Users\username\AppData\Roaming\npm; ...(省略)

c:\> node --version
v8.4.0

c:\> node -v
v8.4.0

TypeScript の インストール と 動作確認

npm コマンドでインストールします. TypeScript の トランスパイラー に加え、Lint も 合わせて入れておきます.

1
2
3
4
c:\> npm install -g typescript tslint
+ tslint@5.6.0
+ typescript@2.4.2
added 31 packages in 4.277s

動作確認は TS コンパイラー の tsc コマンドで行います.

1
2
3
4
5
c:\> tsc --version
Version 2.4.2

c:\> tsc -v
Version 2.4.2


とりあえず、Node.js 8 と TypeScript が インストールできました. ついでに Hexo 環境もバージョンアップとなりましたが、今のところ特に困ったことはなさそうです. (そりゃ、そうだ)

Visual Studio Code で Hello Python3!

ようやく Visual Studio Code の 準備ができました! さっそく Python の コーディングに入りたいと思います. まずは基本の Hello World から!

作業環境

  • Windows 10 64bit
  • Python 3.6 64bit
  • Visual Studio Code

Python サポート の 拡張機能を追加

Visual Studio Code で Python の コード補完や、Lint、デバッグ を 行うには、Pyhton サポート の 拡張機能を追加します.
Python サポート の 拡張機能は かなりの数 登録されています. その中から、今回は Don Jayamanne さん の 拡張機能 を 使わせていただくことにしました.
レーティングが高く、インストール数も多く、また Visual Studio Code の 公式ドキュメントで紹介されていること、「ようこそ」画面で推薦されていることなどからの選定となります. Thank you for the great extension!, Don Jayamanne-san!!

Visual Studio Code を 起動し「ようこそ」画面から、[カスタマイズする] - [ツールと言語] - [Python] を クリックします.
※ 「ようこそ」 が 表示されない場合は、メニュー の [ヘルプ] - [ようこそ] を 選択します

「Python に追加サポートをインストールしたあと、ウィンドウが再読み込みされます.」 が 表示されるので [OK] を クリックします.

Visual Studio Code が 再起動し、「ようこそ」の Python の 色が変わり Python サポートがインストールされました.

また、Ctrl + Shift + X で 拡張機能を表示するとインストール済みに Python が 追加されていることからも確認できます.

プロジェクト・フォルダー の 作成 と 展開

さっそくプロジェクト用のフォルダーを作成し開きます. Ctrl + K Ctrl + O から フォルダー選択ダイアログを表示してもよいのですが、今回はフォルダーを作成する必要があるので “Being able to keep your hands on the keyboard when writing code is crucial for high productivity. VS Code has a rich set of default keyboard shortcuts as well as allowing you to customize them. - Basic Editing in Visual Studio Code - Keyboard shortcuts“ にならい、統合コンソールから開くことにします.

Ctrl + @ で 統合コンソールを表示. 下記コマンドを実行しフォルダーの作成 と Visual Studio Code で フォルダーを開きます. 今回は C:\Develop\workspace\hello-python3 に フォルダーを作成しました.

1
2
PS C:\Users\username> mkdir C:\Develop\workspace\hello-python3
PS C:\Users\username> code C:\Develop\workspace\hello-python3\

Python の 仮想環境 を 作成

Hello World なので、仮想環境を作成するほどでは無いのですが、Visual Studio Code の 設定確認もかねて.
Ctrl + @ で 統合コンソールを表示し、 venv を 実行します. フォルダーを開いているので、カレント・フォルダーが自動的にプロジェクト用のフォルダになっています.

1
PS C:\Develop\workspace\hello-python3> python -m venv venv

Visual Studio Code で 仮想環境を使うように設定します.
Ctrl + Shift + P で コマンドパレット、interp と 入力して、[Python: Select Workspace Interpreter] を 選択します.
続いて利用可能な python.exe の 候補が出るので、 venv - python.exe を 選択します.

続いて新しいファイルを作成します. Ctrl + N でもよいのですが、Visual Studio Code っぽく Ctrl + Shift + P で コマンドパレット、new file を 入力して、Visual Studio Code の エクスプローラーに直接ファイルを追加します. ファイル名は hello.py としました.

ファイル名を確定すると「Linter pylint is not installed」の エラーが表示されます. [Install pylint] を クリックしてインストールします.

新しい統合ターミナルが起動し Pylint が インストールされます. 先ほど仮想環境を選択しているので実行する python.exevenv の ものになっています. インストールできたら、統合ターミナルは不要なので Ctrl + @ で 閉じておきます.

Python コーディング

単純な Hello World ならぬ Hello Python3! なので print('Hello Python3!') 以上、なのですが Visual Studio Code を 使うからには入力補完を使うようなコードにしたいところです. ちょっと回りくどいですが main() から hello() を 呼ぶような構造にしました.

1
2
3
4
5
6
7
8
def hello(name):
print('Hello ' + name)

def main():
hello('Python3!')

if __name__ == '__main__':
main()

では早速. d と タイプすると入力補完が即時立ち上がりました! (間違えて消えてしまったら Ctrl + Space )
いくつかの候補があり迷いますが、コード・スニペット の def を 選択します.

ファンクション定義のスニペットが展開されました. funcname に フォーカスが当たっているので、ファンクション名 hello を 入力し、 Tab キーを押下します.

parameter_list へ フォーカスが移るので、今回のパラメーター name を 入力し、 Tab キーを押下します.

ファンクションのボディに展開されていた pass へ フォーカスが当たるので、 print文 を 入力します.

printprint の 文字列の入力補完が効きますが括弧はつかないようです. また、 name は パラメーター定義があるのを見てくれて入力補完のリストが表示されます.

print 文のパラメーター 'Hello ' + name まで入力し、 Ctrl + Enter すると行の途中(今回は閉じ括弧のが残っている状態)でも、残りを改行せずにカーソルだけ次行へ改行してくれます. Ctrl + S で ファイルを保存します.
def に 警告が表示されています. 「[pylint] C0111:Missing module docstring」と「[pylint] C0111:Missing function docstring」ですね…
マウス・カーソルを警告が出ている波線にのせるほか、 Ctrl + Shift + M で 問題ビューを表示できます.

とりあえず先に進んで、 main() を 実装します.
main() は、そのあとの if __name__ == '__main__': と ペアになります. そのため if 文の入力補完を期待して if から入力し、 if(main) の 入力補完を選択します.

期待通りの main()if __name__ == '__main__': を 補完してくれました! pass に フォーカスが当たっているので hello('Python3!') を 入力します.

実装できたので Ctrl + S で 保存します. 警告 を すべて無くしてから完成ですが、今回は Visual Studio Code で Python を 実行することが目的で、コードは残さないので、このまま進めます.

Python プログラム の 実行

まずは Python 拡張機能 の [Python: Run Python File in Terminal] から実行してみます. Ctrl + Shift + P で コマンドパレットを表示、 Python run と 入力して絞り込みます.

[Python: Run Python File in Terminal] を 選択し、実行します.

その他 - venv 仮想環境 の python.exe の パス

venv の 仮想環境 python.exe の パスは .vscode\settings.json"python.pythonPath" に フル・パスで記述されています. .vscode\settings.json を Git などへコミットし共有する場合は、絶対パスか"${workspaceRoot}/venv/scripts/python.exe" のように、プロジェクトのディレクトリをさす ${workspaceRoot} に 置き換えておきます. 詳細は こちら Relative Paths to Python Interpreter - Python Path and Version · DonJayamanne/pythonVSCode Wiki
.

その他 - 統合ターミナルから venv 仮想環境 の 実行

Ctrl + @ で 統合ターミナルを起動し、そこから Python および 関連コマンド(e.g. pip)を実行する場合、 venv を 有効化する必要があります. この場合は [Python: Select Workspace Interpreter] が 効いていないので注意が必要です.

1
2
3
PS C:\Develop\workspace\hello-python3> Set-ExecutionPolicy RemoteSigned -Scope Process
PS C:\Develop\workspace\hello-python3> .\venv\Scripts\Activate.ps1
(venv) PS C:\Develop\workspace\hello-python3>


主にクロール系の処理になるので、こちらで勉強しています.
最初の言語として勉強するための本には向いていませんが、Python の 言語使用の話もあるので他の言語を知ってる場合には、これ1冊でも十分ではないでしょうか.
またクローラーを作るという観点では、Python の 基本機能だけではなく Shell や Python の 外部ライブラリを使ったりと、バリエーションを持たせて解説があるので とても分かりやすいほか、法律に関する話などもあるのが素晴らしいです!


Visual Studio Code で Hello World が できました!
これで Python プログラミングが始められます. 何を作ろうかなぁ~

Visual Studio Code 最初の設定変更

Visual Studio Code が インストールできGit も 使えるようになりました. まだ使いこんでいないので、よい設定や便利な拡張機能が見いだせていないですが、とりあえず必要最低限の最初の設定をしておきます.
Eclipse での設定と同様、各種設定については、お好みがあると思います. ご参考になれば、といったところでしょうか.

作業環境

  • Windows 10 64bit
  • Visual Studio Code

ユーザー設定の表示

Visual Studio Code を 起動します.

Ctrl + , で ユーザー設定 の settings.json を 表示します.
Visual Studio Code は GUI の 設定を持っておらず、JSON ファイルを編集して設定します. とはいえ、各設定に説明がついていこと、エディターによる支援もあるので、難しいことなく設定できます.

設定変更の方法概要

ユーザー設定が分割エディターで表示されています.
左側が既存の設定でデフォルトになります. そこから変更する項目を右側にコピーして値を変更します.
コピーと設定変更は、左側で変更したい項目にマウスをのせると、鉛筆アイコンが出てくるので、クリックします.
クリックすると、設定できる値に応じて選択肢が表示されたり、テキスト入力の場合はコピーするといったアクションが表示されます. アクションに応じて設定を変更していきます.
Visual Studio Code の 再起動が必要な場合は、ダイアログが表示されるので指示に従います.

フォントの変更

まずはフォントを例に設定変更します.
開発環境にとってフォントは大事、今回も Eclipse でも使っている M+とIPAの合成フォント さん の Migu 1M を 使わせていただきます.. 素晴らしいフォントをありがとうございます!!

分割されているユーザー設定の左側、既存の設定 から [エディター] を 開きます.

"editor.fontFamily": "Consolas, 'Courier New', monospace", の 行に マウスをのせると [鉛筆アイコン] が 表示されます.

[鉛筆アイコン] を クリックします.
今回はテキスト入力の設定項目のため [設定にコピー] が 表示されるので、クリックします.

右側にコピーされ、設定値 ここでは "Consolas, 'Courier New', monospace" に フォーカスがあたります.

右側にcopyされた設定を "'Migu 1M'" にし、 Ctrl + S で 保存します. エディターに表示されているフォントが即時に変更されます.

空白文字の表示方法を変更

続いて選択肢のある設定変更の例として、空白文字の表示方法を変更します.
左側から "editor.renderWhitespace": "none", を 探す or 設定の検索 をし、 [鉛筆アイコン] を クリックします.

設定値の選択肢が表示されるので選択します. 今回は "boundary" を 選択しました.
右側にコピーされ、値が "boundary" に なっています.

今回設定した項目

上記 フォント変更 や 空白文字の表示方法 の 設定変更のように、左側の [鉛筆アイコン] から アクションを選択し、右側で設定を変更していくことで、設定が変更できます.
これを Visual Studio Code 1.15.0 時点、354個 の 項目から変更する値を探して設定します. 凄い設定項目数ですね…

今回は以下の設定を行いました.

設定項目 設定値 設定内容
editor.fontFamily “‘Migu 1M’” フォント を Migu 1M
editor.rulers [80, 120] 垂直ルーラー は 標準の 80 と よく使う 120
editor.minimap.showSlider “always” ミニマップのスライダー を 常に表示
editor.cursorBlinking “smooth” カーソル・アニメーション を スムーズに
editor.renderWhitespace “boundary” 空白文字を単語間の単一スペース以外表示
files.autoGuessEncoding true ファイルを開くときに文字セット エンコードを推測
files.eol “\n” 既定の改行文字を LF に設定
files.trimTrailingWhitespace true ファイルの保存時に末尾の空白をトリミング
files.insertFinalNewline true ファイルの保存時に最新の行を末尾に挿入
terminal.integrated.scrollback 200000 ターミナルの最大行数

更新
2017年9月4日 editor.minimap.showSlider を 追加


とりあえず基本設定はできました. files.insertFinalNewline などは よい設定ですね. 私は習慣化しているのでエディターの支援が効く機会が少ないかもしれませんが、チーム開発ではチョイチョイ引っかかるケースがあるので、設定に入れてしまって自動でやってしまうのがよさそうです.

Visual Studio Code で Git を 使う

Git for Windows Portable を インストールし Git が 使えるようになったので、さっそく Visual Studio Code から使ってみます.

作業環境

  • Windows 10 64bit
  • Git for Windows Portable 64bit
  • Visual Studio Code
  • Git Hub

Visual Studio Code を 使って GitHub からの クローン

Visual Studio Code を 起動します.
※ GitHub の アカウント設定と公開鍵の登録などの設定ができている前提とします.

統合ターミナル を Ctrl + @ で 表示します.

統合ターミナルで以下を実行しクローンします.
※ 下記 azriton/test は クローンするリポジトリに置き換えます

1
2
3
4
5
6
7
8
9
10
11
PS C:\Users\username> cd C:\Temp\
PS C:\Temp> git clone git@github.com:azriton/test.git
Cloning into 'test'...
The authenticity of host 'github.com (192.30.255.113)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'github.com,192.30.255.113' (RSA) to the list of known hosts.
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
PS C:\Temp>

Git の 設定で user.useConfigOnly true している場合は、ここでユーザ名とメールアドレスを設定します.

1
2
3
PS C:\Temp> cd test
PS C:\Temp\test> git config --local user.email "you@example.com"
PS C:\Temp\test> git config --local user.name "Your Name"

Visual Studio Code で プロジェクトのように扱うため、 code コマンドにクローンしたリポジトリのディレクトリを渡してフォルダを開きます. (前回リポジトリのディレクトリに入っているので、ここでは . カレント・ディレクトリを渡しています)
(GUI から開く場合は Ctrl + K Ctrl + O)

1
PS C:\Temp\test> code .

クローンしたディレクトリが開いた状態の新しいウィンドウが表示されます.

Visual Studio Code から 変更 を プッシュ

README.md を ダブルクリックしてエディタに表示しします.

改行コードがあっていないので Ctrl + Shift + P で コマンドパレットを表示し line s と 入力すると絞り込みされるので、[改行コードの変更] を 選択し、続い改行コードの選択が表示されるので [LF] を 選択します.

ステータス・バー の 改行コード が LF に なっていることを確認し README.md を 編集
、保存すると ソース管理アイコンに変更されたファイル数がつきます.

ソース管理画面 を Ctrl + Shift + G で 表示します.

すべての変更をステージしたいので、 Ctrl + Shift + P で コマンドパレットを表示、 stage と 入力すると絞り込みされるので、[Git: すべての変更のステージング] を 選択します.
※ 個別に指定する場合は、各ファイルにマウス・フォーカスを与えると [+] アイコンが出るのでクリックして追加します.

[Message (press Ctrl+Enter to commit)] の テキスト・ボックスにフォーカスが外れてしまったので、再度 Ctrl + Shift + G で フォーカスを与え、コミットメッセージを入力し Ctrl + Enter します. これで変更がコミットされます.

ステータス・バー に 発信 [0↓ 1↑] が 出ているのでコミット済み、プッシュ前の変更があることが分かります.
Ctrl + Shift + P で コマンドパレットを表示、 push と 入力すると絞り込みされるので、[Git: プッシュ] を 選択します.

ステータス・バー が [0↓ 0↑] なので 無事、変更をプッシュすることができました! (ちょっと、わかりにくいかもw)


統合コンソールがあるので、もしかしたら Git コマンドを直接使った方が便利かもしれないですね.
とはいえ、Git の 準備もできました. いよいよ Visual Studio Code で コーディングが始められます. たのみー!

PortableGit for Windows 64bit の インストール

Visual Studio Code の 開発環境を整理し始めました. Visual Studio Code は Git を サポートしていますが別途インストールする必要があります. 今回は Git for Windows Portable を 導入します.

作業環境

  • Windows 10 64bit
  • PortableGit 64bit
  • Git Hub

Git for Windows Portable (“thumbdrive edition”) とは

Git 公式パッケージの1つで、ポータブル・アプリケーションと呼ばれる特定の環境にインストールする必要がなく、USB メモリーなどで持ち運び、任意の環境(OS は Windows版なら、Windows の 必要はありますが)で利用できるパッケージ の Git に なります.
今回は PC に インストールするので、Git の 実行環境だけを持ち出すことは無いのですが、git コマンドぐらいしか使わないので、いろいろインストールせずに済ませたいことからポータブル版にしました.

インストール手順

git-for-windows の GitHub 最新のリリース https://github.com/git-for-windows/git/releases/latest へ アクセスします. Git の ウェブサイト https://git-scm.com/ の ダウンロード・ページへ行ってもよいのですが、自動ダウンロードが動作することと、チェックサムが無いので、ダウンロード・ページが見ている GitHub の リリース・ページからダウンロードしました.

例によって Windows PowerShell の Get-FileHash コマンドでチェックサムを確認します.
先のリリースページに記載されている PortableGit-2.14.0.2-64-bit.7z.exe の チェックサムは 5236c21de3cdf52b538322de0b0444f6cd49a5bae6006ea89f0683598cbda7ac でした.

1
2
3
4
5
c:\> powershell Get-FileHash -Algorithm SHA256 c:\temp\PortableGit-2.14.0.2-64-bit.7z.exe

Algorithm Hash
--------- ----
SHA256 5236C21DE3CDF52B538322DE0B0444F6CD49A5BAE6006EA89F0683598CBDA7AC

ダウンロードした [PortableGit-2.14.0.2-64-bit.7z.exe] を ダブルクリックして、7-Zip の 自己解凍ウィザードを起動します.

解凍先を聞かれるので任意のフォルダを指定します. 今回は C:\Develop\tool\PortableGit に しました.

環境変数 PATH を 設定します. システムのプロパティから追加してもよいですし、以下のコマンドからも実行可能です.

1
powershell [Environment]::SetEnvironmentVariable('PATH', [Environment]::GetEnvironmentVariable('PATH', 'User') + ';' + 'C:\Develop\tool\PortableGit\cmd', 'User')

.gitconfig の 設定

とりあえず最小限の .gitconfig の 設定

  • core.autocrlf は、改行コードをエディタで明示するので変換なしにしました
  • core.excludesfile は、全体の .gitignore ファイルの指定で、先に作成したファイルを指定します
  • user.useConfigOnly は、リポジトリごとに user.nameuser.email を 指定する設定です
    チェックアウトした後に設定するのが面倒ではありますがアカウントが別なリポジトリがあったりすると便利です
  • credential.helper は、HTTPS で クローンする際にクレデンシャル情報を記憶してくれます (Caching your GitHub password in Git - User Documentation)
    1
    2
    3
    4
    c:\> git config --global core.autocrlf false
    c:\> git config --global core.excludesfile ~/.gitignore
    c:\> git config --global user.useConfigOnly true
    c:\> git config --global credential.helper wincred

全体の .gitignore 設定

.gitignore は 各リポジトリに配置するのとは別に、全体の設定ができます. 先の core.excludesfile で 設定したファイルが それにあたり、今回は ~/.gitignore ホームディレクトリにあるファイルに設定しています.

まずはファイルを作成します. Windows には touch コマンドが無いのですが、 type nul > ファイル名 で 空のファイルが作れます. つい null と 指が動きたくなりますが l は 1つになります. nul は Linux などで言うところの /dev/null でしょうかね. NUL デバイスにリダイレクトされたシェルは、MS-DOS のメッセージを表示しません。 - Microsoft サポート.

また、エクスプローラーから作成する場合は 自分のホーム・フォルダーを表示し [右クリック] - [新規作成] - [テキスト ドキュメント] から、ファイル名を .gitignore. と 最後に . を 付けて作成します. 拡張子に関する警告が出ますが [はい] を クリックすると、最後の . が 消えて .gitignore に なります.

余談ですが 日付とファイルのタイムスタンプを更新 - Microsoft サポートCOPY /B ファイル名 +,, らしいです.

1
type nul > %USERPROFILE%\.gitignore

作成したファイルに Git で 管理しないファイルの設定をします.
リポジトリにコミットしないので自分の環境ならではの指定もできるのでうれしいです. Windows なので、とりあえず Thumbs.db を. (このブログは GitHub Pages で 作っている ので、画像がソースツリーにあるから必要)
その他、ちょっとしたスニペットを入れておく自分用フォルダなどを追加してもよさそうです.

1
Thumbs.db

2017年9月10日 追記
もっと良い設定方法があったので、全体 .gitignore の 設定 を 見直しました.
詳しくは、こちら Git の 全体 gitignore を 再設定する を ご参照ください.

Proxy が 必要な環境での設定

たまに必要になってハマることがあるのでメモ.
※ 以下の例の [hostname]:[port] は 利用する HTTP Proxy の ホスト名 と ポート番号に置き換えてください.

https:// で クローンする場合

1
2
c:\Temp> git config --global http.proxy http://[hostname]:[port]
c:\Temp> git clone https://github.com/azriton/test.git

2017年11月25日 追記
HTTPS を 使う場合、上記のように設定ファイルに設定を行わなくても 環境変数 HTTP_PROXYHTTPS_PROXY に プロキシ設定がある場合は、そちらを使ってくれます.
プロキシを自動構成するタスクを作りましたので、こちら Windows の プロキシ を 自動設定するタスクを作成 も 併せて ご参照いただければ幸いです.

git:// で クローンする場合

ホーム・ディレクトリの .ssh ディレクトリに以下の内容で config ファイルを作成します.

1
2
3
4
Host github.com
HostName ssh.github.com
Port 443
ProxyCommand connect.exe -H [hostname]:[port] %h %p

後はいつも通りクローンします.

1
c:\Temp> git clone git@github.com:azriton/test.git

Eclipse と 混在して利用する場合

片方は HTTPS を 使うのが無難な気がしますが、両方とも git:// を 使うには細工が必要です. Eclipse が config を 参照して うまく動かなくなるので、 git コマンドで利用する側の設定を変更します.
Host の 文字列を任意の文字列に変更します. 今回は proxy.github.com としました.

1
2
3
4
Host proxy.github.com
HostName ssh.github.com
Port 443
ProxyCommand connect.exe -H [hostname]:[port] %h %p

クローンする際に、git@github.com:azriton/test.git:github.comHost に 設定した文字列に置き換えます. 今回の例では proxy.github.com に なります.

1
c:\Temp> git clone git@proxy.github.com:azriton/test.git

クローンする際に GitHub からコピーした文字列を変更する必要があり、ひと手間かかりますがクローン後は特に意識することは無いです.


Git の 準備ができました. Visual Studio Code で Git を 使って開発の準備に取り掛かりたいと思います.

Visual Studio Code の インストール

最近 Python に 手を出し始めました. 以前でしたら何でも Eclipse で~っと Plug-in を 入れるのですが、最近は AtomVisual Studio Code といった高機能エディターの流行が気になります. 今回は Visual Studio Code で Python を 始めてみようと思うので、さっそくセットアップをしたいと思います. (セットアップ話が続くなぁ…)

作業環境

  • Windows 10 64bit
  • Visual Studio Code

Visual Studio Code とは

マイクロソフト社によって開発された高機能エディタです. Windows だけではなく、Linux や Mac OS X でも動作します.
インテリセンスという高性能なコード入力補完機能があり、加えて Git クライアント統合 や ターミナル統合(PowerShell、コマンドプロンプト、WLS Bash、Git Bash)、リファクタリング、デバッグなどが行え、ソースコード向けの機能がそろっています.
多くの機能が GUI による メニューがなく、コマンドパレット から使うようになっています. マウスを使用せずにコーディングを継続するように操作できるのだとか.

Visual Studio Code の ウェブサイトの他に、マイクロソフト社のウェブサイトに日本語の製品紹介のサイト Visual Studio Code - Visual Studio もあります. こちらから Visual Studio Code Preview ファースト ステップ ガイド が ダウンロードできます. 2015年7月17日版なので、少し古いですが概要を理解するにはよいかもしれません.

インストール手順

Visual Studio Code の ウェブサイト https://code.visualstudio.com/ へ アクセスします.
[Download for Windows] の 右にある [∨] を クリックし、OS の 一覧が表示されるので、[Windows x32] の 下にある [64bit version] リンクをクリックして、[Windows x64] を 追加します.
[Windows x64] の 右にある [Installer] の [Stable] の [↓] リンクをクリックしてインストーラーをダウンロードします.
※ [Download for Windows] を 直接クリックすると 32bit 版がダウンロードされたので、プラットフォームを直接指定しました.

2017年9月19日 追記
https://code.visualstudio.com/download の 下に [See SHA-256 Hashes] が ありました.
チェックサムが見つからなかったので、そのままダウンロードされた [VSCodeSetup-x64-1.16.1.exe] を ダブルクリックして、インストーラーを起動します.
チェックサム、確認したいんだけどなぁ…

いつもの Windows PowerShell の Get-FileHash コマンドでチェックサムを確認します.
先のダウンロード・ページに記載されている Windows 64 bit の チェックサムは 62b6f28d0bd02c0193389fb1b716fed1a2e8d5aea7d38ed39c70e2c2d0b20797 でした.

1
2
3
4
5
c:\> powershell Get-FileHash -Algorithm SHA256 c:\temp\VSCodeSetup-x64-1.16.1.exe

Algorithm Hash
--------- ----
SHA256 62b6f28d0bd02c0193389fb1b716fed1a2e8d5aea7d38ed39c70e2c2d0b20797

ダウンロードされた [VSCodeSetup-x64-1.16.1.exe] を ダブルクリックして、インストーラーを起動します.

セットアップウィザードが表示されるので、[次へ] ボタンをクリックして進めます.

ライセンスの確認が表示されます. 内容を確認し同意できるようでしたら [同意する] を 選択して [次へ] ボタンをクリックします.
同意できなかったら終了なので、あきらめて同意できるエディタを探します.

インストール先を指定します.
本当は C:\Develop 以下にまとめたいところですが、インストーラー・モノなので、指定されたまま進めました.

プログラムグループを指定します. 特に何もせず進めます.

追加タスクを選択します. 以下を設定しました.

  • エクスプローラー の ファイル コンテキスト メニュー に [Code で 開く] アクションを追加する
  • エクスプローラー の ディレクトリ コンテキスト メニュー に [Code で 開く] アクションを追加する
  • サポートされているファイルの種類のエディターとして Code を 登録する

デフォルトのエディタとして使わない場合は、[ファイル コンテキスト] と [サポートされいるファイルの種類] は チェックしない方が良いです. 特に関連付けを持っていかれると大変です.

一方で Visual Studio Code は ディレクトリ を プロジェクトのように扱うので、[ディレクトリ コンテキスト] は、どのような使い方にしてもチェックしておいた方が便利です.

インストールの設定確認が表示されるので、確認し、問題なければ [インストール] ボタンをクリックします.

Visual Studio Code が インストールされました. せっかくなので [Visual Studio Code を 実行する] に チェックしたまま [完了] します.

Visual Studio Code が 起動しました!
「ようこそ」画面が表示されています. 次回から表示しないようにするには [起動時にウェルカム ページを表示] の チェックを外します. また明示的に自分で表示するにはメニューの [ヘルプ] - [ようこそ] を 選択します.


まずはインストールだけですが、使い心地がよさそうなのでデフォルトのエディタとして使ってみることにしました.
エディタとしては若干起動が遅いので、メモ用途にも使うデフォルトのエディタという観点からは他のエディタの方が良いかもしれないと思いつつも、まずは手足のようになるまで使い込んでみてから改めて考えてみます. (新しいものは、これまでの記憶、特にマッスル・メモリーが上書きされるまで使い込んでこそ、ようやく良し悪しについて考えられると思ったりも)

Eclipse 4.7 Oxygen に 3rd Party の Plug-in を 追加

ようやく Eclipse の 設定ができました. 最後に 3rd Party の Plug-in を 追加して完了となります.

作業環境

  • Windows 10 64bit
  • Java SE Development Kit 1.8.0_141
  • Eclipse 4.7 Oxygen

Plug-in の 追加

Eclipse の メニューから [ヘルプ] - [新規ソフトウェアのインストール] を クリックします. 以降、この [使用可能なソフトウェア] ウィンドウを使って追加していきます.

SpotBugs (FindBugs)

SpotBugs は 問題になるコードを検出してくれるツールです. Eclipse Plug-in を 入れることでリアルタイムに検出してくれるので便利です. 以前は FindBugs というプロダクトだったのですが、最近は SpotBugs に なったようです.

[作業対象] に https://spotbugs.github.io/eclipse/ を 入力し Enter キーを押下します.

しばらく待つとウィンドウ中央のツリーに SpotBugs が 追加されるのでチェックをつけ、[次へ] ボタンをクリックします.

インストールの詳細が表示されます. [次へ] ボタンをクリックして進めます.

ライセンスの確認画面が表示されます. ライセンスを確認し同意できたら [使用条件の条項に同意します] を 選択し、[完了] ボタンをクリックします.

セキュリティ警告が出ますが、[インストール] ボタンをクリックして進めます.

インストール後、再起動を確認されます. 再起動しないと Plug-in が 有効にならないので [今すぐ再起動] ボタンをクリックします.

再起動後 [ウィンドウ] - [設定] から Eclipse の 設定を表示し設定を行います.
[Java] - [SpotBugs] - [報告構成]

  • 分析力: 最大
  • 報告する最小ランク: 1
  • レポートする最低の信頼度: Low
  • 報告(可視) バグ・カテゴリー: 実験用 以外 すべてチェック

Eclipse の Java コンパイラー設定同様に、とにかく厳しくします.

[Java] - [SpotBugs] - [ディテクター構成]

  • 隠しディテクターを表示: チェック
  • ディテクター: すべてチェック

実際のチェックを行う設定は、ディテクターになるので、ここも厳しく設定します.

Eclipse Class Decompiler

Eclipse Class Decompiler は JD, Jad, FernFlower, CFR, Procyon といった Java の デコンパイラーを使えるようにする Plug-in です.
普段使うことは無いのですが、ソースがロスとされている古いライブラリがあり仕方なしにデコンパイルすることがあるので入ってます. そんなもの捨ててしまえばいいのに…

Eclipse の メニューから [ヘルプ] - [新規ソフトウェアのインストール] で [使用可能なソフトウェア] ウィンドウ を 表示し、[作業対象] に https://spotbugs.github.io/eclipse/ を 入力し Enter キーを押下します.

すべてにチェックをつけ [次へ] ボタンをクリックして進めます. 以降は SpotBugs の 手順同様に インストールの詳細を確認し、ライセンスの確認と同意、インストールして再起動します.

再起動後 [ウィンドウ] - [設定] から Eclipse の 設定を表示し設定を行います.
[Java] - [逆コンパイラー]

  • デフォルトのクラス逆コンパイラー: FernFlower
  • オリジナル行番号をコメントとして出力

いろいろな逆コンパイラーが使えるので好みの逆コンパイラーを設定します. 違いについては こちら Jadclipse (Jad + JD-Core) から Eclipse Class Decompiler プラグインへ変更 - Eclipse 4.6 Neon 新機能 TOP10!と Spring Boot STS - Qiitacypher256 さんが整理してくださっています. 逆コンパイル結果まで載せてくださっており、とても助かります. 素晴らしい まとめ ありがとうございます!


Eclipse の 書籍

本記事の 4.7 より古いバージョンとなりますが、Eclipse の 使い方について一通り知るにはよいでしょう. Eclipse は だいぶ枯れているので、大きな違いはないので多少のバージョン違いでも特に問題なく対応できます. (※ Eclipse や IDE を すでに使っている場合には不要です)

Java の 書籍

IDE は あくまでも道具なので、プログラミングの知識はしっかりつけておきたいところです.
Java 8 までを、しっかり身に着けるには こちらの書籍がよいです. こんな感じで Java 9 も 出してほしいですね.


コードカバレッジが取れる EclEmma が デフォルトで入ってくれるようになったので、ここでの設定が減ってよかったです.
ようやく Eclipse の 設定が完了しました. 長かった~. 年1回とはいえなかなかヘビーですね.

Eclipse 4.7 Oxygen の 設定 - Web/XML編

Eclipse 4.7 Oxygen の 設定も大詰め、Web/XML の 設定になります. ここはエディターの設定を少し変えたいぐらいになります.
大きくは、インデントを Google の HTML/CSS Style Guide の “Indent by 2 spaces at a time. - 2.2.1 Indentation“ に ならって設定したところと、XML の 検証が無効になっているので有効にします.

また行の幅を 999 に しています. 私は HTML や XML の タグは折り返したくないというがあり、最長の設定にしています. ここはチームによってかなり温度差がありそうです. 周りとよく相談のうえで設定が必要ですね.

作業環境

  • Windows 10 64bit
  • Java SE Development Kit 1.8.0_141
  • Eclipse 4.7 Oxygen

設定

まずは、いつも通り Eclipse の メニュー から [ウィンドウ] - [設定] を クリックし、設定ウィンドウを表示します.

[Web] - [CSS ファイル] - [エディター]

  • 行の幅: 999
  • スペースを使用したインデント: チェック
  • インデント・サイズ: 2

[Web] - [HTML ファイル] - [エディター]

  • 行の幅: 999
  • スペースを使用したインデント: チェック
  • インデント・サイズ: 2

[XML] - [XML ファイル] - [エディター]

  • 行の幅: 999
  • スペースを使用したインデント: チェック
  • インデント・サイズ: 2

[XML] - [XML ファイル] - [検証]

  • 文法指定なし: 警告 (必要に応じて 無視)
  • マークアップ検証を使用可能にする: チェック

Eclipse の 書籍

本記事の 4.7 より古いバージョンとなりますが、Eclipse の 使い方について一通り知るにはよいでしょう. Eclipse は だいぶ枯れているので、大きな違いはないので多少のバージョン違いでも特に問題なく対応できます. (※ Eclipse や IDE を すでに使っている場合には不要です)

Java の 書籍

IDE は あくまでも道具なので、プログラミングの知識はしっかりつけておきたいところです.
Java 8 までを、しっかり身に着けるには こちらの書籍がよいです. こんな感じで Java 9 も 出してほしいですね.


ここは、あまり設定項目がなかったので簡単に終わりました. 残すは 3rd Party の Plug-in 導入と設定になります. もう一息.

Eclipse 4.7 Oxygen の 設定 - JavaScript編

今回は、Eclipse 4.7 Oxygen の JavaScript に 関する設定を行っていきます.
引き続き各種設定については、お好みがあると思います. ご参考になれば.

作業環境

  • Windows 10 64bit
  • Java SE Development Kit 1.8.0_141
  • Eclipse 4.7 Oxygen

設定

まずは、いつも通り Eclipse の メニュー から [ウィンドウ] - [設定] を クリックし、設定ウィンドウを表示します.

[JavaScript] - [エディター] - [入力]

  • セミコロン: チェック
  • 波括弧: チェック
  • 文字列リテラルへの貼り付け時にテキストをエスケープ: チェック

なるべく自動でやってもらった方が楽なので…

[JavaScript] - [エディター] - [保管アクション]

  • 保管時に選択したアクションを実行: チェック
  • 追加アクション: チェック
  • [構成] ボタンをクリックし、以下を追加
    • コード・スタイル - if/while/for/do ステートメントでブロックを使用 - 常時
    • コード・スタイル - 条件を括弧で囲む - 必要な場合のみ
    • 不要なコード - 未使用のローカル変数を除去
    • 不要なコード - 不要な ‘$NON-NLS$’ タグを除去
    • コード編成 - 末尾の空白を除去 - 全ての行

こちらも Java編 同様、処理を自動化して楽になるように設定します.

[JavaScript] - [コードスタイル]

  • 新機関数と型のコメントを自動的に追加: チェック

JSDoc の テンプレートが自動で入ってくれるので便利です.

[JavaScript] - [コードスタイル] - [フォーマッター]

[新規] ボタンをクリック

[JavaScript] - [コードスタイル] - [フォーマッター] - [新規プロファイル]

プロファイル名に任意の名称 (ここでは Formatter) を 入力し、[OK] ボタンをクリック

[JavaScript] - [コードスタイル] - [フォーマッター] - [Formatter プロファイル]

  • タブ・ポリシー: スペースのみ
  • インデント・サイズ: 2

Java エディター の タブ設定同様で、ここで設定しないとタブが入力されます. 要注意です. またインデント・サイズ は Google の JavaScript Style Guide の “Each time a new block or block-like construct is opened, the indent increases by two spaces. - 4.2 Block indentation: +2 spaces“ に 習って 2 にしました.

[JavaScript] - [バリデーター] - [JSDoc]

  • 誤った形式の Jsdoc コメント: 警告
    • タグ内のエラーをレポート: チェック
  • 未指定の Jsdoc タグ: 警告
  • 未指定の Jsdoc コメント: 警告

厳しく設定します.

[JavaScript] - [バリデーター] - [エラー/警告]

  • JavaScript セマンティクス検証を使用可能にする: チェック
  • 次の JavaScript バリデーター・オプションの問題重大度レベルを選択: 以下を除き すべて 警告
    • 外部化されていないストリング: 無視

厳しく設定します. この手のものは習慣なので、厳しく設定したとしても習慣化されれば気にもならなくなるので、むしろ設定しておいた方が楽ですね.

[JSON] - [JSON ファイル] - [エディター]

  • 行の幅: 999
  • スペースを使用したインデント: チェック
    • インデント・サイズ: 2

JSON は データの表現なので行の幅を縛るより、ありのままで表示してほしいので 行の幅 を 999 に しました. またインデント・サイズは JavaScript の コードに合わせて 2 に しています.

[JSON] - [JSON ファイル] - [検証]

  • 構文検証を使用可能にする: チェック
  • スキーマ検証を有効にする: チェック

チェックはしてもらった方が良いので、有効にします.


Eclipse の 書籍

本記事の 4.7 より古いバージョンとなりますが、Eclipse の 使い方について一通り知るにはよいでしょう. Eclipse は だいぶ枯れているので、大きな違いはないので多少のバージョン違いでも特に問題なく対応できます. (※ Eclipse や IDE を すでに使っている場合には不要です)

Java の 書籍

IDE は あくまでも道具なので、プログラミングの知識はしっかりつけておきたいところです.
Java 8 までを、しっかり身に着けるには こちらの書籍がよいです. こんな感じで Java 9 も 出してほしいですね.


Java 程ではありませんでしたが、設定項目は多めでした. だいぶ設定ができてきました.

Eclipse 4.7 Oxygen の 設定 - Java編

今回は、Eclipse 4.7 Oxygen の Java に 関する設定を行っていきます. 今回はかなり長いです. もうちょっとデフォルト設定と気が合えばよいのですが、ついつい設定したくなってしまう…
引き続き各種設定については、お好みがあると思います. ご参考になれば.

作業環境

  • Windows 10 64bit
  • Java SE Development Kit 1.8.0_141
  • Eclipse 4.7 Oxygen

設定

まずは、いつも通り Eclipse の メニュー から [ウィンドウ] - [設定] を クリックし、設定ウィンドウを表示します.

[Java] - [インストール済みの JRE]

Java SE Development Kit(JDK) の パスになっているかを確認します.
JRE の場合、Java 標準ライブラリーのソースが参照できないため開発に支障があるので、追加してチェックをつけます.

[Java] - [エディター] - [入力]

  • 訂正位置で自動的に挿入 - セミコロン: チェック

なるべく自動でやってもらった方が楽なので…

[Java] - [エディター] - [保管アクション]

  • 保管時に選択したアクションを実行: チェック
  • 追加アクション: チェック
  • [構成] ボタンをクリックし、以下を追加
    • コード・スタイル - if/while/for/do ステートメントでブロックを使用 - 常時
    • コード・スタイル - ‘for’ ループを拡張へ変換
    • コード・スタイル - 式で括弧を使用 - 必要な場合のみ
    • コード・スタイル - 関数型インターフェース・インスタンスへ変換: 可能な場合はラムダを使用
    • コード編成 - 末尾の空白を除去 - 全ての行
    • メンバー・アクセス - 宣言されているクラスを修飾子として使用: チェック
    • 不要なコード - 未使用のインポートの除去
    • 不要なコード - 不要な ‘$NON-NLS$’ タグを除去
    • 不要なコード - 冗長な型引数を除去

保管アクションは、エディタを保存するたびに実行してくれる処理になります. うまく設定することで作業を自動化させたり、チームでの開発で お作法を整えたりできるのでかなり便利です. 厳しくするなら全部チェックしてもよいぐらいですが、このぐらいがバランスが良いように感じます.
ソース・コードのフォーマットにチェックがついているチームに入ったことがありますが、ちょっと使いにくかった… (たぶん Ctrl + S を かなりの高頻度で押す私が悪い)

[Java] - [コード・スタイル] - [コード・テンプレート]

  • 新規メソッドと型のコメントを自動的に追加: チェック

Javadoc の テンプレートが自動で入ってくれるので便利です. ここのテンプレートもしっかり設定したいのですが、今回は設定項目が多いので別途.

[Java] - [コード・スタイル] - [フォーマッター]

[新規] ボタンをクリック

[Java] - [コード・スタイル] - [フォーマッター] - [新規プロファイル]

プロファイル名に任意の名称 (ここでは Formatter) を 入力し、[OK] ボタンをクリック

[Java] - [コード・スタイル] - [フォーマッター] - [Formatter プロファイル]

  • タブ・ポリシー: スペースのみ

実は Java エディター の タブ設定は、ここに隠れているのです… 前回の タブでスペースを挿入: チェック は 一般エディターで、Java エディター の 設定ではないので注意が必要です.

[Java] - [コンパイラー] - [Javadoc]

  • 誤った形式の Javadoc コメント: 警告
    • メンバーの可視性を次のように設定: Private
    • タグ引数の検証: チェック
    • 不可視参照をレポート: チェック
    • 使用すべきでない参照をレポート: チェック
    • タグ記述の欠落: すべての標準タグを検証
  • 未指定の Javadoc タグ: 警告
    • メンバーの可視性を次のように設定: Private
    • オーバーライドしたメソッドの実装を無視: チェックを外す
    • メソッド型パラメーターを無視: チェックを外す
  • 未指定の Javadoc コメント: 警告
    • メンバーの可視性を次のように設定: Protected
    • オーバーライドしたメソッドの実装を無視: チェックを外す

ひたすら厳しく設定しています. Javadoc は Protected 以上は書くようにし、書くからには厳しくチェックです.
よく「コードを見ればわかるでしょ」って言われるのですが、それはコードを見る側が言う言葉で、コードを見てもらう側がいう言葉ではないと思っています. 私の周辺だと、この違いがスキルにも大きく表れているように感じます.

[Java] - [コンパイラー] - [エラー/警告]

  • フィルター入力 へ ~無視 を 入力し、以下を除いて すべて 警告
    • インスタンス・フィールドへの限定されていないアクセス: 無視
    • 外部化されていないストリング: 無視
    • static にできるメソッド: 無視
    • 潜在的に static にできるメソッド: 無視
    • ボクシングおよびアンボクシング変換: 無視

ここも厳しく設定しています. 最初から厳しくし設定しておけば習慣化しますし、コードレビューの際に不要なチェックや雑音というか不要なノイズが減るので、ちゃんと本質を見てもらいやすくなります.

[Java] - [ビルド・パス]

  • ソース・フォルダー名: src/main/java
  • 出力フォルダー名: target/classes

Maven の パスに合わせました.

[Maven]

  • アーティファクト・ソースのダウンロード: チェック

Java 開発をする場合は、Maven/Gradle は 使うケースが多いかと思います. Eclipse の Gradle 設定はあまりないのですが、Maven は 少し設定しておきたいです.
利用するライブラリーのソースは参照できるようにしておくと便利なのでチェックしておきます. Javadoc は ソースから見れるので Javadoc の ダウンロードは設定してません.

[Maven] - [ユーザー・インターフェース]

  • デフォルトの POM エディターで XML ページを開く

GUI エディター より、XML で 見た方が早いので設定しました. GUI エディターは設定するときよりも、Jar の 依存関係を見たりするときに使ってます.

[実行/デバッグ] - [コンソール]

  • コンソールのバッファー・サイズ: 200000

少し多めに.


Eclipse の 書籍

本記事の 4.7 より古いバージョンとなりますが、Eclipse の 使い方について一通り知るにはよいでしょう. Eclipse は だいぶ枯れているので、大きな違いはないので多少のバージョン違いでも特に問題なく対応できます. (※ Eclipse や IDE を すでに使っている場合には不要です)

Java の 書籍

IDE は あくまでも道具なので、プログラミングの知識はしっかりつけておきたいところです.
Java 8 までを、しっかり身に着けるには こちらの書籍がよいです. こんな感じで Java 9 も 出してほしいですね.


結構、設定項目がありました. 手になじませて使うためにも仕方ないですね.