単純な静的 Web サイトを (オーバー) エンジニアリングする方法

ちょうど 1 年ほど前、私は大学の研究開発グループの 1 つで新しい Web サイトを開発するという任務を与えられました。彼らの古い Web サイトは jQuery テンプレート上に構築されており、一般に保守が困難でした。それまで約 1 年間ユーザー インターフェイスを構築してきたので、より良い Web サイトを設計するのに必要な素質はあると思っていました…それは間違いでした!

XKCD 974: 一般的な問題

それ以前に私が取り組んでいたプロジェクトはすべて React.js を使用しており、Next.js を使用するものと使用しないものがありました。よく言われるように、「ハンマーしか持っていないなら、すべてが釘に見える」。そこで私は、シンプルな静的 Web サイトを構築するためにこれらのテクノロジーを選択しました。

今にして思えば、最初からこれがうまく終わらないことは明らかでした。データ駆動型コンテンツを使用して高度にインタラクティブで動的なユーザー インターフェイスを構築したい場合、実際、React.js は非常に優れています。 Next.js は、サーバー側のレンダリング、ルーティングを提供し、(とりわけ) パフォーマンスの最適化に役立つ優れた付随フレームワークです。ただし、私が構築した Web サイトは静的であり、これらの機能のほとんどを活用できませんでした。確かに、React.js と Next.js を使用して構築することは可能であり、実際にそうなりましたが、コストはどれくらいかかるのでしょうか?

前述のツールはかなり複雑です。彼らを使って Web サイトを構築するには、彼らの詳細を知る必要があります。マークアップとスタイルを書いて終わりというわけにはいきません。これらは React の機能コンポーネントとフックのパラダイム内で記述し、コンポーネントベースのアーキテクチャに準拠し、プロップとコンテキストを介したデータ フローを処理する必要があるからです…これがすべてです。さらに多くのコード行を記述することになります。

もちろん、それ自体は問題ではありません。マークアップとスタイルだけではプロジェクトの要件を満たすことが不可能な場合があり、既製のソリューションを使用する代わりに独自の JavaScript コードを記述して車輪の再発明に時間を浪費する可能性があります。しかし、このような複雑さを追加せずに要件を満たすことができるのであれば、そうするのが賢明です。そうしないと、過剰なエンジニアリングを行って、本来よりも維持するのがはるかに困難な (そしてコストがかかる) プロジェクトになってしまいます。

こうして私たちはウェブサイトを一周することができました。古いものはメンテナンスが難しいため、交換する必要がありました。レパートリーが限られている若いソフトウェア エンジニアの才能のおかげで、新しいバージョンも同じ状況、実際にはさらに悪い状況に陥っています。今すぐ新しいウェブサイトが必要だと思います。現在のコードベースを破棄し、HTML と CSS 以外の要素を最小限に抑えて再構築する予定です。おそらく静的ウェブサイトジェネレーターを検討してみます。

以上が単純な静的 Web サイトを (オーバー) エンジニアリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。