はてなブックマーク

ReactのTic Tac ToeチュートリアルをTypeScriptでやっている時に出たエラーとその対処方法です。 エラーメッセージ チュートリアルで、BoardクラスのrenderSquareメソッドを <Square value={i} /> にすると、以下のエラーが出ました： [ts] Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Square> & Readonly<{ children?: ReactNode; }> & Re...'. チュートリアルの段階でこのエラーメッセージはつらい。 対処方法 TypeScriptの場合、コンポーネントのプロパティをあらかじめ定義しておかないといけないようです。 Squareクラスにインターフェースを追加し、

React+Redux アプリを多言語化する方法を調べてみました。 前提 TypeScript 多言語化ライブラリー JavaScript で多言語化するライブラリーはいろいろありますが、React で使えるものは限られてくるようです。 いくつか調べて、i18next と react-i18next を使うことにしました。 i18next の方は、特定のプラットフォームやフレームワークに依存しない多言語化ライブラリーで、react-i18next は i18next を React で使いやすくするプラグインです。 インストール まず、ライブラリーをインストールします： npm install -S i18next react-i18next npm install -D @types/i18next @types/react-i18next セットアップ i18next の設定ファイルを

Spring Boot + Gradle + Kotlin でバックエンド側を作ってみようと思い、まずは環境を構築してみました。 結構ハマりました。 前提 STS (Spring Tool Suite) v3.9.0 Gradleのインストール STS で Spring Starter Project を作ろうとして、Gradle (Buildship 2.x) を選ぶと、Eclipse Marketplace からインストールしてね、というメッセージが表示されます。 Gradle (STS) もありますが、あまりメンテされなくなるそうなので Buildship が推奨とのことです。 Help メニューから Eclipse Marketplace を開き、gradle で検索すると、「Buldship Gradle Integration 2.0」が見つかるので、インストールします。 その

Vue.js を始めました。TypeScript の開発環境を作ってみました。 はじめに これは自力でやる場合のサンプル程度に考えてください。 もうしばらくすると、公式の webpack テンプレートが TypeScript に対応しそうです。 Ref. TypeScript template? · Issue #263 · vuejs/vue-cli セットアップ まっさらから自分で必要なライブラリ−やツールを入れていくこともできますが、Vue ではプロジェクトテンプレートが用意されているので、それを使うことにします。 Ref. CLI - インストール - Vue.js プロジェクトテンプレート： vuejs-templates これからは PWA が良いのかもしれませんが、まだ調べきれていないので、今回は定番の webpack を選びました。 webpack のページの手順に従ってイ

React+Redux+TypeScriptの環境で、Action関連のコーディングを効率化するライブラリーを検討してみました。 前提 TypeScript Flux Standard Action 「Flux Standard Action」（FSA）とは、Actionオブジェクトの形式を規定したもので、Reduxの事実上の標準となっています。 インターフェースとして書くと、以下のようになります： { type: string; payload?: any; error?: boolean; meta?: any; } Action関連のコーディングを効率化するライブラリーは、FSAをサポートしています。 また、Reduxでは Action Creator や Reducer の実装がパターン化していて、決まりきったコードを書いていく必要がありますが、こういったライブラリーを使うと、より