LoginSignup
0
0
お題は不問！Qiita Engineer Festa 2024で記事投稿！
Qiita Engineer Festa20242024年7月17日まで開催中！
@masamasamasami

JavaScript入門 #最初の一歩

Posted at

初めに

フロント開発をするようになりHTMLとCSSを一口かじった時点でJavaScriptの存在を知り学ぶ必要があったので初心者ながら学んだことを記事にしていきたいと思います！

書籍を用いて学んでいる余裕はなかったので今回は以下のサイトのチュートリアルを用いて学んでいますので初心者の方がいらっしゃったらご参考までに！

ただ、筆者の頭の中でいまいち体系的にまとめきれておらず、単語帳のような構成になっている部分がありますのでご了承ください。

JavaScriptとは

download.png

JavaScriptは、ウェブページに複雑な機能を実装することを可能にするプログラミング言語（スクリプト）です。動的に更新されるコンテンツを作成したり、マルチメディアを制御したり、画像をアニメーションさせたり、その他ほとんどすべてを可能にします。

何ができるのか

  • ウェブページの操作

HTML要素の内容やスタイルを動的に変更でき、ユーザーの入力を取得し、それに応じた動作を行うことができます。

  • イベント処理

ボタンクリックやマウスの動きなどのイベントが発生した際に、特定の処理を実行することができます。

  • 非同期処理

ネットワーク通信やファイルの読み書きなど、時間のかかる操作を非同期に処理することができます。

  • クッキーやローカルストレージの操作

クライアント側でデータを保持したり、クッキーやローカルストレージにデータを保存したりすることができます。

  • アニメーションとビジュアルエフェクト

CSSと組み合わせて要素のアニメーションを制御したり、SVGや
HTML5 Canvasを使ってグラフィックを描画したりすることができます。

  • データの操作と処理

配列やオブジェクトを操作し、データの整理や変換を行うことができ、数学的な計算や日付操作、文字列の処理などもサポートしています。

  • サードパーティのAPIとの連携

外部のAPIを使用してデータを取得し、それをウェブページに表示することができます

  • クライアントサイドでのフレームワークとライブラリ

ReactやVue.jsなどのフレームワークや、jQueryなどのライブラリを使用して、効率的にウェブアプリケーションを開発することができます。

これらすべてを本記事で解説します！どころか筆者はHelloWord出力できるどころかやり方もわからないので本記事ではそれ以前の導入について説明していこうと思います。

チュートリアルをやってみる

では早速チュートリアルをやっていこうと思います。参考にしたサイトでは出力結果がわかりやすいようにalert()メソッドを用いて出力を行っていました。

アラートメソッドは、任意のテキストメッセージをポップアップで画面に表示することが出来ます。

基礎編

scriptタグ

JavaScriptプログラムでは、scriptタグを使用してHTML文書の任意の部分に挿入することが出来ます。

使い方
<!DOCTYPE HTML>
<html>
<body>
  <script>
    alert( 'Hello, world!' );
  </script>
</body>
</html>

外部スクリプト

HTMLにsrc属性を追加し、外部スクリプトを利用することで別ファイル上のJavaScriptコードを実行することが出来ます。

src属性
<script src="JavaScriptファイルのパス名もしくはURL"></script>

もし外部スクリプトを用いた際にスクリプトの中身にも命令文を記述した場合、中身のスクリプトは無視されます

命令文の構造

命令文（文）は構文構造でアクションを実行するコマンドを指します。

文と文はセミコロン;で区切ることが出来ますが、改行を行うことでも別々の分として解釈されます（暗黙のセミコロン）

暗黙的
alert('Hello'); alert('World');
明示的
alert('Hello')
alert('World')

これら2つの実行結果は等しくなります。

コメントの追加

コメントアウトするとエンジンはその部分を無視してくれます。

  • //：一行コメントアウト
1行
// この行全体がコメントになります。
alert('Hello');

alert('World'); // このコメントは文の後に続いています。
  • /* から */：複数行コメントアウト
複数行
/* 2つのメッセージを含む例。
これは複数行のコメントです。
*/
alert('Hello');
alert('World');

use strictで動作方法の指定

use strictをスクリプトの先頭で宣言した場合、そのスクリプトは最新の方法で動作します。また古いブラウザを使用する場合確実に動作させるためには、ラッパーの中に置きます。

現時点ではラッパーの説明は筆者もよくわかっていないので省きます

方法１
'use strict'; <Shift+Enter で改行>
//  ...コードを書く
<Enter で実行>
方法２
(function() {
  'use strict';
  // ...コードを書く...
})()

最新のJavaScriptは高度な言語構造をサポートしており、use strictを自動的に有効にするため明示的に宣言する必要がない可能性があります。

変数とは

変数とは名前付けされたデータの格納場所を示します。

letを用いて作成し、代入演算子を用いて格納します。

変数の宣言・格納・表示
let message = 'Hello world!';
alert(message);               //表示

また、カンマ,を用いて一つの文に複数の変数を宣言することもできます

複数の変数の宣言
let user = 'John', age = 25, message = 'Hello';

定数の宣言

変数を定数として宣言するにはconstを用います。この宣言方法で宣言された変数を変更しyぴとした場合エラーとなります。

定数の宣言
const myBirthday = '18.04.1982';
myBirthday = '01.01.2001';       // エラーが発生

ほかの言語と同様に予約語を変数名として扱うことはできません。

データ型

ここでは基本的なデータの値の種類（データ型）について説明していきます。

変数はどんなデータでも入れることができ、後から変更することもできます。

数値型

数値 型は整数と浮動小数点両方に使われ、対応する操作（演算子）がたくさんあります。

数値型の宣言
let n = 123;
n = 12.345;

文字列型

JavaScriptの文字列は引用符（'もしくは"もしくはバッククォート ）で囲む必要があります。

ダブル/シングルクォートは “シンプルな” 引用符です。JavaScriptの中ではそれらに違いはありません。

しかし、バッククォートは “拡張機能” の引用符です。変数を ${…} の中にラップすることで、変数を埋め込み文字列の中で表現することができます。

文字列型の扱いの違い
let name = "John";

//普通の引用符の場合
alert( "Hello, ${name}!" ); // Hello, ${name}!

// 変数が埋め込まれた場合
alert( `Hello, ${name}!` ); // Hello, John!

// 式が埋め込まれた場合
alert( `the result is ${1 + 2}` ); // 結果は 3

論理型

boolean型は、trueとfalseの2つの値だけを持ちます

論理型の宣言
let a = true; 
let b = false;

“undefined”値

値が代入されていないことを示すデータ型であり、一度代入した変数に対しても再度undefind型に戻すことが出来ます。

undefind型
let x;
alert(x); // "undefined" 

let age = 100;
age = undefined; // 値を undefined に変更
alert(age); // "undefined"

オブジェクトとシンボル型

object型は、データのコレクションやより複雑なエンティティを格納するために使われます。

symbol型はオブジェクトの一意な識別子を作るのに使われます。

どうやら説明がややこしいため本記事での説明は控えますが参考リンクだけ貼り付けておきますのでご参考までに。

オブジェクト：

シンボル：

typeof演算子

typeof演算子は引数の型を返します。見た方が早いと思うのでコードを示します。

typeof演算子の使い方
typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

インタラクション

ここではユーザと対話するための関数（インタラクション）をいくつか説明します。

alert

今まで使用してきた通りで、メッセージを表示しユーザが “OK” をクリックするのを待ちます。

prompt

ユーザにテキスト入力を求めるメッセージを表示します。テキスト、もしくはCANCEL/ Esc がクリックされた場合はすべてのブラウザは null を返します。

promptメソッド
let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // You are 100 years old!

confirm

メッセージを表示し、ユーザが “OK” または “CANCEL” を押すのを待ちます。OKの場合は true を、CANCEL/Esc の場合は false を返します。

confirmメソッド
let isBoss = confirm("Are you the boss?");
alert( isBoss ); // true OKが押された場合

演算子

ここではJavaScriptに用いる演算子について説明します。

演算子一覧

一般的な演算子を表形式で紹介します。

演算子 処理内容
＝ 代入
＋ 加算
ー 減算
＊ 乗算
/ 除算
％ 余剰
＊＊ べき乗
＞ より大きい
＜ より小さい
=> 以上
=< 以下
== 等位チェック
!= 等しくない

文字列同士の連結にも+を用いることが出来ます。
追記：比較演算子も含めておきました。

インプレース修正

変数に演算子を適用したあと、新しい結果を同じ変数に格納することが出来ます。

in-place
let n = 2;
n += 5; // n = 7 (n = n + 5 と同じ)
n *= 2; // n = 14 (n = n * 2 と同じ)

alert( n ); // 14

同様に-=や/=という感じに使うことが出来ます。

インクリメント/デクリメント

  • インクリメント

ある数値を1ずつ増やします。

  • デクリメント

ある数値を1ずつ減らします。

  • 前置式と後置式について

演算子 ++ と -- は変数の前後両方に配置することができます。結果はどちらも同じなのですが、演算結果として前置式は新しい値を返す一方、後置式は古い値を返します。このように戻り値を使う場合にだけ結果に違いが現れます。

前置式
let counter = 1;
let a = ++counter; // (*)

alert(a); // 2
前置式
let counter = 1;
let a = counter++; // (*) ++counter を counter++ に変更

alert(a); // 1

条件分岐

ある条件に基づいて処理内容を変更するときにif文を用います
if文は与えられた条件を評価します。結果が true であればコードを実行します。

条件分岐
let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

else・else if文

いくつかの条件パターンを定義するときに使います

条件分岐
let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

ifの代わりに？を使う方法

if文を使う以外にも疑問符?を用いることで条件分岐を表現することが出来ます。

条件分岐
let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message );

初心者としては無難にif文を使えばいいんじゃない？と感じたのが正直なところです。

論理演算子

ここでは４つの論理演算子を扱います。本段落では基本的にコードの書き方のみを掲載しようと思います。

OR

OR
result = a || b;

AND

AND
result = a && b;

AND(&&)演算子の優先順位はOR(||)よりも高いため、同じ条件式に二つ含む際には注意が必要です。

NOT

NOT
result = !value;

NULL合体演算子

これについてはよくわからなかったので説明していきたいと思います。

  • 結論

NULL合体演算子は??で記述される。

a ?? bの結果はaがnullあるいはundefinedでなければaとなりそれ以外はbとなる。

NULL合体演算子
result = (a !== null && a !== undefined) ? a : b;

2つのうちから、最初の “定義済み” の値を取得するために利用します。

  • ORとの使い分け

変数が null/undefined の場合にのみデフォルト値を使用したい場合がありその時にこの??演算子が活きてきます。

NULL合体演算子とORの比較
let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

書いたはいいものの本質を理解できてない気がしました

ループ処理

繰り返し処理を行う際にはfor文とwhile文があります。

繰り返し処理まとめ
// 1
while (継続条件) {
  //繰り返し内容
}

// 2
do {
  //繰り返し内容
} while (継続条件);

// 3
for(let i = 開始; i < 終了; i++) {
  //繰り返し内容
}

switch文

switch文は値を複数のパターンと比較するために使用されます。

NULL合体演算子とORの比較
let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
    break;
  case 4:
    alert( 'Exactly!' );
    break;
  case 5:
    alert( 'Too large' );
    break;
  default:
    alert( "I don't know such values" );
}

case分の中で複数の条件について同じ処理を行いたいとき（＝グルーピング化）

NULL合体演算子とORの比較
let a = 2 + 2;

switch (a) {
  case 4:
    alert('Right!');
    break;

  case 3:                    // (*) 2つのケースをグループ化
  case 5:
    alert('Wrong!');
    alert("Why don't you take a math class?");
    break;

  default:
    alert('The result is strange. Really.');
}

関数

関数は、同じアクションを実行する必要がある場合に活躍します。

定義た関数に対して名前を付け、必要であれば（）を使って引数の設定を行います。

関数の定義と呼び出し
function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
関数の定義と呼び出し（引数あり）
function showMessage(from, text) { // 引数: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

さいごに

今回はJavaScriptのなかでも基礎中の基礎を記載しましたが最後の方は参考にしているサイトに記載されているソースコードをそのまま持ってきていますので、私の説明で分からなければ直ちに参考サイトに移動することをお勧めします。
情けない締め方になりましたが、関数の機能であったりブラウザ管理機能たったりフレームワークについても学習していく予定ですので学び次第記事に書き起こそうと思います！

0
0
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
0
0