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
270
チーム開発のコードレビューにおける些末なコードレビューを避けるための提案
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
型で語るカタ
irof
1
860
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1k
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
380
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
210
Reactの歴史を振り返る
tutinoko
1
150
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
710
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.6k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
250
React 使いじゃなくても知っておきたい教養としての React
oukayuka
15
4.3k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Navigating Team Friction
lara
187
15k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Balancing Empowerment & Direction
lara
1
510
The Cult of Friendly URLs
andyhume
79
6.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
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