Tweet
Tweet

Slide 1

Slide 1 text

React で ライフゲームを作ってみた話 0x64 物語 REBOOT #11 @otakumesi

Slide 2

Slide 2 text

@otakumesi (Twitter, Github) マッハバイトでエンジニアしてます

Slide 3

Slide 3 text

なぜライフゲームなのか 言語を学んだ後になにを作るかで悩んでいたときにある記事を読んだ

Slide 4

Slide 4 text

こんな記事 http://razokulover.hateblo.jp/entry/2017/05/23/131359

Slide 5

Slide 5 text

ブコメにこんなコメントが

Slide 6

Slide 6 text

なるほど

Slide 7

Slide 7 text

ライフゲーム 「Conway's Game of Life 」と呼ばれている 生命の誕生、進化、淘汰を簡単なモデルで再現したシミュレーショ ンゲーム 単純なルールで状態が次々と変わっていく

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

ライフゲームのルールは単純 誕生 生存 過疎 過密 https://ja.wikipedia.org/wiki/ ライフゲーム

Slide 10

Slide 10 text

ライフゲームは状態の変更が激しい 状態管理を簡単にするフレームワークを試すのによい

Slide 11

Slide 11 text

実際作ってみたデモ http://otakumesi.io/lifegame/ https://github.com/otakumesi/lifegame

Slide 12

Slide 12 text

構成 とりあえず触りたい奴を詰め込んだ ES6 preset-env preset-react plugin-propsal-object-rest-spread React Redux PostCSS FLOCSS

Slide 13

Slide 13 text

実際に作ってみてどうよ 正直、いくつか反省している どう考えても今回の構成にRedux はいらなかった 複雑な状態を管理をしていない... モチベ的にはあまり触ってないものを触れたかったので、MobX あたりがよい落とし所だったか

Slide 14

Slide 14 text

ライフゲーム作ってよかったところ 簡単に作れる割にハマりどころを通ってハマっていけた おかげでReact 、Redux と少し仲良くなれた気がする... ライフゲームのついでに定形作業を把握できたので、自分用のボイ ラープレートを作れた

Slide 15

Slide 15 text

ボイラープレート さすがに毎度package 集めて、 webpack の設定をアレするのはつらい。 https://github.com/otakumesi/dotfiles/tree/master/.project.template /frontend

Slide 16

Slide 16 text

おしまい