質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

991閲覧

document.writeを使わずに文字列を出力したい

lingwood

総合スコア40

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2グッド

1クリップ

投稿2019/02/13 09:37

編集2019/02/13 10:19

前提・実現したいこと

CSSキャッシュバスティング用のコードを検証しています。

サイトは、WordPressではなくコーディングで制作しているため、
理解を深める意味でもJavaScriptとPHPの両方でできるように
したいと思っています。

ネット上WordPress向きのものやjsファイル用に書かれた記事は
少しあったのですが何となく自分の求めている内容と違い、
試行して結局以下のコードで出力はできました。

ただ、以下のJavascriptコードですが、
document.write行にエラー(?)表示(エディターで赤くなる)されて
しまいます。

調べたらdocument.writeはHTML5で非推奨とのことでしたが、
どう直して良いか分かりません。

また、PHPは環境がすぐにないため後ほど検証してみようと思っているのですが、
以下のコードで大丈夫なのか、もし分かれば教えて頂けたらと思って載せました。

すみませんが、よろしくお願い致します。

該当のソースコード

javascript

1<script> 2var versioningNum = new Date().getTime() 3document.write(`<link href="css/style.css?date=${versioningNum}" rel="stylesheet" type="text/css">`); 4</script>

php

1<link rel="stylesheet" href="./css/style.css?date=<?php echo date('Ymd-Hi'); ?>" type="text/css"> 2<link rel="stylesheet" href="./css/style.css?<?= filemtime('css/style.css'); ?>">

追記

ご回答ありがとうございます。
エラーログの件ですが、コンソール上では出ていないのですが、
すみません、「エディターで赤くなる」なります。

イメージ説明

DreamweaverCS5ですが、添付画像のような形になります。

そのためdocument.writeを使わないでうまく出せる
方法がないかを模索しています。

一応は出てるので問題はないかと思うのですが、
もっと良い方法や非推奨とされる方法を使わないでも
良いことはやはり良いと思いますので、
教えて頂けたらうれしいです。

また、本日は帰宅しなければいけなくなり、
明日、あらためてご回答くださったみなさまに御礼を兼ね
ご返信と引き続き本件でお世話になりたいと思います。

すみませんがよろしくお願い致します。

bochan2, DrqYuto👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bochan2

2019/02/13 09:54

本筋と関係ないんですが、javascriptとサーバーでデータをやり取りするときに埋め込み(?)(embedded)phpを使うと、クライアント側の処理とサーバーサイドの処理がごちゃ混ぜになるので、動的ページをやめるか、データ取得を全部ajaxでやるかにした方がいいと思います。
lingwood

2019/02/14 00:48

bochan2 様 おはようございます。昨日はありがとうございました!ご返信できずすみませんでした。 ajax調べまてみました!が、意味は分かったんですがどう使うのかさっぱりでした。笑 でも、bochan2さんのおっしゃれることは何となく理解できます。 何か、ここを見たらいいよ!分かるよってものがありましたら教えて頂けたらうれしいです! 宜しくお願い致します!!
guest

回答3

0

ベストアンサー

javascript

1<head> 2<script> 3 var versioningNum = new Date().getTime(); 4 var link=document.createElement('link'); 5 link.setAttribute('href','css/style.css?date='+versioningNum); 6 link.setAttribute('rel','stylesheet'); 7 link.setAttribute('type','text/css'); 8 document.querySelector('head').appendChild(link); 9</script> 10</head>

投稿2019/02/13 10:10

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lingwood

2019/02/14 01:07

yambejp様 おはようございます。昨日はありがとうございました!ご返信できずすみませんでした。 そのものズバリで本当に助かりました!! PCを落とす直前に試行できたのでそのままベストアンサーにさせていただきました!! ずっとこれができなくていろいろな記事をあさっていたので 本当に本当にありがとうございました!! またの際にもどうぞよろしくお願い致します。
guest

0

PHPで出力できるならそれでよいのでは。
要素を追加するならinsertAdjacentHTMLを調べてみてください。

【innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。(DOMおれおれAdvent Calendar 2015 01日目) | Ginpen.com】
http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/

【innerHTML より insertAdjacentHTML を使う - Qiita】
https://qiita.com/amamamaou/items/624c22adec32515e863b

投稿2019/02/13 09:58

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lingwood

2019/02/14 01:05

kei344 様 おはようございます。昨日はありがとうございました!ご返信できずすみませんでした。 URLありがとうございます!!拝見させていただきました。 ちょっと初心者には難しい内容ですが、ふんわり理解はできました。 少し時間をかけてinsertAdacentHTML()の使いかたを調べてみたいと思います。 取り急ぎですが、御礼申し上げます!ありがとうございました。
guest

0

結論から言うと、何もエラー表示されてないです。Chromeのソース画面を指して見ているのだったら、
Consoleという部分で、赤いメッセージが表示されていないか確認するといいでしょう。

簡潔に言えば、htmlタグにおけるプロパティの値が、わかりやすいように赤く表示されているだけです。
そして、PHPがまだ投入されていないので、PHPのデリミタやプログラムがただの文字列としてしか認識されていないため、そのまんまで表示されているだけです。

そして、もう一つの質問、document.write以外の出力方法ですが、console.log(変数)を使うといいですよ。変数や定数の出力をConsoleに出力できるので、煩わしくなりません。

投稿2019/02/13 09:51

編集2019/02/13 09:56
FKM

総合スコア3608

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lingwood

2019/02/14 00:51

FKM 様 おはようございます。昨日はありがとうございました!ご返信できずすみませんでした。 試行していただきありがとうございます!おかげさまで解決できました。 ちなみにphp環境で試行したら上記コードで出力できましたのでご報告申し上げます。 またの際にもよろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問