Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Drupal 8 におけるTypeScript を使用する
JavaScript 開発の現状
Tom Konda (@tom_k_en)
TypeScript とは
JavaScript に型制約を与え、誤ったコードを書きづらくするAltJS
PHP で言うと、下記のコードのような型宣言
ライブラリの型制約はnpmの @types/* からもダウンロード可
マイナーなライブラリは...
Drupal 8 とTypeScript
DrupalCon Barcelona (2015)で発表があった
TypeScriptize your next D8 site
テーマで使用するJavaScriptをTypeScriptで作成する内...
Drupal 8 向けのTypeScript 型定義
TypeScript definitions というプロジェクトが存在
リリースされていないため、ダウンロードは不可
URL はhttps://www.drupal.org/project/...
TypeScript definitions の中身
レポジトリのURL はhttp://cgit.drupalcode.org/typings/tree/
2017/01/21現在の最新コミットは2016‑07‑17
TypeScript definitions のpackage.json
npm の依存関係は以下の通り
TypeScript がちょっと古い(現在は2.1.5)
typings を使ってライブラリの型制約を得る辺りが懐かしい
{
"devDe...
TypeScript definitions に貢献すべきか
あまり必要性を感じない
TS2.0から依存関係に @types/* があると型制約を自動で読む
JS 関係なのに、npm エコシステムに入っていない
他のツールとの連携で辛そう
np...
変換前のTypeScript ファイルの例
インデントはスペースとタブが混在
 foo のみタブ、他はスペース
const somethingNew = {
'hogehoge' : 'foobar',
'foo' : 'xyzzy',
'do...
変換後のJavaScript ファイルの例
インデントはスペース4文字に統一される
Drupal のインデントのコーディング規約を破ることになる
Drupal のコーディング規約ではインデントのスペースは2文字
tsc コマンドやtsconfi...
ESLint による修正の例
 eslint --fix ./js/hogehoge/**.js でlint 時に修正
インデントの間違いなどは自動で修正
下記のように修正しきることは難しい( == を変換できない)
drupal.org に公...
drupal.orgで公開するJSをTSで書きたいなら
tsc による変換後コーディング規約に合致するように変換が必要
下記のようにタスク定義をする感じ?
変換の実装はしんどい
{
"build" : "npm-run-all tsc conv...
まとめ
Drupal 8 へTypeScript の型制約を付けるプロジェクトは存在
drupal.org よりnpm にある方が有用と思われる
TypeScript を用いて公開プロジェクトのソースを書くのは厳しい
コーディング規約に合致させ...
Upcoming SlideShare
Loading in …5
×

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

845 views

Published on

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

Published in: Software
  • Be the first to comment

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

  1. 1. Drupal 8 におけるTypeScript を使用する JavaScript 開発の現状 Tom Konda (@tom_k_en)
  2. 2. TypeScript とは JavaScript に型制約を与え、誤ったコードを書きづらくするAltJS PHP で言うと、下記のコードのような型宣言 ライブラリの型制約はnpmの @types/* からもダウンロード可 マイナーなライブラリは自力で型制約を書く必要あり Microsoft 製 function checkArray(int $a, array $b) :bool { return count($b) === $a; }
  3. 3. Drupal 8 とTypeScript DrupalCon Barcelona (2015)で発表があった TypeScriptize your next D8 site テーマで使用するJavaScriptをTypeScriptで作成する内容 ES class などモダンな構文を使用して変換などの紹介 これ以外にもDrupal 8 向けのTypeScript 型定義のプロジェクトが 存在
  4. 4. Drupal 8 向けのTypeScript 型定義 TypeScript definitions というプロジェクトが存在 リリースされていないため、ダウンロードは不可 URL はhttps://www.drupal.org/project/typings
  5. 5. TypeScript definitions の中身 レポジトリのURL はhttp://cgit.drupalcode.org/typings/tree/ 2017/01/21現在の最新コミットは2016‑07‑17
  6. 6. TypeScript definitions のpackage.json npm の依存関係は以下の通り TypeScript がちょっと古い(現在は2.1.5) typings を使ってライブラリの型制約を得る辺りが懐かしい { "devDependencies": { "minimatch": "^3.0.2", "tslint": "^3.8.0", "tslint-config-typings": "^0.2.3", "typescript": "^1.8.10", "typings": "^1.3.1" } }
  7. 7. TypeScript definitions に貢献すべきか あまり必要性を感じない TS2.0から依存関係に @types/* があると型制約を自動で読む JS 関係なのに、npm エコシステムに入っていない 他のツールとの連携で辛そう npm に移すことを働きかけた方がよいかもしれない このプロジェクトの有無とは別にTypeScript での開発には課題あり
  8. 8. 変換前のTypeScript ファイルの例 インデントはスペースとタブが混在  foo のみタブ、他はスペース const somethingNew = { 'hogehoge' : 'foobar', 'foo' : 'xyzzy', 'doe' : 'jane' } TypeScript のコンパイラ(tsc コマンド)で変換すると…
  9. 9. 変換後のJavaScript ファイルの例 インデントはスペース4文字に統一される Drupal のインデントのコーディング規約を破ることになる Drupal のコーディング規約ではインデントのスペースは2文字 tsc コマンドやtsconfig.json でインデントの設定は不可 const somethingNew = { 'hogehoge': 'foobar', 'foo': 'xyzzy', 'doe': 'jane' }; ESLint でも‑‑fix オプションで変換できるが…
  10. 10. ESLint による修正の例  eslint --fix ./js/hogehoge/**.js でlint 時に修正 インデントの間違いなどは自動で修正 下記のように修正しきることは難しい( == を変換できない) drupal.org に公開しない場所でしか使い道がなさそう > tstest@1.0.0 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)
  11. 11. drupal.orgで公開するJSをTSで書きたいなら tsc による変換後コーディング規約に合致するように変換が必要 下記のようにタスク定義をする感じ? 変換の実装はしんどい { "build" : "npm-run-all tsc convertD8JS lint", "tsc" : "tsc -p ./src/hogehoge", "convertD8JS" : "d8convert ./js/hogehoge", "lint" : "eslint" } この問題はJavaScript をES の最新版で書いても同様に生じる トランスパイル後のコードが規約への準拠を保証していない
  12. 12. まとめ Drupal 8 へTypeScript の型制約を付けるプロジェクトは存在 drupal.org よりnpm にある方が有用と思われる TypeScript を用いて公開プロジェクトのソースを書くのは厳しい コーディング規約に合致させる難易度が大 コーディング規約に関しては、ES の最新版で書いたJS も同様 ブラウザサポートしんどそう 公開しないならTypeScript とかES の最新版も使用可能 今後Drupal JavaScript コーディング規約の変更希望 #2809281 や#2809735 を見ると希望あり

×