JavaScript基本構造
JavaScriptとは
JavaScriptとは
JavaScriptはWebに特化したプログラミング言語の1つで、動的なWebページの制作などに用いられます。
JavaScriptはクライアントサイドでもサーバーサイドでもどちらでも利用可能なプログラミング言語です。
JavaScriptはオブジェクト指向を使っている。
JavaScriptのコードはHTMLファイルに直接記述するか、別ファイルに記述してHTMLファイルから読み込んで実行します。
基本の書き方
- HTML内にScriptタグで埋め込み
<body>
<script>
'use strict';
console.log('Hello world');
</script>
</body>
このuse strictによって厳密なエラーチェックが行われる。
また、console log('')でコンソールに表示することができる。
今回は"Hello World"と表示される。
扱えるデータ型
基本データ型
1. 文字列（string）：'hello' "hello"
2. 数値（number）：５ 5.5 -5 -5.5
3.undefined：undefined（定義されていない）
4. null：null（値自体がない）
5. 真偽値（Boolean）：true false
論理記号:①>と<
②<=と>=
③===と!===
※console.log(typeof 5)でnumberと出力される。
このようにtypeofでデータ型を調べることができる。
オブジェクト型
6.object: {a:3,b:5}
注意点
let x = [1,2];
let y = x;
x[0] = 5;
console.log(x);
console.log(y);
上記の出力はｘは[5,2]ｙも[5,2]となる。
これはobject型の変数のコピー（ｙ）は元の変数を
参照しているだけであるからだ。
演算子
//コード1
console.log('5' * 3);
//出力15
//コード2
console.log('5' - '3');
//出力2
//コード3
console.log('5' + 3);
//出力53
//コード４
console.log(parseInt('5',10)+3);
//出力８
コード３のように＋の時だけ文字列の結合として判断される。
文字列型をINT型に変換したいときは
コード４の通りparseInt('文字列',進数指定)を用いてできる。
このとき、文字列の中に数字になりえない文字列が来てしまうと
出力がNaNとなる（NaN→Not a Number）。
if
if(条件式){
処理
}else if(条件B){
処理
}else{
処理
}
もしくは
条件式?trueの処理:falseの処理;
for
for(let i = 1;i<=10;i++){
console.log(`${i}hello`);
}
以上のようにfor文を書くことができる。
console.log(${i}hello);の${i}は変数の埋め込み時に使う。
continue break
for(let i = 1; i<= 10;i++){
if(i % 3 === 0){
continue;//スキップ
}
console.log(i);
}
for(let i = 1; i<= 10;i++){
if(i % 3 === 0){
break;//プログラム終了
}
console.log(i);
}
関数
関数宣言
function show(name='taro') {
console.log(`${name}`)
}
上記のように関数を書く。引数では上記のように初期値を決めることができる。
function sum(a,b,c) {
return a+b+c;
}
const total =sum(1,2,3) + sum(2,3,4);
console.log(total);
関数式
const sum = function(a,b,c) {
return a+b+c;
};
アロー関数
const sum = (a, b, c) => {
return a + b + c;
};
配列の操作
const a = [1,5,10];
//add
a.unshift(100);//先頭に挿入
a.splice(2,0,6,7);//2番目の値を消さずに（０）6と7を挿入する。
a.push(200,300);//末尾に挿入
//remove
a.shift();//先頭から削除
a.splice(1,2);//1番目から2つ削除する。
a.pop();//末尾に削除
//抽出
const removed = a.splice(1,2);
console.log(removed);//削除した値を出力
forEach
const a = [1,5,10];
a.forEach((item,index)=>{
console.log(`${index}:${item}`);
});
map filter
map
const a = [1,2,3,4];
const b = a.map(item =>{
return item * 2;
});
console.log(b);
配列のそれぞれに対して処理を行う。
filter
{
const a =[1,4,3,5,8];
const b = a.filter(item=> item % 2 === 0);//偶数だけ返す。
console.log(b);
}
真偽値を返す関数を与えてtrueだった時の要素だけ返してくれるメソッド。
オブジェクト
const player ={
name: 'tanaka',
score: 32,
}
console.log(player.name);
console.log(player['name']);
player.email= 'tanaka.@example.com'
delete player.score;
このようにどのキーにどの値が入っているかを明示できる。
また、オブジェクト内のプロパティの追加や削除もできる。
クラス
クラスから作られたオブジェクトをインスタンスと呼ぶ。
{
class Player{//親クラス
constructor(name,score){ //メソッド
this.name = name;
this.score = score;
}
showInfo(){
console.log(`name:${this.name} score:${this.score}`);
}
static showVersion(){
console.log('Player class ver 1.0');
}
}
class SoccerPlayer extends Player {//子クラス
constructor(name,score,number){
super(name,score);
this.number = number;
}
kick(){
console.log('Gooooooaaal!!');
}
}
//PlayerClass
const taguchi = new Player('taghci',32);
taguchi.showInfo();
Player.showVersion();//staticなメソッドはインスタンスを作らずにクラス名に直接メソッドをつけて呼び出せる。
//SoccerPlayerClass
const tsubasa = new SoccerPlayer('tsubasa',99,10);
tsubasa.kick();
console(tsubasa.number);
tsubasa.showInfo();
}
クラスにはオブジェクト生成に必要な初期化処理が
あり、constructorメソッドで初期化される。
上記のようにthis.nameは「このオブジェクトのname」と
いう意味で、右辺のnameは引数で与えられた値。
オブジェクトの操作
{
const o = {
a:1,
b:2,
};
//オブジェクトの配列化
console.log(Object.keys(o));//['a','b']
console.log(Object.values(o));//[1,2]
console.log(Object.entries(o));//[['a',1],['b',2]]
//ここで配列に変換しているのでforEachが使える。
Object.keys(o).forEach(key=>{
console.log(`${key}:${o[key]}`);
});
}
スプレッド演算子
配列でもオブジェクトでも使える。
スプレッド演算子（...）を使うと値の参照ではなく
コピーを作ることができる。
配列
{
const a = [10,20];
const b = [1,2, ...a];
console.log(b);//出力[1,2,10,20]
}
const a =[10,20];
const sum =(a,b)=>a+b;
console.log(sum(...a));//出力30
オブジェクト
const o1 = {a:1};
const o2 = {...o1, b:2};
console.log(o2);//出力{a:1,b:2}
分割代入
配列
const numbers = [1,2,3,8];
const[a,b,...rest] = numbers;
console.log(a);//出力1
console.log(b);//出力2
console.log(rest);//出力[3,8]
オブジェクト
const player = {
name:'taguchi',
score: 55,
hp:33,
mp:22,
};
const {name,score,...points} = player;
console.log(name);//出力taguchi
console.log(score);//出力55
console.log(points);//出力[33,22]
文字列を操作する
{
const str = 'hello';
console.log(str.length);//5
console.log(str.substring(2,4));//ll
console.log(str[1]);//e
}
※詳しくはMDNで
Mathオブジェクト
{
console.log(Math.PI);
console.log(Math.random());//0 ... 0.99999
//1~6を作る
console.log(Math.floor(Math.random()*6 +1));
}
Math.floor（）はカッコ内の数値の小数点以下の切り捨てを行う。
Dateオブジェクト
const d = new Date();//引数を書く場合は年と月が必須。
console.log(d);
console.log(d.getFullYear());
console.log(d.getMonth()); // 0 - 11
console.log(d.getDate());
console.log(d.getDay()); // 0 - 6 曜日
console.log(d.getHours());
console.log(d.getMinutes());
console.log(d.getSeconds());
console.log(d.getMilliseconds());
console.log(d.getTime()); // UTC 1970/01/01 00:00:00
操作
const d = new Date(2018,11);//2018/12/01 00:00:00
d.setHours(10,20,30);//2018/12/01/10:20:30
d.setDate(32);//32日などないが、2019/01/01 10:20:30
d.setDate(d.getDate() + 3);
console.log(d);
const d1 = new Date(2018, 11, 1);
const d2 = new Date(2018, 11, 10);
console.log((d2 - d1) / (24 * 60 * 60 * 1000));
alert confirm
・windowにalertを表示。
alert('hello');
・確認を求める。「ok->true」「キャンセル->false」
confirm('Are you sure?');
setInterval繰り返し処理
Windowに備わったタイマー機能
setInterval(関数、ミリ秒);
{
let i=0 ;
const showTime = ()=>{
console.log(new Date());
i++;
if(i>2){
clearInterval(timerId);
}
};
let timerId = setInterval(showTime,1000);
//一秒に1回showTime関数を呼び出す。
}
setTimeout
指定した時間の後に1回だけ処理を実行するためのメソッド。
関数が長い処理になった場合でも処理が重なって負荷がかかることがない。
{
const showTime = ()=>{
console.log(new Date());
};
setTimeout(showTime,1000);
}
例外処理
エラーが起きても処理が止まらず、指定したメッセージを呼び出す。
const a = '5';
try{
//toUpperCase()は文字列を大文字にする。ただし数値や真偽値は無理。エラーが起きる
console.log(a.toUpperCase());
}catch (e) {
console.log(e.message);
//エラーオブジェクトeにはmessageプロパティが備わっており、エラーメッセージを出力してくれる。
}
console.log('finish');