JavaScript で、HTML 構成を変更せよ 03

さて。

もっと目に見えて変更される方がわかりやすいか…。
簡単に記述してわかる、やったら jQuery になるんやけど。とりあえず、１つ載せて、その後考えよか。
あ、jQuery で、て書いたから、以下の script を使う時は、head 内に jQuery ロードさせてね。

一番、使えるのか？　と最近思った、ヘッダーとか、フッターのメニュー系。複数ページで使うのに、まだ20行とか30行、挙句に PC 用とスマホ用、直書きしてんの？　って思ったから、ね。
メニューに修正入った時、どーすんの？　DW とか、複数ファイルに渡って一括置換対応するエディタで置換するん？　それ、共通部分を、別の更新作業とかで、１箇所でも文字違ったり、スペース・改行、入ったりしたら、置換で除外されて、漏れるんやで？　わかっててやってる？　ページ増えてって、修正 100ページとかなったら、修正できてるか 100ページ確認するんけ？　てなったから。
20年前の作りやな、ココ（4月からの勤務先…）は。。。

HTML ソースの例（コメントアウト部分は、好き好きで）

<!-- SP Menu -->
<ul class="drawer-menu"><!-- jsincl_menu -->
</ul>
<!-- /SP Menu -->

JavaScript ソース　例１

<script><!--このファイル内『.drawer-menu』内に、外部ファイル jsincl_menu-sp.html を丸ごと .load で読み込む
       $('.drawer-menu').load('jsincl_menu-sp.html);
//--></script>

という感じで。
読み込みファイルは、html でもいいし、ihtml とか dat とか好きに変えても OK。直接アクセスされても大丈夫なように、html 以外にしておく方が良いかも。
※１つ、めんどくせー事実。Firefox の開発ツールで確認した場合、htaccess で ihtml だの dat を、text/html にしてないと、読み込んで表示までしてるくせに、XML パースエラーとか吐きやがります。気になるようだったら、htaccess を書くか、別拡張子を諦めて、html か htm で置くようにしましょう。

JavaScript ソース　例２
上の、.load とは順が逆になるけど、分離された形式で理解するほうがわかりやすい、って場合には↓

<script><!--//.load と読み込み・読み込み先の位置が逆
$.get('/js/jsincl_menu-sp.html,function(incldata) {//外部ファイル /js/jsincl_menu-sp.html を .get で取得し、incldata に格納。このファイル内の『.drawer-menu』内に incldata の内容を HTML で上書きする
       $('.drawer-menu').html(incldata);
});
//--></script>

という、スクリプト自体は長くなるけど、場所や JS の動作としては、理解しやすいかもしれない。

これが、まずは共通部分を１つの外部ファイルにして、指定した class や id の場所に、マルっと読み込んでしまう、というパターン。
PHP の、include と、同じ感じ、と使いやすいかもしれない。
修正が入った時には、上記ソースで言えば「jsincl_menu-sp.html」を修正すれば、この読み込み利用のページ全てが更新される、ということ。
100ページあっても、１ファイル修正すれば、100ページを確認する必要は無い。

置換するのも、やったら瞬間やん、って言うヤツが居るかもしれんけどな。

ぢゃぁ、その置換設定、いちいち保存してあるんけ？　保存してあったとして、
・置換設定して、置換するファイル 100個指定するん？
・もしくは、置換するファイルだけ一旦どっかフォルダに選別してコピって、一括置換して
・ファイル位置戻すとかして、置換したページを 100個テストアップ（FTP どんだけかかるん？　ヲマエとこの回線速度、絶対速いか？）して、全ページ確認
って、何分かかるん？
これ、メニューに１文字修正入っても、やるんやで？

頭、どーかしてるぜʅ（◞‿◟）ʃ

HTML で、まとめて書いたら

<!-- SP Menu --><ul class="drawer-menu"><!-- jsincl_menu -->
</ul><!-- /SP Menu -->
<script><!--
       $('.drawer-menu').load('jsincl_menu-sp.html);
//--></script>

って、20行か30行スマホ用のメニュー書いてたとしても、HTML 側は 5行になるわけ。HTML 自体の読み込みは、早くなるわけよ。
で、この差し込み位置の class が存在したら、スグ下で JS 即時発動で書いておけば、上から HTML 読み込まれていって、ココを通過したら、スグに差し込みファイルが画面上には表示される状態になるわけよ。
/body に行き着くより早くに、だ。

スマホの携帯回線で、やんわり遅めに読み込まれて行くのに、function とか、window.addEventListener('load', function() とか、後から読み込む function にまとめて記述してあったら、スマホで使うメニューやのに、全然表示出てけーへんやんけ！　って、離脱される原因にもなりかねんからね。
よぉ考えてから作ってや。

で、たぶん、HTML 側を気にして作ってる人が居たら、ul が、li 持たずに存在してる HTML ファイル、になったら、ファイル内だけを HTML チェッカーかけたら、エラー出るやん(T . T)って思うかもね。
まぁ、半分正解。そう思えたら、次に進められる。
でも、きょうび、HTML ファイルは 場合によっては一部が PHP 差し込まれてたり、JS とセットで成り立ってる前提、と言う場合が多いから、このままでも、HTML 的に間違いではない。
チェッカーで、エラーとか警告吐いてても「知ってるから」って無視して OKやで。