この記事はSpeee Advent Calendar 201819日目の記事です。 前日はyuta_kobayashiによる雑談の効用についてのお話でした。 tech.speee.jp 今日はSPAの継続的デリバリーを手軽に実現できる、 Google Cloud Buildのお話です。 やること 最近、ちょっとしたSPAの…

何？ Cloud FunctionsをTypeScriptで書き、かつデプロイを自動化したい人向けの情報 前提 Cloud FunctionsをCloud Buildでデプロイする方法については id:selmertsx が以下のエントリで詳しく書いてくれている selmertsx.hatenablog.com TypeScriptで書いた…

前提 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…

前回の続き nomusiclife.hatenablog.jp ZEIT Nowにデプロイする Deploying Node.js Apps - ZEIT Documentation 詳しい方法は公式ドキュメントに譲るとして... 一般的なnode appは特に設定をしなくてもプロジェクトディレクトリで now コマンドを実行すればデ…

モックサーバの実装 前回 nomusiclife.hatenablog.jp 1. 型の定義を行う import { ApolloServer, gql } from 'apollo-server' const typeDefs = gql` type Person { id: ID name: String phone: String } type Query { people: [Person] } ` const mocks = {…

GraphQLのモックサーバを作る際に使うものをメモ 使うもの TypeScript ts-node, ts-node-dev apollo-server, apollo-engine Zeit Now TypeScript 型があったほうが書きやすい 最近はクライアント(React)も全てTypeScriptで書いてるし... apollo-serverのパッ…

TypeScriptでAudioParam.cancelAndHoldAtTime()のコンパイルを通したかったが、本家の型定義には追加されていないので、自分で拡張を行ったときのメモ。 declare global { interface AudioParam { cancelAndHoldAtTime(cancelTime: number): void } } Declar…

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くらいの…