Typescript + React、Firebase Hosting & Functions、Github GraphQL APIを使って自分のポートフォリオサイトを作った。
普段はBackendや認証基盤などを担当フロントエンドから離れているので、キャッチアップを兼ねて、2018/01現在、イマドキっぽいアーキテクチャでポートフォリオのサイトを作った。
ソースコードも公開しています。
構成は下記の様にした。
- Typescript 2.6 & React 16.0
- Firebase Hosting & Cloud Function、RealtimeDatabase
- Github API v4 (GraphQL with Apollo Client)
Typescript & React
今JavaScriptを利用するとしたらTypescript or Flowtypeになると思う。
Flowtypeは会社で使っている & 自作のOSSで利用した事があった。
http://teitei-tk.hatenablog.com/entry/2017/06/19/192432
今回はキャッチアップを兼ねてTypescriptを利用することにした。
ViewはReactかVueのどちらかを使うか迷ったが、ここはReactにした。大した理由はないが、やはり業務ではReactを利用する場面が多いのと、最近は業務でめっきりReactを触る機会がなくなり、Reactのコードを見ると思い出せない事があったので、慣れる事を兼ねて使うことにした。。
Vueに関してはリリースされた際に一度しか触っていないので何かの機会で触りたい。
言語はTypescriptなので一度トランスパイラをかまさないといけないが、ここは安定のWebpackとawesome-typescript-loaderを利用した。
別のトランスパイラが流行っても本質的にやることは特に変わらないのでWebpackが廃れようがその時に利用率が多いものを使うだけかなと思っている。
後はsingle quotationとか、セミコロンとかをチェックするのは人間の仕事ではないのでtslintとprettierに任せている。
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
Opinionated Code Formatterprettier.io
Prettierとは何かと言われると書いたコードでおかしなところがあれば補正してくれるLibraryです。Goに慣れている人に一言で説明すると、go fmtです。
tslintとprettierはやっていることが被っていて、そのままだとコンフリクトして死ぬのでtslint-config-prettierでtslintとprettierで両立させている。
Firebase Hosting & Cloud Function、RealtimeDatabase
サーバをどこに置くかを悩んだが、無料でかつ今後使いそうなものはなんだろうと色々と考えた結果、firebaseを使うことにした。
Hosting、Function、Databaseをすべて使っても無料枠内で収まるのでちょうど良い。
Typescript & React.jsで書いたコードをWebpackで吐いて、そのままHostingさせている。
今回は1枚のページなので良かったが、複数のページを利用する場合はreact-routerなりで構成しないといけない。
自分のアバターとか、名前とかをそのままハードコートしても良かったが、今回はCloudFunctionでGithubAPIを叩いて、その値をRealtimeDatabaseに1週間ほどキャッシュとして保存している。
ハマった点としてはSparkプラン(無料)ではFunction上で他のネットワークには接続が出来ないのでBlazeプラン(従量課金)に変更した。
従量課金だとクラウド破産して有り金を全部溶かして死ぬ可能性が微粒子レベルで存在するので、予算(1000JPY/1Month)以上を使わないように使用量に応じてメールでアラート機能をつけている。
Github API v4 (GraphQL with Apollo Client)
前述したが、自分の情報(インターネット上での名前、メールアドレス、アバターイメージ)などをハードコードしても良かったが、他のWebサービスのAPIを使って保存するようにした。
TwitterAPIを利用しても良かったが、Twitterはもはや生活の一部で変な事を書くことも多いので(お察しください)というのと、きちんとGraphQLを利用した機会が無かったのでGithubAPI v4 で自分の情報を利用するようにした。
GraphQLのクライアントライブラリとしてはApolloGraphql-Clientを利用した。
大したことはしていないが、なんとなくGraphQLの利用法などがわかっていい機会だったと思う。
CSS Framework
デザイン方面は完全に捨てている人間なのでデザインはCSS Frameworkを利用した。
今後bootstrapは下火になっていくだろうし、その実感を感じているのでbootstrapは利用していない。
他のCSSFrameworkは CSS Framework 2017 とかでググると死ぬほど出て来るので好き好みで良いと思う。
今回は本当に単純な1ページだけのページなので総量2.47kB gzippedのというfurtiveというものを使った。
CSS界隈は、もう数年以上離れていたが、最近はflexboxとかで気軽に出来ていいなーと小学生並みの感想が出た。
所感
去年に籍を入れて、今後プライベートでコードを書く機会が減っていくと想定していて、今のうちにもっとアウトレットを出したいなー。だけど自分でまとめているページが無いと考えていたので作成をしてみた。
年始に時間を確保して作成してみたが、思ったよりも時間がかかってしまった。(4日ほど)が、フロントエンドのキャッチアップという意味ではやりたいことは達成したと考えている。次のリソースは低レイヤーに振っていきたいので炭鉱夫としてやってみて、炭鉱を作りたい。
余談
寝ぼけながらコードを書いていた際にgithubのAPIToken(read only)をpushしてしまった後、起きたらgithubからお前のtoken，publicに公開されているから無効化しておいたわ。とのメールがきていて大変ありがたかった。眠いのを我慢してコードを書いても全然効率的ではない。（画像略
