blog.tawa.me

東京から福岡移住したWeb開発の人のブログ。適当に何でも置きます。

ReactとFirebase Hostingで雑に自分のサイトを作ってみた

f:id:tawachan39:20190607091214j:plain

ちょっと前にReactとFirebase Hostingで雑に自分のサイトを作ってみたのでそのことをメモしておく。

自分のサイトを作った経緯

自分のプロフィール的なページが欲しかった

雑な話ではあるが、自分の各サービスのアカウントへのリンクがあるだけの簡単な一枚ページがあると便利だなと思っていた。

あとなんかみんな自分のページなんか持ってたりするし、単純に僕もほしいなと思ったのもある。

自分の開発を雑に出す場所が欲しかった

あと、週末になんとも言えない雑なコードを書いて何かを作るのだけれど、出す先もなくお蔵入りすることが多々あった。

あえて単体でデプロイするほどのものでもないし、わざわざ人に教えるような代物でもないものばかりなのでそれはそうなのである。

でも自分のページがあってその下にとりあえずおいておくくらいなら気楽かなと思っていたので、ゆくゆく雑な機能を置く場所にしたいという目論見があった。

なので、外部サービスではなくミニマルで自分で作ることにした。

作ったサイト

結局こんな感じに落ち着いた。

f:id:tawachan39:20190102012118p:plain
デザインセンスのなさには目を瞑ってほしい...。

https://tawa.me

いい感じにはしたいのだけれど、僕にはこれが限界だった。

写真を取るのが趣味なので、過去の写真を乗っけとけば見栄えするだろうという雑な発想。

技術構成

React

環境は以下を参考にして作った。

勉強も兼ねて自分でwebpackが見れた方が良いだろうなと思ったからである。

React & Webpack · TypeScript

コマンド一発でもできるはず

ミニマルでReactを動かすならcreate-react-app 一発で作るのが楽かとは思う。

create-react-app my-app --scripts-version=react-scripts-ts とオプションをつければTypeScriptにもできる。

github.com

ただ今は公式がTypeScriptに対応して(?)DEPRECATEDになっているので公式を参考にすればできると思う。

facebook.github.io

Firebase Hosting

静的ファイルをデプロイできるGoogleのホスティングサービス。

firebase init をして firebase deploy をすれば雑に世に出せてしまうので重宝している。

Firebaseのサービス郡には他に、AuthenticationやRealtime Databaseもあるのでとても便利。

firebase.google.com

細かなこだわり

ルーティングを入れる

このあたりを参考にしてReact Routerを導入。

qiita.com

当時は他にページがなかったので全く意味がなかったがこの前ようやくゴミ機能をデプロイしたのでようやく役立った。

https://tawa.me/message

ただ今ページごとにhtmlのメタデータを変えていないので対応したOGPが出せていない。

いい感じにSSRもしたいなとは思っているが、どうしたら良いだろうか。

tslintとprettierを整える

今会社でやっているReact Nativeのプロジェクトがtslintとprettierで基本全て自動で整えてくれるようにしている。

これに慣れてしまって、自動で直してくれない状態でコードを書くのが気持ち悪かったので導入。

このあたりを参考にさせてもらった。

qiita.com

まとめ

雑なページをさっと作るにはかなり楽な構成だったと思っている。

ReactやFirebaseのおかげで開発者はほぼ何もせずにサイトが作れるのは本当にありがたい。