新人さんの育成用に取っておいた自社サイトのリニューアル
8月頃から2名程、新人さんの育成に取り組んでいましたが、いずれの新人さんも2週間でギブアップという結果になっていて残念な気持ちが強いのですが、新人さんの育成用にと思って取っておいた自社サイトも自分で組んでしまおうという気持ちになってきましたので、実際に自分で実装してみました。
実装を始めたのは、7日（土）の午後からですが、7日、8日、9日と3日間かけて、実装が完了しまして、公開まで持って行くことができました。新人さんの育成用に実装してもらっている時は、2週間とか平気で待つのですが、自分自身で実装すると信じられないくらい早く作業が終わるので、新人さんのスピードに慣れてくると変な気持ちになってきます。
三重県四日市市のソフトウェア開発会社 フレアーズ合同会社：業務・新規事業のDX推進支援
実装技術
Next.js 13（App Router）を触ってみた
今回はデータベースを使用せずに、フロントエンドのみの構成で組みました。フロントエンドのフレームワークには、Next.js を利用しました。React 自体は触ったことがあったので、基本的な実装方法は理解していましたが、Next.js ならではの要素、更には Next.js 13 から App Router という新しい仕組みが導入されたとのことで、ウェブの情報が少し古くなっていたこともあって、調査に少し手間取りましたが、無事に一通りの実装を終えることができました。
流石にディファクトスタンダードと呼べるに相応しいフレームワークで、ウェブ上の情報充実度はしっかりしていますね。フロントエンドの実装技術としては、ウェブサイト用のSSG用途で Astro を試してみたいと考えているので、ウェブサイトの構築案件があれば、次は Astro で実装してみようと思います。
出来栄えはそこそこだが、何よりも高速
アニメーションの実装などは含まれていないので、出来栄えはそこそこですが、何よりも高速に動作するところが気に入っています。Next.js はプリローディングもデフォルトで実装されているらしく、ヘッダーにすべてのリンクが含まれているので常時全てのページを読み込んで使える状態にしていると思われるのですが、ページ遷移のたびにHTTTPのリクエストとレスポンスが発生しないため非常に高速に動作します。
Page Speed Insight の結果は、デスクトップが99点、モバイルが96点でした。何も対策していないにもかかわらずこの成績は非常に優秀と言えるでしょう。まぁでも、APIでの通信も何もないし、データベースからのレスポンスなども全くない静的なページなので、当然のことかなとも思います。
ここ6年間はWordPressに使ってきた開発生活だったので、WordPressの便利さは十分に理解をして幾度も助けられてきましたが、Next.js を用いたSSGの高速さを体感してしまうと、もう元には戻れないと感じました。素のHTMLを書くよりはプロジェクト全体としてフレームワークでラッピングできて管理できる上で、超高速に動作して、画面遷移もSPAのような動作が可能となると、もうNext.js 以外を選択する必要性を感じられなくなりました。後は、バックエンドにCMSを使用したいケースに合わせて、どのようなサービス提供が可能かを少し考えていく必要性があるように思いますので、今後の課題事項として認識したいと思います。
耐用年数2年の想定で作ったので活躍してもらおう
今回のウェブサイトは今後2年間くらいは使い続けられる想定で作成したサイトデザインと内容なので、当分の間は活躍してもらおうと思います。今回実装から外したブログのコンテンツなどもあるのですが、ブログのコンテンツ自体もファイルを直接編集する形で特に不足を感じていないので、CMSを構築するメリットってどこにあるんだっけ？と少し感じていますね。
今後2年間は、業務システムを詰め込んだ自社の再利用ソフトウェアリソースの集合体である共通業務基盤の構築も予定していますし、今回の事業再構築補助金の対象になっている音楽教室支援事業の結果制作予定の音楽関連のプラットフォームである「音楽のある暮らし。」の構築も予定しています。
Cloudflareでの中小企業支援も本格化させたい
「音楽のある暮らし。」では、クラウド基盤には、Cloudflareを採用予定にしていて、コストを意識した中小企業向けのソリューションを構築するための布石にする予定にしています。AWSは費用が結構高額になるケースが多いので、エンタープライズ向けをどうしても意識してしまいますが、Cloudflareの料金体系なら中小企業にフィットするのではないかと考えています。今回のプロジェクトでの開発経験を経て、Cloudflareを用いた開発に力を入れていけるようにしたいと思います。「FLARES」だけにCloud「flare」を使いこなしたいと思う今日この頃でした。