JavaScript

2021年8月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「JavaScript」について書きます。

...が、実は私は基本をまったく理解できていません。
よくわからないものを無理して使っているというのが現状です。
それなんてS²機関

JavaScriptとは

JavaScriptとは、ウェブサイトに動きをつけるプログラム言語のことです。

ウェブサイトをアニメーションさせたり、サーバーとの送受信を行ったり、ウェブアプリに使われたりしています。

使用方法

サイトにおいてJavaScriptを使う方法は2通りあります。

・<script>と</script>の間に直接記載する

<script>
console.log('Hello World');
</script>

・外部ファイルを読み込む

<script src="js/bootstrap.min.js"></script>

どちらの場合においても、記載する場所は</head>のすぐ上か、</body>のすぐ上がよいとされています。

JavaScriptの書き方

現在ここで詰まっています。

少しずつ勉強して、別記事で成果を書いていきたいと思います。

・constが「定数」？

・letが「変数」？

・varも「変数」だけど最近は使わない？
うちのサイトは結構使っているような気がするけど、古いバージョンだから？

・getElementByIdは指定したIDを持つ要素を取得するメソッド？

・console.logって何／(^o^)＼

練習用に、日付・曜日・現在時刻を表示するスクリプトを書いてみます。

const youbi = ["日","月","火","水","木","金","土"];
const date1 = new Date();
const date2 = date1.getFullYear() + "年" + 
  (date1.getMonth() + 1)  + "月" + 
  date1.getDate() + "日" + 
  youbi[date1.getDay()] + "曜日" +
  date1.getHours() + "時" + 
  date1.getMinutes() + "分" +
  date1.getSeconds() + "秒" 
document.getElementById("imananji").onclick = function() {
document.getElementById("sounedaitaine").innerHTML = date2;
};

参考：ITSakura｜JavaScript｜現在日時を取得するサンプル

jQuery（ジェイクエリー）

jQueryとはJavaScriptのライブラリの1つです。JavaScriptが、より少ないコードで簡単に書けるようになるみたいです。

jQueryは便利とされる一方で「脱jQuery」の流れも来ているようで、JavaScriptやブラウザが進化した現在ではjQueryがそこまで必要とされなくなってきているようです。

自分が使っているのがjQueryなのかそうでないのかもわかっていないレベルですが、これから勉強します。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

jQueryもJavaScriptと同様に、<script>タグで読み込ませます。

使用例

① 文字をクリックすると別の文字に変わる

$('.arrivederci').on('click', function() {
  $(this).toggleClass('sayonarada');
});

.arrivederci::before {
  content: "アリーヴェデルチ！";
}
.arrivederci.sayonarada::before {
  content: "（さよならだ）";
}

これはクリックによってクラスをつけたり外したりするスクリプトです。

beforeというのは擬似要素といって、要素の一部に対してスタイルを適用できる指定方法です。

上記の場合「arrivederci」というクラスでは「アリーヴェデルチ！」という文字を表示させておき、クリックすることで「sayonarada」というクラスが追加され「（さよならだ）」という文字に変化するというCSSを書いています。

② ボタンを押すと隠された項目が展開する

<button type="button" data-toggle="collapse" data-target="#collapse〇〇" aria-expanded="false" aria-controls="collapse〇〇">えいっ</button>
<div class="collapse" id="collapse〇〇">ファイヤー</div>

当サイトではBootstrapというフレームワークを使用していますが、その中の Collapseという機能を使ってコンテンツの折りたたみができます。

折りたたみたい部分に「collapse」というクラスを指定します。
さらに「show」というクラスを追加すると、最初から展開された状態になります。

これを応用してアコーディオンメニュー（この記事でいうなら「新着記事」「カテゴリー」「アーカイブ」）を作ることもできます。

Bootstrapについてはまた別記事で詳しく書きたいと思います。

え？JavaScriptはどうしたのかって？

うーん...よくわかりません。

③ ページ内リンクを滑らかにスクロールさせる

<a href="#ID名">リンク元</a>

<p id="ID名">リンク先</p>

ページ内リンクのやり方自体は簡単で、

リンク先にIDを指定

リンク元に<a>タグでリンク先のIDを指定

これだけです。

<a href="#">のようにhref属性にシャープのみを指定すると、そのページの一番上にジャンプします。

<a href="#">ページの先頭へ</a>

これらを滑らかにスクロールさせてくれるのが以下のスクリプトです。

$(function() {
$('a[href^="#"]').click(function() {
  var speed = 500;                
  var href = $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
$("html, body").animate({
  scrollTop: position
}, speed, "swing");
  return false;
});
});

参考：Recooord｜ページ内リンク（アンカーリンク）で特定の場所までスムーススクロールさせる

＼ハァー さっぱりさっぱり／

#のついたhrefを含む<a>タグをクリックすると

500ミリ秒（0.5秒）かけて

ページの最上部からの距離を計算して

最初はゆっくり、徐々に速くアニメーションさせるよ

という意味でしょうか。

まとめ

いかがだったでしょうか。

全くわかっていないということがわかりましたが、問題ありません。

自らの無知を自覚することが真の認識に至る道であると誰かが言っていましたしね。

基礎からちゃんと勉強して、かっこいいサイトを作れるようになりたいものです。

以前JavaScriptを「服薬指導」に例えましたが、意外と的を得た例えだったかもしれません。

薬の作用機序を理解することで服薬指導を充実させられるのと同様に、JavaScriptのしくみをしっかり学んでウェブサイト制作に生かしたいと思います。