Drupal 8 における TypeScript を使用する JavaScript 開発の現状

317 Views

June 01, 17

スライド概要

第1回 Drupal 勉強会@DC にて発表したスライドです

profile-image

Web developer, OpenStreetMap mapper. This Account tweets only Tech or OSM, sometimes something like geography except for reply or fav.

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

における TypeScript を使用する 開発の現状 Drupal 8 JavaScript Tom Konda (@tom_k_en)

2.

TypeScript とは に型制約を与え、誤ったコードを書きづらくする AltJS で言うと、下記のコードのような型宣言 ライブラリの型制約は npm/@types からもダウンロード可 マイナーなライブラリは自力で型制約を書く必要あり Microsoft 製 JavaScript PHP function checkArray(int $a, array $b) :bool { return count($b) === $a; }

3.

Drupal 8 と TypeScript で発表があった DrupalCon Barcelona (2015) TypeScriptize your next D8 site テーマで使用するJavaScriptをTypeScriptで作成する内容 ES class などモダンな構文を使用して変換などの紹介 これ以外にも Drupal 8 向けの TypeScript 型定義のプロジェクトが 存在

4.

Drupal 8 向けの TypeScript 型定義 というプロジェクトが存在 リリースされていないため、ダウンロードは不可 URL は https://www.drupal.org/project/typings TypeScript definitions

5.

TypeScript definitions の中身 レポジトリの URL は http://cgit.drupalcode.org/typings/tree/ 2017/01/21現在の最新コミットは2016‑07‑17

6.
[beta]
TypeScript definitions

の package.json

の依存関係は以下の通り
TypeScript がちょっと古い(現在は 2.1.5)
typings を使ってライブラリの型制約を得る辺りが懐かしい
npm

{

}

"devDependencies": {
"minimatch": "^3.0.2",
"tslint": "^3.8.0",
"tslint-config-typings": "^0.2.3",
"typescript": "^1.8.10",
"typings": "^1.3.1"
}

7.

TypeScript definitions に貢献すべきか あまり必要性を感じない TS2.0から依存関係に @types/*があると型制約を自動で読む JS 関係なのに、npm エコシステムに入っていない 他のツールとの連携で辛そう npm に移すことを働きかけた方がよいかもしれない このプロジェクトの有無とは別に TypeScript での開発には課題あり

8.

変換前の TypeScript ファイルの例 インデントはスペースとタブが混在 foo のみタブ、他はスペース const somethingNew = { 'hogehoge' : 'foobar', } 'doe' : 'jane' TypeScript 'foo' : 'xyzzy', のコンパイラ(tsc コマンド)で変換すると…

9.
[beta]
変換後の JavaScript ファイルの例

インデントはスペース4文字に統一される
Drupal のインデントのコーディング規約を破ることになる
Drupal のコーディング規約ではインデントのスペースは2文字
tsc コマンドや tsconfig.json でインデントの設定は不可

const somethingNew = {
'hogehoge': 'foobar',
'foo': 'xyzzy',
'doe': 'jane'
};

ESLint

でも ‑‑fix オプションで変換できるが…

10.

ESLint による修正の例 eslint --fix ./js/hogehoge/**.js で lint 時に修正 インデントの間違いなどは自動で修正 下記のように修正しきることは難しい( == を変換できない) > [email protected] eslintfix /Users/TKonda/Documents/jsapps/hoge/ts > eslint --fix ./out/test3.js /Users/TKonda/Documents/jsapps/hoge/tstest/out/test3.js 6:27 error Expected '===' and instead saw '==' eqeqeq 7:3 error Unexpected console statement no-console ✖ 2 problems (2 errors, 0 warnings) drupal.org に公開しない場所でしか使い道がなさそう

11.
[beta]
で公開するJSをTSで書きたいなら

drupal.org
tsc

{

}

による変換後コーディング規約に合致するように変換が必要
下記のようにタスク定義をする感じ?
変換の実装はしんどい

"build" : "npm-run-all tsc convertD8JS lint",
"tsc" : "tsc -p ./src/hogehoge",
"convertD8JS" : "d8convert ./js/hogehoge",
"lint" : "eslint"

この問題は JavaScript を ES の最新版で書いても同様に生じる
トランスパイル後のコードが規約への準拠を保証していない

12.

まとめ へ の型制約を付けるプロジェクトは存在 より にある方が有用と思われる TypeScript を用いて公開プロジェクトのソースを書くのは厳しい コーディング規約に合致させる難易度が大 コーディング規約に関しては、ES の最新版で書いた JS も同様 ブラウザサポートしんどそう 公開しないなら TypeScript とか ES の最新版も使用可能 今後 Drupal JavaScript コーディング規約の変更希望 #2809281 や #2809735 を見ると希望あり Drupal 8 TypeScript drupal.org npm