令和の時代でもjQueryはDOM操作ならまだまだ生き続けています。

私は普段jQueryでDOM操作のスクリプトを書くことが多いのですが、今回先方の要望でvanilla JS + CSS設計はFLOCSSという要件でコーディングしました。

vanilla JSはプライベートでは組んだことある + CSS設計はいつもはBEMで、FLOCSSは概念も初めて知ったという状況で、キャッチアップしながらやってみた所感をここに記してみたいと思います。

vanilla JSの所感

正直、一旦使ったことがあったので、querySelectorAllをfor（若しくはforEach）で回さないといけないとか、そのあたりは心得ていたのであまりつまずきませんでした。ただ、data属性を取得するのに、キャメルケースとdata属性のハイフンの対応となっていることに最初は気が付かず、右往左往していました。

// 適当な例
<div data-target data-switch-toggle></div>
↓
this.data = document.querySelector('[data-target]').dataset.dataSwitchToggle

結局のところ、jQueryで操作が簡略化されていようがなかろうが、人間の力でロジックを組んでいくので、ロジック力があればvanillaへの対応はなんなく出来るというのが私の感想です。

あ、そういえばObject.assignがIE対応してなかったのでlodashのmergeで済ませたのはありました。ポリフィル公開されてるけどね。

FLOCSSの所感

FLOCSS、良い点も悪い点もあると思いました。

■良い点

BEMはあくまで単位の分割の手法だが、FLOCSSは分割の概念に役割がある。

普段、BEMでやっていても会社の意向でコンポーネントやレイアウトでの分割（.c-buttonや.l-headerのようなやり方）もやっていたのですが、FLOCSSの公式からインプットしたあと書いていくといつもより役割目線での分割・設計が出来たように思えました。

■悪い点

公式にのっとると、オブジェクトごとにSCSSファイルを切っていく必要があるのですが、慣れるまで時間がかかりました。

htmlだけを先に上から下まで書いておいて、CSSはあとから一気に作っていく方式じゃないと作業時間がかなり増えていく気がします。

あと、/pages/about.scssのようなファイルを切るべきかどうか結構任されている気がします。

久々のキャッチアップ案件だったのでテンション上がりました。この案件まだ実は終わってないので、終わったらまた追記するかもしれません。