🔥

Reactの実践練習を兼ねてPX→REM変換表のWEBサイトを作ってみた。

2021/09/30に公開

Firebase

フロントエンド開発をしている時にpxをremに変換することが多かったので変換表を作ってみました。
ググったらpxを1つずつ計算するサイトは見つかったのですが、つど計算するのは面倒なのでfont-sizeを入力したら1〜1500pxに対応するpxとremの対応表を表示するようにしました。
また、個人開発でインフラコストがかかるとツライのでFirebaseを使ってインフラコストゼロで構築しました。

https://table-of-px-to-rem.web.app

font-size(px)を入力すると、1pxから1,500pxに対応するremを表示します。
値をクリックすると、クリップボードにコピーします。
ダークモードにできます。

font-sizeとモード(light or dark)はlocal storageに保持しているので次回アクセス時に記憶しています。

多言語対応。ブラウザの言語設定が日本語以外の場合、英語で表示されます。

レスポンシブデザイン(Material-UIがやってくれているだけですが)

スプレットシートだったら5分くらいで作れそうという声も聞こえてきそうですが、自己満の世界なので問題なしですw

なお実際の開発時はVSCodeのpxをremに変換してくれるプラグインを使っています。めっちゃ便利です！

今回の裏目的

フロントエンド開発をしている時にpxをremに変換することが多かったので変換表を作ってみました。

冒頭に上記の通り記載しましたが、フロント援護開発の学習も兼ねており(どちらかと言うとこちらがメイン)、今回は下記を勉強したいと思って開発を始めました。

Material-UI version5がリリースされたので使いたい
useContextを使ってみたい
- useContextは参照と更新でContextを分けることがベストプラクティスのようなので実際に試しみたい
localStorageを使ってみたい
ブラウザの言語設定によって多言語対応したWebページを作ってみたい
勉強目的なのでインフラコストを払いたくない

システム構成

今回のシステムはDBなどサーバーサイドを必要としないため、フロントエンドだけのWebアプリケーションとして構築しました。
言語はフロント開発で主流なTypescript。ライブラリはReactを使っています。
初期構築にはReact環境を構築するのに便利なcreate react app(CRA)を利用しました。

Reactの場合、Next.jsというフレームワークが流行っていますが、Next.jsをフル活用するためにはサーバーサイドレンダリングできる環境を用意する必要があることと、今回はその必要性がなかったので見送りました。
※今回のように個人開発の小さなWebアプリケーションであればホスティングサービスにVercelを使えば無料でNext.jsをフル活用できるのですが、今回のようなシンプルなアプリケーションでは無用の長物となってしまうのでインフラを選ばずに汎用的に使えるようにCRAを選択しました。

ホスティングサービス

現在、無料で使えるホスティングサービスはたくさんありますが、最近はGCPを使うことが多いので、集約する意味も込めて今回はFirebase Hostingを使います。

料金体系は下記の通りで、個人でサクッと使う分には無料で使えます。
(※2021年9月現在の情報です。変わる可能性があるので最新情報は公式ホームページをご覧ください)

コード管理

GitHubを使いました。
パブリックリポジトリであれば、GitHub Actionsも無料で使えるので便利です。

デザイン

個人開発でデザインを1つ1つ作っていたらどれだけ時間があっても足りません。
様々なデザインシステムが存在しますが、今回の裏目的にも記載した通りMaterial UIのバージョン5を使いたかったのでMaterial　UIを使いました。
Material UIはよく使うコンポーネントが一通り揃っており、ReactやTypeScriptとの相性がよくとても使いやすいため個人開発では以前から愛用しています。

https://mui.com

開発

ざっくりと開発手順を書いていきます。
※ドキュメントを読めばわかるようなことはこの記事には記載しません。

GitHubリポジトリ作成

ソースを公開して困るようなものではないのでGitHubにパブリックリポジトリを作成します。

create react app

create react appを使ってアプリケーションのベースを作成します。
Typescriptを利用したい場合、yarn create react-app my-app --template typescriptのようにオプションで指定できます。
このオプションを指定しなかった状態からTypescriptを使うようにするのは地味にめんどくさいので忘れないようにしましょう。

なお、生成直後はサンプルコードがたくさん含まれているので修正していきましょう。
修正すべき箇所は以前記事にしたのでもしよかったらご覧ください。

ESLintなど開発をサポートするツール類

必須ではないですが、開発をサポートしてくれるツール類は開発効率を上げるために今回のような小さなアプリケーションであっても入れておくべきだと思います。
特にESLintは不適切な書き方やNGな書き方を機械的にチェックすることができ、記述ミスによるハマりを大幅に削減することができるので入れておきましょう。

https://eslint.org/

ただ、これらのライブラリを完全に理解してから入れようとすると無限に時間を使ってしまうので、とりあえずは先駆者の設定値を真似して最低限動くところまで構築して必要に応じて学習していくと良いと思います。
公式ホームページも読みやすく、ググれば様々なサンプルコードが出てきるので参考にして構築しましょう。
サンプルコードを参考にする時は1点気をつけるポイントがあります。それは記事の書かれた日付を確認することです。
ESLintなどの開発が活発なライブラリはどんどんアップデートされていくので、古い情報だと非推奨となった古い書き方であったり動作しない可能性があります。
必ず公式ホームページと合わせて読むようにしましょう。

今回はESLintの他にPrettierやReact Testing Libraryを入れて自動フォーマットや自動テストできるようにしました。
これらのアプリケーション機能に依存しない開発環境は別のアプリケーションでも使い回すことができるので1回作っておくと便利です。
私も以前に別のWebアプリケーションを作った時に一通り構築していたので、それを参考に古くなっている箇所をアップデートしつつ構築しました。

ESLintやtestを導入したら毎度手動でコマンド実行するのは手間なので、GitHub Actionsで自動実行するようにしておきましょう。
パブリックリポジトリであれば、GitHub　Actionsは無料で使えるので使わない手はないです。

今回はプルリクエストにPushするたびにbuild, eslint, prettier, testの4つをチェックするように設定しました。
細かい設定はGitHubをご覧ください。

Material UI

Material UIをインストールします。
基本的には公式サイトの手順に沿っていけばインストールできます。サンプルコードもあるのでスムーズに入れることができると思います。

Firebaseのプロジェクト作成

firebase consoleを開き、新しいプロジェクトを作成します。
画面上の手順に従っていけば簡単に作れます。

Firebase Hostingの初期設定

Firebase Hostingを開始します。Webページに記載されているとおりに進めれば簡単に設定できます。

機能開発

ここまでで開発環境とインフラ(デプロイ）は構築済みなので、あとは機能開発に専念することができます！!

裏目的に書いた使いたい技術を使いながら実装しました。

ブラウザの言語設定によって多言語対応したWebページを作ってみたい

サイトに登場する日本語部分(ヘッダーやコピーしたときのトースト)を多言語対応してみました。
ライブラリはreact-i18nextを使いました。Getting Startedに詳しく書かれているのでサクッと導入できました。

useContextを使ってみたい

ダークモードの状態を保持するためにuseContextを使いました。
下記記事を参考に、参照と更新のコンテキストを分割してみました。

localStorageを使ってみたい

ダークモードとfont-sizeの設定値をlocalStorageに保持して、次回アクセス時に利用するようにしました。
MDNに詳しく書かれており、ググればサンプルコードもたくさん出てくるのでサクッと実装できました。

READMEを整える

こちらは目的には書いてないのですが、せっかくリポジトリを作ったのであればREADMEをキレイにしておきましょう。
簡単な説明とサイトへのリンク、キャプチャや動画などを埋め込んでおくだけでそれっぽくなります。

まとめ

今回は裏目的に記載した通り技術の勉強を目的としていたのですが、機能開発してWebアプリケーション(今回はPXをREMの変換表)として稼働させるところまで開発しました。

実際、技術の勉強するだけであれば各ライブラリのGetting Startedなどをやるだけで達成することができます。
ただ、個人的には勉強目的であっても何か機能開発することも目的において実装した方が良いと思います。

最近のライブラリはGetting Startedなどが充実しており、その通りに実装するだけで最低限の環境を構築することができます。
サクッと動くものが作れるのでとても満足感が高くて身についたような気がするのですが、サンプルは必要最低限のことしかやっていないことが多く、いざ機能開発を行おうとしたときに応用が効かず手が動かなくなることが多いです。
機能開発を目的においていると、その部分は自分で考えて実装する必要がありGetting Startedの情報だけでは不足していることに気づくことができるのでオススメです！