選考中企業LTにて。

1. エンジニア転向を目指すデザイナーが
Nuxt.jsでアプリを開発した話
橋濱幸太（@kotahashihama）
2019/8/23

2. ハシハマといいます🙇
• 橋濱 幸太（はしはま こうた）
• フリーター → Webデザイナー
→ （フロントエンドエンジニア）
• 広島県出身
• 人生初登壇なう
• @kotahashihama

3. （デモ）

4. …何ができるの？

5. FXの損益を
複合的に計算するWebアプリ
• FXの損益計算はめんどくさい
• レバレッジ、取引単位、保有ポジション、通貨ペア、etc.
• 既存アプリの計算は部分的すぎる
• 一部条件が変わったときのifを素早くシュミレート

6. ポートフォリオとして
どうあるべきか

7. 期待されそうな
スキル証明から逆算
• APIを使ったデータのやり取りができる
→ Cloud FirestoreでCRUD機能、為替レートの取得
• メンテナンスを前提とした思考＆手法
→ BEM記法等のCSS設計、部品化して使い回す
• 前職の経験を活かしたパブリックに見せられるデザイン
→ Bootstrap等は使わずイチから考案

8. 実はリメイク版

9. 前身のアプリ

10. リメイクした理由
• git-flowでの開発
• コンポーネント概念の獲得
• デザイン＆実装能力の証明
• ライブラリなしのお手製UIコンポーネント
• 単純に見づらい＆拡張しづらい

11. そして、得たもの
• チーム開発疑似経験
• props＆emitは怖くない
• 非同期処理の概念
• jQueryライブラリ探しからの脱却
• 機能追加に対して心理的障壁がなくなった

12. 仮にもう一度作るなら

13. こうしたい
• Storybookでカタログ化できるレベルの疎結合に
→ 再利用性を確約する
• Gitのコミット粒度を細かくする
→ 不具合の究明・解消を早める
• 通貨ペアをメジャー＆マイナーに分けレート群をまとめ
る
→ スクロールを減らす
• 保有ポジション編集はクリックから直で入力させる
→ 直感性を上げる

14. ここからが本番！
橋濱幸太（@kotahashihama）
2019/8/23