React で ルーティングをする為のライブラリでデファクトスタンダードとなっているのが react-router です。 そして、Web 上で利用できるように DOM にバインディングができるライブラリが react-router-domです。 reacttraining.com github.com ちなみに、r…
予めライブラリ側で型定義ファイルが用意されている事もありますが、そうでない場合は DefinitelyTyped で探す事になります。 DefinitelyTyped は、OSS として個人が作成した型定義ファイルを集めているものです。ライブラリが公式に提供している型定義ファ…
Presentational Component(コンポーネント) と Container Component(コンテナー) Presentational Component(コンポーネント) Container Component(コンテナー) カウンターコンポーネントを Presentational Component(コンポーネント) と Container Component…
Qiitaへ「TypeScript の baseUrl について調べた事」を投稿しました。 qiita.com
Qiitaへ「 Nuxt.js の generate で生成したページに 「/index.html」でアクセスすると JavaScript が実行されない問題」という記事を投稿しました。 qiita.com
manifest.json とは PWA として Web アプリケーションをインストールした時に、アプリケーションの振る舞い(アプリケーションの名前や説明、モバイル端末のホーム画面に表示するアイコンや、アドレスバーの色、スプラッシュスクリーンなど)を定義する JSON …
先日開催された、SaCSS vol.107 において「Nuxt + Lottie で お手軽アニメーション」というタイトルで LT をしました。
Nuxt.js の Assetsに格納されている画像を Vue 単一ファイルコンポーネントのdataプロパティで読み込むには、require('@/assets/image/hoge.png')といった具合に、require()を使用する。 <template> <img :src="url" alt="" /> </template> <script> export default { data() { return { url: require('@/assets/ima</script>…
Qiitaへ「 Virtualbox で IE / Edge の動作確認環境を作る」という記事を投稿しました。 qiita.com
Qiitaへ「React + TypeScript で react-router の URLパラメーターを取得する」という記事を投稿しました。 qiita.com
TypeScript（TSX）中でsetIntervalを行うと「Type 'Timer' is not assignable to type 'number'.」とエラーが出た。 ブラウザ環境下で実行する場合は、window.setInterval()と書いて、戻り値を: numberにする事で解決する github.com
タイトルのまま。 「React + TypeScript で State をもつ class コンポーネントを作成するときは、Generics の第二引数に State の型を指定する」 import React, {Component} from "react"; type AppState = { count: number } class App extends Component<…
Storybook + React(TypeScript) の環境で「@storybook/addon-info」と「react-docgen-typescript-loader」を使用して、コンポーネントが受け取るpropsの情報をドキュメントとして生成する事ができるが、特定のコンポーネントでのみ propTables が生成できな…
TypeScriptでは、型が定義されているオブジェクトに追加でプロパティを追加するとエラーが発生します。 type Data = { id: number, name: 'hoge' } const data01: Data = { id: 1, name: 'hoge', created_at: new Date() // Error } この場合は、インデック…
TypeScriptでオブジェクトのプロティをUnion Typesとして設定するには、アサーションを使用します。 // obj: {bar: 1 | 2 | 3, foo: boolean, baz: string} const obj = { foo: false, bar: 1 as (1 | 2 | 3), baz: '2' } これで、obj.barは、数値の1, 2, 3 …
Visual Studio Code には、 TypeScrpt を書いている時に変数などにマウスオーバをした時に型推論が表示される機能があります。 これがすごく便利なのですが、私の好きな WebStorm で同等の機能を再現したく調べた所、設定を一箇所変更する事で同様の機能を使…
配列のような感じだけど、別物。 JavaScriptなら一括に配列として扱われている let data1: [string, number] = ['taro', 20]; // これはオッケー let data2: [string, number] = [20, 'taro']; // これはエラー let data3: [string, number] = ['taro', 20, …
定義する方法が2種類ある。 let array1: number[] = [1, 2, 3]; // リテラル表現 let array2: Array<number> = [1, 2, 3]; // ジェネリクス表現 気をつけたいのが、JavaScriptだと配列の中にどんな型の値でも入れる事ができたけど、TypeScriptだと違う。 アノテーシ</number>…
TypeScriptでは、関数の引数や戻り値にアノテーションという型注釈を付与する事ができる。 これによって、JavaScript特有の暗黙的型変換によるバグなどを防ぐ事ができる。 アノテーションは、: 型の種類というようにコロンに続いて型の種類を指定する。 cons…
React Hooks の useState を使用する事で、関数コンポーネントでも状態の管理・更新ができるようになる。 import React, { useState } from 'react' const App = props => { const [state, setState] = useState(props) const {count, amount} = state retur…
これに結構ハマったのでメモ。 reduxForm()が返してくる関数の引数にconnect()で mapStateToProps と mapDispatchToProps を指定する。 import React, { Component } from 'react'; import { reduxForm } from 'redux-form'; import { connect } from 'react…
Qiitaへ「React + Redux の基本的な状態管理を Reducers を起点に考える」という記事を投稿しました。 qiita.com
Qiitaへ「React + Redux の基本的な状態管理を Reducers を起点に考える」という記事を投稿しました。 qiita.com
create-react-app で作成したプロジェクトの React Component で propTypes を指定すると WebStorm で 「Unresolved variable isRequired」とエラーが表示されました。（エディター上のエラー） ググって見ると他にも「Unresolved variable string」とエラー…
default props props を使用している React Component で props が渡されたなかった場合のフォールバックとして default props を指定する事ができます。 default props は、 [コンポーネント名].defaultProps = {}と指定します。 (functional component で…
同僚が書いているコードを眺めていた所、addEventListenerの第三引数にオブジェクトとして{passive: true}を渡していました。 「あれ？第三引数って、useCaptureを真偽値で設定するんじゃなかったっけ。」と思いながらこの記述について調べてみたところ、、…
Qiitaへ「Vuexのモジュールを使用してストアを管理する」という記事を投稿しました。 Vuexのモジュールを使用してストアを管理する - QiitaVuex で状態管理を行っているアプリケーションでは、基本的にストアは１つだと思います。 アプリケーションが大きく…
