サーバサイドエンジニアがフロントエンドを始めた時の試行錯誤

Transcript

1. サーバサイドエンジニアがフロント
   エンドを始めた時の試行錯誤
   Sendai Frontend Meetup #1
   2019年08月07日
   熊谷大地
   千株式会社
   1
   

   View Slide

2. © SEN CORPORATION
   今日の発表内容
   ● サーバサイドに専念していてフロントエンド開発の変遷につ
   いていけてなかったエンジニアがフロントエンドを担当する
   ことになった際の試行錯誤と悪戦苦闘の話です
   ● 自分の体験に基づいた内容なので誰にでも当てはまるもので
   はないかもしれないです
   ● これはやるべきではなかった、こうしておけばよかった、と
   いった話をしたいと思うので他山の石になれれば幸いです
   2
   

   View Slide

3. © SEN CORPORATION
   自己紹介と会社紹介
   ● 名前：熊谷大地
   ○ 宮城出身
   ○ 一児の父
   ● 所属：　　千株式会社
   ○ ものづくり部
   2013年 千株式会社入社
   ↓
   2018年9月 仙台オフィス開設
   ↓
   東京から仙台に引っ越してこちらで働くことに←イマココ
   3
   

   View Slide

4. © SEN CORPORATION
   」の海外進出
   海外では「スクールフォト」の文化があまりない→保護者に子供達の写真を！
   海外版はいチーズ開発の体制
   Aさん：フロントエンド
   Webデザイン、UI/UX等フロントの開発
   私：サーバサイド
   DB設計やAPIの実装等のサーバの開発
   写真サービス「
   4
   

   View Slide

5. © SEN CORPORATION
   サービスをリリースして営業が顧客を取り始めた頃・・・
   リリースまでこぎつけた
   偉い人
   実質一人で開発頑張れ
   私
   マ？
   開発の体制の変化
   私：フロントエンドとサーバサイド
   5
   

   View Slide

6. © SEN CORPORATION
   ● 自身選択肢を狭める
   ○ フロントエンドの技術を避けてきたことは自身にとってマイナスだった
   ● 退っ引きならない状況になったらそんなこと言ってられない
   ○ ポン・デ・ライオンだとかどうとか関係ない
   この時の私の思い
   「自分はサーバサイドのエンジニアだから・・・」と考えて
   フロントエンドと向き合わないでいると・・・
   そんな事言われても
   　　ウチ ポン・デ・ライオンやし
   6
   

   View Slide

7. © SEN CORPORATION
   ● 同じリポジトリのコードではあるが、まずは腰を据えて読み込む
   ● コードを読む→少し書き換える→どう変わったか確かめる
   ● この繰り返しで感覚をつかんだらなんとかなると思っていた
   まず取り掛かったこと
   7
   

   View Slide

8. © SEN CORPORATION
   ● 同じリポジトリのコードではあるが、まずは腰を据えて読み込む
   ● コードを読む→少し書き換える→どう変わったか確かめる
   ● この繰り返しで感覚をつかんだらなんとかなると思っていた
   まず取り掛かったこと
   結果的にはコードをひたすら読むことは効果があった
   しかしそれで十分だと思ってしまったところはよくなかった
   8
   

   View Slide

9. © SEN CORPORATION
   Aさん「何かわからないことがあったら聞いてね」
   自分が何がわからないのかわからない状態で聞くに聞けない
   何がわからないのかわからない状態
   JS?
   Vue?
   Vuex?
   9
   

   View Slide

10. © SEN CORPORATION
    Aさん「何かわからないことがあったら聞いてね」
    自分が何がわからないのかわからない状態で聞くに聞けない
    何がわからないのかわからない状態
    なんとかして分からないところを特定するために、
    ● JSは構文を覚える
    ○ 参考にする情報の鮮度に注意
    ● Vue, Vuexはチュートリアルで学ぶ
    ○ これは効果的だった
    ● 迷っていないで聞いてしまう
    ○ 何が分からないか分からない人を相手にするのは高コストなのでそこは注意
    10
    

    View Slide

11. © SEN CORPORATION
    Vueのチュートリアルは初心者向けに丁寧に書かれている
    早い段階でよく目を通しておけばよかった
    Vueのチュートリアルの重要性
    「俺、初心者じゃねーし」とイキった結果→\(^o^)/
    また、注意書きを素直に受け止めておけばよかった
    11
    

    View Slide

12. © SEN CORPORATION
    console.log()デバッグは限界があった
    初期の段階で効率のいい開発環境を用意するべき
    効率よくデバッグできる開発環境
    例：
    VS Code
    +
    Debugger for Chrome Extension
    +
    Vue.js devtools
    12
    

    View Slide

13. © SEN CORPORATION
    「出てもどうせ分かんねーし」なんて言わずに出ればよかった
    正直、勉強会は刺激にはなるが短期的に役立つ何かを得られるわけではない、
    という考えがある
    しかし刺激がないよりはあったほうがずっと良い、と思う
    Sendai Frontend Meetup とかいい感じですよね
    フロントエンド勉強会への参加
    13
    

    View Slide

14. © SEN CORPORATION
    最後に
    ● フロントエンド、サーバサイドの役割分担を否定する意図はない
    ○ 規模が大きくなって複雑化してくると一人で全部やるとか無理
    ● 私にとっては苦手意識を持って避けてきたことはマイナスだった
    ○ 自身の選択肢が狭まる
    ○ やってみたら面白かったかもしれない仕事が出来なかった
    ● 退っ引きならない状況になってから始めたフロントエンド開発
    ○ とてもDX（開発者体験）の良い世界
    ○ とはいえまだまだ分からないことが多いので勉強頑張ります
    エンジニア募集中です 14
    

    View Slide