Q&A
「インクルードファイル」とはなんのことでしょうか。
もし素のJavaScript＋HTMLなのではなく、何かしらのフレームワークなどを使っているのであれば、そちらについても説明いただければと思います。
インクルードファイルを作成して、計3ページにそのファイルを追加します。
その各ページからのインクルードファイルのリンク先を違うとこにとばしたいのですが、javascriptなどでそれが可能なのでしょうか？
※ちなみに
・各ページにリンク先は計10個ほどあります。
・javascript初心者です。
失礼しました。
インクルードファイルの中身は、html＋cssの静的ページです。
boxを並べていて、その1つ１つにリンク先がある感じです。
通常のHTMLには「インクルード」の機能はありません。
iframeで埋め込んでいるのでしょうか？それとも、JavaScriptでインクルードを実現しているのでしょうか？
共通で使用したいファイルがありまして、そちらを下記のように
違うhtmlに埋め込んでいます。
<!--#include file="/inc/inc_○○○○.html" -->
一般的なHTMLとしては、それは「単なるコメント」にしかなりません。
何かサーバサイドでの仕組みがあるのでしょうか、それともJavaScriptで実行しているのでしょうか？
回答2件
0
miyabi-sunさんではVueやReactなどを紹介されていますが私の方では、jQueryを用いたAjax通信を行うことによる手法をお教えします。
まず、Ajaxの説明に関してWikiより引用させていただきます。
Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。
なんだか難しいこと書いていますが、要はページをリロードすることなくサーバーにリクエストを送り、ページに変更を加えることができる技術です。
Twitterやteratailなど、リロードしなくても新着の通知が来ますよね？それらはAjaxを使って構築されています。
Ajax自体は広く普及しているのでそこまで深く対応状況を気にする必要はありません。
では、jQueryです。
jQueryはJSフレームワークの中でも最も広く用いられていると言っても過言ではないフレームワークです。
対応状況は、
- IE9以降
- iOS7以降
- Android4.0以降
- Chrome/Edge/Firefoxの最新版のひとつ前
と完璧に近いものです。（資料：ブラウザのバージョン別シェアの表）
導入方法は簡単です。
全てのJavaScriptより上に以下の記述を書くだけです。
html
1<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
そして、以下のようにJavaScriptを書くことで同じドメイン内のファイルならAjax通信を行うことで取得できます。
JS
1$(function() { 2 $.ajax({ 3 url: '読み込みたいファイル名', 4 success: function(html){ 5 $(html).find('body').each(function(){ 6 $('body').append($(this).html()); 7 return false; 8 }); 9 }); 10 }}); 11}); 12
ただ、この方法はピュアなHTMLとCSSを用いたと仮定した場合の方法で、質問文からはサーバー側で何か用いていると推測できます。その場合は別の手法を使わざるを得ない・使うべき・楽な可能性があります。
あっ、あと何故jQueryを使ってるのかですが、JSだと普通に書くのがめんどくさいからです。
投稿2020/02/12 04:41
編集2020/02/12 04:45
総合スコア10429
0
ベストアンサー
質問者さんがやりたい事を、私の言葉で定義してみます。
静的なHTMLファイルやCSSをコンポーネントとしてまとめ、
必要に応じて特定の箇所にパコっと当てはめたい。
（違ってたら教えてくださいね）
JavaScriptでやってやれない事はないですが、
超困難かつ代替手段あるので、そういう手段を取る人は少ないんじゃないかな？と思います。
しかしネイティブJSにはそんな仕組みありませんので、
ほしければAjaxを活用しながら無理やり作るしかありません。
まずそもそもの話をします。
元々HTMLというのは情報を閲覧するソフトの「Webブラウザ」が
Webサーバに対して「URLの情報ください」という要求を出し、
その情報を受取るという仕組みでできています。
HTMLの元々の用途はドキュメントです。
マイクロソフトが出しているWordレベルの表現能力しかありません。
CSSで見栄えを整え、JSは画面に載せるまでもない情報を一時的に隠す裏方の仕事という目的があります。
なので「一枚のHTMLに予め大量に書いとけよ」ってなっちゃうわけですね。
アコーディオンメニューとかまさに「予め沢山の情報を記載してJSで隠す」という連携になっています。
これらの「歴史的背景」の問題で、
JavaScriptでインクルードしたいなーと思って調査したとは思うのですが、
やりたい事がコード込みで簡単に実現出来るという体で出てこなかったので途方にくれてしまったのではないでしょうか。
続いてJS以外の代替手段に入ります。
昔はそれをJSでやるのはありえないと考える人が一般的でした。
何を使うのかと言うと、PHPやRubyにはインクルードの機能があるのでそちらを使います。
HTMLを吐き出す時にあれこれそれの文字列をくっつけて良い感じのHTMLを生成します。
(後から気が付きましたが、今回「質問への追記・修正」欄を読む限り、既にこの選択肢を活用しているように見えます)
2015年位まではヘッダー部分をPHP(等の言語)で準備しておくというのは最も確実で一般的な対策でした。
もちろｎこのアドバイスは現状もかなり有効です。
テンプレート化やコンポーネント化のためだけにこれらの言語を持ち出す人は多いです。
またHTML5の仕様としてコンポーネント作れないか？
…という仕組み作りが行われており、その成果としてWeb Componentsがあります。
IE11が死ぬのはWindows10のサポートが切れる2025年です。
またSafariも部分的にしか対応しておらず、切り捨てるとなると多くのMacbook使いやiPhone使いを切り捨てる事になります。
おいそれとWeb Componentsを導入する訳にはいきません。
最後にJSでコンポーネント化をしようというJSフレームワークの話に入ります。
最近ではHTMLのテンプレート的存在のファイル、CSSのテンプレート的存在のファイルを用意して
コンポーネントにして使い回せるようにしよう！
…というJavaScriptのライブラリ(通称JSフレームワーク)があります。
- React: 現状最も人気があるJSフレームワーク
- Vue.js: Reactのライバルで第2位、初心者のとっつきやすさではTOP
- Polymer: コンポーネント化という点では最も適していると思うけど、人気はかなり下火なのが懸念
Vue.jsは最初の導入が少し楽だと思いますが、
他はNode.jsの知識がそれなりに無いと歯が立たないかも知れません。
非常に難度が高いのでメンターや先輩が欲しいです。
もし完全初心者でJSフレームワークを利用していくならプログラミングスクール等を活用する事を考えてみてください。
まとめ
私からはこの2パターンを提案します。
参考にしてみてください。
- PHPやRuby等で動的なHTMLを生成する
- JSフレームワークを導入する
投稿2020/02/12 03:46
編集2020/02/12 07:40
総合スコア21203
2025年では？
ホントだ！！修正しました。
修正ありがとうございます。
これ、もしかしたら私の認識違いかもしれませんがAjaxでどうにかできませんか？
> Ajaxでどうにかできませんか？
端折りましたが可能です。
「JavaScriptやってやれない事はないですが」の冒頭の一文に含めています。
結局の所ルール化が必要だと思うので、JSフレームワークになるよなぁと考えてました。
なので質問を「コンポーネント化」と定義してJSフレームワークという流れに持っていくという流れで文章をしたためてます。
ちょっと決めつけが強かったかも知れないので修正しておきますね。
もし初心者さんでもAjaxメインで作れるライブラリがあって簡単に使えるなら、
それが別回答としてこの回答よりプラスが付くのはとても素敵な事だと思います。
了解しました。
追記修正依頼に次のように書いてあるので恐らくもう何か使っていますね。
> <!--#include file="/inc/inc_○○○○.html" -->
多分 ASP だと思いますが、もしかしたら静的サイトジェネレーターかもしれません。
ASP だとしたら次のようにするんじゃないかと。
http://souichiro.blog37.fc2.com/blog-entry-43.html
確認中ですが、SSIという線も考えられますね。
SSI というものがありましたね。すっかり存在を忘れていましたが、確かに同じ文法です。
今更ながら追記修正依頼欄は読みましたが、
確かに何かは使っている感ありますね。
「JSでなんとかしたい」という発言から、
WordPress的な自分の裁量でどうにもならん系が飛び出てくる可能性があるので予断を許さない状況は続きそうですね……
皆様、早急な数々のご意見ありがとうございました。
そもそも論というのは確かにありまして、インクルードファイルを通常の役目として使ってないのかもしれません。
ただ今回はファイルを量産するか、jsフレームワークなどで出し方を変えられるのかの質問を我ながら漠然としてしてしまいました。。
その中でmiyabi-sunから頂いた回答で、やってやれないことはないが、作る意味があるのか？というところでまだ手で量産できる数のファイルでしたので、前者の方をとることにいたしました。
皆様、本当にありがとうございました。
あなたの回答
tips
プレビュー
