こちらの記事で個人HPの作成を始めてから早2週間。さて、現在はと言うと
……このようになっております。
え？全然変わってないって？いやまぁ見た目はそうかもしれないですね……
でもこの2週間で技術的には色んなことをこのサイト弄繰り回して勉強したんよ。会社の先輩に見てもらって練習になりそうな課題をいくつかもらったのです！！
ってなわけでその課題をさっくり紹介。細かいこと言うとマジのフロントエンドの話になるからね。
①ヘッダーの作成
これは見た目でわかりやすいかも？画面のスクショでも上の方に青いバーが追加されてると思うけど、あれです。こいつの頑張ったポイントはね～、スクロールしてもついてくるようにしたんよ。
こんな感じでスクロールしても常に表示されるようにした。ちなみに「Next.js blog」のところをクリックするとこの表示しているページのトップに飛ぶ。
そして右側の人の顔アイコンを押すと……
まだほとんど情報がないプロフィール画面に。まぁ、今は機能追加がメインなので、詳細はこの後に詰めます。
②コンポーネント分け
これはちょっとコードの内容的な話。
画面に表示している要素をいくつか分けて、再利用できるようにする作業みたいな感じ。
これをやると一つのソースに書くコード量が減るので、後から管理がちょっと楽になる。
これに追加してMuiというコンポーネント管理がしやすくなるライブラリを追加してみた。CSSを簡単に直書きできるので、そこが便利かもしれない。
③SSR→CSRに変更
これは結構ガチで勉強用。サーバーに置いてあるデータを取ってくるタイミングを買えただけですね。
ただその方法を変えるのが結構むずくて……これはなかなか苦戦したよね。
具体的にはGetStaticPropsを使ってるところをUseEffect()で情報を取得できるように変更しました。UseEffect()でfetchするときに、バックエンドを用意していないとアクセスできないんだよね。Publicファイルに入れてた例外的にアクセスできるっぽいのでそれで解決。流石にバックエンド作るのは結構時間かかるから、後回しです。
④モーダルの作成
Home画面の下の方に「OPEN MODAL」という文字が追加されています。こいつをクリックすると……
画面の真ん中に吹き出しが出現！！
この吹き出しが「モーダル」というそうです。こいつはオンオフのスイッチになる変数を用意して、ボタンのクリックでオンオフが切り替わるようにしました。
①で使ってたMUIにモーダルをについてのやつもあったから思ったよりも簡単にできたね。それがなかったら結構時間がかかったかも。
終わりに
以上4つが追加した項目。結構いい勉強になったね。
もうちょいいろいろ勉強してから内容を詰めていこうと思います。
