【本当に何も知らない状態から知ろう③】JavaScriptとは、なんなのさ??

JavaScript

Posted at 2025-07-02

はじめに

この記事は5分あれば読めます
本記事に関連するHTMLの記事はこちら
本記事に関連するCSSの記事はこちら

どんな人に向けた記事？

JavaScriptは知っているが、具体的に何かは分からない人

この記事で分かること

JavaScriptが何なのか、ざっくりと理解できる

ここから本編!!

Webサイトに「動き」をつけよう

Webサイトは、主に3つの要素で構成されています！

HTML: Webサイトの骨組みを作る（例：文章、画像、見出しなど）←説明した記事はコレ
CSS: Webサイトの見た目を整える（色、大きさ、配置など）←説明した記事はコレ
JavaScript: Webサイトに動きをつける（アニメーション、クリックすると動くなど）← 今回はココ！

JavaScriptってどうやって書くの？

今まで作成したコードに、JavaScriptを追加してみよう!

実際に書いてみた！

<style>タグの下に、ボタンを置くためのコードを追加
<body>から</body>までに<script>を追加
- この<script>タグの中に、JavaScriptの指示を書きます

<!DOCTYPE html>
<html>
<head>
    <title>初めてのWebサイト</title>
    <style>
        h1 {color: blue;}
        p {font-size: 20px;color: green;}
        button {
            padding: 10px 20px;
            font-size: 16px; 
            cursor: pointer; 
        }
    </style>
</head>
<body>

    <h1>はじめてのHTML！</h1>
    <p id="myParagraph">初めて作ったウェブページ！</p>
    <button onclick="changeText()">文字を変えるボタン</button>

    <script>
        function changeText() {
            const paragraph = document.getElementById('myParagraph');
            paragraph.textContent = 'ボタンが押されました！';
        }
    </script>

</body>
</html>

コードについての補足

<p id="myParagraph">
- JavaScriptからこのpタグを見つけるための「目印」
<button onclick="changeText()">
- このボタンがクリックされたら「changeText()という指示を実行してね」という意味
function changeText() { ... }
- JavaScriptへ指示するためのコード
- changeTextという「名前」をつけて、その中に具体的な「何をするか」を書きます
const paragraph = document.getElementById('myParagraph');
- document.getElementById('myParagraph')は、「HTMLの文書の中から、myParagraphというIDがついた部分を探してきて」という指示
paragraph.textContent = 'ボタンが押されました！';
- 「ボタンが押されました！」に変更しなさい、という指示

実際にWebサイトに動きをつけてみよう！

1分でWebサイトを作る!

上記の<!DOCTYPE html>から</html>をコピーする
パソコンに入っている「メモ帳」アプリを開く
１でコピーしたものを貼り付ける
「ファイル」→「名前を付けて保存」で保存
- ファイル名は「index.html」にする
- ファイルの種類を「すべてのファイル」に設定し、文字コードを「UTF-8（下記画像の黄色部分）」にする
保存した「index.html」ファイルをダブルクリック
下記の画像のように、ブラウザでWebページが表示される
Webページ完成🎉

最後に

今回は初めてJavaScriptに挑戦してみました!!
実際にサイトを作った方が直観的にも理解できたので、まずは簡単でもOKなので試してみるのが個人的にはおすすめです!

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up