Web Design

【JavaScript入門】初心者向けに基礎から文法をまとめました

2021年7月27日

JavaScript基礎知識、文法
  • JavaScriptの勉強を始めたけれど、HTMLCSSに比べて2〜3倍は難しく感じる……
  • もう一度、JavaScriptの基礎文法からやり直したい。理由は、基礎理解が重要だと思うから

この記事はそんな方へ向けて書いています。

 この記事でわかること

JavaScriptの基礎文法を網羅的にまとめた記事一覧
初心者の私が、わからないところを調べつつ書いた復習メモ
職業訓練校で学んだこと、疑問点回答がわかり、理解の助けになる

 本記事の信頼性

2021年6月からWebデザインの職業訓練校で学んでいます(6ヶ月コース)
使用テキスト:HTML&CSS、JavaScriptのきほんのきほん
ブログ歴:2019年1月にWordPressで開設(月間最高62,000PV、52,000円)

本記事を書いている私は、職業訓練校でHTMLCSSの基礎学習が終わり、JavaScriptの授業を受けています。
気づいたらJavaScriptに強い「苦手意識」を持っていました。

与えられた課題の前でフリーズ。
何もコードが書けない、何をすればいいかわからないのです。

「このままでまずい」と焦りに近い気持ちから、JavaScript基礎文法の復習を開始。

本記事は、職業訓練校オリジナルカリキュラムのJavaScript基礎文法をまとめています。
使用テキストも丹念に読み込み、過去の自分へ向けて理解しやすいよう書きました。

※ 0円のプログラミングスクールという近道
JavaScriptが難しいと感じている方は、最初の基礎ベースを身につけるためにスクールの無料体験を利用するのも一手。TechAcademyには1週間の無料体験があるので、これを使ってWebデザインの基礎を学ぶのもありですね。
» TechAcademyの無料体験はこちら

【JavaScript入門】初心者向けに基礎から文法をまとめました

JavaScriptとは

JavaScriptとはWebサイトやWebアプリケーションの作成に使用されるプログラミング言語。
計算などの「処理」をするプログラムでもあります。

たとえば、ボタンをクリックしたときにイベントを発生させたり、スライドショーやアニメーションなどの動きのあるコンテンツをつくることができます。

HTML、CSSだけではできない「動くコンテンツ(インタラクティブ)」を作れます。

こーいち
JavaScriptの文法はプログラミング言語の中でも、シンプルで覚えやすいほうと言われています。

JavaScriptを書く2つの方法

 javascriptを書く方法は、おおまかに2つです。

1.拡張子「.js」というファイルに書く
2.htmlファイルのscriptタグ内に書く

1つ目の「.js」ファイルを作り、書くことが多いです。
本記事では、サンプルの意味でhtmlファイルのscriptタグ内に書く想定で、ブログを書いていきます。

プログラムでできる4つのこと

出力
入力
分岐
繰り返し

すべてのプログラムは4つだけで動いています。

たとえば、テレビやレコーダーは入力、出力のみ。

こーいち
HTML、CSSは出力のみ(書いてあるものを出すだけ)で、分岐や繰り返しはできません。

JavaScriptの出力

 JavaScriptの出力

JavaScriptのアラート(alert)の使い方
JavaScriptのコンソール(console)の使い方

alert( )を使い、ブラウザに注意メッセージを出力できます。
文字列だけでなく、数値、変数、計算結果などポップアップ表示できます。

またconsole.log( )を使って、開発者ツールに出力できます。
具体的な出力場所は、ブラウザの画面で右クリックから「検証」→「Elementsの横のConsole」で確認できます。

JavaScriptの出力について、詳しくは【JavaScriptの出力】アラート、コンソールの使い方の基礎で解説しています。

JavaScript入力、出力
【JavaScriptの出力】アラート、コンソールの使い方の基礎

JavaScriptの入力

変数について
変数の使い方
変数の3つの種類

変数とはデータを格納しておく箱のようなもの。
さまざまな値を保持しておくJavaScriptの機能です。

変数を作成することを「定義する」という言い方をする場合もあります。
文章中の「共通部分」をデータとして代入しておくと、合理的に作業ができます。

 変数の定義方法3つ

var 変数名
let 変数名
const 変数名

【var】Variable(可変という意味)の略称。
変数を変更でき、かつ有効範囲が広い。

【let】変更可能の変数。
有効範囲が狭いため、変数名が被りにくく使い勝手が良い。

【const】有効範囲が狭く、変更不可の変数。
追記や変更もできません。

「const → let → var」の順番で使えばOK。

変数については、【JavaScriptの入力】変数の使い方、3つの種類を解説しますで詳しく解説しています。

JavaScriptの入力
【JavaScriptの入力】変数の使い方、変数の3つの種類を解説

続きを見る

JavaScriptの文字列【概要から連結】

JavaScriptの文字列の概要
JavaScriptの文字列の連結

文字列は'(シングルクォート)もしくは" (ダブルクォート)でくくって記述します。
文字列は加算演算子+で連結できます。
HTMLを出力するときは、"(ダブルクォート)などの記号も文字列の一部として扱う場合があります。
`(バッククォート)で括られた文字列では、${変数名}という形で文字列を結合できます。
その他の特徴として、`を使うとその中の改行が有効になります。

詳しくは、【JavaScriptの文字列】概要から連結結合をまとめましたで解説しています。

JavaScript文字列
【JavaScriptの文字列】概要から連結・結合をまとめました

続きを見る

JavaScriptの数値

JavaScriptの数値の概要
JavaScriptでの様々な計算例
JavaScriptの少し複雑な計算

数値とは数字のことです。
半角入力で、'(シングルクォート)や"(ダブルクォート)を使わずに記述します。
四則演算ができます。
( )がある場合は、( )を先に計算します。
割ったときの余りを求める剰余算もあります。

その他、HTMLの書き方やさまざまな計算例については、【JavaScriptの数値】概要から様々な計算例をまとめましたで解説しています。

JavaScriptの数値
【JavaScriptの数値】概要から様々な計算例をまとめました

JavaScriptの条件分岐【if構文】

if構文の書き方(else、else if)、記述例、注意点
if構文を使ってうるう年を判定する方法、記述例

分岐は大事なプログラムです。
なぜなら、HTMLではできないから。

「ある条件を満たした場合、処理する」というプログラムが可能。
条件に応じて、処理する内容を切り替えることができるのです。

以下のように。

もし○○だったら、XXをする。
そうじゃなくて●●だったら、YYをする。
○○でも●●でもなかったら、ZZをする。

if構文については、【JavaScriptの分岐】if構文の書き方、うるう年の判定方法で詳しく解説しています。

JavaScriptのif構文
【JavaScriptの分岐】if構文の書き方、うるう年の判定方法

JavaScriptの配列

JavaScriptの配列の定義方法、出力方法
配列を使って「今日の日付」を出力する

配列を使うと複数データの代入ができます。

たとえば、箱に仕切りをつけて複数データを入れるのが配列です。

配列の定義方法

配列は[  ] でくくります。
挿入したいデータを、,(半角カンマ)で羅列していきます。

const hairetsu = [ 'データ1' , 'データ2' , 'データ3' ];

配列の出力方法

配列データを出力するには、データの順番を [  ] で指定します。

console.log(hairetsu[1]);

データの順番は0から始まるので注意です。

その他、配列の基礎事項については、【基礎】JavaScriptの配列の定義方法【今日の日付を出力】で詳しく解説しています。

JavaScript配列
【基礎】JavaScriptの配列の定義方法【今日の日付を出力】

JavaScriptの繰り返し【for構文】

繰り返し処理を行なうfor構文の書き方
配列を使うfor構文や、for of 文について
for構文を使ったさまざまな繰り返し文

for構文は、同じような処理を繰り返すときに使います。
for構文は、次のような書式で書きます。

for( 初期化 ; 継続条件 ; 最終式 ){
 繰り返したい文
}

//初期化:繰り返しを始める前に初期化を実行
//継続条件:真偽値を書く式や関数を書く
//最終式:ブロックの処理のあとで毎回実行

配列と繰り返し文は相性が良く、組み合わせると連続的に処理できます。

「for of 文」は配列から1要素ずつ順番に取り出して繰り返しができます。

for( 変数 of 配列名 ){
 処理
}

その他、繰り返し処理についての詳細は、下記にまとめています。
»【JavaScript】繰り返しの処理を行なうfor構文の書き方

JavaScriptの繰り返し
【JavaScript】繰り返しの処理を行なうfor構文の書き方

JavaScriptのオブジェクト

JavaScriptのオブジェクトの定義と出力
オブジェクトを繰り返し文や配列で出力する方法

オブジェクト

オブジェクト(Object)は英語で「もの」という意味がありますが、JavaScriptでは「対象」と考えます。
JavaScriptではWebブラウザ内のさまざまな要素に「命令」できますが、その対象が「オブジェクト」です。

メソッド

メソッド(Method)には「方法」などの意味がありますが、JavaScriptでは「命令」と考えます。
オブジェクト(対象)に対して、「何を」して欲しいのかを示します。

パラメーター

パラメーター(Parameter)は「設定値」などの意味ですが、メソッドに対して調整を加えていきます。

JavaScriptの書式

オブジェクト.メソッド(パラメーター, パラメーター2, パラメーター2, …);

JavaScriptのオブジェクトについて詳しくは、JavaScriptのオブジェクトの定義と出力【配列、繰り返し】にまとめています。

JavaScriptオブジェクト
JavaScriptのオブジェクトの定義と出力【配列、繰り返し】

JavaScriptの関数

関数とは、複数の文をまとめて、名前をつけたもの。

関数をつくるメリットは2つです。

メリットその1:プログラムが理解しやすい
メリットその2:関数を何回でも呼び出せる

関数の書き方は、複数あります。

1.他のプログラムでもよく使われる方法
function 関数名( [引数] ){
 処理
}

2.javascriptならではの変数に格納する方法
const 関数名 = function( [引数] ){
 処理
}

3.アロー関数
const 関数名 = ( [引数] ) => {
 処理
}

関数の書き方、記述例、引数、戻り値について、JavaScriptの関数の書き方と使い方【引数と戻り値について】で詳しく解説しています。

JavaScriptの関数
JavaScriptの関数の書き方と使い方【引数と戻り値について】

JavaScriptのイベント処理の書き方

イベントとはユーザーの動作のタイミングに合わせて、処理を実行させること。

ボタンをクリック
フォームに入力する
マウスカーソルを動かした

イベント実行までの3つの手順は、おおまかに以下のとおり。

手順①:関数の定義
手順②:HTMLの取得
手順③:イベントのセット

JavaScriptのイベント処理の書き方【3つの手順】
querySelector、addEventListenerの使い方
無名関数の使い方、書き方の例文

上記内容について、詳しくはJavaScriptのイベント処理の書き方【3つの手順/無名関数】で解説しています。

JavaScriptのイベント
JavaScriptのイベント処理の書き方【3つの手順/無名関数】

JavaScriptの真偽値判定とif構文

真偽値は、使える値があらかじめ決まっています。
文字列や数値と違い、以下のどちらかしか使えません。

true → 「真」と書き、条件を満たした状態を表します。
false → 「偽」と書き、条件を満たしてない状態を表します。

詳細はトグルボタンの書き方と合わせて、下記記事で解説しています。
» JavaScriptの真偽値判定とif構文【トグルボタンを作ろう】

JavaScriptの真偽値判定とif構文【トグルボタンを作ろう】
JavaScriptの真偽値判定とif構文【トグルボタンを作ろう】

続きを見る

以上となります。

こーいちより

関連記事【Dreamweaverとは】基本的な使い方と、おすすめ環境設定
関連記事【初心者向け】Webデザイン基礎知識まとめ【入門から色彩、配色】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.