Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
サーバサイドエンジニアがフロントエンドを始めた時の試行錯誤
Search
d9magai
August 07, 2019
Programming
6
3.4k
サーバサイドエンジニアがフロントエンドを始めた時の試行錯誤
d9magai
August 07, 2019
Tweet
Share
More Decks by d9magai
See All by d9magai
20200122_Amazon_Rekognition.pdf
d9magai
0
250
20191211_JAWS-UG_TOHOKU_Amazon_Rekognition.pdf
d9magai
0
260
チーム開発のコードレビューにおける些末なコードレビューを避けるための提案
d9magai
0
420
20190212.pdf
d9magai
0
120
Amazon Rekognitionを使って親御さんの写真探しのお手伝いができた話
d9magai
0
2k
Minami Aoyama Night#5 sen-corporation
d9magai
0
710
Other Decks in Programming
See All in Programming
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
270
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
100
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
2
250
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
690
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
590
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Bash Introduction
62gerente
614
210k
Balancing Empowerment & Direction
lara
1
390
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Transcript
サーバサイドエンジニアがフロント エンドを始めた時の試行錯誤 Sendai Frontend Meetup #1 2019年08月07日 熊谷大地 千株式会社 1
© SEN CORPORATION 今日の発表内容 • サーバサイドに専念していてフロントエンド開発の変遷につ いていけてなかったエンジニアがフロントエンドを担当する ことになった際の試行錯誤と悪戦苦闘の話です • 自分の体験に基づいた内容なので誰にでも当てはまるもので
はないかもしれないです • これはやるべきではなかった、こうしておけばよかった、と いった話をしたいと思うので他山の石になれれば幸いです 2
© SEN CORPORATION 自己紹介と会社紹介 • 名前:熊谷大地 ◦ 宮城出身 ◦ 一児の父
• 所属: 千株式会社 ◦ ものづくり部 2013年 千株式会社入社 ↓ 2018年9月 仙台オフィス開設 ↓ 東京から仙台に引っ越してこちらで働くことに←イマココ 3
© SEN CORPORATION 」の海外進出 海外では「スクールフォト」の文化があまりない→保護者に子供達の写真を! 海外版はいチーズ開発の体制 Aさん:フロントエンド Webデザイン、UI/UX等フロントの開発 私:サーバサイド DB設計やAPIの実装等のサーバの開発
写真サービス「 4
© SEN CORPORATION サービスをリリースして営業が顧客を取り始めた頃・・・ リリースまでこぎつけた 偉い人 実質一人で開発頑張れ 私 マ? 開発の体制の変化
私:フロントエンドとサーバサイド 5
© SEN CORPORATION • 自身選択肢を狭める ◦ フロントエンドの技術を避けてきたことは自身にとってマイナスだった • 退っ引きならない状況になったらそんなこと言ってられない ◦
ポン・デ・ライオンだとかどうとか関係ない この時の私の思い 「自分はサーバサイドのエンジニアだから・・・」と考えて フロントエンドと向き合わないでいると・・・ そんな事言われても ウチ ポン・デ・ライオンやし 6
© SEN CORPORATION • 同じリポジトリのコードではあるが、まずは腰を据えて読み込む • コードを読む→少し書き換える→どう変わったか確かめる • この繰り返しで感覚をつかんだらなんとかなると思っていた まず取り掛かったこと
7
© SEN CORPORATION • 同じリポジトリのコードではあるが、まずは腰を据えて読み込む • コードを読む→少し書き換える→どう変わったか確かめる • この繰り返しで感覚をつかんだらなんとかなると思っていた まず取り掛かったこと
結果的にはコードをひたすら読むことは効果があった しかしそれで十分だと思ってしまったところはよくなかった 8
© SEN CORPORATION Aさん「何かわからないことがあったら聞いてね」 自分が何がわからないのかわからない状態で聞くに聞けない 何がわからないのかわからない状態 JS? Vue? Vuex? 9
© SEN CORPORATION Aさん「何かわからないことがあったら聞いてね」 自分が何がわからないのかわからない状態で聞くに聞けない 何がわからないのかわからない状態 なんとかして分からないところを特定するために、 • JSは構文を覚える ◦
参考にする情報の鮮度に注意 • Vue, Vuexはチュートリアルで学ぶ ◦ これは効果的だった • 迷っていないで聞いてしまう ◦ 何が分からないか分からない人を相手にするのは高コストなのでそこは注意 10
© SEN CORPORATION Vueのチュートリアルは初心者向けに丁寧に書かれている 早い段階でよく目を通しておけばよかった Vueのチュートリアルの重要性 「俺、初心者じゃねーし」とイキった結果→\(^o^)/ また、注意書きを素直に受け止めておけばよかった 11
© SEN CORPORATION console.log()デバッグは限界があった 初期の段階で効率のいい開発環境を用意するべき 効率よくデバッグできる開発環境 例: VS Code +
Debugger for Chrome Extension + Vue.js devtools 12
© SEN CORPORATION 「出てもどうせ分かんねーし」なんて言わずに出ればよかった 正直、勉強会は刺激にはなるが短期的に役立つ何かを得られるわけではない、 という考えがある しかし刺激がないよりはあったほうがずっと良い、と思う Sendai Frontend Meetup
とかいい感じですよね フロントエンド勉強会への参加 13
© SEN CORPORATION 最後に • フロントエンド、サーバサイドの役割分担を否定する意図はない ◦ 規模が大きくなって複雑化してくると一人で全部やるとか無理 • 私にとっては苦手意識を持って避けてきたことはマイナスだった
◦ 自身の選択肢が狭まる ◦ やってみたら面白かったかもしれない仕事が出来なかった • 退っ引きならない状況になってから始めたフロントエンド開発 ◦ とてもDX(開発者体験)の良い世界 ◦ とはいえまだまだ分からないことが多いので勉強頑張ります エンジニア募集中です 14