毎日更新

77日目 個人開発記12 -技術選定ってむずかしい-

こんばんは。

今日は、「技術選定って難しい」というテーマです。

隔週でリーダー・上司とそれぞれ1on1をやっているのですが、最近はもっぱら個人開発のReactの実装の相談をさせてもらっています。

直接業務とは関係ないものの、会社として推していきたい「Reactのキャッチアップ」という名目であれば個人開発であっても業務に関係する、堂々と相談できるというわけですね。家でやっていることを会社で相談できるなんて、本当にこの業界は素晴らしい。

今日はリーダーとの1on1だったのですが、今の個人開発を始めた当初から感じていた違和感をぶつけてみました。

それは、「Reactを使ったプロジェクトのスタイリング方法について」です。

今回の開発を始めるにあたって調査をしていると、どうやらReactプロジェクトのスタイリングには、ノーマルなcss/scssだけでなく『styled-components』や『emotion』といった、『css-in-js』というジャンルのスタイリング手法が存在するということを知りました。

そしてこれは僕の調査が甘いからかもしれませんが、css-in-jsを使うことが「ナウでイケてるらしいぞ」という情報が多かったので、ワケもわからず一番人気と思われる 『styled-components』を導入することにしました。

詳細は過去記事(56日目 個人開発記⑧-emotionを使おう-)に書いておりますが、『styled-components』の書き方はマークアップに慣れた人間からすると非常に「直感的でない」んですね。htmlのタグがコンポーネントの名前になるのでDOM構造がぱっと見わかりづらいし、cssもキャメルケースで書かなきゃいけない。

margin-top: 10px;  //普通のcss記法
marginTop : 10px;  //styled-componentsの記法

これだと確実に作業効率落ちる、、、と思い色々調べていると、普通のcssのように書ける『emotion』というライブラリがあると知り、emotionを導入してここまで認証系3ページのスタイリングをしてきました。

ただやっぱり使いづらいところはあって、シンプルにコンポーネント内にスタイルのコードを書くのでコード量が多くなって見通しが悪くなります。それに、emotionでも「styled-components風の記述ができる」というのが大きな強みのように語られていて、「styled-componentsの何がそんなにいいんだ?」てのがずっと疑問でした。

ここまでのような話をリーダーにぶつけてみたら、返ってきた答えが予想外すぎて目から鱗がボロボロはがれおちました。。

「styled-componentsは、我々のようにマークアップに抵抗がない人間からすると『直感的でなくて使いづらい』というのは本当にそう。あれはたぶんcssを嫌う人たちによって作られたんだ(あくまで予想)。だから、普通のcss/scssの方が使いやすいのなら、そっちを使えばいいんだよ。別にstyled-componentsが優れているわけじゃない。」

こんな風に言われました。

なるほどそうなのか。。。自分が感じてた違和感は正しかったし、自信を持ってcssを書けばいいんだと背中を押されたような気分でした。

ただ、唯一emotionがscssより優れている部分がありました。それは、「コンパイル速度」です。今のReactプロジェクトはベースがLaravelでそこにReactを組み込んでいる形になっています。モジュールバンドラーはLaravel-mixを使用しており、Laravel-mixの仕様なのか、そもそものscssの仕様なのか分からないですが、なぜかscssのコンパイルはjsのコンパイルより遅いんです。

体感値でいうと、jsのコンパイルは1~2秒なのに対し、scssは5~7秒くらいです。保存するたびにコンパイルが走る設定にしてあるので、この差はとてつもなく大きいストレスとして跳ね返ってきます。

これをリーダーにいうと、

「だったらscssじゃなくてcssでいいじゃん?コンポーネント単位のスタイリングだからscss使うメリットあんまりないでしょ」

という答えが。

おう、、、、天才現る、、、、、

そうなんです。css-in-jsだろうが普通にcss/scssを書こうが、コンポーネント単位のスタイリングであることに変わりはないです。セレクタが10~20くらいだったら、別にcssでいいんですよね。

「ピュアなcssを書くなんてレガシーかよw」という先入観にとらわれすぎて、「コンパイルのコストに見合うかどうか」という視点が完全に抜け落ちていました。

今回はただのイチ個人開発における「技術選定」でしたが、これって実際のプロジェクトでも起こりうるんじゃないかなと。「モダンだからいい」とか、そういうことではなく「目的を持った」技術選定ってのが大切なんだなと身をもって感じました。

おわり。

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして0から成長していく過程を発信していきたいと思っています。

© 2021 きわっちのブログ Powered by AFFINGER5