今月の更新だよん。こういう記事は普通Qiitaに投稿するけど、制作物の関係でこっちに書くことにする。
仕事でフロントばかり触っているので、入社１年目でVue、React、Angularを全部一通り触ることになってる。実際バリバリ書いてるのはAngularで、VueとReactは半分研修で書いただけだけど。
で、まあ個人開発でも使ってみるかってことで一番使い勝手の良さそうなReactで簡単なSPAを作ってみた。最近はTypeScriptしか書けん。
単純なものでアイドルのプロフィールとミリシタに実装されているカードを閲覧できるサイト。ちなみにPWAに対応しているので、インストールすれば単体アプリのように起動することが可能、あんまり意味ないけど。あと、今回CSSフレームワークを何も入れなかった関係でレスポンシブデザインにするのが面倒だったので、横768px以上のデバイスでないと表示されません。スマホから見に行っても基本的に見れないはず。(横向きにすれば見れるかも)
このリポジトリは半分雛形のようなもので、以下の環境で開発できるようになってる。
- 言語はTypeScript
- スタイルはSCSSを利用、Scope化済み
- PWAに対応
- GitHubのmasterブランチにPushすれば自動的にgh-pagesブランチにデプロイされる
結構簡単にできることだけど、すぐ忘れてしまうので一応メモがてらにこの環境をどの順番で構築するかを書いておこうかなと。仕事でも毎日学んだことを日報として書いていたりするのだ。偉い！
...これ作ったの、先週の4連休だけど。
開発環境はWSL2上のUbuntu 18.04で、ここにVS CodeのRemote Developmentで接続して開発してた。めっちゃ便利ね、これ。
React環境構築
大前提としてnodejsとyarnは入ってるものとする。nodejsはv14.6.0を使ったよ。若干古いのは気にしない。
Reactのアプリケーションテンプレートはcreate-react-appという便利なコマンドがあるのでこれで作成する。
npx create-react-app {プロジェクト名} --template typescript
これでTypeScriptを使ったテンプレートが出来上がる。超簡単。ちなみにこの時点でPWAに対応してる。テストも入ってる。消したけど。
SCSSを使えるようにする
ただ、このままだとCSSを書くことになる。仕事では基本SCSSしか書いてないので、こっちで書けるようにしたい。コマンドを叩くだけで対応可能。
yarn add node-sass
あとはすでにあるcssファイルの拡張子をscssに変えれば利用できるようになる。tsxファイル内にも書いてあるはずなので、忘れずに変更しておく。
これでyarn startを叩けば、サンプルページが表示されるはず。やった！
Scoped CSSを利用できるようにする
ただ、このまま書いていくとコンポーネントを分けていたとしても同じclass名を利用するとスタイルがぶつかる。これは非常に不便。
ということでScoped CSSが使えるようにする。
まず、cracoというシステムを利用するのでこれを突っ込む。
Readmeに書いてある通りに進めればOK。craco.config.jsは作るだけで中身は現時点では空っぽで大丈夫。
yarn add craco-plugin-scoped-css --dev
なぜかこれだけdevDependenciesに入ることになるけど、まあいいでしょ。
次にcraco.config.jsにプラグインを使うように記述。
module.exports = {
plugins: [
{
plugin: require('craco-plugin-scoped-css')
}
]
}
これであとは作成するscssファイルの命名を[name].scoped.scssにすれば自動でScoped CSSにしてくれる。便利。この命名規則はconfigで変更できるらしい。
ハマるとしたらpackage.jsonの書き換えなので、忘れないように。あと、tsx内でのimport文もちゃんとscoped付きにすること。
ここまででいい感じに開発できるようになった。あとはデプロイできるようにしよう。
GitHub Actionsを使ってGitHub Pagesにデプロイ
これに一番引っかかった。書くのは面倒なので、Naoのリポジトリから.githubディレクトリごとコピーするのが簡単かも。
基本的にこれに従って作っていったけど、Naoに入ってるbuild.ymlはnodejsのバージョンを上げていたり、peaceiris/actions-gh-pagesをv3にしていたりする。最初の公開鍵と秘密鍵の登録だけすればそのまま使えるはず。
忘れてはいけないのがpackage.jsonにhomepageで公開場所のURLを書いておくこと。これをやらないと内部での参照がすべて/になるので、きちんと認識されない。サブドメインとかでルート直下に配置するならいいけど、リポジトリのGitHub Pagesみたいにパスがルートじゃない場所に配置される場合は記載しておかないと404になっちゃう。これにめっちゃハマった。
ビルドが完了すると自動的にgh-pagesブランチが出来ているので、SettingsでSourceに指定すれば公開される。若干反映に時間がかかるので、Pushしてから5分ぐらい経ってから見るとよい。Actionsも結構時間かかるし。
てか、本当はこんなことしなくてもgh-pagesコマンドを入れたら公開できるんですけどね。ただ単にActionsがどんな感じなのか触ってみたかっただけです。Pushしただけでデプロイしてくれるの便利だし。
珍しくまともな記事を書いた気がする。仕事ちゃんとやってるし、学んだことも多いぞってことで。
ではでは～。
