この度ブログをリニューアルしました。

そこで今回はブログをリニューアルする上で挑戦したこと、大変だったこと、作り終えて学んだことなどをまとめたいと思います。

今プログラミングを学ばれている方や何か目標に向かって努力している方に読んで欲しいです。

ブログリニューアルについて

今回ブログをリニューアルした目的としては自分を知ってもらえるサイトにするためです。

これまでのブログはTOPページの記事一覧とその詳細ページだけでした。

そのため、どんな人がこの記事を書いているのか分からないブログとなっていました。

今後は情報発信にも力を入れていきたいと思い、リニューアルすることを企画しました。

今回追加したページは以下となります。

• 自己紹介ページ
• お問い合わせページ
• プライバシーポリシーページ

利用した技術

旧ブログで利用していた技術は以下になります。

• フロント：Next.js(React)/TypeScript
• バック：WordPress Rest API
• サーバー：Firebase
• デザイン：Adobe XD

当時構築した際はReactもTypeScriptあまり触ったことはなかったですし、WordPressにAPIがあることすら知りませんでした。また、デザインの知識もなくXDも初めて触りました。

そして、新ブログでは基礎的な部分はそのままに新たに以下の技術を取り入れてみました。

• デザイン：Figma
• サーバー：Vercel、AWS Lambda、Amazon SES

XDからFigmaに変えた理由は、XDが有料化してしまったからです。一方で、最近日本語対応されたFigmaが話題となっていたため勉強会にも参加し、使ってみようとなりました。実際Figmaを使ってみた感想としてはとてもわかりやすく、すぐに使えるようになりました。XDが出来る方ならFigmaもすぐに使えるようになると思います。

ホスティングサーバーは今回『Vercel』を利用しました。

VercelはNext.jsを開発している会社が運営しており、Next.jsととても相性が良く無料で簡単にデプロイができるため利用してみました。

また、今回お問い合わせ機能を追加したため、何かしらバックエンドの処理が必要になるのですが、今回は簡易的にバックエンド処理できるAWS Lambdaを利用しました。同時にメール処理にはAmazon SESを利用してメールを送信しています。

上記の技術も普段ほぼ触ることのない技術で、制作前は新しい技術にワクワクしていました。

しかし、実際に触ってみると分からないことだらけ。理解に時間がかかりますし、ハマったことも数多く。ホスティングだけで休日1日が終わったこともありました。

ただそのお陰で、技術への理解が深まりました。

既存技術の理解も深まる

初めてブログを構築した当初はNext.jsもTypeScript分からなかったため、どっちがどっちなのかも分からず何となく作っていました。

ですが今回は体系的に勉強して作ろうということでNext.js/TypeScriptの本を買ったり、Youtubeで動画を見て勉強をしながら作成し、ある程度まで理解できるようになってきました。

特にNext.jsではSSR(サーバーサイドレンダリング)、SSG(静的サイト生成)といった機能があり、ReactのCSR(クライアントサイドレンダリング)と合わせて使い分けもイメージできるようになってきました。

また、Reactの理解に重要なReact Hookについても使用する機会があり、勉強できたのは大きかったかと思います。

作り終えて学んだこと

さて、ここまで技術的なばかり話をしてきましたが、今回ブログを作成して感じたことは、「何かを作るには日々努力を積み重ねれば完成する」ということです。

何か作りたい目標があった時に、すぐに理想のものは出来上がりません。

今回、未経験の技術を色々使ってきましたが、新しい事を学ぶことはワクワクしますが実際使って作るのは大変です。

ですが、１日１日少しずつでも進めていくと着実にゴール(完成)には近づきます。

まだまだ磨くべき部分はありますが、一旦完成するとやはり達成感がありますね！

まとめ

今回もいくつか新しい技術を使ってブログを拡張することができました。

慣れた技術を使えば簡単にできますが、それではあまり学びはありません。

エンジニアとして、これからも新しい技術への好奇心は常に持って学び続け、粘り強く、そして楽しんで制作していければ良いなと思います！！

今回紹介した技術、皆さんも興味があれば使ってみてください。

現在進行中で何かを制作されている方は完成目指して最後まで頑張ってください！

前回のブログ制作について

前回のブログ制作についての記事はこちらになります。

興味がある方は読んでいただけると嬉しいです。