React
比較的よく使うuseState/useReducer/useContextのTypeScriptによる型付け Hooksの詳細についてはこちらを参照 Hooks API Reference – React useState import * as React from 'react' export const UseStateExample = () => { const [count, setCount] = Rea…
この記事はSpeee Advent Calendar 201819日目の記事です。 前日はyuta_kobayashiによる雑談の効用についてのお話でした。 tech.speee.jp 今日はSPAの継続的デリバリーを手軽に実現できる、 Google Cloud Buildのお話です。 やること 最近、ちょっとしたSPAの…
前提 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…
今回作ったもの DEMO ソースコード 詳しい話は前編を参照 nomusiclife.hatenablog.jp Firebase 個人開発の強い味方、Firebase。 HostingやAuthも使っているが、今回はデータの保存と同期のため、Cloud Firebaseを重点的に使った。 Cloud Firestore Firebase…
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を変…
src/Components/App.jsx を src/index.js からimportする場合、create-react-appでは import App from './Components/App'; と書くが、これを、 import App from 'Components/App'; こう書きたい。 が、デフォルトではパスの解決ができず、 Module not found…
環境構築は create-react-app とMicrosoft/TypeScript-React-Starterでサクッと行う $ npx create-react-app my-app --scripts-version=react-scripts-ts $ cd my-app $ npm run start 以前、TypeScriptでReact app作ろうとしてセットアップに手間取ったとき…
フロントエンドのデザインと実装のワークフローをスムーズにできないか、というのを考えているときにReact Sketch.appというそれっぽい名前のツールを見つけた。 React Sketch.appとは そもそもSketch使ったこともなかった(UIに特化したIllustratorくらいの…
年末だし大掃除しよう、 ということでClass Componentにある render* というメソッドを潰している。 stateless functionへの書き換え 具体的には、こんな感じになっているのを class Foo extends React.Component { renderSomething() { return <div>something</div> } …
この記事はSpeee Advent Calendar 2017 15日目の記事です。 前日は@cho3による「サンタクロースの正体を暴く」でした。 動機 昔からFM音源の音は好きだったが、どういう原理で音作りをしているのか詳しくは知らなかった。 FM音源がどんな音色を出すかについ…
問題 Parcelのdocsには相対パスによるimportのサンプルしか載っていない import Box from ‘../../components/box’ とか書きたくない babel-plugin-module-resolverでrootを解決する 本家のIssueより、 babel-plugin-module-resolver を使う。 Alias definiti…
Parcelというapplication bundlerが話題なので早速試してみた。 リリースから5日で7000以上のGitHub starを集めている。 Parcelとは Parcel fast, zero configurationを謳うapplication bundler。 要するにconfigの要らない、ビルドの速いwebpackのようなも…
react-reduxのContainer ComponentをTypeScriptで書き直した。 嫌いじゃないが、もう少しシンプルにならないものか。 途中でAtomからVS Codeに切り替えたが、 特にカスタマイズをしなくてもTypeScriptに対応していたり、 IntelliSenseがpropsやstateに対して…
Reactのコンポーネントの中にthree.jsのsceneを配置したら面白いんじゃないか… というようなことを考えていたらReact VRとやらが登場していたので少し触ってみた。 DEMO nishaya/my-first-react-vr componentの切り出しは、通常のReactと同様 export default…
React/Reduxを使ってちょっとしたもの(楽器とか)を作ろうと思ったとき、 実験用のコードを書くよりも環境構築に時間がかかってあほらしいので、 自前でboilerplateを作った。 既存のboilerplateを使えばいいのだけれど、 余分なもの、自分が理解していないも…
Reactでシンセサイザーを作ったので、 次はシーケンサを作りたいと思っている。 最低限押さえておきたいのはこのあたり ズレのないタイミング制御 AudioScheduledSourceNode.start(when) を使う テンポの変更を演奏にリアルタイム反映 明快なUI 一音一音打ち…
