GitHub Desktop v1.0.0 リリース & さっそく使う

GitHub 社から、公式のデスクトップ・クライアントのアプリ GitHub Desktop がリリースされました! Atom エディターなどで使われている Electron で 作られています. Electron アプリは開発側のメリットが大きく言われていますが、快適な操作性と、素敵なデザインのアプリが多く、Electron の 開発元でもある GitHub 社のアプリとなると楽しみます. さっそく使ってみます.

作業環境

  • Windows 10 64bit
  • GitHub Desktop 1.0.0
  • Git Hub

GitHub Desktop とは?

GitHub 社 が リリースした、公式の GitHub クライアント・アプリです. これまでβリリースされていましたが、 2017年9月19日に正式にバージョン 1.0.0 が リリースとなりました.
ベータ版では、残念なことに私の環境では動作しなかった(正確にはクローンとかができなかった) ので、正式リリースとのことで楽しみです.

GitHub クライアント・アプリ への 期待

GitHub Desktop が サポートしているかは試してみるとして、GitHub の クライアント・アプリといったときに、こんな機能が欲しいという期待があります. まぁ、特殊な使い方をしている部分もあるので、あったらラッキーぐらいでしょうし、なければ自分で作るべきなのでしょうが腕が追い付かず…

ともあれ、これから使わせていただく GitHub Desktop、こんなことできるかな?

  • Pull Request レビュー & マージ を 専用アプリで
    最近はレビューする機会が増え、Pull Request を 見ることが多くなりました.
    そうなると、Pull Request の 通知から始まり、やり取りの管理などが簡単に行るようになると助かります. ブラウザでも十分なエクスペリエンスを提供していただいていると思いますが、ブラウザで特定のページを固定的に扱うのが得意でなく、できれば専用アプリで使いたいというのがあります.

  • 複数アカウントをワンストップで
    そもそも複アカするな、という話もあると思います orz なぜこんなことになっているのか、自分でも困り果てているのですが 使わないといけない GitHub アカウントが多いのです…
    ブラウザだと Sign in して 2FA して、Sign out して次. かなり厳しいです. この辺が便利になってくれると嬉しいです.

そんな、超個人的な期待はよそに、インストールを進めます.

ダウンロード & インストール

GitHub Desktop の ウェブサイト https://desktop.github.com/ へ アクセスします.
環境に合わせてボタンが用意されているのでダウンロードします. 今回は [Download for Windows (64bit)] を 選択しました.

ダウンロードされた [GitHubDesktopSetup.exe] を ダブルクリックします. チェックサムは見つかりませんでした. 確認したいなぁ…

インストール先やオプションを聞かれることなく、インストールが実行されます. しばし待ちます.

Welcome が 表示されます. 今回は [GitHub.com] へ サインアップしました. GitHub Enterprise にも対応しているようです.

GitHub の Username(or Email) と Password を 入力して [Sign in] を クリックします. 2FA を 有効にしている場合でもパスワードで大丈夫です. 次でコードを聞かれます.

2FA を 有効にしているので、コードを聞かれました. コードを入力して [Verify] します. (2FA を 有効にしていない場合は表示されません)

続いて Git の Name と Email を 聞かれます. GitHub で 設定した Username と Email を 入力します. 合っていないと下記画像のように自分の相子ではなく Hubot アイコンが表示されるようです. (Web の GitHub 上でもアイコンが異なり困るので、ちゃんと合わせるようにします)

最後に改善のための匿名レポートを送るかを選択し、[Finish] ボタンをクリックします.

インストールは、ここまでとなります.
引き続きメイン画面が標示されるので、作業を進めます.

リポジトリのクローンから、プッシュまで

無事、GitHub Desktop の 画面が標示されました.
まだリポジトリが追加されていないので、追加します. 今回は初回ということで一番右のクローンから始めました.

すでにログインしているので、自分のアカウントに関連するリポジトリが表示されます. クローンするリポジトリを選択し [Clone] ボタンをクリックします. 今回は、このブログのソースを選択しました.

しばらく待つとクローンされ、画面左上に現在選択しているリポジトリが表示されます. なお、新規クローンなのでローカルに変更はないのでリポジトリ名以外、操作を必要とするような変化はありません.

リポジトリの編集をします. これは GitHub Desktop の スコープではなく、メニュー の [Repository] から [Open in XXXX] を 選択します. 今回の環境は Visual Studio Code が 該当するため Visual Studio Code に なっています. Atom が 入っている場合は Atom が 表示されるでしょう. (設定変更は後述)

ソース編集した Visual Studio Code は、こちらの記事のスコープ外なので編集できたとして、GitHub Desktop に 戻ると Git の 更新が表示されます. (表示されない場合は右上の [Fetch origin] を クリックします)
ここでは、本記事の前の Raspberry Pi 基盤 の LED を 消灯する の 変更がリストされています.
左下のフォームで、コミットのサマリと説明を入力し、[Commit to source] ボタンをクリックするとコミットできます.
※ このリポジトリのデフォルト・ブランチが source なので [Commit to source] ですが、変更していない場合は [Commit to master] です.

コミットされると何もないような画面に戻りますが、画面右上の [Fetch origin] が [Push origin] に なっています. ここをクリックすることで GitHub へ Push できます.

エディタを変更する

今回は Visual Studio Code しか入っていない環境だったため、エディタの選択が Visual Studio Code でしたが Atom も 入っている場合や、Shell 設定を変更したい場合があります.
メニューの [File] から [Options…] を クリックします.
Options ダイアログ の [Advanced] タブ から、変更できます.

GitHub への Sign in アカウントの変更や、Git の Name/Email の 変更もこちからできます. 左下に Hubot アイコンが出ている場合は、こちらから Git の 設定を直します.


以上。

なんか、クローンしてプッシュして終わりな感じですが、v1.0.0 では ここまでのようです. ブランチを作ったり切り替えたりできますが、Issues や Pull Request などは これからのようです.

まずは基本機能から. これからを楽しみにしたいと思います!

Raspberry Pi 基盤 の LED を 消灯する

Raspberry Pi の 基盤には ACT と PWR の LED があります. 普段から Crystal Signal Pi の 四角柱を光らせていますが、壁際においているため PWR の 赤 LED が 反射し色が混ざるのと、夜間消灯中にも壁に反射する赤色が気になるので、基盤 の LED を 消灯したいと思います.

作業環境

  • Raspberry Pi 3 Model B
  • Crystal Signal Pi
  • Raspbian Jessie Lite

現在の状況

まずは、現在の状況.

日中 の Crystal Signal Pi 点灯中でも、白い壁に反射する 赤 LED が ちょっと気になります…

夜間消灯中に輝く PWR の 赤 LED. 白い壁に反射して赤に染まっています. これだけの光量だと離れていても、棚の一角が かなり赤く光ります.

コマンドラインから 一時的 に 基盤 の LED を 消灯する

Raspberry Pi というか Raspbian Jessie で 基盤 の LED を 操作するには、 /sys/class/leds/ にある led0led1 ディレクトリのファイルを操作します. led0 が ACT で led1 が PWR です.

操作するファイルは 2つで、 triggerbrightness です. trigger は LED を 光らせるトリガーで、 brightness は LED の 明るさです.

まず、現在の設定を確認します.
led0 ACT は mmc0255. つまり SD カード の 読み書きをトリガーとして最大光量で点灯します.
led0 PWR は input255. つまり電源の有無をトリガーとして最大光量で点灯します.

1
2
3
4
5
6
7
8
9
10
11
12
pi@raspberrypi:~ $ cat /sys/class/leds/led0/trigger
none kbd-scrolllock kbd-numlock kbd-capslock kbd-kanalock kbd-shiftlock kbd-altgrlock kbd-ctrllock kbd-altlock kbd-shiftllock kbd-shiftrlock kbd-ctrlllock kbd-ctrlrlock timer oneshot heartbeat backlight gpio cpu0 cpu1 cpu2 cpu3 default-on input panic [mmc0] mmc1 rfkill0 rfkill1
pi@raspberrypi:~ $ echo 0 | sudo tee /sys/class/leds/led0/brightness
255
pi@raspberrypi:~ $ cat /sys/class/leds/led1/trigger
none kbd-scrolllock kbd-numlock kbd-capslock kbd-kanalock kbd-shiftlock kbd-altgrlock kbd-ctrllock kbd-altlock kbd-shiftllock kbd-shiftrlock kbd-ctrlllock kbd-ctrlrlock timer oneshot heartbeat backlight gpio cpu0 cpu1 cpu2 cpu3 default-on [input] panic mmc0 mmc1 rfkill0 rfkill1
pi@raspberrypi:~ $ echo 0 | sudo tee /sys/class/leds/led1/brightness
255

では、これらに設定をして消灯します.
triggernone にすることで、LED を 点灯するアクションを起こさせなくします. 続いて、brightness0 にして消灯します.
led0 ACT は 点滅なので trigger を 止めれば消えている状態になるはずですが、SD カードへアクセス中の瞬間にあたると点灯したままになるので、その場合は brightness0 にして消灯します. (イベントからのトリガーが止まるだけで、明るさとは関係ないということですね)

1
2
3
4
5
6
7
pi@raspberrypi:~ $ echo none | sudo tee /sys/class/leds/led0/trigger
none
pi@raspberrypi:~ $ echo none | sudo tee /sys/class/leds/led1/trigger
none
pi@raspberrypi:~ $ echo 0 | sudo tee /sys/class/leds/led1/brightness
0

こちらは現在の状態を変更するものなので、設定したとおりに LED が すぐに消灯します. これで光が混ざらなくなって気にならないし、夜間消灯も完全に消えてくれます.

なお brightness の 数値で明るさの変化は見られませんでした. 0 1 で ON/OFF ぐらいのもののようです. 初期値 と max_brightness の 値が 255 なので変化できそうなのに…

恒久対策

上記設定方法は現在の設定変更で使えるものになります. そのためリブートすると元の状態に戻ります.
恒久的に設定するには /boot/config.txt に 設定を記述します.
設定の詳細については /boot/overlays/README ファイル、もしくは最新になりますが raspberrypi/firmware の firmware/boot/overlays/README を ご確認ください.

1
2
pi@raspberrypi:~ $ echo "dtparam=act_led_trigger=none,act_led_activelow=on" | sudo tee -a /boot/config.txt
pi@raspberrypi:~ $ echo "dtparam=pwr_led_trigger=none,pwr_led_activelow=on" | sudo tee -a /boot/config.txt

Raspberry Pi Zero の 場合

Raspberry Pi Zero は PWR LED しかないので、コマンドラインからは led0 で 設定します.
/boot/config.txtact_led_~ なので変わらずです.


Raspberry Pi の 基盤には PWR の 赤 LED のほかに、ACT の 緑 もありますが、緑は点灯では無く点滅であり、強く光り続けないので今回は PWR の 赤だけを消灯することにして様子見しようと思ったら、やはり気になるので一緒に消しました. 意外と光るものなんですね. (;^_^A

TypeScript の tslint.json を 考える

TSLint について調べた ので、実際の設定を考えます.

作業環境

  • Windows 10 64bit
  • Node.js 8.4.0 64bit
  • TypeScript 2.4
  • TSLint 5.6.0

設定の方針検討

TypeScript は 学習中のため、設定の良し悪しが分からないところがありますが、まずは厳しくシメテおくのが良いと考えます.
この手のチェックは、後から緩めることは簡単ですが、後から厳しくすると指摘の嵐に見舞われ結局使わないといったことにもなりかねません. まずは厳しく、どうしても指摘事項に対する代替策が無かった場合に緩めるといった運用にします.

設定しなかったもの

以下の 2つは設定しませんでした. 今のところ禁止するものが 無い and/or 想像がつかない ので、設定するべき値がないためのとなります. (デプリケートではないもので、禁止した方が良いものってあるのかなぁ)

  • ban-types: 特定の型を使用禁止にする
  • ban: 特定の関数やグローバル・メソッドを禁止する

今回の設定値

以下にような設定 tslint.json を 作りました. (行数削減のため一部整形済み)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
{
"rules": {
"adjacent-overload-signatures": true,
"member-access": true,
"member-ordering": [ true, { "order": [ "static-field", "instance-field", "constructor" ]}],
"no-any": true,
"no-empty-interface": true,
"no-import-side-effect": true,
"no-inferrable-types": true,
"no-internal-module": true,
"no-magic-numbers": true,
"no-namespace": true,
"no-non-null-assertion": true,
"no-reference": true,
"no-unnecessary-type-assertion": true,
"no-var-requires": true,
"only-arrow-functions": [ true ],
"prefer-for-of": true,
"promise-function-async": true,
"typedef": [
true,
"call-signature",
"arrow-call-signature",
"parameter",
"arrow-parameter",
"property-declaration",
"variable-declaration",
"member-variable-declaration",
"object-destructuring",
"array-destructuring"
],
"typedef-whitespace": [
true,
{ "call-signature": "nospace", "index-signature": "nospace", "parameter": "nospace", "property-declaration": "nospace", "variable-declaration": "nospace" },
{ "call-signature": "onespace", "index-signature": "onespace", "parameter": "onespace", "property-declaration": "onespace", "variable-declaration": "onespace" }
],
"unified-signatures": true,
"await-promise": true,
"curly": [ true, "ignore-same-line" ],
"forin": true,
"import-blacklist": true,
"label-position": true,
"no-arg": true,
"no-bitwise": true,
"no-conditional-assignment": true,
"no-console": [ "debug", "error", "info", "trace", "warn" ],
"no-construct": true,
"no-debugger": true,
"no-duplicate-super": true,
"no-duplicate-variable": [ true, "check-parameters" ],
"no-empty": true,
"no-eval": true,
"no-floating-promises": true,
"no-for-in-array": true,
"no-inferred-empty-object-type": true,
"no-invalid-template-strings": true,
"no-invalid-this": [ true, "check-function-in-method" ],
"no-misused-new": true,
"no-null-keyword": true,
"no-object-literal-type-assertion": true,
"no-shadowed-variable": true,
"no-sparse-arrays": true,
"no-string-literal": true,
"no-string-throw": true,
"no-submodule-imports": true,
"no-switch-case-fall-through": true,
"no-this-assignment": true,
"no-unbound-method": true,
"no-unsafe-any": true,
"no-unsafe-finally": true,
"no-unused-expression": true,
"no-unused-variable": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"no-void-expression": [ true, "ignore-arrow-function-shorthand" ],
"prefer-conditional-expression": [ true, "check-else-if" ],
"prefer-object-spread": true,
"radix": true,
"restrict-plus-operands": true,
"strict-boolean-expressions": true,
"strict-type-predicates": true,
"switch-default": true,
"triple-equals": true,
"typeof-compare": true,
"use-default-type-parameter": true,
"use-isnan": true,
"cyclomatic-complexity": [ true, 6 ],
"deprecation": true,
"eofline": true,
"indent": [ true, "spaces", 4 ],
"linebreak-style": [ true, "LF" ],
"max-classes-per-file": [ true, 1 ],
"max-file-line-count": [ true, 300 ],
"max-line-length": [ true, 120 ],
"no-default-export": true,
"no-duplicate-imports": true,
"no-mergeable-namespace": true,
"no-require-imports": true,
"object-literal-sort-keys": true,
"prefer-const": true,
"trailing-comma": [ true, { "multiline": "never", "singleline": "never" }],
"align": [ true, "parameters", "arguments", "statements", "members", "elements" ],
"array-type": [ true, "array" ],
"arrow-parens": [ true, "ban-single-arg-parens" ],
"arrow-return-shorthand": [ true, "multiline" ],
"binary-expression-operand-order": true,
"callable-types": true,
"class-name": true,
"comment-format": [ true, "check-space", "check-uppercase" ],
"completed-docs": [ true ],
"encoding": true,
"file-header": [ true, "Copyright \\d{4}" ],
"import-spacing": true,
"interface-name": [ true, "never-prefix" ],
"interface-over-type-literal": true,
"jsdoc-format": true,
"match-default-export-name": true,
"newline-before-return": true,
"new-parens": true,
"no-angle-bracket-type-assertion": true,
"no-boolean-literal-compare": true,
"no-consecutive-blank-lines": [ true, 2 ],
"no-irregular-whitespace": true,
"no-parameter-properties": true,
"no-reference-import": true,
"no-trailing-whitespace": true,
"no-unnecessary-callback-wrapper": true,
"no-unnecessary-initializer": true,
"no-unnecessary-qualifier": true,
"number-literal-format": true,
"object-literal-key-quotes": [ true, "always" ],
"object-literal-shorthand": true,
"one-line": [ true, "check-catch", "check-finally", "check-else", "check-open-brace", "check-whitespace" ],
"one-variable-per-declaration": [ true, "ignore-for-loop" ],
"ordered-imports": true,
"prefer-function-over-method": true,
"prefer-method-signature": true,
"prefer-switch": true,
"prefer-template": [ true, "allow-single-concat" ],
"quotemark": [ true, "single", "avoid-template", "avoid-escape" ],
"return-undefined": true,
"semicolon": [ true, "always" ],
"space-before-function-paren": [ true, "never" ],
"space-within-parens": 0,
"switch-final-break": [ true, "always" ],
"type-literal-delimiter": true,
"variable-name": [ true, "check-format", "ban-keywords" ],
"whitespace": [ true, "check-branch", "check-decl", "check-operator", "check-module", "check-separator", "check-type", "check-typecast", "check-preblock" ]
},
"defaultSeverity": "error"
}

とりあえず、 Hello World に TSLint かけてみる

Visual Studio Code で Hello TypeScript! で作ったコードに TSLint を かけてみます.
作成したコードは以下になります. すでに引っかかることが目に見えていますが、ただの実験コードなので気にせずかけます.

1
2
3
4
5
6
7
8
class Startup {
public static main(): number {
console.log('Hello TypeScript!');
return 0;
}
}
Startup.main();

コマンドラインで実行するには、 tslint -ptsconfig.json を 指定します.
今回は compilerOptionsstrictNullChecks: true が 無いので警告されています. また案の定 JSDoc などのドキュメンテーションが引っかかりました.
Missing blank line before return も 出ているので、コードのチェックもしてくれていることが分かります.

1
2
3
4
5
6
7
PS C:\Develop\workspace\hello-typescript> tslint -p .\tslint.json
strict-type-predicates does not work without --strictNullChecks
ERROR: C:/Develop/workspace/hello-typescript/src/hello.ts[1, 1]: Documentation must exist for classes.
ERROR: C:/Develop/workspace/hello-typescript/src/hello.ts[2, 5]: Documentation must exist for public,static methods.
ERROR: C:/Develop/workspace/hello-typescript/src/hello.ts[1, 1]: missing file header
ERROR: C:/Develop/workspace/hello-typescript/src/hello.ts[4, 9]: Missing blank line before return

Visual Studio Code では、以下のようにチェック結果がエディタに範囲されています.
Documentation の チェックが反映されていないようですね…


一通りチェックするような設定ができました!
これで、良いプラクティスを反映した文法でコーディングできるので、作るべきことに集中できますし、レビューの際もロジックなどに見るべき場所に注力できますね.

Visual Studio Code で チェックできてないものがありそうなのは、参照しているスキーマが、公式サイトのサンプルと若干ずれているようで、 tslint.json にも警告が出ていました.
後ほど詳しく調べるとして、とりあえず CI と 組み合わせて、コマンドライン実行の Lint も かけることで、ダブルチェックで逃げることにします.

あとは感覚的にしっくりくる設定なのかガッツりコーディングしてブラッシュアップ、いざっコーディング!

TypeScript の tslint.json を 調べる

TypeScript の tsconfig.json が とりあえずできました. 次は静的解析ツールの TSLint を 設定する tslint.json の 設定内容について検討します.

作業環境

  • Windows 10 64bit
  • Node.js 8.4.0 64bit
  • TypeScript 2.4
  • TSLint 5.6.0

TSLint とは?

TSLint は プログラムを動作させずに解析し問題になりそうなコードや規約違反などをチェックする TypeScript 向けの静的解析ツールです. JavaScript では ESLint、Java では SpotBugs(FindBugs) & Checkstyle などが同種のツールにあたります.

設定項目の確認

TSLint core rules を 確認し、ざっと理解のためのメモを作りました.
英語ができないのと、TypeScript/TSLint に 詳しくない状態で書いているので、間違えや勘違いがあるかもしれないでご注意ください…
英文のままになっているところは、よくわからなかった and/or 日本語で表現できなかった ので、とりあえず そのまま転記しました. いつの日かアップデートできるように頑張りたい.

TypeScript-specific

ルール 概要
adjacent-overload-signatures 関数のオーバーロードは連続して記述し、可読性を向上させる
ban-types 特定の型を使用禁止にする
member-access クラス・メンバーの可視性宣言を強制させる
member-ordering クラス・メンバーの順序付けを強制し、可読性を向上させる
no-any any の 型宣言を使用禁止にする
no-empty-interface 空のインターフェースを禁止する
no-import-side-effect 副作用を伴う import を 禁止する
no-inferrable-types number string boolean の 初期化済みの型宣言を禁止し冗長なコードを排除させる
no-internal-module 内部 module を 禁止し、新しい namespace キーワードの利用を使用させる
no-magic-numbers マジックナンバーを禁止する (ただしデフォルトでは -1 0 1 は 許可)
no-namespace 内部 modulenamespace を 禁止し、 ES6-style の import/export を使用させる
no-non-null-assertion non-null アサーションを禁止し、strict null checking mode を 活用させる
no-reference /// <reference path=> を 禁止し、ES6-style の import/export を使用させる
no-unnecessary-type-assertion 型アサーションが、式の型を変更しない場合に警告する
no-var-requires import 以外の require を 禁止し、ES6-style の import/export を使用させる
only-arrow-functions Arrow-style 以外の function 関数式を禁止し、予期しない this アクセスを防止する
prefer-for-of 配列のインデックスにアクセスしないループの場合は、 for-of を 使用させる
promise-function-async Promise を 返す関数またはメソッドは async の マークを必須とする
typedef 型定義を必須とする
typedef-whitespace 型指定子(コロン) の 前後のスペース有無をチェックします
unified-signatures union または optional/rest で1つに統合できるオーバーロードを警告する

Functionality

ルール 概要
await-promise Promise ではない awaited な 値を警告する
ban 特定の関数やグローバル・メソッドを禁止する
curly if/for/do/while で 中括弧を必須とする
forin for-inif フィルターを必須とし、継承プロパティへの偶発アクセスを防止する
import-blacklist 直接 import require せず、サブモジュール・ロードにして不要なロードを避ける
label-position ラベルの使用を do/for/while/switch に限定し、コードの構造化を強化する
no-arg arguments.callee を 禁止し、パフォーマンスの最適化を行えるようにする
no-bitwise ビット演算子を禁止し、保守性を向上させる
no-conditional-assignment do-while/for/if/while での条件文における代入を禁止する
no-console 指定するコンソール・メソッド (e.g. log error) の 仕様を禁止する
no-construct String Number Boolean の コンストラクタ利用を禁止し、関数を利用させる
no-debugger debugger ステートメントを禁止する
no-duplicate-super コンストラクタでの super() 二重呼び出しを警告する
no-duplicate-variable 同一スコープでの var 重複宣言を禁止する
no-empty 空ブロックを禁止する
no-eval eval を 禁止し、危険なコードを防止させる
no-floating-promises 関数から返された Promise の ハンドルを厳格にさせる
no-for-in-array 配列の for-in ループを禁止し for-of を 利用させる
no-inferred-empty-object-type 関数とコンストラクタの呼出し側で、 {} (空オブジェクト型)による型推論を禁止する
no-invalid-template-strings テンプレート文字列以外 の ${ を 警告する
no-invalid-this クラス外での this キーワードの使用を禁止する
no-misused-new Warns on apparent attempts to define constructors for interfaces or new for classes.
no-null-keyword null の 使用を禁止し、 undefined に 統一させる
no-object-literal-type-assertion インターフェースや
no-shadowed-variable 変数のシャドーイングを禁止する
no-sparse-arrays 配列リテラルの欠落要素(重複カンマ)を禁止しする
no-string-literal 不要な文字列リテラルのプロパティアクセスを禁止し obj.property 書式を使用させる
no-string-throw プレーン・テキストの throw を 禁止し、 Error の スローを使用させる
no-submodule-imports サブモジュールのインポートを禁止し、最上位パッケージのエクスポートを使用させる
no-switch-case-fall-through switch の ケース・フォールスルーをきん資する
no-this-assignment 不要な this 参照を禁止し、Arrow-style ラムダを使用させる
no-unbound-method メソッドがメソッド呼び出しの外で使用されることを警告する
no-unsafe-any 動的な方法の any 型 利用を警告する
no-unsafe-finally finally ブロックでの return continue break throws の 使用を禁止する
no-unused-expression 未使用の式ステートメントを禁止する
no-unused-variable 未使用 の インポート、変数、関数、プライベート・クラスのメンバー を 禁止する
no-use-before-declare 変数の宣言前利用を禁止する
no-var-keyword var を 禁止し、 letconst を 使用させる
no-void-expression Requires expressions of type void to appear in statement position.
prefer-conditional-expression Recommends to use a conditional expression instead of assigning to the same thing in each branch of an if statement.
prefer-object-spread Enforces the use of the ES2015 object spread operator over Object.assign() where appropriate.
radix parseInt を 使う場合に、 radix パラメータの指定を必須とする
restrict-plus-operands 変数の加算は双方の型が同じ(number + string は禁止) であることを強制する
strict-boolean-expressions ブール式で許可する型を制限する (デフォルトは boolean のみ)
strict-type-predicates 常に true もしくは false となる型述語を警告する
switch-default switch 文は、 default ケース の 実装を必須とする
triple-equals ==!= を 禁止し、 ===!== を 使用させる
typeof-compare Makes sure result of typeof is compared to correct string values.
use-default-type-parameter 明示的に指定された型引数が、その型パラメータのデフォルトである場合に警告する
use-isnan NaN 定数の比較を禁止し、 isNaN() 関数を使用させる

Maintainability

ルール 概要
cyclomatic-complexity サイクロマティック複雑度の分析と閾値を適用する
deprecation デプリケート API の 使用を警告する
eofline ファイルが改行で終わるようにする
indent 指定するインデントルールを適用する
linebreak-style 指定する改行コードを適用する
max-classes-per-file ファイル内のクラス数を制限する
max-file-line-count ファイルの行数を制限する
max-line-length 1行の文字数を制限する
no-default-export ES6-style の デフォルト・エクスポートを禁止し、名前付きエクスポートを使用させる
no-duplicate-imports 同じモジュールからの複数インポートを禁止する
no-mergeable-namespace 同じファイル内のマージ可能な namespace を 禁止する
no-require-imports require() を 禁止し、新しい ES6-style import/export を 使用させる
object-literal-sort-keys オブジェクト・リテラルのキーは、アルファベット順に記述させる
prefer-const 変数への割り当てが1回に限られる場合、 const を 使用させる
trailing-comma 配列とオブジェクトのリテラルで最後にカンマを付けるかのルールを強制する

Style

ルール 概要
align 指定する要素 (e.g. 引数) を 垂直方向を揃えて整列して記述させる
array-type 配列宣言を T[] もしくは Array の いずれかに統一させる
arrow-parens Arrow-style 関数 の パラメーターで括弧を必須とする
arrow-return-shorthand () => { return x; }() => x と させる
binary-expression-operand-order In a binary expression, a literal should always be on the right-hand side if possible. For example, prefer ‘x + 1’ over ‘1 + x’.
callable-types コールシグネチャのみのインターフェース名やリテラル型は関数型を使用させる
class-name クラスとインターフェース名はパスカルケース(アッパーキャメルケース)にさせる
comment-format 1行コメントの書式設定ルールを強制する
completed-docs Enforces documentation for important items be filled out.
encoding UTF-8 エンコーディングを強制する
file-header すべてのファイルに対して指定する正規表現にマッチするヘッダーコメントを強制する
import-spacing import の キーワード間にスペースを入れることを強制する
interface-name × インターフェース名は I で 始まることを強制する
interface-over-type-literal 型リテラル( type T = {...} ) ではなく インターフェース名を使用させる
jsdoc-format JSDoc の 基本形式ルールを強制する
match-default-export-name デフォルト・インポートには、インポートする宣言と同じ名前の使用を必須とする
newline-before-return ブロック内に return 以外の行がある場合、 return の 前に空行を必須とする
new-parens new キーワードを使用してコンストラクタを呼び出す場合、括弧を必須とする
no-angle-bracket-type-assertion 型アサーションに <Type> の 代わりに as Type を 使用させる
no-boolean-literal-compare x === true のような、ブール・リテラルとの比較を警告する
no-consecutive-blank-lines 1もしくは複数の空行を禁止する (デフォルトで 1つの空行を許可する)
no-irregular-whitespace 文字列やコメントの外側にある不規則な空白を禁止する
no-parameter-properties クラス・コンストラクタでのパラメーター・プロパティを禁止する
no-reference-import <reference types="foo" /> の 使用を禁止する
no-trailing-whitespace 行末尾の空白を禁止する
no-unnecessary-callback-wrapper Replaces x => f(x) with just f. To catch more cases, enable only-arrow-functions and arrow-return-shorthand too.
no-unnecessary-initializer var let destructuring initializerundefined 初期化を禁止する
no-unnecessary-qualifier Warns when a namespace qualifier (A.x) is unnecessary.
number-literal-format 小数点以下のリテラルは 0. で 始まり、末尾が 0 で 終わらないこと強制する
object-literal-key-quotes Enforces consistent object literal property quote style.
object-literal-shorthand 可能であれば ES6-style オブジェクト・リテラル の ショートハンドを強制する
one-line 特定の予約語 (e.g. try}catch) を同一行にさせるかのルールを強制する
one-variable-per-declaration 複数の変数を同時定義することを禁止する
ordered-imports import を アルファベット順に記述することを強制する
prefer-function-over-method Warns for class methods that do not use ‘this’.
prefer-method-signature インターフェースと型の定義を foo: () => void でなく foo(): void を 使用させる
prefer-switch Prefer a switch statement to an if statement with simple === comparisons.
prefer-template 文字列の連結ではなく、テンプレート式を使用させる
quotemark 文字列リテラルを、一重引用符 または 二重引用符 の 指定する方に強制する
return-undefined Void 関数 では return; を、値を返す関数では return undefined; を 使用させる
semicolon すべてのステートメントの最後に一貫したセミコロンの使用を強制する
space-before-function-paren 関数の括弧前に入れるスペースのルールを強制する
space-within-parens 括弧内のスペースのルールを強制する
switch-final-break switch の 最終節 が break で 終わるかのルールを強制する
type-literal-delimiter Checks that type literal members are separated by semicolons. Enforces a trailing semicolon for multiline type literals.
variable-name 変数名のルールを強制する
whitespace 空白スタイルのルールを強制する

TypeScript の コーディング量が足りていないので、どのようなコードを指しているのか想像がつかないものもかなりありました.
あと cyclomatic-complexity が あるのがいいですね.
先に設定を悩むより、圧倒的なコーディング量を背景に、よろしくないコードを防ぐことをした方がよかったかもと思いつつ、理解が深まったのでよしとしましょう. 次は、設定を考えたいと思います.

Git の 全体 gitignore を 再設定する

Visual Studio Code で 使うために PortableGit を インストールしました. その際に 全体 gitignore を 設定したのですが、よくよく調べると、もっとよい設定方法がったので再設定します.

作業環境

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

github/gitignore リポジトリ

GitHub 社 が 公開している github/gitignore というリポジトリ https://github.com/github/gitignore というのがあります.
様々なプログラム言語やフレームワークなどに応じた gitignore の テンプレートを提供してくれています. GitHub.com で リポジトリを作成する際や、作成した後から Web UI で gitignore を 追加する機能がありますが、その gitignore ファイルは このリポジトリから作られているとのことです.

アプリケーションを作る際などに、いつも参照させていただくのですが、よくよく見ていると Global というディレクトリがあり、こちらは OS や エディタなどのテンプレートが入っているとのことです. 知らなかった…

ちゃんと説明 Globally Useful gitignores - gitignore/Global at master · github/gitignore を 読まないとですね. ということで、こちらをもとに グローバル の gitignore を 再設定 します.

まず Windows.gitignore を 参照してみます. 2017年9月現在、以下の内容でした. 前回設定した Thumbs.db だけとは大違いですね. 勉強になります.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Windows thumbnail cache files
Thumbs.db
ehthumbs.db
ehthumbs_vista.db
# Dump file
*.stackdump
# Folder config file
Desktop.ini
# Recycle Bin used on file shares
$RECYCLE.BIN/
# Windows Installer files
*.cab
*.msi
*.msm
*.msp
# Windows shortcuts
*.lnk

Visual Studio Code の 設定もありました. .vscode/ 以下の Visual Studio Code 設定ファイル以外を ignore ですが、これでいいのかな?ちょっと意図を知りたいかも.

1
2
3
4
5
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

Eclipse の 設定もあります. Eclipse で 関しているわけではないのですが、Eclipse エディタで編集したい部分があるなどで、Eclipse プロジェクトにしている場合があります. その場合は .project.settings などの Eclipse 関連ファイルはコミットしたくないので、グローバル gitignore するのもよさそうです.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.metadata
bin/
tmp/
*.tmp
*.bak
*.swp
*~.nib
local.properties
.settings/
.loadpath
.recommenders
# External tool builders
.externalToolBuilders/
# Locally stored "Eclipse launch configurations"
*.launch
# PyDev specific (Python IDE for Eclipse)
*.pydevproject
# CDT-specific (C/C++ Development Tooling)
.cproject
# Java annotation processor (APT)
.factorypath
# PDT-specific (PHP Development Tools)
.buildpath
# sbteclipse plugin
.target
# Tern plugin
.tern-project
# TeXlipse plugin
.texlipse
# STS (Spring Tool Suite)
.springBeans
# Code Recommenders
.recommenders/
# Scala IDE specific (Scala & Java development for Eclipse)
.cache-main
.scala_dependencies
.worksheet

curl コマンド で グローバル gitignore を 作る

利用する gitignore を 決めたら、グローバル gitignore を 作ります.
Powershell 3.0 から curl こと Invoke-WebRequest が 使えます. これでダウンロードすれば OK! (ただし使い方は Linux のとは異なるので注意)

対象が ひとつ の ファイルの場合は、コマンドプロンプトから以下のように実行します. ここでは Windows.gitignore~/.gitignore へ ダウンロードしました.

1
c:\Temp> powershell curl -Uri https://raw.githubusercontent.com/github/gitignore/master/Global/Windows.gitignore -OutFile ~/.gitignore

複数のファイルを結合する場合は、PowerShell を 起動してからコマンドを実行します. ここでは Windows.gitignoreEclipse.gitignoreVisualStudioCode.gitignore を 結合しました.

1
2
3
4
5
6
7
8
c:\Temp> powershell
Windows PowerShell
Copyright (C) 2016 Microsoft Corporation. All rights reserved.
PS C:\Temp>
PS C:\Temp> curl -Uri https://raw.githubusercontent.com/github/gitignore/master/Global/Windows.gitignore -UseBasicParsing | Select-Object -ExpandProperty Content >> ~/.gitignore
PS C:\Temp> curl -Uri https://raw.githubusercontent.com/github/gitignore/master/Global/Eclipse.gitignore -UseBasicParsing | Select-Object -ExpandProperty Content >> ~/.gitignore
PS C:\Temp> curl -Uri https://raw.githubusercontent.com/github/gitignore/master/Global/VisualStudioCode.gitignore -UseBasicParsing | Select-Object -ExpandProperty Content >> ~/.gitignore

gitignore.io で 自動生成

複数ファイルを結合して使う場合に、コマンドを複数発行すればよいのですが ちょっと面倒だなぁという時は gitignore.io というサービスが自動で作ってくれます. なんと 名だたる企業が使っている ようです(が、企業ロゴが1枚画像で企業へのリンク無しなんだよなぁ…)

Web から使う場合は、 https://www.gitignore.io/ へ アクセスします.

画面中央のテキストボックスに gitignore したいテンプレート名前を入れていき、[Create] ボタンをクリックします.

自動生成された gitignore の 内容が出力されるので、コピー&ペーストします.

また、自動生成された gitginore 画面 の URL を 使うことでコマンドラインからも取得できます. キーワードをカンマでつなぐのですが、URL Encode するので %2C で つなぎます.

1
c:\Temp> powershell curl -Uri https://www.gitignore.io/api/windows%2Ceclipse%2Cvisualstudiocode -OutFile ~/.gitignore

ヘルプや、指定できるキーワードのリストは PowerShell から 以下のように実行します.

1
2
3
4
5
6
7
8
9
10
c:\Temp> powershell
PS C:\Temp> curl -Uri https://www.gitignore.io/api/ -UseBasicParsing | Select-Object -ExpandProperty Content
gitignore.io help:
list - lists the operating systems, programming languages and IDE input types
:types: - creates .gitignore files for types of operating systems, programming languages or IDEs
PS C:\Temp> curl -Uri https://www.gitignore.io/api/list -UseBasicParsing | Select-Object -ExpandProperty Content
1c-bitrix,a-frame,actionscript,ada,adobe
advancedinstaller,agda,alteraquartusii,altium,android ...(省略)

さらに Command Line Docs - gitignore.io には、公式のコマンドライン実行法について説明があります. スクリプト化しておくと便利なのかもしれませんが、 curl だけでも大変ありがたいです.

gitignore.io-san, thank you for the wonderful service!!


github/gitignore リポジトリの Global ディレクトリ発見から、便利なサービスにまでたどり着くことができ、開発環境を作る際の幅広がりました. 自分が知っていることをすぐに使えることも必要ですが、他にも良いやり方は無いのかと疑問を持って調べる習慣も大事ですね. Global ディレクトリに気づかなかったのはホント不覚である…

今回は グローバル gitignore の 自動生成でしたが、アプリケーション用の gitignore も 同じことができるので、これからは自動生成でやった方が良いですね.

実際に使うにあたっては、グローバル gitignore は 自動生成後に編集.
アプリケーション用にはプロジェクトなり組織共通の gitignore を 管理するリポジトリを作って、先にそのファイルをダウンロードして、gitignore.io 自動生成を追記させるような感じでしょうか.

言語やフレームワークの gitignore を 自動生成させるとすると、独自追加部分だけが残り、だいたい どのリポジトリも同じものを追加すると思われるので、Git で 管理・共用化して、自動生成だけにするのがよいのかもと思ったりも… 今度やってみよう.

TypeScript の tsconfig.json を 考える - コンパイル・オプション編

TypeScript の tsconfig.json について検討 を 続けています. 今回はコンパイル・オプションについて考えます.

作業環境

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

これまでの振り返り

TypeScript で Hello World では、Visual Studio Code の 公式ドキュメント の tsconfig.json を基に作成し、最小限のコンパイル・オプションを考え、ECMAScript の 最新に合わせた形になりました.

1
2
3
4
5
6
7
{
"compilerOptions": {
"target": "es2017",
"module": "commonjs",
"sourceMap": true
}
}

続いて、TypeScript の tsconfig.json を 考える では、コンパイル対象のソースファイルを指定する方法として filesinclude/exclude を 考え、とりあえず TypeScript 公式ドキュメント の include/exclude サンプル を 使うことにしました.

1
2
3
4
5
6
7
8
9
10
{
"compilerOptions": { ... },
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

コンパイル・オプションの検討

コンパイル・オプションは最小限の設定しか見ていなかったので、しっかりと確認したいと思います.
TypeScript 公式ドキュメント の Compiler Options は https://www.typescriptlang.org/docs/handbook/compiler-options.html に なります.
ざっと 70個ぐらいのオプションがあるようで… とりあえず 使いそう or 要検討 なところをピックアップしたいと思います.

tsc --init で 作られる tsconfig.json が カテゴリー別に整理されているので、それに合わせて検討します.

Basic Options

  • "target": "es2017" は、前回検討の通り 最新の es2017 にします.
  • "module": "commonjs" は、実行環境の Node.js に 合わせて commonjs にします
  • "lib": [] は、コンパイルに含めるライブラリー、必要になったら都度追加します
  • "declaration": true は、型定義ファイル *.d.ts を 生成するので使用します
  • "sourceMap": true は、デバッガー等のツール連携で使用します
  • "outDir": "./dist" は、コンパイル結果などの出力先ですが、命名に悩みつつ distributiondist かな…
  • "removeComments": true は、コンパイル後もコメントを保持する必要はないので、削除します.

outDir は 悩ましいところです. 一般的なルールが欲しい… GitHub を 見ていると OutDirout が 多いよう感じました.

Strict Type-Checking Options

  • "strict": true
    すべての strict タイプ・オプション(noImplicitAny, strictNullChecks, noImplicitThis, alwaysStrict) を 有効化するので使います.
    このカテゴリは strict だけで賄えます.

Additional Checks

基本厳しくチェックなので、すべて true に します.

  • "noUnusedLocals": true は、未使用のローカル変数 を エラー報告します
  • "noUnusedParameters": true は、未使用のパラメーター を エラー報告します
  • "noImplicitReturns": true は、不正確な return を エラー報告します
  • "noFallthroughCasesInSwitch": true は、 case 文 の フォールスルー を エラー報告します

Module Resolution Options

おそらく types で パッケージを指定するぐらいです.

Source Map Options

ソース・マッピングに関する設定を変更する場合に設定するようですが、使わなそうです.

Experimental Options

実験用. とはいえ、 experimentalDecorators は 使いたいです.
Decorators を 使えるようにするもので、 2017年8月現在で Stage 2 であり、今後仕様が変わるかもしれませんが、フレームワークなどで使ったりするので、 true に しておきます.

その他

tsc --init で 出力されていないけど、設定した方がよさそうなもの.

  • "newLine": "LF" は、デフォルトがプラットフォーム依存なので明示しておきます
  • "forceConsistentCasingInFileNames": true は、ファイルの大文字小文字の違いをエラー報告します

とりえずの設定

前回と合わせて、こんな感じでしょうか. まずは これで始めたいと思います.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
"compilerOptions": {
"target": "es2017",
"module": "commonjs",
"declaration": true,
"sourceMap": true,
"outDir": "./dist",
"removeComments": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"experimentalDecorators": true,
"newLine": "LF",
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

List で チェックするような項目もコンパイラーでやってくれるのですね. 差異が分からないので、とりあえず厳しく設定してみました.
ディレクトリ系は相変わらずの悩みどころです. どこかにべスプラ的は話がないかなぁ…

TypeScript の tsconfig.json を 考える

TypeScript で Hello World が できたところで、TypeScript について深堀したいと思います. なにせ、初めて使うものですから… まず tsconfig.json に 何を設定しておいた方がいいのか、考えたいと思います.
今回の検討の前提として、TypeScript の コードはサーバーサイドで使うことを想定しています. ブラウザ内で動作する JavaScript は いったん考慮外としています. また既存のしがらみは無く、新しく作るものを想定しています.

作業環境

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

前回 Hello World の 設定を振り返る

前回の Hello World では Visual Studio Code の 公式ドキュメント の tsconfig.json を基に作成しました. まずは、この内容について振り返りをしたいと思います.

1
2
3
4
5
6
7
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}

設定したのはコンパイラーのオプションでだけになります. (よくトランスパイル/トランスパイラーって見聞きして真似てたけど、もしかしてコンパイル/コンパイラーが正しい? ^^;)

target は、TypeScript を トランスパイルする先の、ECMAScript の ターゲット・バージョンになります. es3 が デフォルトで、前回は es5 ECMAScript 5 に 設定していました. Hello World 的にはあまり関係はないのでサンプルのままです. 今後の設定としてはサーバーサイト前提なので 2017年8月現在 最新 の async/await が 使える es2017 になります.

module は、モジュールコードの生成方法になります. Hello World では、もちろん関係ありません… 後々使っていく場合の設定値としては、サーバー再度用途で Node.js で 動かすので commonjs に設定したいと思います.

sourceMap は、 .map ファイルを生成するオプションです. .map ファイルがないとデバッガーはトランスパイルされた .js ファイルを参照するため、 .ts を 見ているエンジニア側とミスマッチが発生します. デバッガーなどのツールに.map ファイルを参照してもらうことで、 .ts ファイルを参照してもらうことができるので、ほぼ必須のオプションでしょう.

tsconfig.json の 仕様について調査

つづいて tsconfig.json の 仕様はどうなっているのか、公式ドキュメント https://www.typescriptlang.org/docs/handbook/tsconfig-json.html から大筋を参照したいと思います.

Overview / Using tsconfig.json

まず、 tsconfig.json がある ディレクトリを TypeScript プロジェクトのルートとして認識するとのことです. tsc を 実行する際に、 tsconfig.json を 関連度ディレクトリから親ディレクトリ方向に探していき使うか、 -p (--project) オプションで tsconfig.json の パスを指定します.

Examples / Details

tsconfig.json の 記述形式は compilerOptions プロパティに続き、 files プロパティ を使用する形式と、 include/exclude プロパティを使用する形式に分かれます.

files プロパティの使用例 (公式ドキュメントから抜粋)

1
2
3
4
5
6
7
8
{
"compilerOptions": { ... },
"files": [
"core.ts",
"sys.ts",
"types.ts"
]
}

include/exclude プロパティの使用例 (公式ドキュメントから抜粋)

1
2
3
4
5
6
7
8
9
10
{
"compilerOptions": { ... },
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

compilerOptions プロパティについては、省略した場合はコンパイラーのデフォルトが使われ、明示的に指定する場合は Compiler Options を 参照とのこと. 設定項目が多いので後日.

files プロパティは、相対または絶対のファイルパスのリストとのことで、たぶん使うのは面倒くさいので置いとき、 include/exclude プロパティを使うのがよいでしょう.

include/exclude プロパティは、glob のようなパターンで指定できます. glob、Linux などで *.txt* のような “ワイルドカードでファイル名のセットを指定するパターンのこと - グロブ - Wikipedia“ とのことで、こっちで指定する方が便利です. 以下のワイルドカードからパターンを作ります.

  • * 0個以上の文字
  • ? 任意の1文字
  • **/ 任意のサブディレクトリに再帰的にマッチ

files プロパティ と include/exclude プロパティ の 有無や、組み合わせなどの複雑なルールについての記載もあるけど、あまり頑張らないで簡単な構造にしたいのでパスします.

@types, typeRoots and types

@types パッケージは、すべてコンパイルに含まれるとのこと. その制御については compilerOptionstypeRootstypes で できる.
全部入って問題ないような気もします. 使うとしたら、 types で パッケージ (e.g. node, lodash, express) を 明示するのでよさそうです.

Configuration inheritance with extends

tsconfig.jsonextends プロパティを使って別ファイルから構成を継承できます. ベース(継承元) の 設定がロードされて、継承している設定が上書きロードします.
ある程度の規模で複数プロジェクトに分けて構成する場合に便利なので使う機会は結構ありそうです. すぐには使う機会はなさそうですが、このような設定ができることを覚えておくと、後で便利そうです.

compileOnSave

compileOnSave プロパティを設定すると、 tsconfig.json 保存時に すべてのファイルを再生成するように、この機能をサポートしている IDE へ 通知します.
tsconfig.json の 試行錯誤段階ではよさそうだけど、ある程度固まってきたら使わないのかもしれないです. ところで、今回使う Visual Studio Code の 記載がないが対応しているのだろうか?

Schema

スキーマは、ここだよ http://json.schemastore.org/tsconfig って、ことで後で眺める.

サマリ

compilerOptions を どう設定するかがメインになりそう.
後は include/exclude . これは、Java の Maven のように 定番があると嬉しいのですが、サンプル以外に特に具体的なパターンはなかったです. あまり独自のスタイルを作るよりも、定番に乗っかっていきたいところ.

TypeScript を 使っているプロジェクトを調査

Microsoft/TypeScript

TypeScript 自身のリポジトリ. テストケース用なのか tests ディレクトリ以下にかなりの tsconfig.json が あります.
その中から src 以下をいくつか参照したところ、/src/tsconfig-base.json を 継承して作られているようで、こちらは compilerOptions だけなので、後日参照.
継承してる側は files プロパティで列挙でした.

Microsoft/vscode

Visual Studio Code の ベースとなっているリポジトリ. (製品版とは異なるらしい → Visual Studio Code - Wikipedia)
src/tsconfig.json が あり、また extensions/ 以下に各拡張機能用の tsconfig.json があります. 継承関係は無いです..

/build/tsconfig.json では "node_modules/**"exclue 、拡張機能系はファイルが分かれているが大体同じで、 "src/**/*"include でした.

今のところの設定

compilerOptions は 改めて調査するとして、今までのところで作ると以下のような感じでしょうか. って、結局 公式ドキュメントのサンプル…

1
2
3
4
5
6
7
8
9
10
{
"compilerOptions": { ... },
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

プロジェクトのディレクトリ構造にかかわる設定なので、いろいろと悩んでしまいます. とりあえず公式ドキュメントのサンプルに則って定義しておきたいと思います.
使い込んでみてわかることなのでしょう. きっと.

Visual Studio Code で Hello TypeScript!

TypeScript の インストールができました! さっそく Visual Studio Code から TypeScript で Hello World を!
Visual Studio Code の 公式ドキュメント が 詳しいので、ドキュメントに則って進めたいと思います.

作業環境

  • Windows 10 64bit
  • Node.js 8.4.0 64bit
  • TypeScript 2.4
  • Visual Studio Code

Visual Studio Code に TypeScript サポート の 拡張機能を追加

Visual Studio Code は 標準で TypeScript に 手厚いサポート “VS Code provides many features for TypeScript out of the box. - TypeScript Programming with Visual Studio Code“ がついています. ただし Lint については 拡張機能が必要なようで、今回は egamma さん の 拡張機能 を 使わせていただくことにしました.
レーティングが高く、インストール数も多く、また「ようこそ」画面で推薦されていることなどからの選定となります. Thank you for the great extension!, egamma-san!!

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

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

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

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

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

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

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

tsconfig.json と tslint.json の 作成

まず最初に tsconfig.json を 作成し、TypeScript プロジェクトの設定を行います.
Ctrl + Shift + P で コマンドパレットを表示、 new filetsconfig.json を 作成し、以下の内容で保存します.

1
2
3
4
5
6
7
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}

Ctrl + Shift + Ptslint 絞り込み、[TSLint: Create a “tslint.json” file] を 選択します.

tslint.json ファイルが追加されます. このファイルがないと TSLint の 拡張機能が動作しないので要注意です. 今回は TSLint の 設定をデフォルトのままとしました.

TypeScript コーディング

Ctrl + Shift + P - new file - hello.ts を 以下の内容で作成します.

1
2
3
4
5
6
7
8
class Startup {
public static main(): number {
console.log('Hello TypeScript!');
return 0;
}
}
Startup.main();

ビルド & 実行

Ctrl + Shift + B で ビルドを実行します. ビルド・タスクを聞かれるので tsc: ビルド - tsconfig.json を 選択します.

tsc によって トランスパイルされ、 hello.jshello.js.map が 生成されます.

Ctrl + Shift + @ で 新しい統合ターミナルを開き、 node を 実行します.

1
2
PS C:\Develop\workspace\hello-typescript> node .\hello.js
Hello TypeScript!


Visual Studio Code で TypeScript の Hello World が できました!

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>

.


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