お久しぶりです。最近、少し本気で自分のサイトを整えてみました。使っているのはNext.jsで、フロントエンドは実務経験がゼロ、デザインセンスも昔からあまり自信がありません。

図工の授業は自分の絵が下手過ぎて毎回泣いたほどです。

でも、結果としては意外にも良い出来になっていると感じています。

最初の取り組みと課題

当初、自分のサイトをNext.jsで作成したとき、正直なところデザインやコードの品質にはあまり気を使っていませんでした。そもそも、当時はIT一年が終わったころ、フロントエンドなんて実務で一度も触ったことがないので、独学で培った勘と勘と勘とちょっとの経験だけが頼りです。

フロントエンドに関する経験も少なく、デザインセンスもイマイチだったので、サイトはシンプルに、というよりは無難に仕上げたつもりでした。

しかし、仕事でもgo言語（バックエンド）を触りまくって謎の地震がついたおかげで、「今ならフロントもかける気がする！」と勘違いをし取り組んでみました。

レスポンシブ対応に挑戦

最初に取り組んだのはレスポンシブデザインです。スマホやタブレットでも見やすいように、CSS(Tailwind CSS)を調整しレイアウトを整えました。これは本当に大変でしたが、達成感がありました。デザインの問題点を一つ一つクリアにしていく過程で、少しずつ「これが理想なんだ」と実感できるようになりました。

スマホ版

PC版

コードの修正と気づき

サイトを作成してからしばらく経ち、当時のコードを見直してみたのですが、その状態が本当にひどいものでした。まるでレビューをしているかのような気持ちで、複雑な気分になりました。最初はそれでも何とか動いていたのですが、やはり品質が低いため、多くの部分で修正が必要でした。

コードのクリーンアップは大変でしたが、それによってサイトのパフォーマンスが向上し、メンテナンス性も良くなりました。これもまた、意外な収穫でした。

コンポーネントの再利用、本当に大事。。。

バックエンドでも、オブジェクト指向やらでClassを継承してなるべく記述量を減らそうとしたりします。記述を減らすというより、似通ったものは共通化して一緒に使おうよ、というものですね。

これって、初心者の私は「動けばよかろう」なので重要視してなかったんですよね。。。。バックエンドはまあ確かに共通化しようと思えば、ある程度引数を無理すればすんなりできちゃいますが、そこまで大きな共通機能にぶち当たったことなく
恩恵を強く受け止めていませんでした。

ところが、フロントエンドは本当に顕著な気がします。ボタンだって、カードだって、サイト内で統一できてたほうが良いに決まってます。そう考えるとボタンなんてどのくらい再利用するんだよ、、、という話です。

go言語ばっかりやっていた私が、なぜかフロントエンドもかなり上達していたので、サクッとコンポーネント化できるようになっていたので、結構取り入れてみました。
微調整や修正がほんとに楽になりました。。。。

WordPressにしなかったことを後悔してない

サイトを作成する際は、wordpressが人気で、すごい力を発揮してくれます。

ブログ管理も簡単にできるし、何よりサイトのテンプレートが豊富で、PHPが触れれば、見た目もアレンジできるとか、、、？（私wordpress触ったことがなく、、、）

初めてサイトを作成するときにNextJsで一からやるという選択をしたとき、本当に後悔してました。サイトを作成するのに本当に苦労をしました。

ただ、今となっては、Nextjsで自由自在にサイトを操れ、アレンジもできるので、むしろ楽しいです。

結論

最初の状態から比べると、自分のサイトは格段に良くなりました。見た目も使い勝手も大幅に改善できたことは、自分にとって大きな成果です。デザインセンスが足りないと感じていた部分も、実際に取り組んでみることで、思ったよりも良い結果が出せたことに驚いています。

これからもサイトの改善を続けていきたいと思っています。同じように感じている方がいれば、一緒に頑張りましょう！自分の経験が誰かの役に立てば嬉しいです。