初めてのJS

 

【参考】JavaScriptの基本について忘れやすいことをまとめました。

参考になれば幸いです。

JavaScript言語のコメント文は、//です。

プリミティブ型

　Number型

　・剰余演算：奇数、偶数の判定に使用する。例）１０％３は、１

　意味：10の中に3が何回含まれ余りを返す。

　・Not a Number：（非数字）Number型だが数値でないもの。例）0/0のように０で

　除算した場合。

演算式での短縮した記載例を下記に紹介します。

　・変数＝変数＋５と同じ意味として変数＋＝５；と記載してもよい。文末尾の

　；（セミコロン）は省略可です。

・変数＋＋；→変数には、この時点では１+する前の値が入っているが再度変数の中身を

　見ると１がプラスされている。下記よりワンステップ遅い。

・＋＋変数；→変数には即1+された値が入っている。

ＡＩより生成

変数について

　・変数の方は変えられる。

　・記載方法

　　わかりやすい変数名にする。

　　キャメルケース：一般的、複数の単語からなる変数を指定した場合、単語の区切りを

　　大文字にする記載方法。例）currentYear

　　スネークケース：複数の単語からなる変数を指定した場合、単語の区切りを

　　_（アンダーライン）で区切る記載方法。例）current_year

　　パスカルケース：複数の単語からなる変数を指定した場合、最初の文字を大文字に

　　する記載方法。例）Currentyear

　　・let：数値や文字、文字の場合は’’（シングルコーテーションなどで）囲む。

　　・boolean：true及びfalseのみしか定義できない。

　　・const：定数、例）円周率など変わらない数値。

変数として認められないもの

　・単語と単語にスペースを入れる。例）current year

　・数字で始まる。例）1user×、user〇

メソッドとプロパティ

　メソッドの記載：変数.メソッド（）；、複数記載することができる（メソッドチェーン）

　例）変数.メソッド.メソッド；メソッドの（）内は引数のないものや引数のあるメソッドも

　あります。

　引数なしのメソッドの一部を紹介します。

　　文字列.trim();：文字列の前後の空白をなくすメソッドです。

　　文字列.toLowerCase();：文字列を小文字に変換した文字を返す。

　　文字列.toUpperCase();：文字列を大文字に変換した文字を返す。

【小文字の返還と空白の操作についての例題】

messageの文字を小文字に変換した値をwhisperという変数に格納してください。また、このときに文字列の両端の空白はすべて取り除いてください。

【JavaScript】

const message = "　TASTE THE RAINBOW!　"; //文字列の代入

// 両方の空白を取り小文字に変換した値を変数へ

const whisper=message.trim().toLowerCase();

　引数ありのメソッドの一部を紹介します。

　　'abcd'.indexOf('b');文字列（abcd）に引数bがの格納されている番号を返すメソッド

　　です。この場合１が返ってきます。ａが0番目bが1番目なので。例）const a='abcd';

a.indexOf(' ')===-1;//変数aが空白でない場合真となる。indexOf（）のOは大文字　

　　です。文字列に指定された文字が含まれているか否かを判断する場合などに使用する。

　プロパティの記載：変数.プロパティ；

・stringメソッドでできること

　・文字列の検索・置換、大文字小文字の変換など

　'abcd'.slice(1)：bcdが返ってくる。

　'abcd'.slice(1,3)：bcが返ってくる。

　'abcd'.slice(-1)：dが返ってくる。マイナスになると文字列の末尾から何番目の文字が

　返ってくる。

　'abcd'.replace('b','B')：aBcdが返ってくる。

　.concat()：配列の結合、引数あり。例）a.concat(b);→aの配列とbの配列の結合。

【replaceメソッドを使った例】

変数に代入している一部の文字列を抽出し、一部の文字を変換し同じ変数に格納しなおす。

【JavaScript】

const word = "skateboard"; //文字列を変数に代入

// 記載コード

let a=word.slice(5); //5文字目からを変数aに代入。

const facialHair = a.replace('o','e');　　//boardをbeardにしfacialHairという変数に代入

テンプレートリテラルの記載で苦慮したので参考に記載します。

    記載方法：`＄｛変数｝`

　※黄色の囲みはバックテック（日本語キーボードでは[Shift]＋[＠]）、シングルコーテーションでないので注意する。

【例題】

die1とdie2という2つの変数を用意し、6面のサイコロを模しています。それぞれの変数には1から6のランダムな値が入るようになっています。新たにrollという変数を作成し、以下の例のような文字列をテンプレートリテラルで代入してください：

・die1が3で、die2が5であれば

'3と5が出たので、合計は8'

・die1が6で、die2が4であれば

'6と4が出たので、合計は10'

【JavaScript】

//ランダムな数値の生成した宣言：基本的にデフォルトのまま。

const die1 = Math.floor(Math.random() * 6) + 1; //1-6までのランダムな値

const die2 = Math.floor(Math.random() * 6) + 1; //1-6までのランダムな値

// 記載したコード

const roll1=`${die1+1}が3で、${die2+2}が5であれば'3と5が出たので、合計は8'`

const roll2=`${die1+4}が6で、${die2+1}が5であれば'6と4が出たので、合計は10'`

const roll='roll1'+'roll2';

　Null：意図的に値がない、変数に代入できる。ないことがわかっている。

　undefined：JS的にわからないを意味している変数には代入できない。

　オブジェクトはメソッドやプロパティ（キーと値）の集合体。

　オブジェクトの記入例）

　　const product={

　　　 　name:'Icecream',

　　　　 inStock:true,

　　　　 price:198,

　　　　 flavors:['grape', 'apple', 'cherry']

　　　　 };

　オブジェクト名、キー、値

オブジェクトの値にアクセスする場合

　オブジェクト名[’キー’]でアクセスする、キーはシングルコーテーションで囲む必要がある。

　オブジェクトリテラルの構文例）

const fullAddress = `${restaurant.address}, ${restaurant.city}, ${restaurant.state} ${restaurant.zipcode}`;

・fullAddress：変数・restaurant：オブジェクト名・address：キー。restaurant.addressはランダムな住所が返ってくる。すべて文字列が返ってくる。

条件分岐

　比較「＝＝」（ダブルイコール）と「＝＝＝」（トリプルイコール）の違い。

　「＝＝」：値は比較するが型は比較しない。

　｛＝＝＝｝：値も型も比較する。

例）１＝＝’１’→これではtrue、１＝＝＝！１’一方トリプルでは、falseと比較する。

    Web画面に表示させるプロンプトの一部。

・alert('テスト')→Web画面にテストと表示される。

・Let userInput prompt('数字を入力してください');

 変数のuserInputは文字列なので数値で計算させる場合purseInt('userInput'とする必要がある。)

if文の例題

変数numが、もし偶数の場合はconsole.logで'even'と出力してください。
変数numが、偶数以外の場合は何もしないでください

【JavaScript】

function isEven(num){

//ここから下にコードを記載 ↓↓↓↓

if (num%2===0) {
console.log('even')

}

//この範囲でコードを記載 ↑↑↑↑
}

【if,else if,elseの記入例】

変数phraseに色を設定してください。

・phraseが'stop'という値の場合、'red'をconsole.logで出力してください

・phraseが'slow'という値の場合、'yellow'をconsole.logで出力してください

・phraseが'go'という値の場合、'green'をconsole.logで出力してください

・phraseが上記以外の値の場合、'purple'をconsole.logで出力してください

【JavaScript】

function getColor(phrase){

    //この下にコードを書いてください ↓↓↓↓

   if (phrase==='stop') {

       console.log('red');

   }

   else if (phrase==='slow') {

       console.log('yellow');

   }

   else if(phrase==='go'){

       console.log('green');

   }

   else console.log('purple');

    //この範囲でコードを書いてください ↑↑↑↑

}

【if文のネストの例】

// 下のコードでnumが、「正解！」と出力する。

const num = 102; // numは指定する

if(num <= 100) {

    if(num >= 50) {

        console.log("ほげ");

    }

} else {            //numが101以上の場合

    if (num < 103) {

        if(num % 2 === 0){            //numを２で割って余りが０の場合

　　console.log("正解！");

        }

    }

}

論理演算（and：&&）を使った例

　const mystery = 'Pas7sword';

　if(mystery[0] === 'P' && mystery.length > 5 && mystery.indexOf('7') !== -1){

　　console.log("OK");

　}

説明：先頭が大文字のPで文字の長さが5文字より長く文字列に7が含まれている

ならばOKを表示する。3つの演算がtrueの場合trueを返す。

論理演算（or：||）を使った例

記号は日本語配列のキーボードでしたら[Shift]+[￥]で|を表示させる。

　const mystery = 'Password';

　if(mystery[0] === 'P' || mystery.length > 5 ){

　　console.log("OK");

　}

説明：先頭が大文字のPで文字の長さが5文字より長い場合OKを表示する。文字列がPasswordでなくPassでもOKが表示される。ORの場合は演算式のどちらかがtrueならばtrueを返す。

論理演算（not：!）を使った例

　const mystery = 'abcd';

　if(!(mystery[0] === 'P' || mystery.length > 5) ){

　　console.log("OK");

　}

説明：先頭が大文字のPで文字の長さが5文字より長くないのでOKを表示する。notの場合は演算式を反転する。

 truthy：trueとみなされる値。

 falsy：false、０''（空白文字）、nall、undefined、Non以外はtruthy。

if文に演算式を記入する必要がない。

例）if（変数＝＝＝値）｛

　　trueの場合実行

　｝

//通常と比較↑通常↓truthyの場合

　　if（変数）｛

　　truthyな値の場合実行

　｝

配列について

　記入方法：tetまたはconst　変数＝[]；↓からの配列

　・配列の中身が、数値の場合：例）let test=[1,2,3];

　・配列の中身は、文字列でも数値でもよい：let test1=[1,'a',3];

上記のコード例

　・配列の中に格納された文字を抽出し先頭の文字を返す場合

　上記の変数を例にすると、test1[1][0]と記入すると'a'が返ってくる。

※変数に代入した文字列は更新できないが、配列の場合は、更新できる。

　push：配列の末尾に要素を追加する。例）変数.push('要素１','要素２');

　pop：配列の末尾の要素を取り除く。引数はない。例）変数.pop();

　shift：配列の先頭の要素を取り出す。引数はない。例）変数.shift();

　unshift：配列の先頭に要素を追加する。例）変数.unshift(’追加する要素’);

・2次元配列の中身を変える場合のJavaScriptを紹介します。

下記コード中の配列の”Null”をYumiに置き換える場合。

const airplaneSeats = [

    ['Ruth', 'Anthony', 'Stevie'],

    ['Amelia', 'Pedro', 'Maya'],

    ['Xavier', 'Ananya', 'Luis'],

    ['Luke', null, 'Deniz'],

    ['Rin', 'Sakura', 'Francisco']

];

// 3番目の配列の中のされに１番目の値をNull→Yumiに置き換える

airplaneSeats[3].splice(1, 1, "Yumi");

forループの構文

for (let i = 1; i <= 6; i++) {　　　　　　//初期値、条件式、増減式

  console.log('a b c d e f');

}

→結果「a b c d e f」が返る。

//下のコードは25～0まで5ずつ減少すしconsole.logを表示させる。

for(let i = 25; i >=0; i-=5) {

    console.log(i)

}

配列のループ

const user = ["Scooby", "Velma", "Daphne", "Shaggy", "Fred"]; 

//配列userから1行ずつ取り出し大文字に変換し出力する。

for (let i = 0; i < user.length; i++) {

  console.log(user[i].toUpperCase());　

}

※for文とwhile分の使われ方の違いは、ループ回数がわかっている場合（配列の数分やループ回数が決まっているなど）は、forループを記載しループ回数がわからない場合（ゲームの勝ち負けや将棋やユーザインプットなど）は、whileループが有効。

ページトップへ▲