はじめてのＪＳ

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

参考になれば幸いです。

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

・サーブレット：サーバ上で動作するJAVAのこと。

・JVM：OSに依存せずJAVAが動作するために存在する。

JavaScriptはWebで動作するものとクライアントPCで動作するものがある（図解例）

JavaScriptはWeb開発になくてはならない言語です。

プリミティブ型

　Number型

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

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

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

　除算した場合。

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

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

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

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

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

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

HTMLの内部に記述するJavaScriptの記述例

index.htmlの

<body>

</body>

JavaScriptを外部ファイルとしてHTMLで読み込む記述例

index.htmlの</body>の前に

ＡＩより生成

変数について

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

　・記載方法

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

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

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

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

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

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

　　する記載方法。例）Currentyear

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

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

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

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

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

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

メソッドとプロパティ

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

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

　あります。

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

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

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

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

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

【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が返ってくる。

　'abcd'.charAt(0)：先頭の値が返ってくる。例）aが返ってくる。

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

　Math.pow(num,2);：num変数値の値を2乗する。

配列のメソッド

.every：すべての要素が満たされればtrueを返す。

.some：１つでも要素が満たされればtrueを返す。

.filter：配列の中を抽出する。抽出した値の新しい配列を作る。

.reducs：配列内の数字の合計。

【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文の例題

【JavaScript】

function isEven(num){

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

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

}

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

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

【JavaScript】

【if文のネストの例】

論理演算（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)

}

配列のループ

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

whileやif文など使用した例）

let maximum = parseInt(prompt('数字を入力してください:')); while (!maximum) {

//数字かどうかのチェック。ループ処理

maximum = parseInt(prompt('エラーが起きました。有効な数字を入力してください:'));

}

const targetNum = Math.floor(Math.random() * maximum) + 1;

//ユーザが入力した値に対するランダムな値を算出。

let guess = prompt('一つ数字を決めました。数字を当ててみてください:');

//プロンプトを表示させユーザに入力させる。

let count = 1;

while (parseInt(guess) !== targetNum) {

//ユーザ入力値を数値にしたものとコンピュータの値を比較

if (guess === 'q') break; count++;

if (guess > targetNum) { guess = prompt('その数字より小さいです！もう一度当ててみてください:');

//ユーザの値が小さい場合。

}

else {

guess = prompt('その数字より大きいです！もう一度当ててみてください:');

//ユーザの値が大きい場合。

}

if (guess === 'q') {

//qを入力すると強制終了。

console.log('終了します');

} else {

console.log(`おめでとう！${count}回で当てました！`)}　　

　　　　　　　　　　　　//何回で当たったかを表示し終了する。

関数の定義：function 関数名(){

処理

}

　関数の中で定義された変数は、関数の外からは参照できない。

関数の実行：関数名()で実行する。

//関数の定義↓

function printHeart(){

console.log('<3')

}

//関数の実行↓

printHeart()

リターンを使った例

function isShortsWeather(temperature) { //パラメータ（temperature）

if(temperature>=25){　//パラメータが25以上ならば

return true; //真をリターン

}

return false; //そうでなければ偽をリターン

}

numbersに渡された配列の合計をtotalに加算し出力する関数の例。

numに１～７の数字に対応した曜日を返す関数のJSコードと出力例

オブジェクトの中にメソッドを定義し面積と長さを算出した例

エラー処理の記述例

try{

エラーの構文

}catch(err{

正しい構文)

}

※errと言う変数を入れるとエラーメッセージが変数に受け取れる。

mapを使用した例下図のコメント修正箇所：firstnamesに代入しリターンでfirstのみ返す。

アロー関数の記述例：アロー関数は通常の関数の簡略化

アロー関数の場合

const greet = (name) => {

return `Hey ${name}!`;

};

通常の関数の場合

const greet = function(name) {

return `Hey ${name}!`;

};

出力例上記どちらでも下記となる。

greet("Hanako") //"Hey Hanako !"

filterメソッドやアロー関数・コールバック関数の使用例

JavaScriptで厳格なエラーチェックをするためJSコードの最初の行に記述する

'use strict';

ページトップへ▲

このブログを検索

護身ＩＴアドバイザー（ITの相談）

はじめてのＪＳ

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

コメント

コメントを投稿