- 「JavaScriptの勉強を始めたけれど、HTML・CSSに比べて2〜3倍は難しく感じる……」
- 「もう一度、JavaScriptの基礎文法からやり直したい。理由は、基礎理解が重要だと思うから」
この記事はそんな方へ向けて書いています。
この記事でわかること
・JavaScriptの基礎文法を網羅的にまとめた記事一覧
・初心者の私が、わからないところを調べつつ書いた復習メモ
・職業訓練校で学んだこと、疑問点・回答がわかり、理解の助けになる
本記事の信頼性
・2021年6月からWebデザインの職業訓練校で学んでいます(6ヶ月コース)
・使用テキスト:『HTML&CSS、JavaScriptのきほんのきほん』
・ブログ歴:2019年1月にWordPressで開設(月間最高62,000PV、52,000円)
本記事を書いている私は、職業訓練校でHTML・CSSの基礎学習が終わり、JavaScriptの授業を受けています。
気づいたらJavaScriptに強い「苦手意識」を持っていました。
与えられた課題の前でフリーズ。
何もコードが書けない、何をすればいいかわからないのです。
「このままでまずい」と焦りに近い気持ちから、JavaScript基礎文法の復習を開始。
本記事は、職業訓練校オリジナルカリキュラムのJavaScript基礎文法をまとめています。
使用テキストも丹念に読み込み、過去の自分へ向けて理解しやすいよう書きました。
※ 0円のプログラミングスクールという近道
JavaScriptが難しいと感じている方は、最初の基礎ベースを身につけるためにスクールの無料体験を利用するのも一手です。TechAcademyには1週間の無料体験があるので、これを使ってWebデザインの基礎を学ぶのもありですね。
» TechAcademyの無料体験はこちら
Contents
【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の入力
・変数について
・変数の使い方
・変数の3つの種類
変数とはデータを格納しておく箱のようなもの。
さまざまな値を保持しておくJavaScriptの機能です。
変数を作成することを「定義する」という言い方をする場合もあります。
文章中の「共通部分」をデータとして代入しておくと、合理的に作業ができます。
変数の定義方法3つ
・var 変数名
・let 変数名
・const 変数名
【var】Variable(可変という意味)の略称。
変数を変更でき、かつ有効範囲が広い。
【let】変更可能の変数。
有効範囲が狭いため、変数名が被りにくく使い勝手が良い。
【const】有効範囲が狭く、変更不可の変数。
追記や変更もできません。
「const → let → var」の順番で使えばOK。
変数については、【JavaScriptの入力】変数の使い方、3つの種類を解説しますで詳しく解説しています。
-
【JavaScriptの入力】変数の使い方、変数の3つの種類を解説
JavaScriptの文字列【概要から連結】
・JavaScriptの文字列の概要
・JavaScriptの文字列の連結
文字列は'(シングルクォート)もしくは" (ダブルクォート)でくくって記述します。
文字列は加算演算子+で連結できます。
HTMLを出力するときは、"(ダブルクォート)などの記号も文字列の一部として扱う場合があります。
`(バッククォート)で括られた文字列では、${変数名}という形で文字列を結合できます。
その他の特徴として、`を使うとその中の改行が有効になります。
詳しくは、【JavaScriptの文字列】概要から連結・結合をまとめましたで解説しています。
-
【JavaScriptの文字列】概要から連結・結合をまとめました
JavaScriptの数値
・JavaScriptの数値の概要
・JavaScriptでの様々な計算例
・JavaScriptの少し複雑な計算
数値とは数字のことです。
半角入力で、'(シングルクォート)や"(ダブルクォート)を使わずに記述します。
四則演算ができます。
( )がある場合は、( )を先に計算します。
割ったときの余りを求める剰余算もあります。
その他、HTMLの書き方やさまざまな計算例については、【JavaScriptの数値】概要から様々な計算例をまとめましたで解説しています。
-
【JavaScriptの数値】概要から様々な計算例をまとめました
JavaScriptの条件分岐【if構文】
・if構文の書き方(else、else if)、記述例、注意点
・if構文を使ってうるう年を判定する方法、記述例
分岐は大事なプログラムです。
なぜなら、HTMLではできないから。
「ある条件を満たした場合、処理する」というプログラムが可能。
条件に応じて、処理する内容を切り替えることができるのです。
以下のように。
もし○○だったら、XXをする。
そうじゃなくて●●だったら、YYをする。
○○でも●●でもなかったら、ZZをする。
if構文については、【JavaScriptの分岐】if構文の書き方、うるう年の判定方法で詳しく解説しています。
-
【JavaScriptの分岐】if構文の書き方、うるう年の判定方法
JavaScriptの配列
・JavaScriptの配列の定義方法、出力方法
・配列を使って「今日の日付」を出力する
配列を使うと複数データの代入ができます。
たとえば、箱に仕切りをつけて複数データを入れるのが配列です。
配列の定義方法
配列は[ ] でくくります。
挿入したいデータを、,(半角カンマ)で羅列していきます。
const hairetsu = [ 'データ1' , 'データ2' , 'データ3' ];
配列の出力方法
配列データを出力するには、データの順番を [ ] で指定します。
console.log(hairetsu[1]);
データの順番は0から始まるので注意です。
その他、配列の基礎事項については、【基礎】JavaScriptの配列の定義方法【今日の日付を出力】で詳しく解説しています。
-
【基礎】JavaScriptの配列の定義方法【今日の日付を出力】
JavaScriptの繰り返し【for構文】
・繰り返し処理を行なうfor構文の書き方
・配列を使うfor構文や、for of 文について
・for構文を使ったさまざまな繰り返し文
for構文は、同じような処理を繰り返すときに使います。
for構文は、次のような書式で書きます。
for( 初期化 ; 継続条件 ; 最終式 ){
繰り返したい文
}
//初期化:繰り返しを始める前に初期化を実行
//継続条件:真偽値を書く式や関数を書く
//最終式:ブロックの処理のあとで毎回実行
配列と繰り返し文は相性が良く、組み合わせると連続的に処理できます。
「for of 文」は配列から1要素ずつ順番に取り出して繰り返しができます。
for( 変数 of 配列名 ){
処理
}
その他、繰り返し処理についての詳細は、下記にまとめています。
»【JavaScript】繰り返しの処理を行なうfor構文の書き方
-
【JavaScript】繰り返しの処理を行なうfor構文の書き方
JavaScriptのオブジェクト
・JavaScriptのオブジェクトの定義と出力
・オブジェクトを繰り返し文や配列で出力する方法
オブジェクト
オブジェクト(Object)は英語で「もの」という意味がありますが、JavaScriptでは「対象」と考えます。
JavaScriptではWebブラウザ内のさまざまな要素に「命令」できますが、その対象が「オブジェクト」です。
メソッド
メソッド(Method)には「方法」などの意味がありますが、JavaScriptでは「命令」と考えます。
オブジェクト(対象)に対して、「何を」して欲しいのかを示します。
パラメーター
パラメーター(Parameter)は「設定値」などの意味ですが、メソッドに対して調整を加えていきます。
JavaScriptの書式
オブジェクト.メソッド(パラメーター, パラメーター2, パラメーター2, …);
JavaScriptのオブジェクトについて詳しくは、JavaScriptのオブジェクトの定義と出力【配列、繰り返し】にまとめています。
-
JavaScriptのオブジェクトの定義と出力【配列、繰り返し】
JavaScriptの関数
関数とは、複数の文をまとめて、名前をつけたもの。
関数をつくるメリットは2つです。
メリットその1:プログラムが理解しやすい
メリットその2:関数を何回でも呼び出せる
関数の書き方は、複数あります。
1.他のプログラムでもよく使われる方法
function 関数名( [引数] ){
処理
}
2.javascriptならではの変数に格納する方法
const 関数名 = function( [引数] ){
処理
}
3.アロー関数
const 関数名 = ( [引数] ) => {
処理
}
関数の書き方、記述例、引数、戻り値について、JavaScriptの関数の書き方と使い方【引数と戻り値について】で詳しく解説しています。
-
JavaScriptの関数の書き方と使い方【引数と戻り値について】
JavaScriptのイベント処理の書き方
イベントとはユーザーの動作のタイミングに合わせて、処理を実行させること。
・ボタンをクリック
・フォームに入力する
・マウスカーソルを動かした
イベント実行までの3つの手順は、おおまかに以下のとおり。
手順①:関数の定義
手順②:HTMLの取得
手順③:イベントのセット
・JavaScriptのイベント処理の書き方【3つの手順】
・querySelector、addEventListenerの使い方
・無名関数の使い方、書き方の例文
上記内容について、詳しくはJavaScriptのイベント処理の書き方【3つの手順/無名関数】で解説しています。
-
JavaScriptのイベント処理の書き方【3つの手順/無名関数】
JavaScriptの真偽値判定とif構文
真偽値は、使える値があらかじめ決まっています。
文字列や数値と違い、以下のどちらかしか使えません。
・true → 「真」と書き、条件を満たした状態を表します。
・false → 「偽」と書き、条件を満たしてない状態を表します。
詳細はトグルボタンの書き方と合わせて、下記記事で解説しています。
» JavaScriptの真偽値判定とif構文【トグルボタンを作ろう】
-
JavaScriptの真偽値判定とif構文【トグルボタンを作ろう】
以上となります。
こういちより
関連記事【Dreamweaver】初心者向けの使い方とおすすめの環境設定
関連記事【初心者向け】Webデザイン基礎知識まとめ【入門から色彩、配色】