前提 create-react-app TypeScript antd-mobile(antdもほぼ同じ方法で対応可能) Storybookの導入 $ npm i -g @storybook/cli $ getstorybook 追加されたstoriesフォルダは /src 以下に移動する TypeScriptの型定義を追加 $ yarn add -D @types/storybook__re…

Ant Design Mobileをcreate-react-app(w/ TypeScript)のプロジェクトで使う方法 create-react-appのセットアップに関しては別記事にまとめた nomusiclife.hatenablog.jp antd-mobileを追加 $ yarn add antd-mobile モジュール化されたantd-mobileを利用可能…

SPAプロジェクトの立ち上げ時にやっていること create-react-app w/ TypeScript create-react-appのTypeScript版ボイラープレートをセットアップする $ npm install -g create-react-app $ cd project_dir $ create-react-app . --scripts-version=react-scr…

ローカルで開発を行う際、プロジェクト毎に独立したDBを使いたいのでDockerで立てる config/database.yml default: &default adapter: mysql2 encoding: utf8mb4 pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> username: root ? password host: 127.0.…

今回作ったもの DEMO ソースコード 詳しい話は前編を参照 nomusiclife.hatenablog.jp Firebase 個人開発の強い味方、Firebase。 HostingやAuthも使っているが、今回はデータの保存と同期のため、Cloud Firebaseを重点的に使った。 Cloud Firestore Firebase…

プライベートで何か作ったりするときの TSLint config についてまとめておく。 tslint.json { "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], "linterOptions": { "exclude": [ "config/**/*.js", "node_modules/**/*.ts", …

Visual Studio Codeを使ってReact Appの開発を行う際に、 最低限追加しておきたいextensionsと設定をまとめておく 前提 プロジェクトでは以下を使用するものとする create-react-app TypeScript styled-components extensions TSLint TSlintの結果をインライ…

少し前になるが、また音の出るおもちゃを作ったので記録を残す。 長くなりそうなので前編/後編に分ける。 作ったもの DEMO ソースコード ブラウザで動くマルチトラックシーケンサ ピアノロールによるエディットに対応 簡易的なシンセサイザーを内蔵 作成中の…

Ant Design(antd)のテーマをカスタマイズした内容をStorybookに反映する場合、少しややこしい設定が必要になるのでメモ 前提 プロジェクト本体はcreate-react-appで作成 TypeScriptを使用 antdのバージョンは3.7.3 設定方法 例: デフォルトのfont-familyを変…

前回の続き。 nomusiclife.hatenablog.jp 作成したGraphQLサーバをモニタリング可能な状態にする。 Apollo Engine Apollo Engine | The GraphQL Gateway with essential features like caching and performance tracing. GraphQL caching Query execution tr…