Soumettre la recherche
Mettre en ligne
ライブラリを作る思考回路
•
0 j'aime
•
75 vues
Yoichi Toyota
Suivre
ライブラリを作るに当たって、どういう思考回路で設計していったのかを、実際に作成したReactのカスタムフックの実例をもとに解説します。
Lire moins
Lire la suite
Logiciels
Signaler
Partager
Signaler
Partager
1 sur 17
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
超フランクにスクラムの大事なことの話をする
超フランクにスクラムの大事なことの話をする
Yoichi Toyota
ジャワカレーをおいしく作る最後の一押し
ジャワカレーをおいしく作る最後の一押し
Yoichi Toyota
DynamoDB設計のちょっとした技
DynamoDB設計のちょっとした技
Yoichi Toyota
はじめてのDynamoDBスキーマ設計
はじめてのDynamoDBスキーマ設計
Yoichi Toyota
オブジェクト指向についてあまり知られていないこと
オブジェクト指向についてあまり知られていないこと
Yoichi Toyota
Ruby is comming ractor編
Ruby is comming ractor編
Yoichi Toyota
array.map(&:key)ってなんやねん
array.map(&:key)ってなんやねん
Yoichi Toyota
はじめてのPull Request
はじめてのPull Request
Yoichi Toyota
Recommandé
超フランクにスクラムの大事なことの話をする
超フランクにスクラムの大事なことの話をする
Yoichi Toyota
ジャワカレーをおいしく作る最後の一押し
ジャワカレーをおいしく作る最後の一押し
Yoichi Toyota
DynamoDB設計のちょっとした技
DynamoDB設計のちょっとした技
Yoichi Toyota
はじめてのDynamoDBスキーマ設計
はじめてのDynamoDBスキーマ設計
Yoichi Toyota
オブジェクト指向についてあまり知られていないこと
オブジェクト指向についてあまり知られていないこと
Yoichi Toyota
Ruby is comming ractor編
Ruby is comming ractor編
Yoichi Toyota
array.map(&:key)ってなんやねん
array.map(&:key)ってなんやねん
Yoichi Toyota
はじめてのPull Request
はじめてのPull Request
Yoichi Toyota
Railsの開発環境作るぞ
Railsの開発環境作るぞ
Yoichi Toyota
jqで極めるシェル芸の話
jqで極めるシェル芸の話
Yoichi Toyota
足し算をつくろう
足し算をつくろう
Yoichi Toyota
React Hooksでカスタムフックをつくろう
React Hooksでカスタムフックをつくろう
Yoichi Toyota
ActionCableのクライアントはRails外から利用できるのか
ActionCableのクライアントはRails外から利用できるのか
Yoichi Toyota
サーバーレスアプリケーションの作り方
サーバーレスアプリケーションの作り方
Yoichi Toyota
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
Yoichi Toyota
AWS WAFでらくらくファイアーウォール生活
AWS WAFでらくらくファイアーウォール生活
Yoichi Toyota
Docker in production
Docker in production
Yoichi Toyota
How to fight against “full scratch disease”
How to fight against “full scratch disease”
Yoichi Toyota
Amazon lexを触ってみた
Amazon lexを触ってみた
Yoichi Toyota
Forkwell Meetup #3 Productivity Engineering スポンサーLT - 株式会社エクストーン
Forkwell Meetup #3 Productivity Engineering スポンサーLT - 株式会社エクストーン
Yoichi Toyota
Is the order code deploy?
Is the order code deploy?
Yoichi Toyota
React starter-kitでとっとと始めるisomorphic開発
React starter-kitでとっとと始めるisomorphic開発
Yoichi Toyota
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
ActionCableを触ってみた
ActionCableを触ってみた
Yoichi Toyota
Werckerを使ってみた
Werckerを使ってみた
Yoichi Toyota
Github時代のgitのはなし
Github時代のgitのはなし
Yoichi Toyota
Amazon SNS+SQSによる Fanoutシナリオの話
Amazon SNS+SQSによる Fanoutシナリオの話
Yoichi Toyota
Amazon api gatewayで web apiをサーバーレスで構築しよう
Amazon api gatewayで web apiをサーバーレスで構築しよう
Yoichi Toyota
Contenu connexe
Plus de Yoichi Toyota
Railsの開発環境作るぞ
Railsの開発環境作るぞ
Yoichi Toyota
jqで極めるシェル芸の話
jqで極めるシェル芸の話
Yoichi Toyota
足し算をつくろう
足し算をつくろう
Yoichi Toyota
React Hooksでカスタムフックをつくろう
React Hooksでカスタムフックをつくろう
Yoichi Toyota
ActionCableのクライアントはRails外から利用できるのか
ActionCableのクライアントはRails外から利用できるのか
Yoichi Toyota
サーバーレスアプリケーションの作り方
サーバーレスアプリケーションの作り方
Yoichi Toyota
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
Yoichi Toyota
AWS WAFでらくらくファイアーウォール生活
AWS WAFでらくらくファイアーウォール生活
Yoichi Toyota
Docker in production
Docker in production
Yoichi Toyota
How to fight against “full scratch disease”
How to fight against “full scratch disease”
Yoichi Toyota
Amazon lexを触ってみた
Amazon lexを触ってみた
Yoichi Toyota
Forkwell Meetup #3 Productivity Engineering スポンサーLT - 株式会社エクストーン
Forkwell Meetup #3 Productivity Engineering スポンサーLT - 株式会社エクストーン
Yoichi Toyota
Is the order code deploy?
Is the order code deploy?
Yoichi Toyota
React starter-kitでとっとと始めるisomorphic開発
React starter-kitでとっとと始めるisomorphic開発
Yoichi Toyota
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
ActionCableを触ってみた
ActionCableを触ってみた
Yoichi Toyota
Werckerを使ってみた
Werckerを使ってみた
Yoichi Toyota
Github時代のgitのはなし
Github時代のgitのはなし
Yoichi Toyota
Amazon SNS+SQSによる Fanoutシナリオの話
Amazon SNS+SQSによる Fanoutシナリオの話
Yoichi Toyota
Amazon api gatewayで web apiをサーバーレスで構築しよう
Amazon api gatewayで web apiをサーバーレスで構築しよう
Yoichi Toyota
Plus de Yoichi Toyota
(20)
Railsの開発環境作るぞ
Railsの開発環境作るぞ
jqで極めるシェル芸の話
jqで極めるシェル芸の話
足し算をつくろう
足し算をつくろう
React Hooksでカスタムフックをつくろう
React Hooksでカスタムフックをつくろう
ActionCableのクライアントはRails外から利用できるのか
ActionCableのクライアントはRails外から利用できるのか
サーバーレスアプリケーションの作り方
サーバーレスアプリケーションの作り方
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
AWS WAFでらくらくファイアーウォール生活
AWS WAFでらくらくファイアーウォール生活
Docker in production
Docker in production
How to fight against “full scratch disease”
How to fight against “full scratch disease”
Amazon lexを触ってみた
Amazon lexを触ってみた
Forkwell Meetup #3 Productivity Engineering スポンサーLT - 株式会社エクストーン
Forkwell Meetup #3 Productivity Engineering スポンサーLT - 株式会社エクストーン
Is the order code deploy?
Is the order code deploy?
React starter-kitでとっとと始めるisomorphic開発
React starter-kitでとっとと始めるisomorphic開発
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
ActionCableを触ってみた
ActionCableを触ってみた
Werckerを使ってみた
Werckerを使ってみた
Github時代のgitのはなし
Github時代のgitのはなし
Amazon SNS+SQSによる Fanoutシナリオの話
Amazon SNS+SQSによる Fanoutシナリオの話
Amazon api gatewayで web apiをサーバーレスで構築しよう
Amazon api gatewayで web apiをサーバーレスで構築しよう
ライブラリを作る思考回路
1.
ライブラリを作る 思考回路 株式会社エクストーン 豊田陽一
2.
ライブラリを作った(ている) ▰ useMaterialUIForm ▰ ReactのカスタムHook ▰
フォーム定義を渡すとMaterial-UIで作られた フォームコンポーネントが返る ▰ フォーム入力の値はstateとして管理
3.
今日のお話 ▰ ライブラリの話 ▰ …はしません ▰
これがどのような思考回路で出来たか ▰ という話
4.
そもそも ▰ ライブラリ化するつもりは別になく ▰ Reactでもりもりとフォーム作ってました
5.
開発中 ▰ 結構大変 ▰ あれ、このままだと予定通り終わらん ▰
開発をスピードアップしたい ▰ 他のメンバーの開発 ▰ あんまり共通ルールとか作りたくない ▰ 自然に共通化されるのがよい
6.
どう書けたら楽になる? ▰ フォーム作るときに考えたいこと ▰ 更新する値と利用するフォームの種類 ▰
テキスト、ラジオボタン、セレクト、 etc. ▰ バリデーション ▰ 考えたくないこと ▰ GUIの配置・整理 ▰ HTMLの書き方 ▰ Reactでの状態の管理
7.
考えたいことだけ表現する ▰ フォーム定義 ▰ 変数名 ▰
フォームの種類 ▰ 選択肢(セレクトボックスとか)
8.
考えたくないものを受け取る ▰ 考えたくないもの ▰ GUIのコンポーネント ▰
フォームで管理する値の状態
9.
プロトタイプ ▰ 欲しいもの ▰ 入力 ▰
フォーム定義 ▰ 出力 ▰ GUIコンポーネント ▰ フォームで管理する値の状態 ▰ 隠蔽されるもの ▰ フォームで値を更新すると状態が書き変わる
10.
書いてみる const formDefinitions =
[ { name: “title”, type: “text” }, ] const { state, comp } = useMaterialUIForm(formDefinitions) return <> { comp.name } </>
11.
書いてみて ▰ 悪くない ▰ formDefinition書いたらフォームがにょきにょき 生えてくるの楽しい ▰
やりたいことが増える ▰ 時間用のフォーム欲しい ▰ 必須マークつけたい ▰ etc.
12.
構造のテコ入れ ▰ 不満点 ▰ フォーム送信 ▰
今回は大半がfirebaseの更新 ▰ 保存時になんか処理書きたい ▰ あんまり共通化できなさそう ▰ 保存自体の処理は毎回書きたくない ▰ これは隠すか ▰ コンポーネントのカスタマイズ ▰ 複雑であんまり使わないフォームもある ▰ All or Nothingにしたくない
13.
インターフェイスの改善 ▰ 暗黙的処理を外部に公開する ▰ 状態管理はuseReducerを利用 ▰
reducer用のdispatch関数を外部から触れる ようにする ▰ そういや今のままだと保存できんわ
14.
改善した const formDefinitions =
[ { name: “title”, type: “text” }, ] const { state, comp, dispatch } = useMaterialUIForm(formDefinitions) return <> { comp.name } <Button onClick={() => dispatch({ type: “create” })}> 保存 </Button> </>
15.
さらに書いてみて ▰ 既存のものをリプレース ▰ フォームの初期値は渡したい ▰
改善 ▰ あとはだいたいきれいに置き換えられた
16.
一通り作ってみて ▰ 設計のポイント ▰ 誰が幸せになるか ▰
自分 ▰ 楽に書ける ▰ その時考えなくてもいいことを考えない ▰ プロジェクトメンバー ▰ 似たようなものを同じコードで表現出来る ▰ プロジェクト外の人が幸せになるようだったら公 開ライブラリにするとよい
17.
結論 ▰ ライブラリを作る理由 ▰ 幸せになる ▰
幸せになろうとしたら結果的に出来る ▰ 幸せになれないなら作らない方がいい
Télécharger maintenant