【JavaScriptとは？】基礎まとめ

こんにちは、Reikaです。
私は現在、アプレンティスの5期生として日々勉強に励んでいます。

アプレンティスの課題としてHTML/CSS/JavaScriptの学習に取り組みました。
今回はこの経験を通じて学んだことについて、記述していきます。

※今回の記事ではHTML/CSSについては省略しています。

簡単に自己紹介

• 2023年12月〜独学でプログラミングの勉強を始める
• 2024年4月〜内定直結型エンジニア学習プログラム「アプレンティス」に参加
• 地方在住26歳社会人4年目。マインドミニマリスト。植物、テレビドラマ、コーヒーが好きです
• 趣味でYouTube投稿をしています。現職やなぜエンジニアを目指すようになったのか？は以下の動画をぜひご覧ください！^^

目次

1.JavaScriptとは？
2.関数について
3.DOM操作とは？

今回私はJavaScript Primer
迷わないための入門書を参考に勉強を進めました。
この入門書から理解した内容をこの記事にまとめていきます！

1.JavaScriptとは？

• JavaScriptとは、主にウェブブラウザの中で動くプログラミング言語
• ウェブサイトの表示を変化させたり、ウェブサイトのサーバーと通信してデータを取得したりできる
• フロントエンド唯一のプログラミング言語

2.関数について

関数とは、ある一連の手続き（文の集まり）を1つの処理としてまとめる機能です。
関数を利用することで、同じ処理を毎回書くのではなく、一度定義した関数を呼び出すことで同じ処理を実行できます。

定義は次のように、functionを使って定義します。

function 関数名(引数1, 引数2) {
    // 処理
    // ...
    return 返り値;
}

余談ですが、私は学習を始めてから5ヶ月間、PHPをメインに触っていたので、関数についてはすんなり理解できました。
言語が違っても共通する部分が多いので、基礎をしっかり固めることはとても重要ですね。

3.DOM操作について

DOM操作とは、JavaScriptを使ってHTMLやCSSを参照したり、書き換えたりすることを指します。
DOMはDocument Object Modelの略です。

HTMLでは、要素（タグやIDなど）を指定して文字を書きますよね。その要素の動きを制御するのがDOM操作です！
以下に、具体的な例を2つ示します。

1. IDを利用して要素を取得する

document.getElementById(exampleId);

このコードは、特定のIDを持つ要素を取得する方法を示しています。
documentはHTML文書全体を表し、getElementByIdは特定のIDを持つ要素を取得します。
getElementByIdは、直訳すると「IDを手掛かりにして要素を取得する」という意味です。


例えば、HTML内に以下のような要素があるとします。

<div id="exampleId">Hello, World!</div>

この場合、document.getElementById("exampleId")を使うことで、この

要素をJavaScriptで参照したり、操作したりすることができるようになります！

2. クリックイベントの設定

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <img class="modal-logo" src="img/user-thumbnail.png" alt="ユーザーアイコン" id="modal-logo">
  </div>
</div>

document.addEventListener("DOMContentLoaded", function () {
  let modal = document.getElementById("myModal");
  let logoLink = document.getElementById("modal-logo");

  logoLink.addEventListener("click", function (event) {
    event.preventDefault(); // デフォルトのリンク処理を防ぐ
    modal.style.display = "block"; // モーダルウィンドウを表示する
  });
});

この例では、addEventListenerメソッドを使用して、特定の要素（ここではmodal-logo）がクリックされたときにイベントを処理する方法を示しています。

• DOMContentLoadedイベントは、HTMLの全コンテンツが読み込まれたときに発生します。
  これにより、JavaScriptがHTML要素にアクセスできるようになります。
  
• clickイベントは、指定した要素がクリックされたときに発生します。
  この例では、ユーザーがアイコン（modal-logo）をクリックしたときにモーダルウィンドウ（myModal）が表示されるようにしています。

JavaScriptに元々用意されているメソッドは以下を参照ください。

https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

まとめ

いかがでしたでしょうか？
JavaScriptの基礎の基礎を簡潔すぎるぐらい簡潔に書いてしまいましたが、HTML/CSSとの関係性はまとまっていたでしょうか？
最後まで読んでいただき、ありがとうございました！