😊

Javascript学習記録#2

2023/12/24に公開

JavaScript

学習記録

tech

初めに

今回は以下のサイトで説明されているものの内、自分が学んだこと・重要だと思ったことについて書いていきます！(一部個人の主観が入っているため、誤った情報があったらすみません)
対象となる読者は、html,cssを理解している人またはほかの1つの言語についてある程度理解している人です！
参考にした記事は以下の通りです。

変数

まずは変数についてです。変数とは、値の入れ物です。例としては以下のようなものです。

const //変数// = //値//　;

constで宣言,その後に変数名,それに入れる値,最後にセミコロンという構成となります。

それ以外にも、変数の宣言はvarやletを用いて行うことができます。

let：変数の宣言と初期化を一度に行うこともできる。同じ名前の変数は１度しか宣言できない
変数内の値を変更したい場合には、変数名=値とする必要があります

var：同じ名前の変数を値を変えて何度も宣言できる

これだけを見ると、varのほうが使い勝手が良いかもしれませんが、実際にはコードの可読性が落ち、混乱を招きやすくなってしまいます。そのため、letのほうを使う方が望ましいです

jsの型

数値型

変数に数値を格納する場合には、以下のように記述します

let Number = 100;

文字列型

文字列型を格納する場合には、""、または　''、で囲みます。

let dolphinGoodbye = "So long and thanks for all the fish";

論理値型

論理値型では、条件が成立した場合はtrue,成立しなかった場合にはfalseの型を持ちます。条件を判定する例は以下のようになります。

let test = 6 < 3; //6は3より大きいので、test変数はfalse型を持ちます。

配列

配列では、[]にカンマで区切った複数の値を格納できるオブジェクトです。以下のように書けます

let myNameArray = ["Chris", "Bob", "Jim"];

オブジェクト

続いてオブジェクトについてです。
プログラミングでいうオブジェクトとは現実のものをモデルにしたコードの構造です。例えば、ただの空間を表すものもあれば、人を表すオブジェクトも作ることができます。

動的型付け

jsはほかの言語と異なり、格納するデータ型を変数に指定する必要のない言語です。(Pythonなどもこれに該当します)
例えば、以下のようにコードを入力すると、ブラウザーはこれを文字列として扱います。

let myString = "Hello";
数字の場合には以下のように書きます

let myNumber = 100;

しかし、"100"　のように書いてしまうと、文字列として扱われてしまいます

データ型を確認するときには以下のように入力します

typeof Mystring; //stringと帰ってきます

数値の種類

プログラミングにおいて数値にはいくつかの種類があります。

整数型

整数型(integer)とは、整数、つまり-5,7,100などの数値のことです。

浮動小数点型

浮動小数点型(float)とは、小数点以下の情報も持つ数値のことです。

倍精度浮動小数点数

倍精度浮動小数点数(double)とは、浮動小数てにょりも精度の高い少数のことです。

ただし、jsでは、それらの数値をまとめてNumberとして表すそうです。
例として、以下のようなコードを書いたとします。

let myNumber = "90";
myNumber + 10;

この場合、9010となって変数に格納されます。
string型と足し算をする場合には答えも文字列の加算という風に認識されるのでしょう。

これを修正するには、以下のようにmyNumberの型をNumberに変更することで解決します。

Number(myNumber) + 3;

算術演算

以下で算術演算の種類と使い方について記述していきます。

加算：a + b //aとbが足し合わされる
減算：a - b //aからbが引かれる
乗算：a * b //aとbが掛け合わされる
除算：a / b //aをbで割る
乗除：a % b //aをbで割った余り。
指数：a ** b //aをb回掛ける(2**3の場合には222 =8となる)

それぞれの算術の順序は、一般的に私たちが計算している順番と同じです。

インクリメント演算子とデクリメント演算子

繰り返し値を足したり(インクリメント演算子 ++)引いたり(デクリメント演算子 --)するものです！
for文(後述する)のループなどで用いられます

代入演算子

代入演算子は、変数に値を代入します。すでに = を何度も用いましたね！
それ以外にも以下のようなものがあります。

//変数// += a :変数に値aを足したものを変数に格納する
//変数// -= a :変数に値aを引いたものを変数に格納する
//変数// *= a :変数に値aを掛けたものを変数に格納する
//変数// /= a :変数に値aを割ったものを変数に格納する

比較演算子

=== 左辺と右辺の値が同じであるかどうかを判定する
!== 左辺と右辺の値が同じでないか判定する
< 左辺が右辺より小さいかどうかを判定する

左辺が右辺より大菊花を判定する
<= 左辺が右辺以下であるかを判定する
= 左辺が右辺より大きいかを判定する

jsでの文字列

文字列とは、その名の通り文字の列です。例としては、以下のようになります。

const string = "革命はテレビでは放送されない。";

このように、文字列を入力する際にはダブルクオーテーション("")またはシングルクオーテーション('')が必要です。

文字列の中に変数を含める

文字列の中に変数を含めるには、以下のように書きます。

const MyNumber = 10;
console.log("Your Number is ${MyNumber}") ;//Your Number is 10

また、以下のような書き方もできます。

console.log("Your Number is" + MyNumber);// Your Number is 10

数値と文字列

数値と文字列は、お互いに変換することができます。例えば以下のように書けます。

const Number = "10";
const Number1 = Number(Number); //文字列型を数値型に変更
const Number2 = Number1.toString(); //数値型を文字列型に変更

文字列内に式を含める(MDN参照)

単純な変数と同様に、JavaScript の式をテンプレートリテラルに含めることができ、その結果も結果に含まれます。

const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = I like the song ${song}. I gave it a score of ${ (score / highestScore) * 100 }%.;
console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%."

文字列の長さを調べる

length プロパティを使用すれば調べることができます！次のように入力します

let browserType = "mozilla";
browserType.length; // 7

文字列中の特定の文字を出力する

ほかの言語を学んだことのある方ならわかると思いますが、コンピューターでは 0 から数え始めます。よって、文字列中の最初の文字を出力したいと思ったら、以下のように出力します

console.log(browserType[0]); // m

一番最後の文字を出力したい場合には、先ほど使用したlengthプロパティを組み合わせて以下のように出力します。

browserType[browserType.length - 1];

ここでは、browserTypeは7文字ですが、browserType.lengthとしてしまうと、先ほど説明したようにコンピューターは0から数え始めるので、8文字出力するように命令され、エラーとなります。

また、対象の文字列中に部分文字列を出力する際には以下のように出力します。もし見つからなかった場合には-1を出力します。

browserType.indexOf("zilla");

このコードは2を出力します。これは、"zilla"という文字は、browserType変数中の 0 から数えて 2 番目に見つかるためです。

browserType.indexOf("vanilla"); // -1

部分文字列がその文字列のどこから始まるかが分かっており、どこで終わっているかがわかれば、その部分文字列を slice() メソッドを使用することで抽出することができます。

browserType.slice(0, 3); // "moz"

browserType.slice(2); // "zilla"

大文字・小文字の切り替え

String にはtoLowerCase()とtoUpperCase()という 2 つのメソッドがあり、引数として渡された文字列のすべての文字の大文字・小文字を切り替えます。これは例えば、ユーザーの入力を DB に保存する場合に、値を正規化するのに便利です。

文字列の一部分を書き換える

replace()メソッドを使用することで、ある部分文字列を他の文字列に置き換えることができます。

browserType.replace("moz", "van"); // "vanilla"

MDNのコード解説

MDNのほうでコードを核問題がありましたので、中に書かれているコード・変数の役割と動きをざっくりと説明します。

挨拶を選別する

let greetings：メッセージが配列としていくつか格納されています。

for (let i = 0; i < greetings.length; i++){};：for 文はまだ説明がされていませんが、動きとしては i を宣言し、始まりを 0 、i を1ずつgreeting変数の配列の個数未満まで増やしながら、{} 内のコードを実行し続けます。

let input = greetings[i];：for文の中にあるため、greetingsの配列の個数分実行され続けます。ここでは、配列内の文字列を順番に取り出しています。

list.appendChild(listItem);：listにif文の条件で設定したものに当てはまる文字列(listItem)を追加していきます

他の問題も構成としては似たようなものとなります。

配列

さて、既に上記の例で配列を用いた問題について取り上げましたが、配列についてより詳しく見ていきます。
以下のように変数を宣言します。

let shopping = ["パン", "牛乳", "チーズ", "ハム", "麺"];
let random = ["tree", 795, [0, 1, 2]];

配列の項目を取得し変更する

shopping[0]; // "パン"

上記の例ではshopping配列の中の 1 番目の要素を出力します

配列の中身を変更するには以下のように記述します。

shopping[0] = "タヒーニ"; // shopping = ["タヒーニ", "牛乳", "チーズ", "ハム", "麺"];

また、以下の例では、random配列の3番目[0, 1, 2]の3番目を取得します。

random[2][2]; // 2

文字列と配列を相互に変換する

文字列を配列に直すときには以下のように入力します。

let myData = "札幌,仙台,東京,名古屋,大阪,博多";
let myArray = myData.split(",");
myArray; // ["札幌","仙台","東京","名古屋","大阪","博多"]

また、配列を文字列に直すときには以下のように記述します。

let Data = myArray.join(",");
Data; // "札幌,仙台,東京,名古屋,大阪,博多"

配列の最後に項目を追加するには以下のように記述します。

myArray.push("横浜");
myArray; // ["札幌","仙台","東京","名古屋","大阪","博多","横浜"]

配列の最後の要素を削除するには以下のように記述します。

myArray.pop();
myArray; // ["札幌","仙台","東京","名古屋","大阪","博多"]

//配列の問題については今後解き次第解説を載せていきます！

終わりに

今回はJsの基本文法について学習し、学んだことを書いていきました。

Jsの基本はある程度理解できたため、次回はReactについて学習していきたいと思います。