ホームページ

自己紹介をしつつ、これまでの制作物や研究成果、趣味の旅行の記録を掲載していくホームページを作成しました。モチベーションとしては、CMSを導入したホームページを持っていなかったことと、冬の長期インターンから今までインプットしてきたWebフロントの知識・スキルをアウトプットする場が欲しかったことがあげられます。

開発のお話

せっかくホームページ作るなら未だに習得していない技術を盛り盛りに盛り込んでしまおうと思い、ホームページ作成を通じて習得したい技術を洗い出しました。

• webpack関連：これまでcreate-react-appを乱用していたため、中で起きていることがよくわかっていなかった。
• TypeScript：冬のインターン以来書く機会がなかったので、書ける環境をつくる所から体験してみたかった。
• Lint：研究室内チーム開発中、メンバーによって異なる書き方が1番気になってました。

また、個人のホームページにあまりお金はかけたくなかったので、サーバーは借りず、CMSにContentfulの無料枠、ホスティングサービスにNetlifyを利用しました（ドメイン取得したので年間1000円くらい？）。

使用技術

フロントエンド

• HTML/CSS
• TypeScript
• webpack
• React
  • marked
  • react-router
  • react-helmet
  • styled-components

その他

• Contentful
• Netlify

振り返り

• @fortawesome丸ごと突っ込んだらパフォーマンスが激落ちした
  • webpack-bundle-analyzerの存在を知り、パフォーマンス低下の原因を突き止められた
• API KEYやAccess Tokenを秘匿化したかった件
  • ソースコードをpublicにしたくて.envで管理してdotenv-webpackを使えばいけると思ったら、Netlify側でビルドエラーが起きた
  • Netlify側の設定もきちんとしてるのにどうして！と思ったら、インスタンス生成時にsystemvarsのプロパティをtrueにする必要があった。
• TypeScriptの所感
  • 型チェックつえー
  • 入力補完マジ便利！
  • Interfaceのおかげでコンポーネントにどんなpropsがいるのか見返すのが楽になった！しゅごい！
  • 品質やチーム開発が上がりそうだなと思った反面、開発速度が落ちてしまった（tsconfigの設定方法の理解に時間がかかった・型定義ファイルがないときの対処 etc.）んで個人で書く分にはそこまで必要性を感じないなというのが正直な感想です（単にTypeScriptに慣れていないせいか..）
• Contentful
  • 無料枠ではGraphQLを利用できないことに気づくのに丸1日かかった。書いてみたかったなGraphQL。
  • でも無料枠は5000レコード（4画像添付した記事を1000記事投稿可能）もあり、課金するまでもないのでGraphQLは別の機会に使ってみます。
• デザイン
  • コンポーネントを作成する度にデザイン志向が変わってしまい、全体の一貫性が取れていないような仕上がりになってしまった。
  • デザイナーは偉大な存在

また時間ができたら、この辺を実装していきたいです。

1. ページ遷移時にページトップにスクロールさせる
2. パンくずリストコンポーネントの追加
3. データ読み込み時のロード画面の挿入