サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2 id="初めに">初めに</h2>

<p>この記事は、<a href="https://qiita.com/advent-calendar/2021/dmm" target="_blank">DMMグループAdvent Calendar 2021</a>の8日目の記事です</p>

<p>こんにちは。動画配信事業部でフロントエンドエンジニアをしている今西勇太<a href="https://twitter.com/nisshii0313" target="_blank">@nisshii</a>です。</p>

<p>2021年新卒として入社し、研修を経て、現在は動画再生用のプレイヤーを作っています。</p>

<p>この記事では、新卒研修のチーム開発演習をやっていくにあたって、Linariaというライブラリを用いて良い感じにCSS in JS した際にハマったポイントや感じたことを書いていきます。</p>

<h4 id="ここでは触れないこと">ここでは触れないこと</h4>

<p><strong>DMMの新卒研修について</strong></p>

<p>研修のカリキュラムについてはこちらをご覧ください</p>

<p><a href="https://inside.dmm.com/entry/2021/05/10/engineer-training-2021" target="_blank">2021年度 DMMの新卒技術研修が始まりました。｜inside.dmm.com</a></p>

<p>チーム開発演習をどう進めていったのかについては、同期が今夜登壇するので是非チェックしていただければ！</p>

<p><a href="https://dmm.connpass.com/event/228032/" target="_blank">Think ! FrontEnd by DMM #4 [オンライン開催] (2021/12/08 19:00〜)｜dmm.connpass.com</a></p>

<p><strong>スタイル表現の選択肢、結局どれがいいの問題</strong></p>

<p>個人的にはケースバイケース派(規模による)です。ただ、今回のテーマと合わせてしまうと話がブレるので触れません。</p>

<p>LinariaはCSS in JS (特にstyled-componentとほぼ同列に並べられる) に該当するものなので、そのメリット・デメリットについては触れます。以下、目次です。</p>

<h2 id="前提CSS-in-JS-とは">前提：CSS in JS とは</h2>

<p>(知ってるよーという方は読み飛ばしていただいて大丈夫です)</p>

<p>CSS in JS とは、一言で言うと文字通りスタイルの表現をjs側で行うものです。詳細は省きますが、嬉しい点としては基本的に1ファイルで１つのコンポーネントとして管理することができるようになります。</p>

<p>個人的に、コンポーネントの数が多くなった場合、実装時に開いて読むファイルの数が少なくて済めば済むほど開発効率は上がると考えています。</p>

<p>なので、いわゆるAtomic Designのような設計を取り入れる際にはCSS in JSを選択した方が良いと考えています。また、ロジック側からスタイル側へ気軽に変数(props)を渡せるのも、柔軟なスタイル表現に威力を発揮します。</p>

<h2 id="Linaria-がしてくれること">Linaria がしてくれること</h2>

<p>CSS in JS の大きな問題の１つが、スタイルとロジックが混ざったjsファイルが生成されてしまうということです。</p>

<p>何が辛いかと言うと、スタイルに関係するCSSOM Treeを構築するステップの手前に、ロジックが混ざったjsのScriptingのステップを挟む必要が出てきてしまい、いわゆるブロッキング状態が起こらざるを得なくなってしまう点です。</p>

<p>その点、CSS Modulesをはじめとするcssファイルの形で配信する形式であれば、初めからcssファイルとして分かれて作成しているので、上記のような辛さは起こりません。Linariaをはじめとするzero runtime CSS in JSなライブラリ達はこの辛さを解決してくれます。</p>

<p>どう解決してくれるかと言うと、ビルド時にスタイルとロジックが混ざったjsファイルを読み、その中からスタイル定義部分を抽出してcssファイルとして生成する、ということをしてくれます。このおかげで、こういったパターンでのロジックを担うjsファイルによるブロッキングは起こりません。また、生成されたcssファイルを適宜chunkしたり、それらをキャッシュしておくことで、より効率のいい配信が可能になります。</p>

<h2 id="Linaria-の導入とハマりポイント">Linaria の導入とハマりポイント</h2>

<p><a href="https://github.com/callstack/linaria" target="_blank">GitHub - callstack/linaria: Zero-runtime CSS in JS library｜github.com</a></p>

<p>導入自体はパッケージをインストールして、webpackなどの設定を書けば動きます。簡単。</p>

<p>各バンドラー向けにも設定例を書いてくれています。良心的。(Ie11はサポートされてません。今時。)</p>

<p>公式ドキュメントのバンドラー設定はjavascriptの場合しか書かれていないですが、typescriptなプロジェクトで使う場合でもこんな感じで<code>@linaria/webpack-loader</code>に通す前にts-loader等に通せば問題なく動きます。</p>

<pre>
<code>{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: [
    {
      loader: '@linaria/webpack-loader'
    },
    {
      loader: 'ts-loader',
      options: {
        loader: 'tsx'
      }
    }
  ]
},</code></pre>

<p>これまでLinariaの便利なところを紹介してきましたが、欠点もあります。それは、当たり前の話ですがビルド時間が長くなってしまう点です。スタイルを抽出する工程が含まっているので当然ですね。</p>

<p>ここで自分は、ビルド時間の短縮を求めて<code><span style="background-color:#ffa800;">ts-loader</span></code>の代わりに<code><span style="background-color:#ffa800;">esbuild-loader</span></code>を使おうとしてハマりました。</p>

<p>具体的には、それまで出来ていて開発体験の向上につながっていたHMRが上手く効かなくなってしまいました。これ自体はesbuild側の問題でLinariaの設定からはどうしようもなく、詰んでしまいました&hellip;。</p>

<p><a href="https://github.com/evanw/esbuild/issues/97" target="_blank">[Question] about HMR support with Livereload &middot; Issue #97 &middot; evanw/esbuild｜github.com</a></p>

<h2 id="より開発体験を良くするには">より開発体験を良くするには</h2>

<p>前章でビルド高速化のために<code><span style="background-color:#ffa800;">esbuild-loader</span></code>を入れようとしてHMRできなくなった話を書きました。ただ、Linariaを使うこともビルド高速化もHMRも諦めたくないと思って解決策を探していたところ、以下のOSSを見つけました。感謝！</p>

<p><a href="https://github.com/denn1s/vite-plugin-linaria" target="_blank">GitHub - denn1s/vite-plugin-linaria｜github.com</a></p>

<p>こちらは、Linariaのvite向けプラグインです。</p>

<p>viteならばビルド時間の高速化もHMRも満たせます。</p>

<p>ちなみに設定例はこんな感じです。</p>

<pre>
<code>import reactRefresh from '@vitejs/plugin-react-refresh';
import { defineConfig } from 'vite';
import path from 'path';
import VitePluginLinaria from 'vite-plugin-linaria';

export default defineConfig({
  plugins: [
    reactRefresh(),
    VitePluginLinaria(),
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.join(__dirname, 'src')
      }
    ]
  },
  build: {
    sourcemap: true,
    outDir: 'build'
  }
});</code></pre>

<p>おかげでチーム開発演習の期間、CSS in JSの書き心地を維持しつつ、HMRと高速なビルドによる開発体験も維持しつつ、cssファイルとして生成し適宜キャッシュすることでパフォーマンスも高水準で維持できました。</p>

<h2 id="まとめと余談">まとめと余談</h2>

<p>以上、Linariaでパフォーマンス面をケアしつつ、CSS in JSする環境を整えた話でした。</p>

<p>Linariaで実サービスを開発するタイミングがこの先いつ来るかは分かりませんが、個人的にはとても未来のあるライブラリだと思っているので今後も注視していきたいです。</p>

<p>余ったスペースで、弊社の最高すぎる福利厚生制度の紹介をします。</p>

<p>それがこちら、「Tech12（※2024年2月末終了）」 というものです。</p>

<p><a href="https://dmm-corp.com/recruit/benefits/tech-empowerment/#:~:text=inside.dmm.com-,%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88Tech12,-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%AE" target="_blank">技術者向けサポート制度｜福利厚生｜採用情報｜DMM Group</a></p>

<p>こちらは文字通り、社員の「Tech」な分野での自己研鑽に関わる費用(書籍、ガジェット、勉強会参加費などなど) を、1人あたり月に1万円まで、1年間で「12」万円までを会社が補助してくれるという制度です。</p>

<p>この制度を使って、自分はLGの4Kモニターを買いました。作業が捗ります！</p>

<div data-oembed-url="https://twitter.com/nisshii0313/status/1464468875089571841?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1464468875089571841%7Ctwgr%5Efc1ebc86898b1133f06d3e1b603fd33b47c6862a%7Ctwcon%5Es1_&amp;ref_url=https%3A%2F%2Finside.dmm.com%2Fentry%2F2021%2F12%2F08%2Fad-cal-linaria">
<div style="max-width: 550px;">
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 100%;"><iframe allowfullscreen="" src="//if-cdn.com/kDqSJb3?app=1" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>
<script async="" charset="utf-8" src="//if-cdn.com/embed.js"></script></div>

<p>&nbsp;</p>


研修でLinariaを使ってCSS in JSした話

シェア

関連する記事