[WIP] IE11で動くD3.jsコードをES1025～を使って書きたい

鏡双司 | Skeb Open @SO_C

visual studio codeをCLIで起動するときのコマンド名ってcodeなんだ。

FORTE@aozorafm @FORTEgp05

この記事を読んでドリフターズの信長のセリフを思い出した。 「合戦そのものはそれまで積んだ事の帰結よ 　合戦に至るまで何をするかが俺は戦だと思っとる」 プロジェクトが始まる前に終わらせておくこと - Mitsuyuki.Shiiba bufferings.hatenablog.com/entry/2019/03/…

鏡双司 | Skeb Open @SO_C

git, いつまで経ってもわかったようなわからんようなって感じだ。本格的に使っていないってのもあるけれど。

鏡双司 | Skeb Open @SO_C

ES6もぜんぜんだ……。/ イマドキのJavaScriptの書き方2018 - Qiita qiita.com/shibukawa/item…

鏡双司 | Skeb Open @SO_C

でもまだIE11いるんだよな……。って思ってたらBabelでトランスパイルできるのか。便利な時代だ。

鏡双司 | Skeb Open @SO_C

じゃあBabelの動かし方を……（先に進まない

鏡双司 | Skeb Open @SO_C

D3.jsを動かしてみようと思ったけれど、公式のGalleryリンク先コードがES6だ。ついでに見てみよう。って全然違う言語ではこれ。つーか、自分の想定にはIE11ユーザがいるから動かないわ。お、Babelで変換できるんだ。npmでインストールだからWindows環境だとnode.jsインストールGit bashからでOK?

鏡双司 | Skeb Open @SO_C

まぁ、趣味で調べる分にはおもしろい。

鏡双司 | Skeb Open @SO_C

Babel公式のTry Itで=>演算子が展開されるのは確認できた。constもvarに置き換わる。

鏡双司 | Skeb Open @SO_C

ごもっとも。 / D3 is not a compatibility layer, so if your browser doesn’t support standards, you’re out of luck. Sorry! github.com/d3/d3/wiki

あべさん @mao_instantlife

設計に至るまでに必要な制約をいかに作っておくかで変わるんだよなあ

鏡双司 | Skeb Open @SO_C

そういう検証すればいい、というかむしろするべき、と自分に言い聞かせておこう。 > RT

鏡双司 | Skeb Open @SO_C

「許可を求めるな謝罪せよ」を思い出した。

鏡双司 | Skeb Open @SO_C

CI, CD的な発想でもある。常にリリースできる状態にあるという意味で。

鏡双司 | Skeb Open @SO_C

npmが欲しいので、node.jsをDLしてきます。 nodejs.org/ja/download/

鏡双司 | Skeb Open @SO_C

Install Optionはデフォルトでいいかな。

鏡双司 | Skeb Open @SO_C

Git Bashでnpm -hしてヘルプが表示されることを確認。

鏡双司 | Skeb Open @SO_C

前にpackage.jsonを作らないといけませんでした。 Noteをちゃんと読もう。

鏡双司 | Skeb Open @SO_C

WARN出まくっているけれど、package.jsonの書き方全然わかってないからっぽい。まぁインストールできたみたいだからよしとしよう。

鏡双司 | Skeb Open @SO_C

node_modulesディレクトリとその下に大量のファイルができたので.gitignoreで除外しよう。

鏡双司 | Skeb Open @SO_C

package-lock.jsonも.gitignoreに。

鏡双司 | Skeb Open @SO_C

package.jsonはBabelじゃなくてnpmの依存性を記述するファイル (mvnでいうpom.xml) って理解でいいのかな。

鏡双司 | Skeb Open @SO_C

npm run buildでERROR終了するところまで来た。