CSS Grid Layoutの練習で黄金比（フィボナッチ数列）の図形を描く

CSS Grid Layoutが登場してからというもの、スタイリングが格段にやりやすくなった。
ということで練習もかねて、CSS Grid Layoutを使って黄金比（フィボナッチ数列）の例のアレを描いてみる。

CSS変数をJavaScriptで動的に変更し、複数のスタイルに一括適用する

いつの間にかVanilla CSS（ブラウザ標準のCSS）でもSassみたいにCSS変数（CSS Variales）が使えるようになっていた。

CSS変数の何が嬉しいかというと、たとえばベースカラーを定義しておいて複数のスタイルで参照しておく。後日ベースカラーを変更したくなったらCSS変数を変更するだけで他は弄らなくてよくなりメンテがしやすくなる点だ。

[Node.js]指定したパス配下（サブディレクトリ含む）のファイル一覧を取得する

Node.jsで指定したパスにどんなファイルがあるか一覧にしたいのだが、そんな都合の良いメソッドはなかった。fs.readdirSync(path, { recursive: true })なんてオプションがあったら便利なのに。

ということで、パス一覧を取得する方法を紹介する。

環境は以下のとおり。

• Node@7.6+
• fs.readdirSyncとfs.statSyncが使えるバージョンならOK

JavaScriptとTypeScriptを共存させ、段階的に移行する方法

某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。


TypeScriptに移行して、型に守られたい！



ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。
ということでJavaScriptとTypeScriptを共存させる方法をまとめる。

環境は以下のとおり。

• webpack@4.0.1
• webpack-cli@2.0.9
• webpack v3系の場合は不要
• typescript@2.7.2
• ts-loader@4.0.0

※ あとでbabel-loaderについて追記予定です！
→ 2018/03/23 追記しました

Prettierの手の届かないところはESLintでカバーして自動整形する（prettier-eslint）

コードから手書きによるぬくもりを排除して、精神的安定を手に入れたい！

唐突だが、先日行われた「メタプログラミング勉強会@さくらインターネット」に参加して以来、「コードの整形とか人間がやる仕事じゃない！」と思うようになった。
人間の手で書くコードのぬくもりは時として作業効率を下げてしまう。だから、ぬくもりを排除したほうが精神的安定を得られるのではないかと。

ということで、今回はPrettierとESLintを併用して、保存時またはコミット前に自動フォーマットする方法をまとめる。