ようやくできた
2024/02/28
はじめに
こんにちは、ゆーすけです。ようやくできた～～～個人サイト！！
昨今の coins21 個人サイトブーム[1]に乗っかり、「僕も作ってみよう！」というとても希薄な動機で作り始めた yu-suke.me ですが、作り始めると意外と楽しく、2 月上旬に作り始めたのに気が付けばもう 3 月が目前に迫ってきています笑
まだまだ付け足したい機能や改修したい箇所はあるんですが、キリがないのでとりあえず一旦公開しよう！ということでこの記事を書いています。「Blog」というタブがあるのに中身スッカラカンなのは流石にアレなので……
自己紹介はAbout-meに譲るとして、この記事では軽く技術スタックの紹介や振り返りなんかをやっていこうと思います。
技術的なお話
このサイトは Next.js で作られています。Next.js を選んだ理由は
- 友達から React の本を借りて（貰って？）いた
- 何となくよく聞く名前だからとりあえず使ってみたかった
- Vue.js はバイト先でほんの少しだけ触っているので他のを使ってみたかった
みたいな感じです。
Vercel というサーバレス[2]なクラウドプラットフォームにデプロイしています。
最初は GitHub Pages でいいかな～って思ってたんですが、友人に強めに勧められたので試したらめちゃくちゃ便利で感動しています。
何が便利かというと、初期設定を済ませたら後はGitHub の master ブランチに merge すると自動的にデプロイしてくれるんです。さらに開発用のブランチを切り、そこに push するとプレビュー版が自動的にビルドされます。
このプレビュー版で「ビルドが正常に完了するか」「Web ページが意図しない挙動をしないか」などをチェックすることができるわけですね。
「ローカルでビルドしてチェックすればいいじゃん！」というご指摘もあると思うんですが、環境変数や.gitignore などの問題で「ローカルではビルドできる（動作する）が、Vercel ではビルドできない（動作しない）」みたいなことが何回かあったので、プレビュー版の存在意義は十分にあると感じました。
その他
他にも、
- Tailwind CSS：HTML タグ内に簡潔に CSS を記述できるようになるフレームワーク
- shadcn：UI コンポーネント置き場
- Rehype / Remark：Markdown -> HTML への変換マシーン
みたいなのを利用したりもしました。
こだわりポイント
いきなりなんですが、僕は他の Web サービスなんかを利用する際に結構 UX を気にします。
UX というと大げさですが、サービスの使いやすさ・見やすさに対して他の人よりもいくらか敏感、といったところでしょうか。
例えばこのサイトではフォントの色を「完全な真っ白」ではなく、少しだけ輝度を下げたものに変更しています。輝度を変更していない白色の文章は以下のような感じです。
この文だけちょっと目がぎらぎらしませんか？この文は輝度 100%の白色で書かれています。
他にも「外部へのリンクは必ず新しいタブで開く」とか、初心者ながらレスポンシブなデザインに挑戦したりもしました。
もちろん色々ツッコみどころはあると思うんですが、自分ができる範囲で、納得するまで UX に配慮して作ったという感じです。
大変だったところ
正直、CSS が一番大変でした。
コンテナが変な大きさになったり、子要素が親のコンテナを平気で飛び出したり、フレックスボックスが思った通りのレうアウトにならなかったり、などなど。
「どうして難しかったのか」を言語化するのがとても難しいんですが、とにかく「使いづらい言語（？）だなぁ」という風に感じました。
正直今もつかみ切れていない部分があり、「何となく書いたら意図通りのレイアウトになったけど、なんでそうなっているのか分かっていない」というような箇所がいくつか残っています笑
次に大変だったのが、コードをコピペしても動かないことが多々あったことです。
特に App Router と Pages Router [3] のコードの違いを理解するのに時間がかかりました。今では「あ、これ Pages Router のコードだからこのままだと多分動かないな」と何となく察せられる程度にはなったのですが……
詳しいことはもう忘れちゃいましたが、他にも様々な原因で「コピペで動かない」ということがありました。マジでつらかった。「フロントエンドは移り変わりが早い」というのを身をもって体験しました笑
作り終えてみて
やってよかったと思ってます。
前述したとおり自分は HTML・CSS・JavaScript の 3 点セットすら書いたことが無かった人間なので、その辺の知識も適宜補いつつ「モダンな Web 開発」なるものを一通り、浅く広く学べた感があってよかったです。
JSX 記法とか今まで知らなかったですし、SSR・CSR・SSG とか今までな～～んも意識せずに書いていたので勉強になりました。もちろん、な～～んも知らなかったせいでとても苦労するハメにはなりましたが……
ただ、開発中に悪戦苦闘する中で、1 つ気付いたことがあります。
それは、英語のドキュメントや記事を読むことの重要性です。
日本語で検索してみて「どれも僕の知りたいことに当てはまらない気がするなぁ」というとき、英語で検索してみると「あ、これか！」という記事（あるいは公式ドキュメント）が見つかることが多々ありました。フロントエンドはこの傾向が特に強い気がします。
「英語が大事」というのはもちろん知っていたことなんですが、今回の経験を通して身をもってこのことに気づけたことが一番の収穫だったかもしれません。
記念スクショ
「記念カキコ」みたいなノリで書いちゃいました。1 回作り上げたら満足してモチベを失う系の人間なのでどれくらいこのサイトが更新されるかは不明ですが、「最初はこんな感じだったよ～」みたいな画像があればいいなと思ったのでここに貼っておきます。これからどうなるんでしょうか？
ホーム
ブログ一覧
ダジャレコーナー
lapla.dev、slimalized.dev、kerusu.xyz など。みんなすごい。 ↩︎
これ、「サーバが存在しない」というわけではなく「開発者がサーバの存在を意識しなくてよい」という意味なんですよね。考えたら当たり前っちゃ当たり前なんですが、この言葉を最初に聞いたとき当時の僕は「どういうこと？？」となって gg ったのを覚えています。 ↩︎