見出し画像

デジタル庁のサイトがNext.jsからphpとjQueryに先祖返りしたわけではなかった

Zun-Beho

Xではデジタル庁のサイトがNext.jsからphpベースのCMSであるDrupalに変わったと話題です。wappalyzerというwebサイトやwebサービスのURLを入力すると使われている技術がわかるツールで調べてみたところ、引き続きNext.jsはつかわれていました。

こんなポストだらけですが、実際のwappalyzerでの調査結果はこちらです。

上記の検査結果のスクショも貼っときます。


デジタル庁のウェブサイトはNext.jsとphpの組み合わせ

デジタル庁のウェブサイトに関するWappalyzerの分析結果は興味深いです。結果によると、デジタル庁のウェブサイトは複数の技術を組み合わせて構築されているようです。

  • Static site generator: Next.js（バージョン13.4.1）を使用していることが示されています。Next.jsは、Reactベースのフレームワークで、高速なページ読み込みとSEO最適化を実現するための静的サイト生成の機能を提供します。

  • CMS: Drupalを使用。Drupalは柔軟性が高く、コンテンツ管理において強力な機能を提供するCMSです。

  • Programming languages: PHPとNode.jsが使用されていると報告されています。これらは、ウェブサイトのサーバーサイドとクライアントサイドの両方の開発に広く使用される言語です。

  • Web frameworks, UI frameworks, Web servers: こちらもNext.jsが使用されています。

  • PaaS (Platform as a Service): Amazon Web Services（AWS）が使用されています。AWSは、ウェブサービスのホスティングやスケーラビリティにおいて幅広い機能を提供します。

  • JavaScript frameworks, JavaScript libraries: ReactとjQueryが使われています。Reactはユーザーインターフェイスの構築に、jQueryはDOM操作やイベントハンドリングに使われることが多いです。

  • CDN (Content Delivery Network): Amazon CloudFrontとAmazon S3が使われています。これらはウェブコンテンツの高速配信を支援します。

  • Analytics: Google Analytics（GA4）が使用されており、サイトのトラフィックとユーザー行動の分析に役立てられています。

  • Miscellaneous: Open Graph（ソーシャルメディア統合用）、Webpack（モジュールバンドラー）、HTTP/2（ウェブプロトコル）が使用されています。

デジタル庁サイトのワークフローはこのようになる

Next.jsとDrupalを組み合わせてウェブサイトを構築する一般的なアプローチは以下のようになります。

  1. Next.jsでの静的HTMLの生成: Next.jsはReactを基盤としたフレームワークで、静的なHTMLファイルを生成することができます。このプロセスでは、ウェブサイトのデザインや構造を定義するためのHTMLやCSSがコンパイルされます。Next.jsを使用することで、モダンなフロントエンドの技術（例えば、インタラクティブなUI、効率的なルーティングなど）を活用しつつ、サイトの初期読み込み速度を向上させることができます。

  2. Drupalでの動的ページの生成: DrupalはPHPベースのCMSで、コンテンツ管理と動的ページ生成のために広く使用されています。Next.jsで生成された静的HTMLテンプレートをDrupalで活用することで、動的にコンテンツを生成し、更新することができます。Drupalは、コンテンツの追加や更新、ユーザー管理、セキュリティ機能など、ウェブサイトの運用に必要な多くの機能を提供します。

このように、Next.jsとDrupalを組み合わせることで、静的なHTMLの高速性と、Drupalのコンテンツ管理機能の柔軟性を兼ね備えたウェブサイトを構築することが可能になります。ウェブサイトの設計や構成によっては、これらの技術をさらにカスタマイズして、特定のニーズや要件に合わせたウェブサイトを実現できます。

なぜNode.jsベースのCMSを使わなかったのか

ウェブサイトの開発において、Static Site Generator（静的サイトジェネレーター）を使用してプロトタイプを作成し、その後PHPベースのCMS（コンテンツ管理システム）に移行するというアプローチは、いくつかの理由により有効です。

  1. 開発速度と初期プロトタイピング: 静的サイトジェネレーターは、迅速なプロトタイピングを可能にします。Next.jsのようなツールを使用すると、デザインや基本的な機能の概念を素早く実現し、プロジェクトのビジョンや機能要件を明確にすることができます。

  2. パフォーマンスと最適化: 静的サイトは高速で、SEO（検索エンジン最適化）に優れています。初期段階でこれらの要素を考慮に入れることで、最終的なウェブサイトのパフォーマンスとアクセシビリティを最適化することができます。

  3. フレキシブルなコンテンツ管理の導入: 静的サイトジェネレーターでプロトタイプを作成した後、DrupalのようなPHPベースのCMSに移行することで、より柔軟で強力なコンテンツ管理機能を導入できます。CMSを使用することで、非技術者でも容易にコンテンツを更新し、管理することができます。

  4. スケーラビリティと拡張性: プロジェクトの成長に伴って、より複雑な機能やカスタマイズが必要になる場合があります。PHPベースのCMSは拡張性が高く、複雑な機能や特定の要件を実現するための多くのプラグインやモジュールを提供しています。

  5. バックエンドの柔軟性: CMSを使用することで、データベース操作、ユーザー管理、セキュリティ対策など、バックエンドの機能をより詳細に制御できるようになります。これにより、ウェブサイトの安全性と効率性を高めることができます。

このアプローチは、開発の初期段階での迅速なプロトタイピングと、長期的な運用と管理のための柔軟性を両立させるために選ばれることが多いです。

省庁では古いシステムがまだまだ動いているためWinsows7やXPが健在なことが多い

デジタル庁サイトはこれからの政府統一サイトのプロトタイプとなる物なので、各省庁サイトの展開時にWinsows7やXPにあるブラウザ、要するにEdgeやChromeではなくInternet Explorerで閲覧できるサイトとしてjQueryが選ばれたと思われます。
Reactなど、jsがES6で書かれているとInternet Explorerでは作動しません。そのため古い技術である jQueryを使わざるおえなかったと思われます。

省庁で古いシステムが動いているのはアメリカも同じ

しかしながら、もともと政府統一サイトを作ろうと言うきっかけになった、イギリス政府のサイトのバックエンドはRuby on Railsのフレームワークで描かれており、言語はRubyに加えてTypeScriptでかかれている。きっとイギリスの省庁では古いOSでしか動かないシステムなどはすでに存在しないのだと思われます。

デジタル庁のフリー素材

一時、省庁あげて猫も杓子もいらすとやを利用していたことがありました。デジタル庁のフリー素材は中々SDGsの時代にあっている環境にやさしそうな絵柄ですのでどんどん利用しましょう。

2024年3月12日に気づいた人もいますが、本当早くwebデザインに目覚めてくださいよ。日本国民。UI/UXだけは民間より政府の方が先行ってます。

UIもFigmaで配布中

こちらで政府統一サイトのUIプレートがゲットできます。

Figmaで政府統一サイトのイラストをゲットしよう

これからはいらすとやの代わりに政府統一サイトのイラストをつかいましょう。ChatGPTの書くダサい絵とちがい、なんとも日本らしいノーブルさに好感が持てます。

ChatGPTに同じトンマナで描かせてみた

500年前の絵画でも著作権がーって言い出して描いてくれないGPT-4に「これデジタル庁で無料配布してるフリー素材だから著作権ないよ。こう言うテイストのイラスト描いてみて」って言ったら何とすんなり描いてくれました。政府とはコンセンサスが取れているようです。

Note投稿後2日ですがデジタル庁の件のみでjQueryがトレンドワードに

JQueryがXでトレンドワードになる事は多元に無いので皆さんのご意見を見て見るのもいいかもしれません。


この記事が気に入ったらサポートをしてみませんか？