Skip to content

Commit 9561c31

Browse files
committed
first release version
0 parents  commit 9561c31

File tree

149 files changed

+33085
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

149 files changed

+33085
-0
lines changed

.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
_build/doctrees
2+
ext/__pycache__
3+
node_modules
4+
_build/latex
5+
.DS_Store

.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"git.ignoreLimitWarning": true
3+
}

LICENSE

+173
Large diffs are not rendered by default.

Makefile

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Minimal makefile for Sphinx documentation
2+
#
3+
4+
# You can set these variables from the command line.
5+
SPHINXOPTS =
6+
SPHINXBUILD = sphinx-build
7+
SPHINXPROJ = JavaScript
8+
SOURCEDIR = .
9+
BUILDDIR = _build
10+
11+
# Put it first so that "make" without argument is like "make help".
12+
help:
13+
@$(SPHINXBUILD) -M help "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
14+
15+
.PHONY: help Makefile
16+
17+
# Catch-all target: route all unknown targets to Sphinx using the new
18+
# "make mode" option. $(O) is meant as a shortcut for $(SPHINXOPTS).
19+
%: Makefile
20+
@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
21+
22+
html: Makefile
23+
@$(SPHINXBUILD) -M latexpdf "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
24+
@$(SPHINXBUILD) -b html "$(SOURCEDIR)" "docs" $(SPHINXOPTS) $(O)
25+
cp _build/latex/typescript-guide.pdf ./docs

README.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# 仕事ですぐに使えるTypeScript
2+
3+
本ドキュメントは、まだ未完成ですが、ウェブフロントエンドの開発を学ぶときに、JavaScriptを経由せずに、最初からTypeScriptで学んでいく社内向けのコンテンツとして作成されはじめました。
4+
基本の文法部分以外はまだ執筆されていない章もいくつもあります。書かれている章もまだまだ内容が追加される可能性がありますし、環境の変化で内容の変更が入る可能性もあります。
5+
6+
本ドキュメントは [クリエイティブ・コモンズ4.0の表示 - 継承(CC BY-SA 4.0)](http://creativecommons.org/licenses/by-sa/4.0/deed.ja)の元で公開します。修正や足したいコンテンツはPull Requestを出していただけるとうれしいのですが、改変の制約はありませんのでフォークしていただくことも可能です。また、商用利用の制限もありません。
7+
8+
著作権者名は「フューチャー株式会社(Future Corporation)」でお願いします。

_templates/pageinfo.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div>
2+
<h4>Page Info</h4>
3+
<p>
4+
<ul>
5+
<li>英数記号: {{ ascii_count }}</li>
6+
<li>非アスキー: {{ nonascii_count }}</li>
7+
<li>合計文字数: {{ char_count }}</li>
8+
<li>半角換算: {{ half_char_count }}</li>
9+
<li>全角換算: {{ full_char_count }}</li>
10+
</ul>
11+
</p>
12+
</div>

advance.rst

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
高度なテクニック
2+
=======================
3+
4+
.. todo::
5+
6+
デコレータを使ってDI。他にある?
7+
8+
https://github.com/Microsoft/tsyringe

async.rst

+390
Large diffs are not rendered by default.

baseenv.rst

+214
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
==========================
2+
基本の環境構築
3+
==========================
4+
5+
環境構築の共通部分を紹介しておきます。
6+
プロジェクトでのコーディングであれば、誰が書いても同じスタイルになるなど、コード品質の統一が大切になりますので、単なる個人用の設定ではなく、それをシェアできるというのも目的として説明していきます。
7+
ここでは、基本的にすべてのプロジェクトでJest、ESLint、Prettierなどを選択しています。まあ、どれも相性問題が出にくい、数年前から安定して存在している、公式で推奨といった保守的な理由ですね。きちんと選べば、「JSはいつも変わっている」とは距離を置くことができます。
8+
9+
.. todo::
10+
11+
ESLintのTypeScript対応はまだまだ開発途上で厳しそうなのでTSLintに書き戻す?
12+
13+
* Jest
14+
15+
テスティングフレームワークはたくさんありますが、avaとJestがテスト並列実行などで抜きん出ています。JestはTypeScript用のアダプタが完備されています。avaはBabel/webpackに強く依存しており、単体で使うなら快適ですが、他のBabel Configと相性が厳しくなるのでJestにしています。
16+
17+
* ESLint
18+
19+
公式が押しているのでこれですね。
20+
21+
* @typescript-eslint/eslint-plugin
22+
23+
ESLintにTypeScriptの設定を追加するプラグインです
24+
25+
* Prettier
26+
27+
TypeScript以外のSCSSとかにも対応していたりします。現在はシェアが伸びています。
28+
29+
* eslint-config-prettier
30+
31+
eslint側で、Prettierと衝突する設定をオフにするプラグインです
32+
33+
* npm scripts
34+
35+
ビルドは基本的にMakefileとかgulpとかgruntとかを使わず、npm scriptsで完結するようにします。ただし、複数タスクをうまく並列・直列に実行する、ファイルコピーなど、Windowsと他の環境で両対応のnpm scriptsを書くのは大変なので、mysticateaさんのQiitaのエントリーのnpm-scripts で使える便利モジュールたちを参考に、いくつかツールを利用します。
36+
37+
* Visual Studio Code
38+
39+
TypeScript対応の環境で、最小設定ですぐに使い始められるのはVisual Studio Codeです。しかも、必要な拡張機能をプロジェクトファイルで指定して、チーム内で統一した環境を用意しやすいので、推奨環境として最適です。EclipseなどのIDEの時代とは異なり、フォーマッターなどはコマンドラインでも使えるものを起動するケースが多いため、腕に覚えのある人はVimでもEmacsでもなんでも利用は可能です。
40+
41+
.. todo:: lyntのTypeScript対応状況を注視する
42+
43+
作業フォルダの作成
44+
-------------------------
45+
46+
出力先フォルダの作成はプロジェクト構成ごとに変わってくるため、入力側だけをここでは説明します。
47+
プロジェクトごとにフォルダを作成します。
48+
ウェブだろうがライブラリだろうが、 ``package.json`` が必要なツールのインストールなど、すべてに必要になるため、 ``npm init`` でファイルを作成します。
49+
50+
.. code-block:: bash
51+
52+
$ mkdir projectdir
53+
$ cd projectdir
54+
$ npm init -y
55+
$ mkdir src
56+
$ mkdir __tests__
57+
58+
外部に公開しないパッケージの場合には、 ``"private": true`` という設定を忘れずにいれましょう。
59+
60+
srcフォルダ以下に.tsファイルを入れて、出力先のフォルダ以下にビルド済みファイルが入るイメージです。仮にこれを ``dist`` とすると、これはGitでは管理しませんので ``.gitignore`` に入れておきます。
61+
62+
.. code-block:: text
63+
:caption: .gitignore
64+
65+
dist
66+
.DS_Store
67+
Thumbds.db
68+
69+
もし成果物を配布したい場合は、それとは逆に、配布対象はdistとルートのREADMEとかだけですので、不要なファイルは配布物に入らないように除外しておきましょう。これから作るTypeScriptの設定ファイル類も外して起きましょう。
70+
71+
.. code-block:: text
72+
:caption: .npmignore
73+
74+
dist
75+
.DS_Store
76+
Thumbds.db
77+
__tests__/
78+
src/
79+
tsconfig.json
80+
jest.config.json
81+
.eslintrc
82+
.travis.yml
83+
.editorconfig
84+
.vscode
85+
86+
ビルドのツールのインストールと設定
87+
--------------------------------------
88+
89+
まず、最低限、インデントとかの統一はしたいので、editorconfigの設定をします。editorconfigを使えばVisual Studio、vimなど複数の環境があってもコードの最低限のスタイルが統一されます(ただし、各環境で拡張機能は必要)。また、これから設定するprettierもこのファイルを読んでくれます。
90+
91+
.. code-block:: ini
92+
:caption: .editorconfig
93+
94+
root = true
95+
96+
[*]
97+
indent_style = space
98+
indent_size = 4
99+
end_of_line = lf
100+
charset = utf-8
101+
trim_trailing_whitespace = true
102+
insert_final_newline = true
103+
104+
ツール群はこんな感じで入れました。
105+
106+
.. code-block:: bash
107+
108+
$ npm install --save-dev typescript prettier
109+
eslint @typescript-eslint/eslint-plugin
110+
eslint-plugin-prettier
111+
eslint-config-prettier npm-run-all
112+
113+
設定ファイルは以下のコマンドを起動すると雛形を作ってくれます。これを対象の成果物ごとに編集していきます。
114+
詳細は各パッケージの種類の賞で取り扱います。
115+
116+
.. code-block:: bash
117+
118+
$ npx tsc --init
119+
120+
ESLintの設定も作ります。Prettierと連携するようにします。
121+
122+
.. code-block:: json
123+
:caption: .eslintrc
124+
125+
{
126+
"plugin": [
127+
"prettier"
128+
],
129+
"extends": [
130+
"plugin:@typescript-eslint/recommended",
131+
"plugin:prettier/recommended"
132+
],
133+
"rules": {
134+
"no-console": [
135+
false
136+
],
137+
"@typescript-eslint/indent": "ingore",
138+
"prettier/prettier": "error"
139+
}
140+
}
141+
142+
ESLintを起動するタスクを ``package.json`` に追加しましょう。
143+
これで、 ``npm run lint`` や ``npm run fix`` でコードチェックをしたり、スタイル修正が行えます。
144+
145+
.. code-block:: json
146+
:caption: package.json
147+
148+
"scripts": {
149+
"lint": "eslint .",
150+
"fix": "eslint --fix ."
151+
}
152+
153+
テスト
154+
-----------
155+
156+
ユニットテスト環境も作ります。TypeScriptを事前に全部ビルドしてからJasmineとかも見かけますが、公式でTypeScriptを説明しているJestにしてみます。
157+
158+
.. code-block:: bash
159+
160+
$ npm install --save-dev jest ts-jest @types/jest
161+
162+
scripts/testと、jestの設定を追加します。古い資料だと、transformの値がnode_modules/ts-jest等になっているのがありますが、今はts-jestだけでいけます。
163+
164+
.. code-block:: json
165+
:caption: package.json
166+
167+
{
168+
"scripts": {
169+
"test": "jest"
170+
}
171+
}
172+
173+
.. code-block:: js
174+
:caption: jest.config.js
175+
176+
module.exports = {
177+
transform: {
178+
"^.+\\.tsx?$": "ts-jest"
179+
},
180+
moduleFileExtensions: [
181+
"ts",
182+
"tsx",
183+
"js",
184+
"json",
185+
"jsx"
186+
]
187+
};
188+
189+
Visual Studio Codeの設定
190+
--------------------------------
191+
192+
Visual Stuido Codeでフォルダを開いたときに、eslintの拡張と、editorconfigの拡張がインストールされるようにします。
193+
194+
.. code-block:: json
195+
:caption: .vscode/extensions.json
196+
197+
{
198+
"recommendations": [
199+
"dbaeumer.vscode-eslint",
200+
"EditorConfig.editorconfig"
201+
]
202+
}
203+
204+
ファイル保存時にeslint --fixが自動実行されるように設定しておきましょう。これでVisual Studio Codeを使う限り、誰がプロジェクトを開いてもコードスタイルが保たれます。eslintプラグインのautoFixOnSaveは、files.autoSaveがoffのときにしか効かないので、それも設定しておきます。
205+
206+
.. code-block:: json
207+
:caption: .vscode/settings.json
208+
209+
{
210+
"eslint.autoFixOnSave": true,
211+
"files.autoSave": "off"
212+
}
213+
214+
.. todo:: tsdocとかドキュメントツールを紹介

ci.rst

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
CI(継続的インテグレーション)環境の構築
2+
================================================
3+
4+
.. todo::
5+
6+
travis、circle.ci、gitlab-ciの設定を紹介。あとはJenkins?
7+
8+
https://qiita.com/nju33/items/72992bd4941b96bc4ce5
9+
10+
https://qiita.com/naokikimura/items/f1c8903eec86ec1de655

0 commit comments

Comments
 (0)