UdemyでJavaScriptを学習しているため、
復習も兼ねて文言について、基礎文法などJS関連をまとめていく記事になります。
自分のメモ＆アウトプット的なものなので、
あまり参考にはなりませんが、気になる様でしたらみてください。
*基礎の基礎も自分のために書きますが、 本記事で重要でないものは折り畳んでおきます。
1.JavaScirptとは？
JavaScriptとは、
2. 記述場所について
JavaScriptを書く際には、
まずは、htmlファイルのbodyタブの一番下に<script>タグでjsファイルを指定します。
今回は、main.jsとしておきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main">sample</div>
<script src="main.js"></script>
</body>
</html>
ここにJSの記述をしていきます
3. 基礎について
変数の宣言
変数とは、さまざまな文字列や数値を入れておく箱のようなもの。
jsで変数を定義する際には、下記の3種類を使う。
###var
再宣言、再代入が可能。
var sample = '初期値OK';
sample = '再代入OK';
var sample = '再宣言OK';
###let
再宣言禁止で、再代入が可能。
let sample = '初期値OK';
sample = '再代入OK';
let sample = '再宣言NG';
###const
再宣言、再代入が禁止。
const sample = '初期値OK';
sample = '再代入NG';
const sample = '再宣言NG';
###表にまとめると
| 変数 | 再宣言 | 再代入 |
|---|---|---|
| var | ○ | ○ |
| let | × | ○ |
| const | × | × |
##データ型
値の種類。文字列なのか、数値なのか、true & falseなのか。
Javaの様に変数の宣言時にデータ型は記載する必要はない。
また、JavaScript は動的型付け言語である。
動的型付け言語とは、
let sample = 12;
//この時はNumberである。
この変数には、文字列を代入が可能。
sample = "こんにちは";
//ここでは、Stringになっている。
###String
テキストの値を表す連続した文字
Hello World などが該当します。
let str = 'Hello World';
###Number
整数または小数点など。
12や3.14など。
let num = 12;
###Boolean
真偽値。
trueとfalseです。
let judge = false;
###undefined
未定義。
名の通り、値が設定されていないことを表します。
###表にまとめると
| データ型 | 意味 | 例 |
|---|---|---|
| String | 文字列 | "Hello Word" |
| Number | 整数、小数点 | 12, 3.14 |
| Boolean | 真偽値 | true,false |
| undefined | 未定義 | - |
##関数
基本的な構成要素の1つ。
同じ処理をまとめて定義し、何度も使い回しができるかたちにしたもの
以下の、funcitonを使用する。
function
基本的な書き方は下記の通り。
function hello() {
//ここに処理を記述する。
}
helloが関数名となり、helloと書くだけで中に記述する処理が実行される仕組み。
参考例
helloにnameという関数を渡しているので、
hello('Tom')でnameにTomが代入？されます。
function hello(name) {
console.log('hello' + name)
}
hello('Tom');
//出力結果
> "Hello Tom"
##メソッド
オブジェクトのプロパティに代入された関数のことを言います。
toUpperCase()
呼び出す文字列の値を大文字に変換して返す。
let city = "Tokyo";
console.log(city.toUpperCase());
//出力結果
> "TOKYO"
subString()
string オブジェクトの開始・終了位置の間、
または文字列の最後までの部分集合を返す。
let city = "Tokyo";
console.log(city.subString(0, 3));
//出力結果
> "Tok"
slice()
元の文字列を変更せず、
文字列の一部分を取り出し、それを新しい文字列として返す.
subString()と同じ。
###split()
String を指定した区切り文字列で分割することにより、文字列の配列に分割する。
let str = "This is an apple";
console.log(str.split(' ')); //半角スペースで分割
//出力結果
> ["This", "is", "an", "apple"]
###forEach()
与えられた関数を、配列の各要素に対して一度ずつ実行する。
const bestCombo = ['パスタ', 'ブラータチーズ', 'ワイン'];
bestCombo.forEach(element => console.log(element));
//出力結果
> "パスタ"
> "ブラータチーズ"
> "ワイン"
プロパティ
プロパティとは、オブジェクトの状態や特性を表す情報のことを言います。
書式は以下の通り。
オブジェクト名.プロパティ名
length
文字列の文字数や、配列の要素数の値を取得するプロパティ。
let name = "田中太郎";
console.log(name);
console.log(name.length);
//出力結果
> "田中太郎" //nameの値
> 4 //田中太郎の文字数
##配列
配列を使うことで複数の値を 1つの変数で保管・管理することが可能。
以下の記述する。
let fruits = ['apple', 'orange', 'banana', 'strawberry' ]
配列のインデックスは0から始まります。
let fruits = ['apple', 'orange', 'banana', 'strawberry' ]
//let fruits = [ [0], [1], [2], [3] ]
console.log(fruits[2]);
//出力結果
> "banana"
##オブジェクト
データをプロパティ名(キー)と値のペアで管理する。
記述は以下の通り。
let/const 変数名 = { キー ： 値 }
参考例：
let person = {
name: '山田太郎',
age: 25,
}
取り出し方は以下の通り。
ドットによる記述で取り出しが可能。
console.log(person.name);
console.log
//出力結果
> "山田太郎"
##ループ処理
条件を指定し、繰り返し何かを実行すること。
while文
条件式がtrueであるならば、反復処理を行う。
記述は以下の通り。
while (条件式) {
実行する文;
}
参考例は以下の通り。
let x = 0;
while (x < 10) {
console.log(x);
x += 1;
}
//出力結果 0から9までが出力される。
> 0
> 1
.
.
> 9
for文
繰り返す範囲を指定した反復処理を書くことが可能。
記述は以下の通り。
for (初期化式; 条件式; 増分式) {
実行する文;
}
参考例は以下の通り。
let total = 0;
for(let i = 0; i < 10; i++) {
console.log(i);
}
//出力結果 0から9までが出力される。
> 0
> 1
.
.
> 9
let i = 0; iを初期化
i < 10; iが10未満なら処理を実行し続ける。
i++ ループ処理が実行される度に1がiに加算される。
for...in 文
キーが文字列であるオブジェクトの列挙可能プロパティすべてに対して、列挙可能プロパティも含めて反復処理を行う。
*実際の使い方は、いまいちピンときていないです。
const object = { a: 1, b: 2, c: 3 };
for (const index in object) {
console.log(`${index}: ${object[index]}`);
}
//出力結果
> "a: 1"
> "b: 2"
> "c: 3"
for...of 文
String, Array, およびユーザー定義の反復可能オブジェクトなどに対して、反復的な処理をするループを作成する。
配列に対して使用するイメージでいます。（あってるのかな）
const array1 = ['a', 'b', 'c'];
for (const element of array1) {
console.log(element);
}
//出力結果
> "a"
> "b"
> "c"
if文
条件分岐。指定した条件で処理を変えることができる。
記述は以下の通り。
if (条件) {
//条件がtrueであれば実行
} else if (条件) {
//1つ目の条件が当てはまらず、else ifの条件がtrueであれば実行
} else {
// 2つの条件ともに当てはまらなかったら実行
}
パッと思いついたもので作成。
年齢が20歳以上なら、成人。
年齢が20歳未満なら未成年と条件分岐しております。
function checkAged(name, age) {
if (age >= 20) {
console.log(name + 'は、成人です。');
} else {
console.log(name + 'は、未成年です。');
}
}
checkAged('太郎ちゃん', 25);
//出力結果
> "太郎ちゃんは、成人です。"
##コールバック関数
関数の引数に渡す関数です。
いわゆる他の関数を実行するための関数。と言われることが多いみたい？
function hello(callback) {
console.log('hello' + ' ' + callback());
}
function getName() {
return 'Taro Yamada';
}
hello(getName);
//出力結果
> "hello Taro Yamada"
hello(getName)
hello関数の引数にgetName関数を入れています。
これによりhello関数の引数には、getName関数自体が渡る。
callbackに格納されている値を確認
function hello(callback) {
console.log(callback);
}
//出力結果
> function getName() {
return 'Taro Yamada';
}
console.log('hello' + ' ' + callback());
callback（）としているのは、callbackにはGetNmame関数自体が渡ってきているのでここで関数を実行。
結果として、Taro Yamadaという値が、格納される仕組み。
まずはここまで。
また、学習が進んだら書きます！
#参考文献
今はこれで学習中です！
https://www.udemy.com/course/front-dev-tutorial/
わかりやすいのもあればよく理解できないのもあるけど参考になる。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference