3月4週
自社プロジェクトと自学習でうまく切り替えを行うことが重要
土曜：2h,2h,2h=6h
- ナビバー作成
- テーブル検索時に言語に対してオートコンプリートできた方が良いと思うのでオートコンプリート機能入れてみた
月曜からやること
- ProjectData修正
- ProjectDetail修正
- getdetailアクション追加（ミューテーションとかも）
- ページング処理の作成
- rowclickの実装
githubとかgitlabを同一環境・複数ユーザアカウントで使う時
- hostを登録する
- remote URL設定
git remote add origin git@github.com:<ACCOUNT_NAME>/<YOUR_REPSITORY>.git
- アカウントの切り替え
$ git config --global user.name "<YOUR_NAME>" $ git config --global user.email <YUOR_EMAIL>
日曜：2h,2h,1h=5h
アロー関数おさらい
// 従来の関数宣言 function plusOne(n) {
return n + 1; }
// アロー関数の宣言その 1
const plusOne = (n) => { return n + 1; };
// アロー関数の宣言その 2
const plusOne=n=>n+1;
引数がひとつだけの場合はカッコが省略で きるのと、本文が return 文だけのときは、return が省略できる
コーディングルールを矯正するツール
eslint-plugin-prefer-arrow : https://github.com/TristonJ/eslint-plugin-prefer-arrow
- 分割代入を積極的に使っていく
- qiita.com
const [n, m] = [1, 4];
console.log(n, m); // 1 4
const obj = { name: 'Kanae', age: 24 };
const { name, age } = obj;
console.log(name, age); // Kanae 24
コレクションの展開構文（スプレッド構文）
...配列とすると配列が展開される
const arr1 = ['A', 'B', 'C'];
const arr2 = [...arr1, 'D', 'E'];
console.log(arr2); // [ 'A', 'B', 'C', 'D', 'E', 'F' ]
const obj1={a:1,b:2,c:3};
const obj2 = { ...obj1, d: 4, e: 5 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4, e: 5 }
async/awaitはエイシンク・アウェイトと呼ぶらしい（知らなかった）
関数型プログラミング
コレクションの反復処理（map,filter,find）
constarr=[1,2,3,4,5,6,7,8]; console.log(arr.map(n => n * 2)); // [ 2, 4, 6, 8, 10, 12, 14, 16 ] console.log(arr.filter(n => n % 3 === 0)); // [ 3, 6 ] console.log(arr.find(n => n > 4)); // 5 console.log(arr.every(n => n !== 0)); // true console.log(arr.some(n => n > 8)); // false console.log(arr.includes(5)); // true console.log(arr.reduce((n, m) => n + m)); // 36 console.log(arr.sort((n, m) => n < m)); // [ 8, 7, 6, 5, 4, 3, 2, 1 ]
map()は対象の配列の要素一つ一つを加工した新しい配列を作るfilter()は条件に適合する要素だけを抽出して新しい配列を作るfind()は条件に適合した要素をひとつだけ取り出す。見つからない場合はundefindを返すevery()はすべての要素が条件を満たすかを真偽値で返すsome()は条件を満たす要素がひとつでもあるかを真偽値で返すincludes()は指定した要素が含まれるかを真偽値で返すreduce()は配列の要素を、与えた式で畳み込んだ値を返すsort()は各要素を、与えた条件によって並び替えた新しい配列を返す
高階関数
- 引数に関数をとったり、戻り値として関数を返したりする関数
- 関数 hof は、渡された第二引数の関数に、その引数として第一引数を加えて実行する関数を返す関 数。だから plusOneDouble は、その引数に 1 を加えて2倍する関数になる。
const hof = (ex, fn) => {
return n => fn(n + ex);
};
const plusOneDouble = hof(1, n => n * 2);
console.log(plusOneDouble(4)); // 10
クロージャ
- 日本語では『関数閉包』
- 親関数スコープの変数を参照する関数
const counterMaker = (initialCount) => { let c = initialCount;
const increment = () => c++;
return increment; };
const count = counterMaker(1);
console.log(count(),count(),count()); //123
ジェネレータ
- 値を保持しつつ繰り返し処理や逐次処理を行うための手段に JavaScript が提供しているものとして
ジェネレータ関数がある
function* rangeGenerator(end, start = 0) { letn=0;
for(let i = start; i < end; i++){
n+=1;
yield i;
}
}
const gen = rangeGenerator(3);
console.log(gen.next()); // { value: 0, done: false }
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next());// { value: undefined, done: true }
カリー化と関数の部分適用
- 普通の関数の場合
constmulti=(n,m)=>n*m; console.log(multi(2, 4)); // 8
- カリー化した場合
const curriedMulti = n => {
returnm=>n*m;
}
console.log(curriedMulti(2)(4)); // 8
const simpleCurriedMulti = n => m => n * m;
console.log(simpleCurriedMulti(2)(4)); // 8
TypeScriptのneverの使い道
neverは、どんな型も受け付けない。使い道としてはcaseのデフォルトに仕込んでcaseのパターンの漏れを検知する。
switch (obj.type) {
case 'Some':
return {
type: 'Some',
value: f(obj.value),
};
case 'None':
return {
type: 'None',
};
default:
// ここでobjはnever型になっている。
return obj;
}
Type Alias
- インターフェース型に別の名前をつけられるもの、単独で使うより型同士の合成時に使われることが多い（以下例）
interface Foo { hoge?: number, fuga: string }; interfaceBar{hoge:number }; // { hoge: number, fuga: string }
interface Buz { piyo: string }; // { hoge?: number, fuga: string } or { hoge: number }
type FooBar1 = Foo & Bar; type FooBar2 = Foo | Bar; // { hoge?: number, fuga: string, piyo: string }
type FooBuz1 = Foo & Buz; type FooBuz2 = Foo | Buz; // { hoge?: number, fuga: string } or { piyo: string } Buz);
type BarFooBuz = Bar & (Foo | Buz) // { hoge: number, fuga: string } or { hoge: number, piyo: string }
- 交差型(Intersection Type) ...... 複数の型をひとつにまとめたもの。
&を使う。合成し た型のすべてのプロパティを備えるが、同じ名前のプロパティが省略可能と必須だと、必須 が優先される。 - 共用体型(Union Type) ...... 渡された複数の型のいずれかが適応される型。
|を使う
TypeScriptで関数の返り値を型に変換する(ReturnTypeを使う)
使いたいライブラリがTypeScriptに対応しているか調べたい時
@types/ライブラリでnpm info or yarn info する
Prettier とESLint を併用する意味
- Prettierの自動整形の方が強力だが、ESLintのように構文チェックまではしてくれないため
- qiita.com
State
- this.state には直接値が導入できない
setStateを用いて設定すること setStateの引数には2種類使える。- 設定したい値の State オブジェクト。
- (prevState, props) => newState の形式の、State と Props を引数として受け取り新しい Stateを返す関数。
- 使い分けは以下
- State に
固定値を設定するときは1、動的に変更したい場合は2を選ぶ
- State に
普通の関数のthisとアロー関数のthisの違い
- arrow function: 内部のthisは宣言時のスコープを持つオブジェクトになる
function: 内部のthisは実行時のレシーバであるオブジェクトになる
reactのライフサイクル
- Mounting：コンポーネントが生成され DOM ノードに挿入されるフェーズ
- Updating：変更を検知してコンポーネントが再レンダリングされるフェーズ
- Unmounting：コンポーネントが DOM ノードから削除されるフェーズ
- Error Handling：そのコンポーネント自身および子コンポーネントのエラーを捕捉した時
↑それぞれが持っているメソッドは都度調べる。以下はよく使うモノ
- componentDidMount()
- shouldComponentUpdate()
- componentDidUpdate()
- componentWillUnmout()
月曜：8h
- 業務のみ（休養）
火曜：11h
- 画面設計
- UXを意識
- draw.ioで実施
水曜：11h
高階関数続き
ope = (x, y, cb) => {
return cb(x, y)
}
console.log(ope(2, 4, (a, b) => a + b)) // 6
console.log(ope(2, 4, (a, b) => a * b)) // 8
