あるプロジェクトでのRemixの採用をきっかけに「モダンな環境に挑戦する足がかりとしてのRemix」ということについて考えました。その中で、従来の環境で活躍してきたコーダーが、プロダクションでReactを書くということにいいきっかけになるのではないかと思いました。

ここでは「モダンテンプレートエンジン」としてのRemixの話をします。これはRemixをフル活用するという点では浅く、技術的な深さを捉えたものではありません。ただ、技術的なステップアップを考えている人に向けてきっかけになればいいなとおもって書いています。

こんな人におすすめ

• 普段アプリケーション開発は行わないが、モダンな開発環境にトライしてみたいコーダー
• 軽くReactに入門したことがある人

HTMLテンプレートエンジンとして

RemixはReactを記述言語としたテンプレートエンジンという印象でした。

Reactを記述するJSXはJavaScriptをHTMLのように書けるため、EJSを書いているような感覚に近いです。JSXではHTMLとJavaScriptを共存させたように書くことができ、mapメソッドを使った反復記法などを便利に記述できます。

CSSについて

昨今、CSSの取り扱い方は多様になりました。まず前提として、Remixコミュニティは最適な方法をまだ模索中という但し書きがあります。どれを採用することがベストとは言い切ってはいません。

現状、コミュニティで人気のある書き方は、ディレクトリルートでスタイルシートを読み込む方法とTailwindを利用する方法の2つだそうです。

特に前者についてはページ単位でCSSを書いて、ページごとにlink要素で読み込むという形になり。これは通常のコーディングと大きく変わりありません。

共通コンポーネントの取り扱い1. shared.cssをつくる

ページ単位のCSSでなく、各ページで共通して使われるコンポーネントのスタイリング（例えばボタンやテーブルなど）は、shared.cssを作ってルートで読み込む、という方法を撮ることができます。このファイルは唯一、全ページで共有されます。

共通コンポーネントの取り扱い2. コンポーネントごとのCSSファイルをつくる

shared.cssに全てを書いてしまうのではなく、コンポーネントごとにCSSファイルを作る方法もあります。これはSassファイルを分ける感覚ににています。Sassとの違いは、@importなどを使ってファイル統合をするのではなく、全てのファイルを直接読み込めることです。

また、link要素のメディアクエリを設定することで、ブラウザの大きさによって読み込むスタイルシートを変更するアプローチも使えます。

JavaScriptについて

EJSなどのテンプレートエンジンとの大きな違いは、成熟したReactコンポーネントを使った実装が可能になることです。例えばFramer-motionのようなアニメーションライブラリや、formikのようなフォームライブラリを活用できます。プレーンなHTMLにJavaScriptを書くことに比べ、手軽で直感的かつ、豊富なインターネット上のリソースを活用できるという利点があります。

アクセシビリティに関するメリット

また、成熟したライブラリを活用するということで、すでにアクセシビリティを考慮されたリンクコンポーネントを使えることも大きなメリットです。例えばRemixにビルトインされているリンクコンポーネントを活用すれば、アクセシブルなナビゲーションやパンくずリストが作りやすくなります。

これらのコンポーネントはスクリーンリーダーによるライブリージョンの読み上げやフォーカス管理などがあらかじめ最適に作られており、これらの活用はHTMLを書く人にとってとても便利な物です。

まとめ

Remixをテンプレートエンジンとして使うにあたり、複雑なアーキテクチャの理解は必ずしも必要ではないので（それでRemixの利点を引き出せるわけではありませんが）Reactの練習として薄いフレームワークを活用する上での有用性を感じています。

複雑なアプリケーション構築は行わないが、昔ながらの環境からモダンな環境にリプレイスしたいと考えていて、かつToo muchになりすぎない書き味を求めている方が選択肢にいれることはいいのではないでしょうか。

最後に

Gaji-Laboでは複雑なアプリケーション開発以外に、今の時代にふさわしいアーキテクチャを採用したウェブサイト開発も行なっています。その中で技術的な挑戦が可能な場合は積極的に最新技術を取り入れていくこともあります。このような技術的な挑戦をしながら開発を行う環境を求めている開発者の方、興味があったら一度お話ししてみませんか？