自分用メモ
随時追記していく
※参考：Progateとは？魅力や欠点、学習の順序や心得など
※参考：JavaScriptとは？出来る事やライブラリについて
学習コース JavaScript Ⅰ
Progate①文字列と数値
console.log()
計算してみよう
文字列の連結
「console.log」と入力する
変数の更新
Let name=“join”;
consle.log(name);
name=“Kate”;
console.log(name);
Let number = 2;
Consoke.log(number);
Number = number + 3;
Console.log(number);
Let number = 2;
Number = number + 3;
②変数・定数
変数の役割
変数の値の更新
定数とは
テンプレートリテラル
定数はletの代わりにconstを用いて定義します
Const name = “join”;
変数（let）は１度代入した値を更新することが出来るが、
定数（const）は値を更新することが出来ない
Let name = “join”;
console.log(name);
name= “Kate”;
console.log(name);
Const name = “join”;
Consoke,log(name);
Conso
Console.log(language+“◯◯を話せます”);
★テンプレートリテラル
文字列や定数の連結には「＋」記号を用いる
ES6では、これ以外の方法として「テンプレートリテラル」という方法がある
テンプレートリテラルを用いると、文字列の中に定数（変数）を埋め込む事が可能
Const name = “にんじゃわんこ”;
Console.log(‘こんにちは、${name}さん’);
Const name = “にんじゃわんこ”;
Const age = 14;
Console,log(‘${name}は${age]歳です’);
シングルクォート：’
バッククォート：
③条件分岐
if文
真偽値と比較演算子
else
else if
複数の条件式
switch文
Const number = 12;
If (number > 10){
console.log(“numberは10より大きいです”);
}
If文を書く時は、インデント（字下げ）をするように気をつkる
インデントを入れることで、ifの処理がどこからか一目でわかる
Const number = 12;
if(number > 10){
console.log(“numberは10より大きいです”);
}
console.log(number > 10);
a !==b：aとbが異なる
Const number = 12;
Console.log(number === 12);
Const name = “John”;
Console.log(name !== “John”)
条件が成り立たない場合の処理（else）
Const number = 7;
if(number > 10){
console.log(“numberは10より大きいです”);
}else{
console.log(“numberは10以下です”};
}
さらに条件を追加したい場合（else if）
Ifとelseの間に「else if（条件）」を追加することで
If文に条件分岐を追加することが出来る
Const number = 7;
if(number > 10){
console.log(“numberは10より大きいです”);
}else if(number>5){
console.log(“numberは5より大きいです”};
}else{
console.log(“numberは5以下です”};
}
複数の条件式①「かつ」（&&）
複数の条件がすべてtruneならtruneになる
X>10 && X<30
X>10 && X<30
複数の条件式②「または」（||：or）
複数のが条件のうち１つでもtrueならtrunbeになる
X<10 || X>30
X<10 || X>30
Const number = 31;
If(number >= 10 && number < 100){
console.log(“numberは２桁です”);
}
Switch文：ある値によって処理を分岐する場合に用いる
「switch(条件の値){処理}」とする事でswitch文を書くことが出来る
Const color = “赤”;
Switch(color){
case “赤”;
console.log(“ストップ！”);
break;
}
Const color = “赤”;
Switch (color){
case “赤”;
console.log(“ストップ！):
break;
case”黄”;
console.log(“要注意”);
break;
}
breakはswitch文を終了する命令
Breakがないと、合致したcaseの処理を行った後、その次のcaseの処理も実行してしまう
なので、switch文を使う際は、breakを忘れないようにする
★switch文のdefault
Switch文は、条件の値がcaseの値と一致したとき、その部分の処理が実行される
Caseのどれにも一致しなかった時、dafaultのブロックが実行される
defaultはif文のelseに似たようなもの
Const color = “黒”;
switch(color){
case”赤”;
case”黄”;
case”緑”;
default:
console.log(“colorの値が正しくありません”);
break;
}
学習コース JavaScript Ⅱ
①繰り返し処理
変数の復習
while文
for文
Let number = 1;
Console.log(number);
Number += 1;
Console.log(number);
繰り返し処理①（while文）
Let number = 1;
While (条件式) {
console.log(number);
number += 1;
}
Let number = 1;
While (number <= 100) {
console.log(number);
number += 1;
}
繰り返し処理②（for）
For文は出来ることはwhile文と同じだが、
While文に比べてシンプルに書けるという特徴がある
Let number = 1;
While (number <0 100) {
console.log(number);
number += 1;
}
Fro (let number = 1; number <= 100; number +=1 ){
console.log(number);
}
For文では「変数の定義」「条件式」「変数の更新」の３つを括弧の中に書く
括弧の中ではそれぞれをセミコロン（;）で区切る
While文だと下に並んでるけど、
For文だと１つの括弧の中に全てが入っている
Number = number +1
Number +=1
number++
number=number-1
Number-=1
Number--
For (let number = 1; number <= 100; mumber ++){
console.log(number);
}
足し算の場合「number +=1」は、「number ++」のように省略して書ける
引き算の場合「number -=1]は、「number---」のよう省略して書ける
While文やfor文では、こうした省略した書き方を使ってコードを短くする事ができる
「３の倍数である」ということは、
“３で割った余りが０と等しい”という条件と同じ
なので３の倍数の式は「number % 3 ===0」となる
★これは間違い
// for文を完成させてください
for (let number =1;number <=100; number +=1) {
// if文を用いて、numberが3の倍数の時に「3の倍数です」、そうでないときは数字を出力してください
if(number %3 = 0){
console.log("3の倍数です");
}else{
console.log(number);
}
★これは正解
// for文を完成させてください
for (let number = 1; number <= 100; number +=1) {
console.log(number);
// if文を用いて、numberが3の倍数の時に「3の倍数です」、そうでないときは数字を出力してください
if(number %3 ===0){
console.log("3の倍数です");
}else{
console.log(number);
}
}
②配列
配列とは
配列の要素の取得
配列の要素の更新
配列と繰り返し
★配列：複数の値をまとめて扱う方法について
Const fruit1 = “apple”;
Const fruit2 = “banana”;
Const fruit3 = “orange”;
「果物の名前」についての値がいくつもある時、
それぞれを定数（変数）として定義するより、
「果物の名前一覧」といったように関連する値を
まとめて管理すると便利
[“apple”, ”banana”, ”orange”]
[21, 43, 12]
配列に入っているそれぞれの値を「要素」と呼ぶ
配列を使うと、複数の文字列や数値をまとめて書くことが出来る
Const fruits = [“apple”, ”banana”, ”orange”]:
Console.log(fruits);
配列も１つの値なので、定数に代入する事ができる
配列を代入する定数名は、複数形にする事が多い（慣習上そうなっている）
★インデックス番号
配列の要素には、それぞれ「インデックス番号」がついてる
インデックス番号は、0から始まるので注意する
Const fruits = [“apple”, ”banana”, ”orange”]:
Console.log(fruits[0]);
Console.log(fruits[2]);
配列[インデックス番号]とすることで、配列の要素を取得できる
Const fruits = [“apple”, ”banana”, ”orange”];
Console.log(fruits[0]);
fruits[0] = “grape”;
console.log(fruits[0]);
配列は、要素に値を代入することで、その要素を上書きすることが出来る
（配列の要素の更新）
Const fruits = [“apple”, ”banana”, ”orange”];
配列に対して、繰り返し処理を行うことがしばしばある
For文を使って、配列の要素を順に取り出す方法を解説
Const fruits = [“apple”, ”banana”, ”orange”];
Console.log(fruits[0]);
Console.log(fruits[1]);
Console.log(fruits[2]);
Const fruits =[“apple”, ”banana”, ”orange”];
for(let i = 0; i < 3; i++){
console.log(fruits[Ii);
}
「変数i」がポイント
Forの()内は「iが0-2の間ループする」という意味
(Fruits[I])は、変数Iを用いて要素を取得している
Const fruits = [“apple”, “banana”, “orange”];
Console.log(fruits.length);
Const fruits = [“apple”, “banana”, “orange”];
for(let i = 0; i < fruits.length; i++){
console.log(fruits[i]);
}
「配列.length」とすることで、配列の要素数を取得できる
また、lengthを用いれば、for文の条件式を書き換える事が可能となる
（これは配列の繰り返し処理でよく使うので、覚えておくこと ）
【これを】
Const fruits = [“apple”, “banana”, “orange”];
for(let i = 0, i < 3; I++) {
console.log(fruits[I]);
}
【lengthを使う事で】
↓
【このように書き換える】
Const fruits = [“apple”, “banana”, “orange”];
for(let i = 0; i < fruits.length; i++){
console.log(fruits[i]);
}
③オブジェクト
オブジェクトとは
オブジェクトの値の取得・更新
オブジェクトを要素に持つ配列
★オブジェクト
オブジェクトは、配列と同じく複数のデータをまとめて管理するのに用いられる
配列は複数の値を並べて管理するのに対し、
オブジェクトはそれぞれの値に「プロパティ」と呼ばれる名前を付けて管理する
//配列
[値1, 値2, 値3]
//オブジェクト
{プロパティ1:値1, プロパティ2:値2}
{name:: ”手裏剣”, price: 300}
配列は[ ]で囲むが、オブジェクトは{ }で囲む：微妙な違いに注意
プロパティと値の間はコロン（:）でカオム
配列と同様、要素と要素はコンマ（,）で区切る
Const item = {name: “手裏剣”, price: 300};
Console.log(item);
オブジェクトも定数に代入する事ができる
★オブジェクトの値を取り出す
Const item = {name: “手裏剣”, price: 300};
Console.log(item.name);
オブジェクトの値を取り出すには、対応するプロパティ名を用いて
「オブジェクト.プロパティ名」のようにする
Const item = {name: “手裏剣”, price: 300};
item.price = 500;
Console.log(item.price);
「オブジェクト.プロパティ=新しい値」とすることで、オブジェクトの値を更新できる
★オブジェクトを要素に持つ配列
[{プロパティ1:値1…},{プロパティ2:値2…}]
Const items = [
{name: “手裏剣”, price: 300},
{name: “忍者刀”, price: 1200}
];
配列は要素ごとに縦に書くことも出来る
配列の要素には、文字列や数値だけでなく、オブジェクトも使う事ができる
その際、コードが横に長くなることを防ぐために、
要素ごとに改行することがよくあるので、覚えておく
★配列の中のオブジェクトを取り出す
Const items = [
{name: “手裏剣”, price: 300},
{name: “忍者刀”, price: 1200}
];
Console.log(items[1].price);
配列の中のオブジェクトのプロパティの値を取り出すには
「配列[インデックス番号].プロパティ名」と書く
コンソールで出力する時は、セミコロン（;）を忘れずに！
Const characeters = [
{name: “にんじゃわんこ”, age: 14},
{name: “ひつじ仙人”, age: 1000},
{name: “ベイビーわんこ”, age: 5}
];
④undefined
undefinedとは
undefinedの対応
★undefinedを避ける
const characters = [
{name: "にんじゃわんこ", age: 14},
{name: "とりずきん"}
]
for(let i = 0; i < characters.length; i++){
const character = characters[i];
console.log('${character.age}歳です')
}
★undefinedとif文
const characters = […];
for(let i = 0; i < characters.length; i++){
const character = characters[i];
if(character.age === undefined){
//ageの値がundefined（定義されてない）時の処理
}else{
//ageの値が定義されてるときの処理
}
}
「character.age」の値が「undefined」と等しいかで処理を分岐する
テンプレートリテラルで囲む場合、文字列全体をバッククォート（「テンプレートリテラル」の意味は以下を参照
※参考：クリエイティブ、プログラミング用語まとめ
⑤総合演習
★オブジェクトの値にオブジェクトを用いるconst character = {
name: "にんじゃわんこ".
age: 14,
favorite: {
food: "ラーメン",
sports: "卓球",
color: "若草色",
},
};
オブジェクトの値の部分には、文字列や数値だけでなく
オブジェクトを用いる事もできる
上記では「character」というオブジェクトの
「favorite」プロパティに対応する値に、オブジェクトを用いている
★オブジェクトを呼び出す
const character = {
name: "にんじゃわんこ",
favorite: {
food:"ラーメン"
},
};
console.log(character.favorite);
console.log(character.favorite.food);
「オブジェクト名.プロパティ.プロパティ」のように呼び出す
const character = {
name: "にんじゃわんこ",
age: 1 4,
foods: ["ラーメン", "うどん", "焼きそば"]
};
「１つのプロパティ」に「複数の値」を当てはめる時、
配列も使うことが出来る
学習コース JavaScript Ⅲ
①関数とは
関数：「いくつかの処理をまとめたもの」
Const introduce = function() {
console.log(“こんにちは”);
console.log(“私はにんじゃわんこです”);
};
書き方としては「function()」と書き、その後ろの中括弧「{ }」の中に
まとめたい処理を書くことで関数を用意することができる
このように関数を用意することを「関数を定義する」と呼ぶ
★関数の呼び出し
Const introduce = function() {
console.log(“こんにちは”):
console.log(“私はにんじゃわんこです”);
};
//「2つのconsole.logを「introduce」という関数にまとめてるのか
introduce();
関数を定義した際に仕様した定数名を用いて
「定数名()」と書くことで関数の中の処理を実行できる
これを「関数を呼び出す」と言う
「関数の呼び出し」が分かったら、
「関数の定義」から書いてみる
Const introduce = function(){
console.log(“こんにちは”);
console.log(“私はにんじゃわんこです”);
};
②アロー関数
const introduce = function(){
console.log("こんにちは");
console.log("私はにんじゃわんこです");
}
→functionを用いた関数
const introduce = () => {
console.log("こんにちは");
console.log("私はにんじゃわんこです");
}
→アロー関数
「function()」の部分を「()=>」としても、
これまでと同じように関数を定義できる
これはES6から導入された新しい書き方で、
「function 」を用いるよりもシンプルに書ける
この関数の書き方を「アロー関数」と言う
const introduce = () => {
console.log("こんにちは");
console.log("私はにんじゃわんこです");
};
introduce();
アロー関数では、これまでの「function()」の部分を
「()=>」と書くこと以外は、定義方法は変わらない
呼び出し方も、これまで学習してきた関数と変わらない
ここからの演習問題では、
基本的にアロー関数の書き方を用いる
「=>」というのが矢（アロー）っぽいから
「アロー関数」と呼ばれてるのかな
「console.log()」の最後にはセミコロン（;）を忘れない
「console.log();」これが正しい書き方
③引数とは
★引数とは、関数に与える追加情報のようなもの
関数を呼び出すときに一緒に値を渡すことで、
関数の中でその値を利用することが出来る
const 定数名 = (引数名) => {
//処理
};
const introduce = (name) => {
//処理
};
「（引数名）=>」と括弧の中に引数名を書くことで、
引数を受け取る事ができる
const introduce = (name) => {
・・・
};
introduce("にんじゃわんこ");
引数を受け取る関数を呼び出すには「定数名(値)」と書く
関数は指定した値を受け取り、その値は引数に代入される
introduceの呼び出し時に「"にんじゃわんこ"」という値が渡され、
引数nameに代入される
const introduce = (name) => {
console.log("こんにちは");
console.log('私は ${name}です');
};
introduce("にんじゃわんこ");
introduce("ひつじ仙人");
引数は、関数内では定数や変数と同じように使用することが出来る
④複数の引数を受け取る関数
⑤戻り値とは
★様々な戻り値const check = (number) => {
return number % 2 === 0;
}
console.log(check(6));
console.log(check(7));
戻り値も引数と同様、様々な値を用いる事ができる
if文で使うような条件式をreturnすると、
その条件式の結果として得られる真偽値（trueまたはfalse）を返す事ができる
★returnによる処理の終了
const add = (a,b) => {
return a + b;
console.log("計算しました");
}
returnは、戻り値を返すだけでなく、
関数の処理を終了させる性質も持っている
returnの後にある関数内の処理は実行されないので注意
⑥戻り値の活用
⑦スコープ
★関数の中の定数関数の引数や、関数内で定義した定数や関数は、その関数の中ですか使う事ができない
const introduce = () => {
const name = "にんじゃわんこ"; //このnameは関数introduceの中で定義されてる
//ここでは定数nameは使える
}
//ここでは定数nameは使えない
上記のように、introduceの中で定義されている定数nameは、
関数introduceの中でしか使う事ができない
こうした、それぞれの定数や変数の使用できる範囲を「スコープ」と呼ぶ
const name = "にんじゃわんこ"; //このnameは関数introduceの外で定義されてる
const introduce = () => {
//定数nameが使えるスコープ
};
//定数nameが使えるスコープ
関数の外で定義した定数や変数は、関数の中でも使う事ができる
上の図では、定義nameは関数の外で定義されてるので、関数の中でも外でも使える
★関数以外のスコープ
→条件式の中でしか使えない？
if (条件式) {
const name = "にんじゃわんこ";
//定数nameが使えるスコープ
}
//定義nameが使えないスコープ
while (条件式) {
const name = "にんじゃわんこ";
//定数nameが使えるスコープ
}
//定数nameが使えないスコープ
関数だけでなく、ifやswitchなどの条件文、
forやwhileなどの繰り返し文などの、
中括弧「{}」を使う構文でもスコープを作る
⑧総合演習
学習コース JavaScript Ⅳ
①クラスの基本
クラスとは
インスタンスの生成
コンストラクタ
メソッド
メソッド内でのメソッド呼び出し
・オブジェクトの復習
★クラスを学ぼう
クラスはES6から新しく導入された文法
JavaScriptのライブラリ（React, Vueなど）を学習する上での必須知識
const user = {name: "にんじゃわんこ", age: 14};
console.log(user.age);
オブジェクトは上記のように、複数の値を
「プロパティ」という名前を付けて管理できるもの
★オブジェクトと関数
const 定数名 = {
プロパティ名: () => {
処理
}
};
定数名.プロパティ名();
オブジェクトの「値」の部分には、関数を用いる事もできる
上記のように、プロパティの値として関数を記述する
また、この関数を読み出すには「定数名.プロパティ名()」とする
プロパティ名の後ろの()を忘れないようにする
const user = {
name: "にんじゃわんこ",
greet: () => {
console.log("こんにちは！");
}
};
user.greet();
上記の図では、オブジェクトの「greet」プロパティに対応する値に
関数（アロー関数）を用いている
そして、「user.greet()」とすることで関数が実行され、
コンソールに表示されている
オブジェクトと関数
const 定数名 = {
プロパティ名: () => {
処理
}
};
定数名.プロパティ名();
オブジェクトの「値」の部分には、関数を用いる事もできる
その関数を呼び出すには「定数名.プロパティ名()」とする
const user = {
name. "にんじゃわんこ",
greet: () => {
console.log("こんにちは！");
}
};
user.greet();
上記の図では、オブジェクトの「greet」プロパティに対応する値に
関数（アロー関数）を用いている
そして「user.greet()」とすることで関数が実行され、
コンソールに表示される。
★オブジェクトを量産する
Webサービスでは、上記のオブジェクトをいくつも扱っている
こうしたデータは、毎回ゼロから作成していては大変なので、
似たようなデータを効率よく生成する方法を覚えていく必要がある。
★クラスとは
オブジェクトの設計図のこと。
この設計図をもとに、ユーザーのデータを生成していく。
class User {
}
「class クラス名」とすることで、新しくクラスを用意できる
クラス名は、基本的に大文字から始めるようにする。
ーーーーーーーーーーーーーーーーーー
★インスタンスの生成
class Animal {
}
const animal = new Animal();
クラスから生成したオブジェクトを「インスタンス」と呼ぶ
クラスからオブジェクト（インスタンス）を生成するには、
「new クラス名()」とする
★インスタンスの確認
class Animal {
}
const animal = new Animal();
console.log(animal);
ーーーーーーーーーーーーーーーーーー
★コンストラクタ
クラスには「コンストラクタ（constructor）」という機能が用意されている
class Animal {
constructor(){
}
}
コンストラクタは、インスタンスを生成する時に
実行したい処理や設定を追加するための昨日
クラスの中括弧{}内に「constructor(){}」と記述する
★コンストラクタの処理
class Animal {
constructor(){
console.log("こんにちは！");
}
}
const animal1 = new Animal();
const animal2 = new Animal();
コンストラクタの中には処理を記述できる
ここに書いた処理は、インスタンスが生成された直後に実行される
「インスタンスごとに毎回実行される」のが重要
class Animal {
constructor(){
this.name = "レオ";
}
}
const animal = new Animal();
console.log(animal.name);
コンストラクタの中で「this.プロパティ = 値」とすることで、
生成されたインスタンスにプロパティと値を追加できる
ーーーーーーーーーーーーーーーーーー
★インスタンスごとに値を変える
class Animal {
constructor(name, age){
this.name = name;
this.age = age;
}
}
const animal = new Animal("レオ", 3);
コンストラクタでは引数を受け取る事が可能
「constructor」の後のカッコ「()」内に引数名を記述する事で
その引数をコンストラクタの処理内で使用できる
コンストラクタに引数として値を渡すには
「new クラス名()」のカッコ「()」内に値を追加する
上記の図では、文字列「"レオ"」という値が引きストして渡され、
コンストラクタ内では「name」として使う事ができる
ーーーーーーーーーーーーーーーーーー
★メソッド
メソッドはクラスの重要な機能の１つ
インスタンスの「動作」のようなもの
プロパティでは、「名前」や「年齢」などの情報を追加するが、
メソッドでは「挨拶をする」「値を計算する」といった、処理のまとまりを表す
class クラス名 {
constructor() {
・・・
}
メソッド名(){
//行いたい処理
}
}
メソッドはクラスの中で定義する
「メソッド名(){}」とすることでメソッドを定義できる
メソッドは関数と似たようなもので、
中括弧「{}」の中に、そのメソッドで行いたい処理を記述する
class Animal {
info
}
②クラスの継承
継承とは
継承したクラスを使う
メソッドの追加
オーバーライド
備忘録メモ
プロジェクトマネージャー
ITコンサルなるには
IT派遣について
英語が出来ると外資系企業の案件も出来る
子供の教育のためにも大人が英語を身に付ける必要がある
※参考：英語学習まとめ
フリーランスで独立するためのプラン
→マナブログやピークスの記事
※参考：プログラミングの学習方法
まずは何でもいいので書いてみる
続いて背景を考えてみる：アウトプット先行の勉強法
※参考：本の読み方や抽象と具体の区別。対話とアウトプットの重要性など
迷ったら一度リセットして再度コード書いてみるといける時がある
この記事へのコメントはありません。