コーディングの勉強

30DAYSトライアル〜JavaScriptの基礎を学ぶDAY1~3〜

こんにちは。mito(@mito_works)です。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何?どうやって始めるの?といった疑問をお持ちの方、こちらをご覧ください。

mito
mito
30DAYSトライアルの2ndステージ。より実践レベルのトライアルです!
momo
momo
2ndのDAY1~3はprogateを使ってJavaScriptを学んでいくよ!

JavaScriptの基本の書き方

  • 文字列は、シングルクォーテーション( ‘ )かダブルクォーテーション( ” )で囲む
  • 数値はクォーテーションで囲まない
  • 文の最後はセミコロン(;)
  • %を使うと割ったときの余りを求めることができる
  • +を用いると文字の連結ができる
console.log(3+3);
console.log(9%2);
console.log("hello");
console.log('こんにちは');
console.log("hello"+"こんにちは");

 

変数の定義

そもそもなぜ変数を使うのか?

  1. 同じ値を繰り返し使える
  2. 変更に対応しやすい
  3. 値の意味がわかりやすい
momo
momo
コーディングのボリュームが増えるほど効果を発揮するよ!

let 変数名 = 値

momo
momo
letを忘れないようにしよう!

変数の命名ルール

  • 英単語を用いる
  • 2語以上の場合は大文字で区切る
momo
momo
例えば”lessonItem”など。ローマ字表記はあまり望ましくなく、数字開始の変数はエラーが出るので注意が必要だよ!

定数の定義

変数は1度代入した値を更新することができますが、定数は値を更新することはできません。

momo
momo
後から値を変更できないということをメリットとして使うよ!

const 変数名 = 値

テンプレートリテラル

テンプレートリテラルとは、文字列や定数の連結方法の一つです。
文字列の中に定数(変数)を埋め込むことができます。

mito
mito
「+」での連結とは別の方法です。
ポイント
  • ${定数}とすることで、文字列の中に定数や変数を含めることができる
  • 文字列全体をバッククォート(`)で囲む
const name = "momo";
const age = 10;

console.log(`ぼくの名前は${name}です`);
console.log(`今は${age}歳です`);

比較演算子の書き方

比較演算子には、左と右の値が等しいかを調べるものです。

等しいかどうか比べる場合

a===b (aとbは等しい)

a!==b (aとbは等しくない)

momo
momo
3つ記号が必要だよ!

for文の書き方

for文は「変数の定義」「条件式」「変数の更新」の3つを括弧の中に書きます。括弧の中ではそれぞれをセミコロン(;)で区切ります。

// for文を用いて、1から100までの数字を出力する場合

for(let number=1; number<=100; number++){
  console.log(number);
}

 

配列

配列のメリットは複数の値をまとめて扱えることです。

momo
momo
例えば果物の名前や野菜の名前をまとめて扱いたい時に使うよ。
const animals=["dog","cat","sheep"];

また、上記の内容を順番に表示させたいときは以下のように書きます。

for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}

 

オブジェクトとは

配列と同じく複数のデータをまとめて管理するのに用いられます。

オブジェクトと配列の違い

配列は複数の値を並べて管理する

オブジェクトはそれぞれの値にプロパティと呼ばれる名前をつけて管理します。

const characters = {name: "いぬ", age: 14};

オブジェクトを要素にもつ配列

配列の要素には、文字列や数値だけでなく、オブジェクトも使うことができます。

const characters = [
  {name: "いぬ", age: 14},
  {name: "ねこ", age: 4}
];

console.log(characters[0]);
console.log(characters.name);

関数の定義

function()」と書き、その後ろの中括弧「{ }」の中にまとめたい処理を書くことで関数を用意することができます。

const greet = function() {
  console.log("こんにちは!");
  console.log("hello!");
};

// 関数呼び出
 greet();

 

アロー関数

「function()」の部分を「() =>」とすることです。
functionと書くよりよりシンプルなコードになります。

momo
momo
この関数の書き方のことを、特別にアロー関数と呼びます。
const greet= ()=>{
  console.log("こんにちは!");
}

// 関数呼び出してください
greet();

 

まとめ

JavaScriptの書き方の癖を理解して、あとはひたすら実践します。

 

ABOUT ME
mito
こんにちは!mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。