JavaScriptとは？WordPressなら簡単に扱えます

JavaScriptはプログラミング言語のひとつで、HTMLやCSSと比べると少し敷居は高くなるため、触れる気にもならないという方が多いのではないかと思います。でも、WordPressでホームページを編集する人にとっては、実は簡単に扱えるものだったりもしますので、ここでは、その点も少し紹介しながらJavaScriptの基本的な扱い方について説明します。

JavaScriptとは

JavaSciprtは「JS」と略されます。ファイルの拡張子が「.js」ですし、WordPressのプラグインでも「JS」と示されているので、「JS」で認識している方もいるでしょうか。「Java」というプログラミング言語とは全く異なります。たまにJavaScriptのことをJavaと言ってる方がいますが、間違いです。ここでその点に気づく方がいれば、今後のためになったということで、よかったと思います。
元々はネットスケープコミュニケーションズ社が開発した言語ですが、現在はEcma Internationalという団体が標準化を行っています（HTMLとCSSはW3C、WHATWGが標準仕様を決めてきているため、定めている団体は異なる）。ここで大事なのは、標準化されているということです。つまり、普及しやすい状態にあります。標準化されていることがいかに大事かはこちらで説明していますのでよろしければ参照ください。
ウェブブラウザで表示されている内容は、主に「HTML+CSS」で表現され、それだけだと不可能な部分もJavaScirptであれば可能な場合が多く、それで使われることの多い言語です。このように、エンドユーザーの見る画面上に関わる言語のため、フロントエンド言語とも呼ばれます。ただ、現在はNode.jsというフレームワーク（ベースとなる仕組み）が使われてサーバーサイドもJavaScriptで書かれるケースが多く、このJavaScriptという言語は、最初に覚えるプログラミング言語として私はおすすめだと思います。

プログラミング言語とは

こちらで説明しているHTML&CSSとは違い、JavaScriptはプログラミング言語なのですが、何が違うかというと、プログラミング言語は例えば「繰り返し処理」を行いつつ「特定の条件に合致したときにのみ発動」ができます。このサイトのトップページでも用いていますが、スクロールをするとアニメーションで現れてくるような表現は現時点、CSSだと無理だと思われ（もし可能であれば教えてください！）、JavaScriptで表現されています。アニメーションで動かしたい指定の要素のすべてに対して（ここでわたしは繰り返し処理を用いています）、スクロールして特定の位置にきたときに、CSSによるアニメーションを動かす（特定の条件に合致したときに発動）、ということをJavaScritpで書いています。ただ、JavaScriptはCSSと比べても、動作が重くなる要因になりやすいので、その点は留意が必要です。

WordPressでの活用

先述のような実装をするのは、敷居はある程度高いと思いますが、WordPressでは、「カスタム HTMLブロック」にJavaScriptを書くことができて、ちょっとした機能の付け足しなら気軽にできます。
例えば、

<script>
   alert('ようこそ！');
</script>

このように、「カスタム HTML」ブロックに書いてみてください。配置個所はこの場合どこでも動きますが、どのような場合でも一番下に配置することをおすすめします。ページ編集時の邪魔にならないのと、場合によっては一番下に配置しないと動かない内容があるためです。
配置したら、ページを表示してみてください。「ようこそ！」というメッセージが表示されましたよね？これだけではあまり実用的な内容ではないですが、これを機に、少しJavaScriptも調べてみよう、と思っていただければと思って紹介しました。
なお、この方法だとそのページでのみJavaScriptが発動しますが、もしページ全体に対してJavaScriptを発動させたい場合は、それを可能にするプラグインがありますので、試してみてください。いくつかあると思いますが、「Simple Custom CSS and JS」が最も使われていると思われます。

まとめ

この記事でJavaScriptにも少し興味を持っていただければ幸いです。
WordPressでホームページを編集してみたいと思った方、ベース作成はぜひお問い合わせください！