言語ごとに書き方が若干異なる部分を中心にまとめています。
特徴
JavaScriptは、1995年にBrendan Eichによって開発されたスクリプト言語です。その特徴は以下の通りです。
- ブラウザ上で動作すること。JavaScriptは、HTMLやCSSと組み合わせてWebページを動的に操作するために使用されます
- オブジェクト指向プログラミングの要素を持つこと
- 非同期処理を扱うことができること
- イベント駆動型のプログラミングができること
- 大量のフレームワークやライブラリが存在し、それらを使うことで、開発効率を高めることができる
- 最近では、サーバサイドでも使用されるようになった
JavaScriptは、Web開発において非常に重要な役割を担っており、主にWebブラウザ上で動的な操作や動画の表示、フォームの入力チェックなどを行うために使用されます。
また、現在では、JavaScriptのフレームワークやライブラリを使用し、クライアントサイドだけでなくサーバサイドでもJavaScriptを使用することができるようになってきています。
お試し実行環境
ブラウザでプログラミング・実行ができる「オンライン実行環境」| paiza.IO
paiza.IOはオンラインですぐにプログラミングが始められる、オンライン実行環境です。Java,Ruby,Python,PHP,Perlなど主要32言語に対応。プログラミング学習にも。
Eラーニング
JavaScript体験編
JavaScript体験編のレッスン一覧です。各レッスンは、それぞれ数本の3分程度の動画(チャプター)とそれに対応した演習問題で構成されています。
JavaScript入門編
この入門講座ではJavaScriptの基本について短時間で学習できます。「変数」「条件分岐」「比較演算子」「ループ処理」などを理解し記述できるようになります。
参考サイト
JavaScript | MDN
JavaScript (JS) は軽量でインタープリター型(あるいは実行時コンパイルされる)第一級関数を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト言語として知られ、多くのブラウザー以外の環境、例えば Node.js...
ログだし
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 | 偽 |