Webでもスマホでも
どこでも使えるJavascriptの基本

javascriptとは世界で最も多く使われているプログラミング言語です。javascriptはwebサイトでもスマホアプリでも、デバイスを選ばず開発が進められる万能な言語だからです。今やフロントエンドだけでなくあらゆる開発シーンでなくてはならない技術になっています。

javascriptには多彩なフレームワークがあり、開発したいものによりフレームワークを使いわけることにより、効率良く開発を行うことが可能になります。一番有名なフレームワークとしてはjQueryがありますが、ReactやAngularJS・Vueなど新しくフレームワークの開発が進んでおり、場合によってはこちらの方が主流になっている場合もあります。（フレームワークについては別途記事でまとめる予定です）

今回はjavascriptの基礎的な文法などをまとめました。先日まとめたrubyよりは多少複雑にはなりますが、Javaなどのコンパイル言語よりはシンプルに記載する事ができます。

Javascriptのメリット

1. どんなデバイスでも使える
2. 豊富なライブラリ・フレームワークが存在する
3. フロントエンド・バックエンド両方で使用できる
4. adobeアプリケーションの効率化や動画制作にも使える

Javascriptの記載方法

以下の例だと、「Hello World」をコンソールに出力しています。1行で書けていますがrubyよりはややこしい感じがします。

console.log("Hello World");
=> Hello World

Javascriptの演算子

代数演算子

#足し算
10 + 10
=> 20

#引き算
10 + 5
=> 5

#掛け算
10 * 5
=> 50

#割り算
10 / 5
=> 2

#あまり
10 % 3
=> 1

#乗
10 ** 2
=> 100

比較演算子

#等しい
a == b

#等しくない
a != b

#小さい
a < b 

#以下
a <= b 

#以上
a >= b 

論理演算子

#aでないとき
!a

#a かつ b
a && b   

#a または b
a || b   

三項演算子

#aが真のときb、偽のときc
a ? b : c 

javascriptの条件式・繰り返し

if文

a = 0
if (a == 0){
  console.log("aは0です");
} else {
  console.log("aは0ではありません");
}

=> aは0です

for文

for( var i = 1; i <= 10; i++){
    console.log(i);
}

=>
1
2
3
4
5
6
7
8
9
10

while文

i = 1
while(i <= 10){
  console.log(i);
  i++;
}

=>
1
2
3
4
5
6
7
8
9
10

Javascriptの配列・ハッシュ

配列

array = ["a", "b", "c"]
console.log(array[0]);
console.log(array[1]);
console.log(array[2]);

=>
a
b
c

ハッシュ

hash = { first: "one", second: "two",third: "three"}

puts hash["first"]
puts hash["second"]
puts hash["third"]

=>
one
two
three

Javascriptの基本的なメソッド一覧

メソッドとはオブジェクトに追加することで、オブジェクトを変化させることができます。オブジェクトを持たずに単体で動作するメソッドも存在します。基本的なメソッドを以下にまとめました。