FC2ブログでJavaScriptを扱う際の注意点

FC2ブログでJavaScriptを扱う際の注意点

カスタマイズ
2023/06/08
0
vanillaice (Akira)
vanillaice (Akira)
トラブル対処JavaScript初心者向け

弊ブログではHTML, CSSだけでなく JavaScript のコード提供も行っています。今回はそのJavaScript(以下 JS と称す)を導入する際の基本的な扱いについて。

HTML, CSSは比較的楽に導入できるんですが、JSの場合はその大まかな仕組みを理解していないと躓いてしまうことがあるんですね。特に 記載の仕方 (どこに, どのように) で混乱する方が多いようなので説明します。

HTML, CSS, JS の違い

HTML
マークアップ言語 (markup language)
HyperText Markup Language
CSS
スタイルシート言語 (stylesheet language)
Cascading Style Sheets
JS
プログラミング言語 (programming language)
JavaScript

以前別の記事にも掲載したことのある表です。それぞれの言語の名称は上記の通り。質疑応答で特に困るのは、HTMLやCSSを『プログラム』『プログラミング』と表現されると回答者は困惑する という点。

いわゆる プログラムプログラミング に該当するのは JavaScript だけなので、例えば「プログラムについて教えてください。リンクを追加したらレイアウトが崩れました。」と質問されると、回答する側は質問冒頭で「JSのことだな」と受け取るわけです。しかし続く内容を見るに「???プログラムではなくHTMLのことなのでは?」となってしまいます。

HTML, CSSを『プログラム』と表現する人が非常に多いんですね。もうマジでめちゃくちゃ多い(笑)
円滑な質疑応答のために、この機会に『HTML, CSSはプログラムではない』と覚えてください。

誤解を招きそうな表現に例えばネット上には「HTMLから始めるプログラミング」といった記事がたくさんあります。それは「基本であるHTMLから学び始め、最終的にはJavaScriptのプログラミングまで総合的に勉強しましょう」という意味です。プログラミング学習の足がかりとしてまずはHTMLを学びましょう、ということを示しているわけですね。信頼できる記事提供元であれば記事本文の注意書きや補足などで「HTMLはプログラミング言語ではありません」としっかり但し書きがあるはずです。

というわけで、『HTMLコーディング』はあっても『HTMLプログラミング』は無い。『HTMLコーダー』は居ても『HTMLプログラマー』というのは居ない、と。そして学習難易度で最も敷居が高いのがJSのプログラミングです。

JSのつまずきポイント【JS or HTML】?

ここではJSのプログラミングを学ぶわけではなく、あくまでも FC2ブログでJSを扱う という作業についてのみ言及します。コード自体は既に存在しているという仮定のもとです。

以下のような内容があるとします。

<script>
function (e){
  const a = document.getElementById('xxx');
  a.classList.add('yyy');
}
</script>

上記で『JS』に該当する部位は以下の内容だけです。

function (e){
  const a = document.getElementById('xxx');
  a.classList.add('yyy');
}

上下に <script></script> というのが存在し、JSを挟んでいます。この2つは HTMLタグ です。タグ名は scriptタグ です。全体を称するに script要素 です。

つまり、JSのコードをHTMLタグで挟むことによって、全体が HTML要素、この場合は『HTMLのscript要素』になるわけです。

function (e){
  const a = document.getElementById('xxx');
  a.classList.add('yyy');
}
<script>
function (e){
  const a = document.getElementById('xxx');
  a.classList.add('yyy');
}
</script>

こういうことですね。上は「javascript」下は「markup」と表現されています。HTMLはマークアップ言語ですから、しばしば『マークアップ』とも表現されます。

外部とインライン

みなさんがFC2ブログでJSを利用する際は テンプレートに記載記事内に記載 のいずれかです。

いずれにしろFC2ブログでJSを利用するには、HTML内に記載 することが確定します。ブログテンプレートの『テンプレート用HTML』に書くか、記事内に記す場合も『記事用HTML』に書きます。記事用HTMLというのはつまり、エディター(投稿画面)の『HTML編集』がそれにあたります。『見たまま編集』でJSを扱うことはできません。

FC2でのJS利用は必ずHTMLとしての記載が条件になります。

HTML要素としての記載を前提に、FC2ブログでは2種の掲載方法があります。

外部ファイル化

先のサンプルコードをもう一度掲載します。
function (e){
  const a = document.getElementById('xxx');
  a.classList.add('yyy');
}

上記はJSのソースコードです。これを一文字も変更・追加せずそのままテンプレートに導入するには JSファイル化 を行う必要があります。テキストエディター等に記載して、その内容を .js 拡張子で保存、そしてFC2ブログにアップロード、という段階を踏みます。

JSファイル内にHTMLは記載できませんので、<sciript><sciript> のHTMLタグを付けてはいけません。

ファイルを作成したら、それをHTML要素として記載します。要素のコードは以下の通り

<script src="xxx.js"></script>
script要素src属性 の値にファイル化したJSのURLを記します。これは script要素による外部JSファイル呼び出し と表現できます。

インラインJS

ファイルを作成せずにHTML内にベタ打ち(ベタ書き)することも可能です。

<script>
function (e){
  const a = document.getElementById('xxx');
  a.classList.add('yyy');
}
</script>

上記がそれにあたります。こちらは script要素によるインラインJS埋め込み と表現できます。

このように、外部ファイル/ インライン いずれの方法を取るとしても必ず script要素 としての掲載が必要です。

よくあるつまずきパターン

JSソースコードそのものは正しいものである、と仮定します。

ページ上にソースコードがそのまま現れてしまう

JSとして機能もせず、JSソースコードが文字列となってページ上に出てしまっている、という場合の原因は scritpタグの書き忘れ です。

外部ファイル化したのに機能しない

  1. ファイル内にscriptタグを書いてしまった
  2. scriptタグの書き間違い

【1】ファイル内scriptタグ

【2】scriptタグの書き間違い

属性の不正

<script link="xxx.js"></script>
<script url="xxx.js"></script>

正しい属性は src

<script src="xxx.js"></script>

記事内JS

記事内にJSを記す場合も外部ファイルかインラインJSのいずれかになりますが、記事下広告を『表示しない』に設定している人のみ可 です。記事下広告を表示させている方(画像高速化設定を有効にしている方)は使えません。FC2ブログ広告の仕様によるものです。

まとめ

つまずきパターンの『scriptタグ付け忘れ(JSコードをHTML化せずに直に書いてしまう)』のが特に多いです。JSに限らずページ内にソースコードがそのまま出てきたら HTMLとして正常に機能していない のが原因ですから、真っ先にチェックするのはHTMLタグとその構文ルールです。最後に端的にまとめます。

外部ファイル化するときは <script> </script> を書いちゃダメ!

インラインJSは <script> </script> を書かなきゃダメ!

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)