Classes Blueprint to create an object with some fields (values) and methods (functions) to represent a 'thing'. class Vehicle { drive(): void { console.log('chugga chugga'); } honk(): void { console.log('beep'); } } class Car extends Vehic…

Interfaces Creates a new type, describing the property names and value types of an object 例えば、今まで学んだことを利用して次のように型定義を行うと、コードが長くなってしまって可読性も低くなる。 const oldCivic = { name: 'civic', year: 200,…

TSでarrayを扱う上で重要なポイント TS can do type inference when extracting values from an array TS can prevent us from adding incompatible values to the array We can get help with map, forEach, reduce, functions Flexible - arrays can still…

ファンクション周りでのannotations/inference使い分け Type annotations for functions Code we add to tell TS what type of arguments a function will receive and what type of values it will return. Type inference for functions TS tries to figur…

重要な概念を2つほど。 Type annotations / Type inference Type annotations Code we add to tell TypeScript what type of value a variable will refer to Type inference TypeScript tries to figure out what type of value a variable refers to 前者…

外部データから取得して一覧表示して、Like付けたり削除できたりできるところまで。 ファイル構成 . ├── App.js ├── Vidly.jsx ├── components │ ├── atoms │ │ └── Like.jsx │ └── molecules │ └── Movies.jsx ├── data │ └── services │ ├── fakeGenreServ…

カウンターコンポーネントを最終的にリファクタリングしたもの。 ファイル構成 . ├── App.jsx ├── components │ ├── Counter.jsx │ ├── Counters.jsx │ └── Navbar.jsx └── index.js ファイルの中身 App.jsx import React, { Component } from 'react' impor…

Lifecycle Hooks ReactのLifecycle hooksでよく用いられるものはだいたい次の通り。 Mount constructor render componentDidMount Update render componentDidUpdate Unmount componentDidUnmount Mounting phase constructor, render, componentDidMountの…

React復習がてら要点をまとめていく。 React学習3で学んだところから、さらに階層深くコンポーネント構成をする、次のようなケースの場合。 . ├── App.jsx ├── components │ ├── Counter.jsx │ ├── Counters.jsx │ └── Navbar.jsx └── index.js Objectやargu…

React復習がてら要点をまとめていく。 Single source of truth Reactでの状態（state）管理は、一つのソースで行わないといけない。これがSingle source of truthと言われるものである。 あるlocal stateを持ったコンポーネントを複数読み込んでその親もstat…

React復習がてら要点をまとめていく。 外部ファイルの配列形式のデータを読み込んできて、画面に表示する例。 要点整理 Conditional renderingをするときは、returnするブロックを別メソッドで分けておくとやりやすい。 読み込むデータに対してgetter, sette…

React復習がてら要点をまとめていく。 環境構築 Starter Kit create-react-appをグローバルでインストールして、スターターファイルを立ち上げる。 create-react-app counter-app ちなみに、スターター系は公式ドキュメントStarter Kits – Reactにもまとめら…

モジュールでの型宣言とimport ES Moduleで他ファイルに型宣言したものを読み込ませることができる。 // Interfaces.ts export interface Person { name: string; age?: number; } enum Job { WebDev, WebDesigner, PM } export default Job; // index.ts im…

デフォルト引数の活用 次のようなファンクションを定義する。 const sayWord = (word: string): string => { console.log(word); return word; }; sayWord('hoge'); sayWord(); TSでは引数と返り値に対してこのような型指定の形式を取る。 するとVanillaJSの…

JavaScriptの型付けは動的に行われているので、暗黙の型変換や型の認識（Truthy / Falsy）などが行われてしまう。 そこで必要なのが、JavaScriptのスーパーセット（Superset）であるTypeScriptによる静的型付けである。 ParcelによるTypeScript実行環境の構…

グローバル変数のファイル間共有 jQueryなどのライブラリをJSファイル側で毎回読みこむのが面倒であるときに有効なのが、 webpack.common.js に webpack モジュールからプラグインを読み込ませる方法だ。 webpack.common.js const webpack = require('webpac…

Tree shaking 使用していないdead codeを読み込むことはファイルサイズの増大につながり、適切ではないであろう。 Webpackにおいて、例えばライブラリやファンクションを読み込んでいるのに一切使っていない場合は、 デフォルトのproductionモードでは、dist…

WebpackなどのフロントエンドDevOps的な分野は、なかなか面倒なイメージで今まで避けてきた部分だったので、改めてゼロからしっかりと学んでみる。 Webpack学習の問題点 初学者にとっていきなり理解するのは難しい。実践が必要 無関係なこともブラックボック…