# 学習計画
#### 今後やりたいこと
- 何かを模倣するという作業を通じてプログラミングのアウトプットを行う(ネタ探し)
# @20220120
非同期処理
・async await
・Promis then
- https://www.youtube.com/watch?v=kbKIENQKuxQ
- COREではどういう使われ方をしている？
- https://zenn.dev/tentel/articles/8146043d1101b5ea873d
- 写経タイム
# @20211223 4回目
### 関数続き
#### this
関数本体では this という参照のみ可能な(値を設定できない)特別な値を利用することができます。
通常 this は「オブジェクト」と「オブジェクトのプロパティである関数(メソッド)」を束縛します バインド(「結びつける」「bind する」などとも言います)。メソッドが呼び出されるとき this は、そのメソッド がプロパティとなっているオブジェクトを指しています。
```
const o = {
name: 'Wallace',
speak() { return `My name is ${this.name}!`; },
}
const o2 = {
名前: 'ポチ',
話す() { return `僕の名前は「${this.名前}」だよ。`; },
}
console.log(o); // { name: 'Wallace', speak: [Function: speak] }
console.log(o2); // { '名前': 'ポチ', '話す': [Function: 話す] }
console.log(o.speak()); // My name is Wallace!
console.log(o2.話す()); // 僕の名前は「ポチ」だよ。
```
ここで this が「関数の呼び出され方」に依存して束縛される点に注意してください。
「関数の宣言された場所」には依存しません。
this が o に束縛されたのは speak が o のプロパティだからではなく、o.speak の形で直接呼び出されたからです。
同じ関数を変数に代入した場合と比較してみると、、
```
const o = {
name: 'Wallace',
speak() { return `My name is ${this.name}!`; },
}
const speak = o.speak;
console.log(speak === o.speak); // true (どちらの定数も同じ関数を参照している)
console.log(speak()); // "My name is undefined!"(undefinedが表示されない場合あり)
console.log(o.speak()); // "My name is Wallace!"
```
定数speakはオブジェクトoのメソッドspeakを指してはいますが、
speak()だけでは、この関数がoのプロパティとして宣言されたものであることはわからない
そのためthisはundefinedにバインドされてしまう。
ネストされた関数(関数の中で定義された関数)からthisにアクセスする場合、thisのバインドがややこしいことになる
```
const o = {
name: 'Julie',
greetBackwards: function() {
// 名前の文字を逆順に並べる関数
function getReverseName() {
let nameBackwards = '';
for(let i=this.name.length-1; i>=0; i--) {
nameBackwards += this.name[i];
}
return nameBackwards;
} // getReverseName の定義終わり
return `${getReverseName()} si eman ym ,olleH`;
},
};
console.log(o.greetBackwards());
```
o.greetBackwards() を呼び出すときには JavaScript の処理系は this を o に 束縛します。しかし getReverseName を greetBackwards の内側から呼ぶときには this は別のものにバインドされる。
この問題を回避するには、thisを別の変数に代入して覚えておく。
```
const o = {
name: 'Julie',
greetBackwards: function() {
// 名前の文字を逆順に並べる関数
function getReverseName() {
const self = this; // thisを覚えておく
let nameBackwards = '';
for(let i=self.name.length-1; i>=0; i--) {
nameBackwards += self.name[i];
}
return nameBackwards;
} // getReverseName の定義終わり
return `${getReverseName()} si eman ym ,olleH`;
},
};
console.log(o.greetBackwards());
```
または、アロー関数で書くことで回避可能
```
const o = {
name: 'Julie',
greetBackwards: function() {
// アロー関数版
const getReverseName = () => {
console.log(this)
let nameBackwards = '';
for(let i=this.name.length-1; i>=0; i--) {
nameBackwards += this.name[i];
}
return nameBackwards;
} // アロー関数定義の終わり
return `${getReverseName()} si eman ym ,olleH`;
},
};
console.log(o.greetBackwards());
```
#### 関数式と無名関数
こまで関数を定義するのに「関数宣言」を用いてきました。
あとで呼び出すために使う関数名(識別子)と、関数が何をするかを定義する「本体」の両方を指定する方法です。
無名関数→その名の通り関数名を持たない関数
```
const f = function() {
// ...
};
```
無名関数は他の関数(メソッド)の引数として、あるいはオブジェクトのプロパティとして非常によく使われる。
ちなみに、以下のように書いた場合は、関数名fで関数呼び出しをするとエラーとなる
```
const g = function f() {
// ...
}
```
#### アロー関数
- function という単語を省略できる。
- 引数がひとつならば「(」と「)」を省略できる。
- 関数本体がひとつの式からなる場合、「{」と「}」、それに return 文を省略できる。
やってみよう
# @20211221 3回目
### 今日は関数をやります
#### 関数とは
「関数(function)」は文が集まったもので、プログラムを構成する部品の役割をする「サブプログラム」と考えることができます
すべての関数は「本体(body)」をもち、本体には通常は複数の文が書かれます。
```
function sayHello() { // 関数の本体は「{」で始まる
console.log("Hello world!");
console.log("こんにちは、世界! ");
console.log("¡Hola mundo!");
console.log("Hallo wereld!");
console.log("Привет мир!");
}//「}」で終わる
sayHello(); // 関数が呼び出され、コンソールに「Hello, World!」がいろいろな言葉で表示される
```
「function sayHello() {」から「}」までが関数の「宣言」で、これにより関数 sayHello が定義されます。
一番下の sayHello() が関数の「呼び出し」で、これにより関数の 本体に書かれた文が実行されます。
#### 関数の「戻り値」
関数の呼び出し自体は「式」の一種なので、値を持ちます。
関数の値はキーワード return を使って呼び出し側に戻します
※returnを書かない関数の戻り値はundefinedとなる。
```
function func1() {return "hoge"};
function func2() {};
console.log(func1()); // hoge
console.log(func2()); // undefined
```
#### 呼び出しと参照
関数はオブジェクトなので、ほかのオブジェクトと同じように引数として関数に渡したり、変数に代入したりすることができます。
※関数の「呼び出し」と「参照」をしっかりと区別することが重要
「呼び出し」：関数名に () を付ける。その関数の本体が実行され、値が返される。
「参照」：() を付けずに関数名だけを書くと、そ の関数を参照しているだけになります。実行はされない。
```
function getGreeting() {
return "Hello world!";
}
console.log(getGreeting()); // 呼び出し
console.log(getGreeting); // 参照
```
参照でどういうことができるかというと、COREではあんまり使わんかもだけど、、
- 定数へ代入。別名で呼び出せる
```
const f = getGreeting; // 関数をfに代入
console.log(f()); // Hello world!
```
- オブジェクトのプロパティの値にする
```
const o = {}; // oという(空の)オブジェクトを定義
o.f = getGreeting; // オブジェクトoのfというプロパティの値として関数を指定
console.log(o.f()); // Hello world! (o.fに記憶されている関数を呼び出す)
```
- 配列の要素として関数を代入
```
const arr = [1, 2, 3];
arr[1] = getGreeting; // arr は[1, function getGreeting(), 3]になる
const message = arr[1](); // ここ重要。参照した関数を()をつけることによって呼び出している
console.log(message); // Hello world!
```
#### 関数の引数
関数宣言時の引数は「仮引数」と呼ばれるもの。
関数が呼び出されると、仮引数に呼び出し側から渡された値が代入されてから本体が実行されます。
関数の外に同じ名前の変数があったとしても、それはまったく別の変数として扱われます。
```
function f(x) {
console.log(`関数 f の中(代入の前): x=${x}`);
x = 5;
console.log(`関数 f の中(代入の後): x=${x}`);
}
let x = 3;
console.log(`関数fを呼び出す前: x=${x}`);
f(x);
console.log(`関数fを呼び出した後: x=${x}`);
```
関数の中で引数 x に値を代入しても、外側で使われている x の値は変わらないままです。
※引数としてオブジェクトを渡して、そのオブジェクトのプロパティを変更した場合、外側でもその値が有効となる
##### 展開演算子(スプレッド演算子)
引数をまとめて代入できちゃうやつ COREでたまに見る
```
function addPrefix(prefix, ...words) {
/* 接頭辞を追加 */
const prefixedWords = [];
for(let i=0; i<words.length; i++) {
prefixedWords[i] = prefix + words[i];
}
return prefixedWords;
}
console.log(addPrefix("con", "verse", "vex")); // ['converse', 'convex']
console.log(addPrefix("非", "プログラマー ", "デザイナー ", "コーダー "));
```
#### オブジェクトのメソッド
オブジェクトのプロパティとして指定される関数のことは、通常「メソッド(method)」と呼ぶ
※COREではVueとか絡んでくるし、これには慣れておいた方が良い
```
const o = {
name: 'Wallace', // プロパティがプリミティブ
bark: function() { return 'Woof!'; }, // プロパティが関数(メソッド)
}
const o2 = {
名前: 'ポチ',
吠える() { return 'ウーッ、ワン! '; }, // メソッドの省略記法 ES2015より可能になった
}
console.log(o); // { name: 'Wallace', bark: [Function: bark]}
console.log(o2); // { '名前': 'ポチ', '吠える': [Function: 吠える] }
console.log(o.bark()); // Woof!
console.log(o2.吠える()); // ウーッ、ワン!
```
# @20211209 2回目
### 今日は配列をやります
- 配列の関数は、知らなければforループとかでできてしまう(多分)
- でも自作すると、、
- バグが潜り込むし
- コードが長くなる
- なのでどんどん使いましょう
### 配列の操作
- スタックの生成(先入れ後出し:LIFO) =>破壊的
- push
- pop
- キューの生成(先入れ先出し:FIFO) =>破壊的
- unshift
- shift
- 末尾に複数要素を追加 =>非破壊的
- concat
- 部分配列を取得 =>非破壊的
- slice
- 指定場所に対する要素の追加・削除 =>破壊的
- splice
- 配列内での要素の置き換え =>破壊的
- copyWithin
- 配列を満たす =>破壊的
- fill
- 順序を逆転させる =>破壊的
- reverse
- ソートする =>破壊的
- sort(関数を渡してカスタマイズ可能)
### 配列の変換 ★超使う
- 配列内のすべての要素の変換 =>非破壊的
- map
- 条件を満たさない要素の削除 =>非破壊的 => 2021/12/09 ここまで
- filter
- 配列全体の凝縮 =>非破壊的 => 2021/12/13 ここまで
- reduce
- 全要素をまとめてひとつの文字列にする =>非破壊的
- join => まあまあ
### 配列要素の検索
- indexOf => よくつかう
- findIndex
- lastInfexOf
- find => よく使う
- some
- every
### 配列関連の関数の引数 ※reduce以外
- 第1引数: 要素(現在の要素の値)
- 第2引数: 現在の要素の添字
- 第3引数: 配列そのもの(滅多に利用しない)
- => 次は関数
---
# @20211207 1回目
### アウトプット作り
- 何かを模倣するという作業を通じてプログラミングのアウトプットを行う(ネタ探し)
### まず皆さんのJavaScript習熟度を教えてもらいたい
- thisっていつ？ clasのconstructorでのthis(Vueに関連する話)
- returnの書かない処理(Vueに関連する話)
- callback関数
- promise, async await
- 変数、定数、データ型
- 変数 => let, var
- 定数 => const
- const num = 1;
- num = 2; //error
- const obj = {name: 'koji'};
- obj.name = 'daisuke'; // error起きない
- 制御フロー
- if
- ifの派生 => 条件(三項)演算子
- 条件 ? tureの時 : falseの時
- 引数として渡されたオブジェクトに特定のプロパティがない場合に、デフォルトで作る時に使ったりしてる(COREで)
- const obj = {name:'koji', age:31} <-ほんとはこうなっていてほしい。
- const obj = {name:'koji'}
- obj.age || 10
- if()
```
if (条件) {
true
} else {
false
}
````
- for
- while
- 演算子
- 四則演算子
- 数値 + 文字列 したらどうなる？
- 演算子の優先順位
- 足し算と掛け算はどっちが優先
- 優先順位を変えるにはどうすればよい？
- 比較演算子
- 大小関係
- 厳密等価演算子と等価演算子
- 論理演算子
- !!value ってどうなる？
-
- etc...
- 関数 => 次ここ
- 関数宣言
- 関数の呼び出し
- アロー関数
- () => {}
- オブジェクトのメソッド
- thisって？
- アロー関数のthis
- thisを強制的に変える関数
- call
- apply
- bind
- 関数式と無名関数
- スコープ
- スコープって？
- グローバル
- 静的
- 動的
- ブロックスコープ
- クロージャ
- IIFE(即時実行関数)
- 配列操作
- 配列へのアクセスの仕方
- push,pop,shift,unshift
- reduce
- filter
- sort
- find
- findIndexOf
- map
# @20211203
### 本勉強会の目的は、チーム全体のエンジニアリングスキルアップです！
##### ネタは以下を考えています
- JavaScript
- COREフレームワーク解剖
- データベースの基礎
- Vue
- TypeScript
- システム設計開発って何するの？
#### まずは必須スキルとなるJavaScriptについてやっていこうと思います。
### [おまけ]
#### 個人の好みによりますが、、私はPCで以下の設定をしています。
- macのライブ変換うざいのでオフ
https://pc-karuma.net/mac-japanese-input-live-conversion/
- macの予測変換はなんか頭悪い感じするので google IME使っている
https://www.google.co.jp/ime/
- タッチバーをファンクションキー(F1~F12)表示固定にする => ショートカットコマンドでファンクションキーは結構使うのでこの方が便利
https://pc-karuma.net/mac-touch-bar-function-key/
- あとはショートカットコマンドをどんどん覚えましょう！PC操作が格段に速くなります。
# old
- [ ] 5人の学習計画をたてる
- [ ] 教材探し
- 1. Javascript: 実は、learn javascriptの basic版があって、そっちからのがいいかも
- https://learnprogramming.online/ 80Section
- https://learnjavascript.online/ 77Section
- 2. Bootstrap: dotinstall 「bootstrap5」
- https://dotinstall.com/lessons/basic_bootstrap (63分) => 5人で一緒に, 1時間半くらいで攻略する
- pass: 97Qc7VLoxB1o
- account: moeko0645@gmail.com
- 3. vuejs: https://dotinstall.com/lessons/basic_vuejs_v2 (51分) => 5人で一緒に, 1時間半くらいで攻略する
- 4. 2と3を実施した上で、COREに画面を作る実際のケースで試す
Google Drive
Gist
Clipboard
Sign in with Wallet
