見出し画像
Photo by sabamiso_k11

UnityエンジニアがReactでWebページを作って色々困った話

Saina

注意

本当にWeb開発初心者の記事です。
そういうことがあったんだな～くらいのテンションで読むのが丁度良いと思います。

モチベーション

  • ReactでWebアプリを作る予定なので、練習でReactを触っておきたい

  • 丁度良いので開発しているVJソフトウェアのWebページ&ドキュメントをかっこよくしたい(もとはGoogle Sites製)

TL;DR

ちょっとReactで1ページ作って、そこに楽にドキュメントを追加したい場合はDocusaurusが良さそう！

完成したものはこちら

Vite + React時代

まず触る

何も知らない状態だったのでまずはViteでReact + TypeScript + Tailwind CSSで作り始めました。
Web開発の練習くらいのノリで触っていて、大体のReact、Tailwind CSS雰囲気をつかんで、ほぼトップページのデザインは出来上がりました。

背景動画+ロゴを作った

GitHub Pagesでデプロイしたら別階層に飛べない問題が発生

トップページ(index.html)には飛べますが、トップページを経由せずに直接hoge.com/Testとかhoge.com/Test/Test2
みたいなリンクに飛ぶと404になるという問題にあたりました。

これはReact Routerというライブラリをルーティングに使用してSPAとしてデプロイしてたのが問題で、めっちゃ簡単にまとめると、SPAはトップページを起動してない状態ではうまくルーティングされないらしいです。(シングルページアプリケーションなのでそれはそうという感じもする)

参考：https://qiita.com/takuya0206/items/f284b5e68f48f1ebefae

一応対策としてはHash Routerという機能を使ったり(hoge.com/#/Test/Test2みたいにURLに#が付く)、一回404.htmlに飛ぶことを利用したハックがあるらしいのですが、

URLに#が付くのはなんか嫌なのでHash Routerは無し
ハックする方法ではhoge.com/Testまでは正常に動くのですが、hoge.com/Test/Test2みたいに2階層以上行くと結局404でエラーになってしまうみたいだったので諦めました

ちなみにCloudfalre Pagesでデプロイすると自動で上記のハックみたいなことをしてくれて、hoge.com/Testのように1階層までは正常に動くみたいです。
ただGitHub Pages + ハックと同じくhoge.com/Test/Test2みたいな2階層以上の場合はダメでした。

Gatsby.js時代

移植+ヘッダーとか作る

Gatsby.jsはReactベースの静的サイトジェネレーターというやつです。多分。
Next.jsも検討したのですが、静的サイトジェネレーター以外の機能があまりに多すぎるので学習コストを比較してGatsby.jsを選びました。

他のページに飛べない根本的な原因はSPAとして開発してたことで、そもそもWebページ、ドキュメントがSPAである必要はないので静的サイトジェネレーターはかなり性に合ってる感じがありました。Gatsby.jsは日本語の情報が少し少なかったですが使いやすくReactでちょっとかっこいい静的サイト作るにはかなり良さそ～という印象です。公式ドキュメントも結構充実してた印象。

コード自体はほぼ同じReact + TypeScript + Tailwind CSSで書けたので、軽く書き換えて移植して
追加でヘッダー、フッターを作ったり
レスポンシブ対応でハンバーガーメニューを作ったりしました

あと自動ビルドがめっちゃ簡単に出来たのでここからデプロイ先をGitHub PagesからCloudfalre Pagesに切り替えました。

ドキュメントの保守が現実的ではない問題が発生

結構色々作って、Gatsby.jsかなり良いな～という感じだったんですが
いざ本格的に中身を作っていくと、「ドキュメント作るの大変すぎるのでは…？」という恐ろしい事実に気づきました。
まぁ仮に一回きりで全部Reactでドキュメントを書ききるのはギリギリできると思いますが、今後の更新の事を考えると現実的ではないという結論になりました。

個人的にはドキュメントはマークダウン的な方法で簡単に追加、更新が出来るのが理想でした。

一応Gatsby.jsにはプラグインやテーマみたいなのがあって、ドキュメント用のテーマみたいなのもいくつかあったのですが、自分に合った感じのは見つからず、足踏み状態が続いてました。

ReactでイケてるWebページを作りつつ、簡単にドキュメントを作れる方法を探す

案①

トップページだけReact + ViteでSPAとして作って
ドキュメントはMkDocsみたいなツールで作成して別のドメインで公開する。

最悪これで行こうかなと思ってたんですが、ドキュメントが別サイトになるのはなんかコスパというか、元々持ってるドメインの文字数が長いのもあって微妙な感じでした。

案②

気合いでGatsby.jsで頑張る

気合いが足りませんでした。

Docusaurusと出会う

DocusaurusはReactベースの静的サイトジェネレーターです。
他と大きく違うところは、名前からわかるようにドキュメント作成に特化してます。あと名前がイケてて良い🦖
トップページはReactで作りつつ、ドキュメントやブログはマークダウンで作成出来るという柔軟性を持ってます。
あと細かなヘッダー、フッター、メニューとかは自動で良しなにしてくれて
本質の作成にだけ集中出来てかなり良いフレームワークです。

最終的に、Gatsby.jsで作ったものをDocusaurusに移植して結果以下のサイトが出来上がりました。

まとめ

Webページ開発って手段が沢山あって大変！
ちょっとReactの練習ついでにWebサイト更新しちゃうか～くらいのつもりが結構色々躓きました。
結果としてReact、Web開発の練習が出来たので楽しかったです。

自己紹介

Sainaと言います。普段はプリレンダVJ、ジェネVJ、ソフトウェア開発、Unity、シェーダーお絵描きなどをやります。
Twitter
https://twitter.com/SainaKey
ポートフォリオ
https://www.sainakey.com/


この記事が気に入ったらサポートをしてみませんか？