WEB制作技術者が考えるべき、効率的なホームページの構成について「ページ遷移しないホームページを作ろう！」

独自の方法で、WEBサイトを効率化させている、弓削田です。 ボクは、フレームワークを使いません。 プログラム言語は、ネイティブが一番使いやすいんですよね。 と言いながら自分で使いやすいライブラリを作って、それを使いまわしている、 他のエンジニアがいやがりがちな開発を行うエンジニアなんですが、 でも、実はライブラリを使っているエンジニアには、できない事をたくさん知っているし、 組み合わせることでしかwebシステムを組み立てられないというエンジニアを数多く見てきたという事もあり、 エンジニアたるもの・・・という思考を強く持ってしまったというのも、自分のこうした思考構成になっています。 そして、今回は、ホームページ制作を始めたとある初心者エンジニアの人から質問された内容をネタにしてみたいと想います。

質問内容

「jQueryを使って、ホームページで今現在表示しているページ以外のページ（HTML）から、特定のDOM（エレメント）を持ってくることはできるのか？」 これが質問の内容です。 彼は一体何がしたいんでしょうか？ この文面だけしか送られてこなかったので、真意はわかりませんが、おそらく複数あるホームページのHTMLファイルで、同じ記述をする部分を、１箇所にまとめて、それらを読み込むことで効率的に管理したいんだと想います。 例えば、ホームページには、ヘッダエリアとフッタエリアは、どのページでもほぼ同じ内容になっていて、サイトに変更があった場合、 すべてのページを修正していくような運用管理が発生しますが、１箇所で管理されていれば、ミスもトラブルも少ないということは、分かりますね。 これを実行するために、多くの人がwordpressを使ったり、フレームワークを使うわけですが、 実はこれ、僕が以前書いたブログで、似たような事を静的ページ内でjavascriptだけを使って行った経緯を残していました。 HTML静的ページで部分的な別ファイルのソースを読み込む方法 このブログでは、jQueryは使っておらず、独自で書いたコードのみで動かしているんですが、 結果的に、この方式で作られたwebサイトは、読み込みが非常に高速に行える上、非常に管理しやすい構成が出来上がりました。 クソ重い、フレームワークを使い続けている人は、おそらくこうしたところまで、思考が回っていないんでしょうね。

技術的思考

上記の僕の過去に書いたブログには、ホームページの共通部分のパーツを別HTMLとしておいておき、それを読み込むことで実現していたんですが、 実はそれ以上に重要なポイントとして、"ページ遷移を行わない"というやり方が非常に効率的なwebサイトが作れるということが分かりました。 一般的にホームページは、同じサイト内でリンクしても、ページ読み込みのたびにhtmlを読み込んで、それに付随するjavascriptファイルやcssファイル、画像などを読み込んでしまうため、 トラフィックもセッションも無駄に数多く発生してしまいます。 それらを限りなく数を少なくして、圧縮化して、軽減させることはできますが、 "サイト内で同じファイルを読み込むのは１回のみ" という風にすると、同じファイルを何度も読み込む通常のサイトよりも、効率がいいと言うことは理解できますよね？ 実はこんな簡単な構成を実現できているwebサイトって、本当に少ないようですね。 実はこのやり方は、前述したパーツを読み込むという思考の真逆のやり方で、変更するコンテンツ部分をajaxで読み込むというやり方になります。 実はこうするだけで、ページの読み込み速度はびっくりするぐらい早くなり、サックサクのwebサイトが出来上がります。 このやり方で、苦労した点は、すべてのページで、なるべく同じjavascriptモジュールを使うという事と、 限りなく同じ構成にするという点です。 構成が違うページが１つでもあると、その都度読み込み直さなければいけなくなるため、非効率になってしまいます。 あと、やってみるとわかるんですが、javascriptの扱いが少し難しくなります。 scriptタグに書かれたjavascriptは、少しテクニックを使って実行してあげなければいけないし、お問い合わせページのようなcgiと組み合わせるページで、苦労する点も多いでしょう。 でも、そうした苦労に見合う結果が得られるでしょう。 頑張れ！初心者エンジニア！