LoginSignup
26
40

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Todev89

はじめてWeb開発をする人のためのチュートリアル (Visual Studio Codeの設定方法を含む)

Last updated at Posted at 2025-09-20

はじめに

Web開発はHTML、JavaScript、CSSと3つも言語があるし、様々なフレームワークがあったりして初めてWeb開発をする方はどう始めれば良いか分からないと思います。ということで今回は一通りWeb開発を体験できる、初心者用のチュートリアルを作ってみました。

プログラミングをしたことがほとんどない方でも分かるように説明しようと思うので、良かったら最後まで読んでいただきたいです。

注意として、できるだけ分かりやすくするために説明を簡単にしていることをご了承ください。また、ReactやVueなどは使わずに基本のみを扱います。誤りや説明の不十分なところなどありましたらコメントをいただけますと嬉しいです。

それでは行きます。

開発環境を整える

開発環境が既に準備できている場合は、スキップしてください。

Visual Studio Codeをインストールする

Visual Studio CodeはMicrosoftが提供する無料のソースコードエディタで、VSCodeと呼ばれることが多いです。拡張機能でカスタマイズできるのが特徴です。

そんな最強ツールをインストールします。

上記のリンクから環境にあったものをインストールしてください。

Visual Studio Codeを設定する

Visual Studio Codeを使いやすく設定していくので起動しましょう。この後の説明では「その他の拡張機能」以外の項目は行っている前提で話していきます。(自動保存に関してはページの更新時に手動で保存すれば問題ありません。)

(任意) 言語を日本語にする

画面左側に以下のようなファイルマークや虫眼鏡のマークなど色々なメニューがあると思います。

menu.png

その中にある四角が集まっているアイコンが拡張機能を追加するメニューを開くものになるので、このアイコンをクリックします。

そしたら検索欄に Japanese Language Pack for Visual Studio Code を入れると、地球儀のマークの拡張機能が一番上に出てくると思うので、インストールしましょう。「信頼しますか？」みたいな表示が出たら「信頼する」をクリックしてください。インストールできたらVSCodeを再起動してみてください。日本語表記になっているはずです。

(推奨) 自動保存をするようにする

上のメニューの「ファイル」から「自動保存」をクリックすると有効になります。ファイルを変更すると自動で保存されるので楽です。特にこの後のWeb開発で実際に実行するときに変更部分が瞬時に反映されるので便利です。

(推奨) 拡張機能 Live Serverをインストールする

この拡張機能はローカルで自分のサイトを開くときに便利なので入れるのをオススメします。(Vueなどを使う場合は使用できません。)拡張機能の検索欄で Live Server と検索すると紫の電波みたいなものを発しているマークの拡張機能があると思うので、インストールしましょう。

その他の拡張機能

開始タグや終了タグを変更したときに、そのタグに対応する開始タグや終了タグを自動で合わせるAuto Renameやエラーをエディタ上に表示するError Lensなど様々な拡張機能があるので、色々調べてみてください。カスタマイズしているとき、とてもワクワクしますよ！

今回の目標

今回は以下のような税抜の金額から税込の金額を計算する簡易的な計算機を作ります。

finish.png

色は適当に設定したので、好きな色にしてもらって良いです。

HTMLを触ってみる

とりあえず税金計算サイトを作るフォルダをお好きなところに作って、Visual Studio Code(以下、VSCode)を開き、ファイルから「フォルダーを開く」を選び作ったフォルダを選択して開いてください。Windowsはできるか分からないんですけど、Macの場合はFinderで作ったフォルダを表示させて、フォルダをVSCodeのアプリケーションのアイコン上にドラッグすると開けます。

VSCodeの左側にエクスプローラーという部分があると思います。(作ったフォルダの名前が書いてある場所)表示されていない場合は左のメニューのファイルアイコンをクリックすると表示されます。(表示されているときにクリックすると非表示になります)

フォルダ名のところにマウスカーソルを合わせると+がついたファイルアイコンと+がついたフォルダアイコンがあると思うのですが、それぞれ開いているフォルダ内に新規でファイル、フォルダを作るボタンになります。

今回はファイルアイコンを押して、 index.html という名前を付けましょう。

index.htmlはサイトのトップページを担うページを実装するファイルになります。他のページ用にHTMLファイルを追加する場合は好きな名前で大丈夫です。

HTMLについて

HTMLはマークアップ言語と呼ばれる言語(プログラミング言語ではない)の一種でWebサイトの文字やボタンなど表示させるパーツを実装するために使います。つまり、色は白黒で配置も好きに動かせませんし、ボタンに機能を持たせるみたいなこともできません。 HTMLはタグというもので書き、例えば以下のようなタグがあります。(ChatGPTにまとめてもらいました。これはほんの一部です。)

多くの場合、開始タグ(<div>など)と閉じタグ(</div>など)がありますが、閉じタグがないimgタグなどがあります。

タグは多すぎるので、使っていく中で覚えるのが良いと思います。

<!DOCTYPE html> -> HTML文書の種類を宣言（HTML5の場合はこれだけでOK）
<html></html> -> HTML文書全体を囲むルート要素
<head></head> -> メタ情報（タイトル、スタイル、文字コード、外部ファイル読み込みなど）
<body></body> -> 実際にブラウザに表示される本文

<!-- メタ情報系 -->
<meta> -> 文字コードやページ情報を指定
<title></title> -> ブラウザのタブに表示されるタイトル
<link> -> CSSファイルなど外部リソースを読み込む
<script></script> -> JavaScriptを記述 or 外部JSファイルを読み込む
<style></style> -> HTML内に直接CSSを書く

<!-- 見出し・段落 -->
<h1></h1> ～ <h6></h6> -> 見出し（数字が小さいほど重要）
<p></p> -> 段落（文章をまとめる）
<br> -> 改行

<!-- テキスト装飾 -->
<strong></strong> -> 強調（太字）
<em></em> -> 強調（斜体）
<span></span> -> インライン要素をまとめる

<!-- リスト -->
<ul></ul> -> 順序なしリスト（・）
<ol></ol> -> 順序付きリスト（1. 2. 3.）
<li></li> -> リストの項目

<!-- リンク・画像 -->
<a href=""></a> -> ハイパーリンク
<img src="" alt=""> -> 画像を表示

<!-- 表 -->
<table></table> -> 表全体
<tr></tr> -> 行
<th></th> -> 見出しセル
<td></td> -> データセル

<!-- 入力フォーム -->
<form></form> -> 入力フォーム全体
<input> -> テキストボックスやボタンなどの入力部品
<textarea></textarea> -> 複数行テキスト入力
<select></select> -> プルダウンメニュー
<option></option> -> プルダウンの選択肢
<button></button> -> ボタン

<!-- レイアウト -->
<div></div> -> ブロック要素をまとめる（レイアウト用）
<header></header> -> ページやセクションのヘッダー
<footer></footer> -> ページやセクションのフッター
<nav></nav> -> ナビゲーション部分
<section></section> -> 章やセクションをまとめる
<article></article> -> 記事や独立したコンテンツ

実際に書いてみる

VSCodeにはデフォルトでEmmetという機能が搭載されており、HTMLファイル内で ! を入力直後にEnterキーを入力することで

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

というコードが自動入力されます。一部説明します。

  • lang
    サイトの言語設定を行う部分です。Emmetで入力されるコードのlangを変更する方法は以前書いたこちらの記事をご覧ください。

  • headタグ
    headタグにはサイトに必要な設定、サイトの名前(title)、あとで触れるCSSの読み込みやCSS自体を書き込んだり、外部からフレームワークを入れるコードを書くときに使う部分です。titleは勝手に変えて大丈夫です。ブラウザのタブのところなどにここに設定したものが表示されます。

  • bodyタグ
    ページの本体を書く部分です。基本的にこの部分を触っていきます。

というわけでとりあえず今の初期状態でのページを開いてみます。左側のエクスプローラーのindex.htmlと書かれているところで右クリックをしてOpen with Live Serverを選ぶか、右下のGo Liveを押してください。
自動でブラウザが立ち上がって真っ白なページが表示されたと思います。このページが先ほど作成したindex.htmlになります。作成しているWebのファイルを保存すると自動的にこちらのページも更新されるので、何度も立ち上げる必要はありません。また、閉じる場合はブラウザのタブを消すだけでも問題はないのですが、一応VSCodeの右下のPort:5500みたいなボタンを押して切ってからタブを消すと良いと思います。(Port:5500は5500番のポートでlocalhostを立ち上げていることになります。localhostは今作業しているPCです。)

Live Serverはデフォルトの設定だとChromeで開くようになっていますが、VSCodeの左下の歯車マークから「設定」をクリックし、ユーザータブの検索欄にLive Serverと入力してLive Serverの設定項目にジャンプし、その中のCustom Browserという項目でブラウザを変えることができます。

真っ白な画面が表示された理由は何もbodyタグ内に書いていないからです。では試しにbodyタグの中に

<p>Hello World!</p>

と入力してみましょう。おそらく "p" と入力すると候補みたいなものが出てくると思うので、それでEnterを押すとタグが表示されるはずです。これでLive Serverで立ち上げたページを見てみると

helloworld.png

ちゃんと表示されていますね。ちなみにpタグはparagraphのpで、段落に使います。

他にも色々試してみてください。

(ここまでのコード)
※ langはjaにしています。
※ コードの左の空白(インデント)はスペースキーではなくTabキーを使いましょう

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

JavaScriptを触ってみる

JavaScriptについて

まず、JavaScriptを説明します。簡単にいうと 機能を実装するもの です。つまり、HTMLでパーツを置いて、JavaScriptでパーツに機能を持たせる感じです。Javaに名前が似ていますがまったくの別物になります。

JavaScriptは.jsの拡張子を持ったファイルとして作ることもできますし、HTMLファイルにscriptタグの中に書くこともできます。

特徴としてはコードの書き方に癖がなく、intやcharなどの型がない代わりにletとconst(varもありますが基本的に使いません。)で変数を宣言したりします。

プログラミングをしたことがない方向けに補足すると、変数は数字や文字列などの情報を入れておくための箱みたいなもので、箱ごとに整数値、1文字だけ、複数文字入れられるものなど違います。そこで、変数を宣言するときにその変数はどの種類の値(型)を入れるための箱にするのか、というのを一緒に宣言してあげる必要があります。

ただ、JavaScript では型の宣言は不要で、変数に代入された値によって自動的に型が決まります。
型には number（数値）、string（文字列）、boolean（真偽値）、object（配列や関数など）、
undefined（未定義）、null（空の値）、symbol、bigint など様々なものがあります。

宣言時にはletとconstを使うと言いましたが、以下のような違いがあります。

型 用途
let 後から変えられる変数
const 後から変えられない変数

つまり、letでは

// = は代入を表す
// JavaScriptの場合は;(コロン)は書いても書かなくても大丈夫
let n = 0;
n = 5;

みたいなことが許されていますが、constでは一度宣言したら書き換えることができません。そのため、letだけですべてを実装できますが、上書きをすると問題が出るユーザー情報などを管理するときにconstを使うことでより安全なWebサイトを作ることができます。
ちなみにどちらも同じ変数名で再宣言はできません。

実際に触ってみる

それでは税金計算機を作っていこうと思います。JavaScriptはたくさんの機能があるので、都度説明を加えていきます。

ボタンを用意する

とりあえずボタンを押したら、押したことを知らせるようなシステムを作ります。

一度、index.htmlのbodyタグ内を空にして、Emmetで用意した状態にします。

ボタンはbuttonタグで作れますが、CSSを使わないと白黒のままですし、綺麗なボタンを作るのは難しいので既に用意されているものを使います。

今回はTwitter, X社が作ったBootstrap5.3を使います。これはWebページを効率よく作るためのパーツが無料でたくさん提供されている場所になります。アイコンなども提供されており、便利です。(Tailwind CSSという似たようなものもありますが、環境構築が面倒なので今回はBootstrapを使います。)

ローカルにインストールして使うこともできますが、わざわざ入れるのは面倒なので、インストールせずに使います。ドキュメントにも同じやり方が書かれていますが、一応ここでも説明するとheadタグ内に

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

を、bodyタグ内に

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

を書き込みます。

HTMLは上から順に読み込まれるので、BootStrapのパーツの動作を担う部分が入っているbodyタグに追加したものはbodyタグの最後に書くようにしてください。headに書いても(パーツを読み込んでから動作部分を読み込む。この後追加していくコードはこのscriptタグの上に書いていく。)

それではBootstrapの公式サイトの「ドキュメント」タブを開いて、左のComponentsのButtonsページを見てください。「バリエーション」というところに様々なボタンがあると思います。それぞれのボタンは下のHTMLのコードと対応しており、好きなボタンを選んでください。今回はPrimaryを使ってみます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <title>Document</title>
+   <title>Tax Calculator</title>

+   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
+   <button type="button" class="btn btn-primary">Primary</button>
    
+   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

Live Serverでページを見てみると左上にボタンが追加されていると思います。当たり前ですが、押しても何も起きないので、ログが出るようにします。(ログは主に開発者が動作確認、監視などで使うメッセージのこと)

※ titleはそれっぽい感じに変更しています。

functionとconsole.log、コメントアウトを使ってみる

ではJavaScriptのファイルを作ります。エクスプローラーのindex.htmlと同じ場所にscript.jsを作ります。(script.jsという名前はよく使います。)ここにボタンを押したときの処理を実装します。以下のコードを書いてください。

script.js
// ボタンが押されたら実行
function alertButton(){

}

JavaScriptでは関数をfuntionで宣言します。関数は複数の処理を1つにまとめたもので、同様の処理を何度も行う場合に便利です。今回はalertButton関数にしてみました。()には引数(関数内の処理に使う値を外部から渡す)ことができ、returnで関数を呼び出した場所に処理の結果を渡したりできます。関数の名前は分からなくならないように処理に合った名前にすることをオススメします。

それでは先ほどの関数を以下のようにしてみましょう。下のコードでは左に+(プラス)が書かれていますが、これは「このコードを追加しました」と読んでいただいている皆さんに分かるように書いているだけなので実際にコードを書く際は書かないでください。この後出てくる-(マイナス)も削除したことを伝えるだけの表示です。

script.js
// ボタンが押されたら実行
function alertButton(){
+   console.log("ボタンが押されたよ");
}

//はコメントアウトと言って、実行時には無視される部分なので、メモや変更前のコードを残しておくのに使います。HTMLのコメントアウトは

<!--  -->

になります。
VSCodeではコメントアウトをしたい行にカーソルを合わせるか範囲選択をして Ctrl(Command) + / を押すとその部分をコメントアウトすることができます。空白の行でコマンドを実行すると、コメントアウトのコードだけ入力されます。この機能はどの言語ファイルでも同様に機能します。

console.logはログを出力するために使います。

処理はできたので、index.htmlからscript.jsを読み込みます。index.htmlを開き、bodyタグ内のBootstrapのscriptタグの前後どちらかに

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

を追加します。これでは読み込んだだけでボタンから関数を呼び出せていないので、buttonタグに

onclick="alertButton()"

を追加してボタンが押されたときにalertButton関数を呼び出すようにします。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
-   <button type="button" class="btn btn-primary">Primary</button>
+   <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+   <script src="script.js"></script>
</body>
</html>

※ onclickは実は推奨されておらず、JavaScriptのaddEventListenerを使う方が良いとされているようです。ただ、この辺の話はWeb開発に慣れてきてから考えればいいので、今はonclickを使えばいいと個人的には思っています。
※ ここではChromeで開いていることを前提に話しますが、他のブラウザでも基本的に同じ手順でできます。
Live Serverでページを開き、右上の3つ点が縦に並んでいるアイコンを押し、「その他のツール」から「デベロッパー ツール」をクリックしてください。右側にいかにも開発者感溢れる表示が出たと思います。タブからConsoleを選んでください。(タブになかったら>>を押して選択)

Consoleにはconsole.logで出力したメッセージを見ることができます。この状態でボタンをクリックしてみてください。

push.png

となったと思います。

今開いたこれは開発者ツール(デベロッパー ツール)と言って、ログを見たり、スマートフォンサイズの画面に切り替えたり、パフォーマンスを見たり、コードの内部を見たりと色々なことができるものになります。これを開いて、再読み込みボタンの上で右クリックをするとキャッシュを削除しつつ再読み込みができたりします。

入力フォームを使ってみる

入力フォームを用意しようと思います。BootstrapのFormsにあるForm controlやInput groupにもありますが、今回は一から作りたいと思います。とは言っても、コードを1行書くだけです。

以下のようにbuttonタグの下に追加しましょう。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body>
    <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
+   <input type="number" min="0" placeholder="金額">
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

今回はお金の計算をさせたいので、0以上の数字だけを受け付けるように最小値(min)に0を設定しています。逆に最大値(max)も設定できます。

placeholderは入力フォームが空のときに、そのフォームにどういう内容を入力すれば良いかをユーザーに伝えるためのメッセージを書きます。

inputタグはtypeによってボタンにもできますし、チェックボックスにもできます。詳しくは以下のサイトを参照してください。

それでは次に、ボタンが押されたら入力フォームに入力された値をJavaScriptで取得できるようにしたいと思います。

取得するために id というものを使います。idは今回のように読み取らせるものを特定させるためにタグに名前を付けるときや、最後に触るCSSを適用させる先を指定するとき、サイト内の特定の位置にジャンプする(ハイパージャンプ)ときのジャンプ先の指定などに使用します。

では、index.htmlとscript.jsを以下のように変更します。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body>
    <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
-   <input type="number" min="0" placeholder="金額">
+   <input type="number" min="0" placeholder="金額" id="inputForm">
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>
script.js
// ボタンが押されたら実行
function alertButton(){
    console.log("ボタンが押されたよ");

+   let inputNum = document.getElementById("inputForm").value;
}

document.getElementById("id名")でJavaScriptがHTMLにある特定のidの情報を取得できます。さらに.valueを使うと、指定したidのついているものの内容を取得することができます。

inputFormのように2語以上の単語を変数名や関数名に付ける場合は、2語目以降の単語を大文字から始めることが一般的

これだけではJavaScript側にHTML側でユーザーから入力された値を取得することしかできていないので、HTMLに表示するようにします。以下のようにコードを追記してください。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body>
    <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
    <input type="number" min="0" placeholder="金額" id="inputForm">
+   <p id="num"></p>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>
script.js
// ボタンが押されたら実行
function alertButton(){
    console.log("ボタンが押されたよ");

    let inputNum = document.getElementById("inputForm").value;
+   const num = document.getElementById("num");
+   num.innerHTML = inputNum;
}

先にindex.htmlから説明します。pタグという段落に使うタグにnumというidを付けたものを追加しました。pタグではなくdivタグやspanタグなどでも動きますが、今まで使っていないタグを使いたかったのでpタグにしています。ここにはinputFormの内容を表示させます。

次にscript.jsに追加したコードについて説明します。まず、今追加したpタグをinputNumと同じようにdocument.getElementById("num")で取得します。取得したものはconstで再代入をできないように設定したnum変数に入れています。pタグの理由と同じでletを使っても良いのですが、constを試して欲しかったのでconstを使っています。
その後、num.innerHTMLにinputNumを代入します。.innerHTMLは取得したHTMLのタグに入れる、つまり

<p>(ここ)</p>

に入れるための処理になります。先ほど追加したinputNumにはinputFormというidを持つところから値を取得して格納されているので、表示させるためにinnerHTMLを使っているわけです。

.innerHTMLも.valueと同じように

document.getElementById("num").innerHTML;

と1行で終わらせることもできますし、逆に.valueを今回のコードのようにタグの取得と処理を別々に行うこともできます。

他にも表示されているテキストコンテンツに対して使用できる.innerTextやすべてのテキストコンテンツに対して使用できる.textContentなど様々なものがあるので、ぜひ調べてみてください。
(タグによっては.innerHTMLが使えないときがあり、その場合は.innerTextや.textContentで動くことが多いです。)

計算の処理を実装する

それでは実際に税率を設定して、それを入力された金額に適用して表示させる部分を作ります。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body>
    <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
    <input type="number" min="0" placeholder="金額" id="inputForm">
+   <input type="number" min="0" placeholder="税率 (%)" id="tax">
    <p id="num"></p>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>
script.js
// ボタンが押されたら実行
function alertButton(){
   console.log("ボタンが押されたよ");

   let inputNum = document.getElementById("inputForm").value;
+  const tax = document.getElementById("tax").value;
   const num = document.getElementById("num");

+  let result = inputNum * (1 + tax / 100);

-  num.innerHTML = inputNum;
+  num.innerHTML = result;
}

index.htmlには税率を設定するためのidがtaxのinputタグを追加しました。script.jsではこのinputタグの内容をconstで宣言したtax変数に代入し、それを税率として金額を計算した値をresult変数に代入しています。=は代入、/は割り算、*はかけ算です。()は数学の()と同じ効果があります。ここで計算した結果が入ったresultをnum.innerHTMLで表示させます。

一旦、Live Serverで動きを見てみましょう。

100円と10%を設定したときの計算などで誤差が発生するが、「丸め誤差」というのが原因。詳しく知りたい場合は調べてほしい。

エラーメッセージを実装する

何も入力しないで計算させたときにエラーメッセージを表示させたいと思います。

script.jsを以下のように変更しましょう。

script.js
// ボタンが押されたら実行
function alertButton(){
    console.log("ボタンが押されたよ");

    let inputNum = document.getElementById("inputForm").value;
    const tax = document.getElementById("tax").value;
    const num = document.getElementById("num");

+   if(inputNum == "" || tax == ""){
+       alert("入力してからボタンを押してください。");
+   } else {
        let result = inputNum * (1 + tax / 100);

-       num.innerHTML = result;
+       num.innerHTML = result + '円';
    }
}

ここではif文を使います。if文は条件分岐の処理の1つで、条件を満たすものに対応した処理を行います。JavaScriptのif文は

if(条件式1){

} else if (条件式2){

} else {

}

のように書きます。上から順に処理され、最後のelseの処理はそこまでのどの条件も満たさなかった場合に実行されるものです。

条件式には

1 2
== 左右の値が等しい(型は問わない、等価演算子)
!= 左右の値が異なる(型は問わない、不等価演算子)
===
!==
< 左が右未満
<= 左が右以上
> 左が右より大きい
>= 左が右以上
(変数名) false, 0, -0, 0n, "", null, undefined, NaNは false 扱い、それ以外は true
!(変数名) false, 0, -0, 0n, "", null, undefined, NaNは true 扱い、それ以外は false
&& かつ、左右の条件を両方満たす場合にtrue
|| または、左右のどちらかの条件を満たす場合にtrue

などが使用できます。
今回は

inputNum == "" || tax == ""

なので、「inputNumが空でかつ、taxも空のとき」という条件になります。

次にif文の中身を説明します。

エラーメッセージはconsole.logで表示して良いのですが、普通の人はデベロッパーツールなんて見ないので、ユーザーに分かるように表示してあげる必要があります。そこでalert関数の出番です。alert関数は使うと分かると思うのですが、実行するとOKボタンが付いたポップアップが表示されると思います。自分でポップアップ自体を作成することもできますが、簡単に作りたい場合はオススメです。

num.innerHTMLに入れる内容も少し変えています。resultだけだと数字だけになって金額だと分かりづらいので、「 + '円'」を付けてみました。JavaScriptの場合、変数と文字列を繋げたい場合は+で繋ぎます。

文字列と繋げるとそこまでnumber型として扱われていたものでも、string型になってしまうので注意してください。

仕上げ

index.htmlを以下のように変えます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
+   <h3>Tax Calculator</h3>

+   <div class="row">
+   <div class="col-6 mx-auto">
-       <button type="button" class="btn btn-primary" onclick="alertButton()">Primary</button>
        <input type="number" min="0" placeholder="金額" id="inputForm">
        <input type="number" min="0" placeholder="税率 (%)" id="tax">

+       <button type="button" class="btn btn-primary" onclick="alertButton()">calculate</button>

        <p id="num"></p>
+   </div>
+   </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

ここで行ったのは

  • rowとcol、mx-autoを使って位置の調整
    これはBootstrapの機能です。rowで行を作って横並びになるようにして、col-6でその行の中での位置を指定します。colは行を12等分にした値を使用しており、col-6は12等分のうち6個分を指定しています。(col-6.5のように小数は使用できません。)
    これだけでは左から6個分だけになってしまうのでmx-autoを使います。mx-autoはx軸方向、つまり横方向に自動で中央にしてくれます。
    ちなみにclassは基本的にCSS(後述)で使用します。同じCSSのセットを使い回すことができます。
  • ボタンの表示内容を変更
    "Primary" のままだと何のボタンなのか分からないので "calculate" にしました。

CSSを触ってみる

CSSについて

CSSはWebサイトのデザイン部分を作るためのスタイルシート言語です。文字サイズや文字の色、背景の色、ボタンの周りの空白を作ったり、幅や高さを指定したり様々なことができます。ウィンドウのサイズに合わせて適用するCSSを変えたり、グラデーションのアニメーションを作ることもできます。

CSSは.cssファイルかstyleタグ内に書きます。

/* HTMLのclassに適用 */
.sample{
    color: rgb(57, 151, 233);
    width: 40%;
}

/* HTMLのidごとに適用 */
#myBtn{
    background-color: red;
    margin-top: 5%;
    padding: 3%;
}

/* HTMLのタグごとに適用 */
div{
    color: #fffacd;
}

※ CSSでのコメントは/* */を使います。

CSSはHTMLのclass、id、タグごとに設定ができます。クラスの場合はクラス名の前に.(ピリオド)、idの場合は#、タグの場合は何も付けません。

sampleを適用する場合は

<div class="sample"></div>

myBtnを適用する場合は

<button id="myBtn"></button>

のように書きます

代表的なCSSを紹介します。(ChatGPT製)

カテゴリ プロパティ 説明 例
文字・フォント color 文字色を指定 color: red;
文字・フォント font-size 文字サイズを指定 font-size: 16px;
文字・フォント font-weight 文字の太さを指定 font-weight: bold;
文字・フォント text-align 文字の水平揃え text-align: center;
背景 background-color 背景色を指定 background-color: #f0f0f0;
背景 background-image 背景画像を設定 background-image: url('img.png');
サイズ・余白 width 幅を指定 width: 200px;
サイズ・余白 height 高さを指定 height: 100px;
サイズ・余白 margin 外側の余白 margin: 10px;
サイズ・余白 padding 内側の余白 padding: 10px;
枠線 border 枠線をまとめて指定 border: 1px solid black;
枠線 border-radius 角を丸くする border-radius: 8px;
配置・レイアウト display 要素の表示方法 display: block;
配置・レイアウト position 位置の指定方法 position: absolute;
配置・レイアウト top / left 位置を指定（position使用時） top: 10px; left: 20px;
配置・レイアウト float 要素を左右に寄せる float: right;
配置・レイアウト clear float解除 clear: both;
リスト list-style リストのマーカー設定 list-style: none;
リンク text-decoration 下線など装飾 text-decoration: none;
リンク color リンク色の指定 color: blue;

floatとかclearとか使ったことなかった...

HTMLのタグと同じように使っていく中で少しずつ調べて覚えていくと良いと思います。
上記の表に補足すると、marginとpaddingはmargin-leftやpadding-bottomとすることで特定の方向のみに設定ができます。

1 2
-top 上方向
-bottom 下方向
-left 左方向
-right 右方向

ただ、HTML上でCSSを適用したタグの親要素の状態によっては-botomと-rightが効かないことがあります。

また、displayはnoneで非表示、blockでそのタグを表示、inheritで親要素に合わせて表示・非表示を変えるなどができます。inheritよりblockを使う方が良いと思います。

CSSはJavaScriptから変えることもできます。

あまり使いませんが、HTMLのタグの中に書くこともできます。

<div style="color: blue;"></div>

実際に触ってみる

JavaScriptのパートで実装したWebアプリに適用していきたいと思います。

今回はidに対して適用します。

style.cssというファイルを作って以下のように書きます。

style.css
#inputForm{
   color: red;
   background-color: rgb(234, 220, 177);
}

これはidがinputFormのところに適用されます。

このstyle.cssをindex.htmlで読み込みます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tax Calculator</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

+   <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Tax Calculator</h3>

    <div class="row">
    <div class="col-6 mx-auto">
        <input type="number" min="0" placeholder="金額" id="inputForm">
        <input type="number" min="0" placeholder="税率 (%)" id="tax">

        <button type="button" class="btn btn-primary" onclick="alertButton()">calculate</button>

        <p id="num"></p>
    </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

ここまでできたらLive Serverでサイトを見てみましょう。金額の入力フォームの色が濁った黄色になったと思います。cssのrgbのところに表示される色がついた四角にマウスポインターを合わせると細かく色を設定できる表示が出ます。

今書いたcssには、他にも2種類の書き方があります。

<style>
  #inputForm{
     color: red;
     background-color: rgb(234, 220, 177);
  }
</style>

<input type="number" min="0" placeholder="金額" style="color: red; background-color: rgb(234, 220, 177);" id="inputForm">

他にも好きなようにデザインを変えてみてください。

おわりに

長文をお読みいただき、本当にありがとうございました。できるだけ基本的な部分を広く触れられるようなチュートリアルを目指して作成しました。この記事をきっかけにWeb開発を始めてもらえると嬉しいです。

最後にWeb開発の注意点を1つ。Webサイトは基本的にブラウザを通して表示しますが、デバイスやブラウザごとにJavaScriptとCSSの仕様が若干異なるので、様々なブラウザやデバイスでチェックすることが大事です。(デバイスごとにCSSを作ることもできます。)特にSafari系かどうか、Apple製品かどうかが分かれ目になっており、大体Safari系とApple製品が面倒です。下に注意したい仕様を書いておきます。

例

  • "2025-01-01"というのをnew Dateで日付データにする場合、Safari系だとInvalid Dateというエラーが発生する
  • marginやpaddingの空き具合が異なる
1 2
MacのSafari Safari系
MacのChrome AndroidやWindowsと同じ
iPhone, iPadのSafari Safari系
iPhone, iPadのChrome Safari系
26
40
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
26
40

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?