JavaScriptのまとめ

言語
スポンサーリンク

言語ごとに書き方が若干異なる部分を中心にまとめています。

特徴

JavaScriptは、1995年にBrendan Eichによって開発されたスクリプト言語です。その特徴は以下の通りです。

  • ブラウザ上で動作すること。JavaScriptは、HTMLやCSSと組み合わせてWebページを動的に操作するために使用されます
  • オブジェクト指向プログラミングの要素を持つこと
  • 非同期処理を扱うことができること
  • イベント駆動型のプログラミングができること
  • 大量のフレームワークやライブラリが存在し、それらを使うことで、開発効率を高めることができる
  • 最近では、サーバサイドでも使用されるようになった

JavaScriptは、Web開発において非常に重要な役割を担っており、主にWebブラウザ上で動的な操作や動画の表示、フォームの入力チェックなどを行うために使用されます。
また、現在では、JavaScriptのフレームワークやライブラリを使用し、クライアントサイドだけでなくサーバサイドでもJavaScriptを使用することができるようになってきています。

お試し実行環境

ブラウザでプログラミング・実行ができる「オンライン実行環境」| paiza.IO
paiza.IOはオンラインですぐにプログラミングが始められる、オンライン実行環境です。Java,Ruby,Python,PHP,Perlなど主要24言語に対応。プログラミング学習にも。

Eラーニング

JavaScript体験編
JavaScript体験編のレッスン一覧です。各レッスンは、それぞれ数本の3分程度の動画(チャプター)とそれに対応した演習問題で構成されています。
JavaScript入門編
この入門講座ではJavaScriptの基本について短時間で学習できます。「変数」「条件分岐」「比較演算子」「ループ処理」などを理解し記述できるようになります。

参考サイト

JavaScript | MDN
JavaScript (JS) は軽量で、インタープリター型、あるいは実行時コンパイルされる、第一級関数を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト言語として知られ、多くのブラウザー以外の環境、例えば Node.js や Apache CouchDB や Adobe Acrobat などでも使...

ログだし

console.log("Hello world");

// カンマ区切りで変数の内容を出力することもできる
let hoge = "fuga";
console.log("hoge:", typeof hoge, hoge);

コメント

// 1行コメント
/*
複数行コメント
*/

算術演算子

演算子 説明
+ 足し算
引き算
* 掛け算
/ 割り算
% 割り算の余り
** 累乗
++ インクリメント
デクリメント
| ビット加算

命名規則

種別 説明
クラス名 先頭を大文字にし、単語の先頭を大文字にする(パスカルケース / アッパーキャメルケース)
メソッド名 先頭を小文字にし、単語の先頭を大文字にする(キャメルケース)
定義名 全て大文字にする
変数名 先頭を小文字にし、単語の先頭を大文字にする(キャメルケース)
プロパティ名 先頭を小文字にし、単語の先頭を大文字にする(キャメルケース)
コンポーネント名 先頭を大文字にする(パスカルケース / アッパーキャメルケース)
※Vue.jsの場合のコンポーネント名は単語をハイフンで連結する(ケバブケース)

変数宣言

let hoge;    // ブロックスコープ、再宣言不可
var fuga;    // 関数スコープ、再宣言可能
const piyo;  // ブロックスコープ、再代入不可

制限と慣習

数値を先頭には使えない。
変数名にハイフンは使えない。
先頭は小文字にする。

テンプレートリテラル

「“」の中に「${変数名}」で変数を使用できる。

let hoge = "ほげ";
console.log(`${hoge}さん`);

letとconstの違い

constは再代入できない変数を定義できるが、constで宣言したオブジェクトのプロパティは変更可能となっている。

let hoge             // letは初期値無しで宣言できる
const fuga = "fuga"  // constは初期値が必須となる

hoge = "hoge"        // letで宣言した変数には再代入可能
//fuga = "fugafuga"  // constで宣言した変数には再代入不可

const piyo = {
    value: 1
}

//piyo = {           // constで宣言したオブジェクトなので再代入不可
//    value: 2
//}
piyo.value = 2       // 但し、constで宣言したオブジェクトでもプロパティへの再代入は可能

console.log(hoge, fuga, piyo)

関数定義

functionで定義できるが、「=>」を使って定義することもできる。

// 名前付き関数
function logMessage1(message) {
    console.log(message)
}

// 関数式
const logMessage2 = function(message) {
    console.log(message)
}

// アロー関数
const logMessage3 = (message) => [
    console.log(message)
]

// アロー関数の省略機能
const logMessage4 = (message) => console.log(message)

logMessage1("Hello world 1")
logMessage2("Hello world 2")
logMessage2("Hello world 3")
logMessage2("Hello world 4")

デフォルト引数

引数を与えなくてもデフォルト値で動作することができる。

const logMessage = (message1 = "Hello", message2 = "world") => {
    console.log(message1, message2)
}

logMessage()
logMessage("hoge")
logMessage("hoge", "fuga")
logMessage("hoge", "fuga", "piyo")

キャスト

parseInt(hoge);
parseFloat(fuga)

条件演算子

<条件式> ? <真式> : <偽式>

比較演算子

演算子 説明
== 等しい
!= 等しくない
> より大きい
>= 以上
< より小さい
<= 以下
=== 同一オブジェクト
!== 異なるオブジェクト

真偽値

型・定義 説明
Boolean
true / 0以外(-1でも可)
false / 0 / “” / null / undefined
タイトルとURLをコピーしました