プログラマーを目指しはじめて学習中です。

日本やってます。愛媛おすすめです。

JavaScript Work & Working

JavaScriptのまとめ

投稿日:

ProgateでのJavaScriptの学習したメモです。

基礎だけなのですが、まだ把握できていない部分があるので少しずつ身に付けていきます。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~

console.log();
console.logは括弧内で処理が出来る
console.log(定数+"さん");
であれば定数を田中にすれば
田中さん
と「田中」という定数と""で囲まれた「さん」を繋げて表示可能
""で囲まず数字を入力するならば
計算も可能になる+-*/で普通の計算
%で余りの数字を計算できる

---------------------------------------
変数 let
let name = "john";
console.log(name);
~~~~~~~~~~~~~~~~~~~~
let 変数名 = "代入する値";
console.log(変数名);
~~~~~~~~~~~~~~~~~~~~
let 変数名 = "代入する値";
console.log(変数名);

変数名 = "代入する値2";
とするとletは上書きする事ができ
console.log(変数名);
で出力すると
「代入する値2」が出力される

数字の場合にletは
let number = 2;
console.log(number);
で出力は2となり
number = number + 3;
console.log(number);
で5に置き換わる

---------------------------------------

計算の省略する方法は

変数 = 変数 + 10 → 変数 += 10
変数 = 変数 - 10 → 変数 -= 10
変数 = 変数 * 10 → 変数 *= 10
変数 = 変数 / 10 → 変数 /= 10
変数 = 変数 % 10 → 変数 %= 10

と省略することが出来る

---------------------------------------

定数 const
const name = "john";
console.log(name);
~~~~~~~~~~~~~~~~~~~~
const 定数名 = "代入する値";
console.log(定数名);

変数 let よりも定数 constを用いる方が良いことの方が多い。
※基本的に constを用いること
---------------------------------------
テンプレートリテラル
const name = "にんじゃわんこ";
console.log(`こんにちわ、${name}さん`);
~~~~~~~~~~~~~~~~~~~~
const 定数or変数 = "文字or数字";
colsole.log(`こんにちわ、${定数or変数}さん`)
で「こんにちわ、(定数or変数)さん」と出力される

※`=バッククォートを用いること!!

使用例:
const name = "にんじゃわんこ";
const age = "14";
colsole.log(`${name}は${age}歳です`)
で「にんじゃわんこは14歳です」と出力される
---------------------------------------
if文
const number = 12;
if ( number > 10 ) {
console.log ("numberは10より大きいです");
}

で「numberは10より大きいです」と出力される
~~~~~~~~~~~~~~~~~~~~
const 定数 = 文字 or 数字;
if ( 条件式 ) {
console.log ( 処理 );
}
---------------------------------------
const number = 7;
if(number > 10){
console.log("numberは10より大きいです");
}else{
conlole.log("nuberは10以下です");
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
if( 条件式 ){
console.log( 条件が「true」の時の処理 );
}else{
conlole.log( 条件が「false」の時の処理 );
}
---------------------------------------
else if

if( 条件式1 ){
条件式1が「true」の時の処理
}else if( 条件式2 ){
条件式1が「false」、条件式2の時の処理
}else{
どちらの条件式も「false」の時の処理
}

---------------------------------------
「かつ ~」と「または~」
かつ~は「&&」
使用例
const number = 20;
number < 10 && number > 30
であるならば「true(=正しい)」
const number = 5;
number < 10 && number > 30
であるならば「false(=当て嵌まっていない)」となる
&&は両方の条件が当て嵌まっていなければならないときに使用
---------------------------------------
または~は「||」
使用例
const number = 5;
number < 10 || number > 30
であるならば「true(=正しい)」
const number = 20;
number < 10 || number > 30
であるならば「false(=当て嵌まっていない)」となる
||は片方でも当て嵌まっていれば良いときに使用する

---------------------------------------
switch文
const 条件の値 = "";
switch( 条件の値 ){
case 値1:
「条件の値」が「値1」として等しいときの処理
break;
case 値2:
「条件の値」が「値2」として等しいときの処理
break;
case 値3:
「条件の値」が「値3」として等しいときの処理
break;
default:
console.log("条件が当て嵌まらない処理");
break;
}
---------------------------------------
while文(ループ文)
let number = 1;
while (number <= 100){
console.log(number);
number+=1;
}
---------------------------------------
for文
for(let number = 1; number <= 100; number += 1 ){
console.log(number);
}
for文により上記のwhile文の省略が出来る
---------------------------------------
記述の省略
number = number + 1;
number += 1;
number++;

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

---------------------------------------
定数 constをまとめて代入する
const 定数名 : ["代入1","代入2","代入3"];
console.log(定数名);
["代入1","代入2","代入3"] が出力される

~~~~~~~~~~~~~~~~~~~~~~~~~~~
while文(ループ文)
let number = 1;
while ( number <= 100){
console.log(number);
number += 1;

---------------------------------------
for文(応用編)
const = "";
for(変数定義;条件式;変数の更新){
console.log("処理");

---------------------------------------
length (配列.lengthによる繰り返し)
const animals = ["dog", "cat", "sheep", "rabbit", "monkey", "tiger", "bear", "elephant"];
console.log(animals.length);
「8」と出力される

// lengthを用いて条件式を書き換えてください
for (let i = 0; i<animals.length; i++) {
console.log(animals[i]);
}
animalsに含まれる要素すべてが出力される
---------------------------------------
定数で複数のオブジェクトを同時に定義する
// 定数characterを定義し、指定されたオブジェクトを代入してください
const character = {name:"にんじゃわんこ",age:14};
console.log(character);

「{name:"にんじゃわんこ",age:14}」と出力される
~~~~~~~~~~~~~~~~~~~~~~~~~~
const character = {name: "にんじゃわんこ", age: 14};

// characterのnameの値を出力してください
console.log(character.name);

// characterのageの値を「20」に更新してください
character.age = 20;

// characterをコンソールに出力してください
console.log(character);
~~~~~~~~~~~~~~~~~~~~~~~~~
const characters = [
{name: "にんじゃわんこ", age: 14},
{name: "ひつじ仙人", age: 1000}
];

// charactersの1つ目の要素をコンソールに出力してください
console.log(characters[0]);

// charactersの2つ目の要素の「name」に対応する値をコンソールに出力してください
console.log(characters[1].name);

~~~~~~~~~~~~~~~~~~~~~~~~
const characters = [
{name: "にんじゃわんこ", age: 14},
{name: "ひつじ仙人", age: 100},
{name: "ベイビーわんこ", age: 5},
];

// for文を完成させてください
for (let i = 0;i < characters.length ; i++) {
console.log("--------------------");

// 定数characterを定義してください
const character = characters[i];

// 「名前は〇〇です」を出力してください
console.log(`名前は${character.name}です`);

// 「〇〇歳です」を出力してください
console.log(`${character.age}歳です`);

}
~~~~~~~~~~~~~~~~~~~~~~~
const characters = [
{name: "にんじゃわんこ", age: 14},
{name: "ひつじ仙人", age: 100},
{name: "ベイビーわんこ", age: 5},
{name: "とりずきん"}
];

for (let i = 0; i < characters.length; i++) {
console.log("--------------------");

const character = characters[i];

console.log(`名前は${character.name}です`);

// if文を追加してください
if(character.age === undefined){
console.log("年齢は秘密です");
}else{
console.log(`${character.age}歳です`);
}
}
~~~~~~~~~~~~~~~~~~~~~~~~~
const cafe = {
name: "Progateカフェ",
businessHours: {
// businessHoursの値に指定されたオブジェクトを代入してください
opening: "10:00(AM)",
closing: "8:00(PM)",

},
};

// 「店名:〇〇」を出力してください
console.log(`店名:${cafe.name}`);

// 「営業時間:〇〇から△△」を出力してください
console.log(`営業時間: ${cafe.businessHours.opening}から${cafe.businessHours.closing}`);
~~~~~~~~~~~~~~~~~~~~~~~~~
const cafe = {
name: "Progateカフェ",
businessHours: {
opening: "10:00(AM)",
closing: "8:00(PM)"
},
// menusプロパティに配列を代入してください
menus:["コーヒー","紅茶","チョコレートケーキ"]

};

console.log(`店名: ${cafe.name}`);
console.log(`営業時間:${cafe.businessHours.opening}から${cafe.businessHours.closing}`);
console.log(`----------------------------`);
console.log("おすすめメニューはこちら");

// for文を用いて配列menusの中身を表示させてください
for(let i= 0; i < cafe.menus.length; i++){ console.log(cafe.menus[i]); } ~~~~~~~~~~~~~~~~~~~~~~~~~ const 定数名 = function(){ console.log(); console.log(); console.log(); console.log(); }; introduce(); ~~~~~~~~~~~~~~~~~~~~~~~~~ const 定数名 = ()=>{
console.log();
console.log();
console.log();
console.log();
};
introduce();

赤字はfunctionと同様の意味となり短縮できる。
--------------------------------------
引数
const 定数名 = (引数名) => {
console.log();
};
定数名(値);

引数の使用例
const intoroduce = (name) => {
console.log(”こんにちわ”);
console.log(`わたしは${name}です`);
};
introduce("にんじゃわんこ");
introduce("ひつじ仙人");

introduce("にんじゃわんこ","ひつじ仙人");
,(カンマ)で区切ると省略できる。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
戻り値
const 定数名 = () => {
return 値;
};
const sun = add(1,3);
console.log(sum);

const add = (a,b) => {
return a + b;
};
const sum = add(1,3); //sumに1,3が代入されつつaddにも1,3が入る
console.log(sum);

const half = (number) => {
// numberを2で割った値を戻り値として返してください
return number/2;
};

// 定数resultを定義してください
const result = half(130);

// 「130の半分は〇〇です」となるように出力してください
console.log(`130の半分は${result}です`);

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const check = (number) => {
return number % 2 === 0;
};

console.log(check(6)); true
console.log(check(7)); false

console.log(定数());
によって定数が当て嵌まっているかどうか判別することが出来る

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
クラスを作る
class Animal {
}

const animal = new Animal();
console.log(animal);

「Animal{}」と出力される

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
constructor=実行したい処理や設定を追加する機能
class Animal {
constructor(){
}
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
thisでプロパティと値を追加する
class Animal {
constructor(){
this.プロパティ = "値";
}
}
結果を出力する方法
const animal = new Animal();
console.log(animal.name);
必ず遡って「.(ピリオド)」で区切ること

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
コンストラクタの引数
class Animal {
constructor(値1,値2){
this.値1 = 値1;
this.値2 = 値2
}
}
結果を出力する方法
const animal = new Animal(値1に代入する項目,値2に代入する項目);
console.log(animal.name);

~~~~~~~~~~~~~~~~~~~~~~~~~~~~
class クラス名 {
constructor(値1,値2){
}
メソッド名(){
//行いたい処理
}
}

const インスタンス = new クラス名(値1,値2);
メソッドの呼び出し
インスタンス.メソッド();
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
「this.プロパティ名」で出力するメソッド

class クラス名 {
constructor(値1,値2){
}
メソッド名(){
console.log(`名前は${this.プロパティ名}です`);
}
}

const インスタンス = new クラス名(値1,値2);
インスタンス.メソッド();

~~~~~~~~~~~~~~~~~~~~~~~~~~~
「this.メソッド名()」で定形にできる。

class クラス名 {
constructor(値1,値2){
}
メソッド名(){
console.log("こんにちわ");
}
info(){
this.メソッド名();
}
}

const インスタンス = new クラス名(値1,値2);
インスタンス.メソッド();

~~~~~~~~~~~~~~~~~~~~~~~~~~~
extendsで親クラスを引き継ぐ
引き継いだクラスは子クラス
class クラス名2(子クラス) extends クラス名1(親となるクラス) {

}

使用例
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("こんにちは");
}

info() {
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}

// Animalクラスを継承してDogクラスを定義してください
class Dog extends Animal {

}

const dog = new Dog("レオ", 3);
dog.info();
~~~~~~~~~~~~~~~~~~~~~~~~~~~
class Dog extends Animal {
getHumanAge(){
return this.age*7;
}

const dog = new Dog("レオ", 3);
const humanAge = dog.getHumanAge();
console.log(humanAge);
出力結果:21

~~~~~~~~~~~~~~~~~~~~~~~~~~~
親要素と子要素に同じメソッドがある場合に追記される子要素のメソッドが優先される。

class Dog extends Animal {
info(){
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
const humanAge = this.getHumanAge();
console.log(`人間年齢で${this.name}歳です`);

~~~~~~~~~~~~~~~~~~~~~~~~~~~
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log("こんにちは");
}

info() {
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
}

class Dog extends Animal {
// infoメソッドを追加してください
info(){
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);

const humanAge = this.getHumanAge();
console.log(`人間年齢で${humanAge}歳です`);
}

getHumanAge() {
return this.age * 7;
}
}
const dog = new Dog("レオ", 4);
dog.info();

下記のように出力される
こんにちは
名前はレオです
4歳です
人間年齢で28歳です

~~~~~~~~~~~~~~~~~~~~~~~~
親要素から子要素にコンストラクタも引き継ぐ方法
1行目に「super()」が必要になる

class 親クラス {
constructor(){

class 子クラス extends 親クラス {
constructor(){
super()
}
}
~~~~~~~~~~~~~~~~~~~~~~~~
JavaScriptを幾つかのファイルに分ける際は
基本の.jsファイルで基本的な設定をし、読み込み使えるようにする。
方法としては

class クラス名 {
}
export default クラス名;

import クラス名 from "./ファイル名";
import Animal from "./animal";
といった読み込みを行う。

~~~~~~~~~~~~~~~~~~~~~~~~~
エクスポートはクラスだけでは無く
文字列、数値、関数などどのようなものでも可能。
ただdefault exportは1ファイル1つの値のみしか使えない。

const text = "Hello World";
export default text;

import text from "./sample1";
console.log(text);

~~~~~~~~~~~~~~~~~~~~~~~~
変更前
import Dog from "./dog";
const dog = new Dog("レオ",4,"チワワ");
dog.info();

変更後 export側
import Dog from "./dog";
const dog = new Dog("レオ",4,"チワワ");
export default dog;

インポート側に書き足し
import側
import dog from "./dogData";
dog.info();

---------------------------------------
名前付きエクスポートにすることで複数の外部.jsにインポート可能
使用例1
エクスポート側
const dog1 = new Dog("レオ",4,"チワワ");
export { dog1 };
インポート側
import { dog1 } from "./dogData";
dog1.info();

使用例2
エクスポート側
const dog1 = new Dog("レオ",4,"チワワ");
const dog2 = new Dog("ベン",2,"プードル");
export { dog1,dog2 };

※defaultがいらないくなる

インポート側
import { dog1,dog2 } from "./dogData";
console.log("--------");
dog1.info();
console.log("--------");
dog2.info();

---------------------------------------
相対パス、絶対パス
import クラス名 from ~
「./"ファイル名";」=相対パス
「script.js」からみた同じフォルダ内の位置。
フォルダ分けした場合のパス指定方法
「"./data/"ファイル名";」
読み込みたいファイルが同じフォルダ内で「dataフォルダ」内にある場合。
「../class/"ファイル名";
一つ階層が上の場合「../コンマ2つとスラッシュ」
---------------------------------------
プログラムのパッケージからデータを引っ張ってくる
「chalk」コンソール出力の文字に色を付けられる
「readline-sync」コンソールに値を入力できる

import 定数 from "パッケージ名";
使い方
import chalk from "chalk";
console.log(chalk.yellow("Hello World"));
console.log(chalk.bgCyan("Hello World"));
---------------------------------------
「readline-sync」を使えるとコンソールへの値の入力と、その入力された値をプログラムの中で使うことが出来るようになる。
使用例
コーディング側
import readlineSync from "readline-sync";
readlineSync.question("名前を入力して下さい";)
返答者側
名前を入力して下さい:ケン
ケンと入力されました
コーディング側
import readlineSync from "readline-sync";
const name = readlineSync.question("名前を入力して下さい");
console.log(`${name}と入力されました`);

使い分け
文字の場合
const name = readlineSync.guestion("名前を入力して下さい");
数字の場合
const name = readlineSync.guestionInt("年齢を入力して下さい");
となりquestionからquestionIntに変更する

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ここまで実践的ではありませんが、コーディングの仕方が以前Progateで学習したときよりも深まったようです。

-JavaScript, Work & Working

Copyright© 日本やってます。愛媛おすすめです。 , 2019 All Rights Reserved.