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
1年間のレビューの中からTOP3を紹介!
Search
coconala_engineer
March 19, 2024
Technology
0
83
1年間のレビューの中からTOP3を紹介!
23新卒エンジニア 1年間の振り返りLT会の登壇資料。
https://uniquevision.connpass.com/event/311006/
coconala_engineer
March 19, 2024
Tweet
Share
More Decks by coconala_engineer
See All by coconala_engineer
Qiita Organizationに取り組む前後の技術広報活動と今後の展望
coconala_engineer
0
46
ココナラのセキュリティ組織の体制・役割・今後目指す世界
coconala_engineer
0
260
SIEMによるセキュリティログの可視化と分析を通じた信頼性向上プロセスと実践
coconala_engineer
1
3.9k
WafCharm導入で激変!プロダクトの未来を守るためのTips
coconala_engineer
0
31
多様なロール経験が導いたエンジニアキャリアのナビゲーション
coconala_engineer
1
290
未来を創るエンジニアを採用・育成するための制度とマインドセット
coconala_engineer
0
55
VPoE Meetup Vol.1 VPoEとして実践してきたことと反省点
coconala_engineer
4
360
エンジニアマネージャーになった理由を振り返ってみた
coconala_engineer
0
680
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
240
Other Decks in Technology
See All in Technology
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
270
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.5k
What's new in Go 1.24?
ciarana
1
120
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
2
180
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
300
JavaにおけるNull非許容性
skrb
2
2.7k
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
250
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
780
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.9k
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
180
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.1k
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
830
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Optimizing for Happiness
mojombo
377
70k
Become a Pro
speakerdeck
PRO
26
5.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
GraphQLとの向き合い方2022年版
quramy
44
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Transcript
Copyright coconala Inc. All Rights Reserved. 1年間のレビューの中から TOP3を紹介!
Copyright coconala Inc. All Rights Reserved. アジェンダ 自己紹介 会社紹介 学びを得たレビュー3選
今後 2 1 2 3 4
Copyright coconala Inc. All Rights Reserved. 自己紹介 Chapter 01 3
Copyright coconala Inc. All Rights Reserved. 自己紹介 1 4 株式会社ココナラ
プロダクト開発部 フロントエンド開発グループ 青木 希美(あおき のぞみ) • 大学は経済学部 • 旅行大好き!12月は3泊5日でフラン ス/ドイツ/スイスを巡回 • とりあえずやってみる
Copyright coconala Inc. All Rights Reserved. 会社紹介 Chapter 02 5
Copyright coconala Inc. All Rights Reserved. 会社紹介 2 6
Copyright coconala Inc. All Rights Reserved. 学びを得たレビュー3選 Chapter 03 7
Copyright coconala Inc. All Rights Reserved. 学びを得たレビュー3選 3 8 ①スプレッド構文を使うと〜
風にもかけますね!
Copyright coconala Inc. All Rights Reserved. 9 const CATEGORY_SERVICE =
{ title: 'サービスA', image: require('~/assets/images/service.png'), alt: 'サービスAの画像', description: 'サービスAの説明', link: ‘service/a’ } スプレッド構文を使うと〜風にもかけますね! 3 ▶ やりたかったこと const categoryCardServices = [ { id: 1, title: 'カテゴリA', service: { title: CATEGORY_SERVICE.title, image: CATEGORY_SERVICE.image, alt: CATEGORY_SERVICE.alt, description: CATEGORY_SERVICE.description, link: CATEGORY_SERVICE.link } } ] *コードは少し修正を加えています CATEGORY_SERVICE で定義したプロパティを categoryCardServices に格納したい
Copyright coconala Inc. All Rights Reserved. 10 今のままだとコードが冗長的だな。➡ スプレッド構文を使う! スプレッド構文を使うと〜風にもかけますね!
3 レビューのコード const categoryCardServices = [ { id: 1, title: 'サービスA', service: { ...CATEGORY_SERVICE } } シンプル!!! 💡スプレッド構文とは? スプレッド構文は、オブジェクトや配列のすべての要素を何ら かのリストに入れる必要がある場合に使用する
Copyright coconala Inc. All Rights Reserved. 11 📕学んだこと スプレッド構文を使うと〜風にもかけますね! 3
自分だけが理解できるコードを書くのではなく、フロントエンドチームの 一員として冗長的なコードは避け、可動性のあるコードを意識する
Copyright coconala Inc. All Rights Reserved. 3 12 ②Lodashのdebounceを使うと 良さそうです
学びを得たレビュー3選
Copyright coconala Inc. All Rights Reserved. 13 <template> <div v-scroll="handleScroll">
<div v-if="isShown"> // スクロールのコンテンツ </div> </div> </template> lodashのdebounceを使うと良さそうです 3 ▶ やりたかったこと methods: { handleScroll: function () { const scrollY = window.scrollY this.isShown = false clearTimeout(this.scrollTimeout) this.scrollTimeout = setTimeout(() => { const shownThresholdBottom = document.documentElement.scrollHeight - window.innerHeight this.isShown = scrollY < shownThresholdBottom }, 200) } } 👆表示条件を指定 ・スクロール時は非表示 ・スクロールが止まり200ミリ秒後に表示 *コードは少し修正を加えています
Copyright coconala Inc. All Rights Reserved. 14 lodashのdebounceを使うと良さそうです 3 methods:
{ handleScroll: function () { this.isShown = false this.showBottomFixedBar() }, showBottomFixedBar: debounce( function () { const scrollY = window.scrollY const shownThresholdBottom = document.documentElement.scrollHeight - window.innerHeight this.isShown = scrollY < shownThresholdBottom }, 200 ), 指定された時間は関 数が呼び出されない ようにする setTimeout → イベントの度に関数が実行される debounce → 一連のイベントが発生してから一定の時 間が経過した後に一度だけ関数を実行 🔥パフォーマンス向上🔥
Copyright coconala Inc. All Rights Reserved. 15 📕学んだこと ユーザーが快適にサイトを使えるよう利便性も考慮し、 パフォーマンスの観点も視野に入れる
lodashのdebounceを使うと良さそうです 3
Copyright coconala Inc. All Rights Reserved. 3 16 レビューTOP3🥇 ③個人的にはブロックスコープ
の階層は減らしたい…!
Copyright coconala Inc. All Rights Reserved. 17 3 個人的にはブロックスコープの階層は減らしたい …!
3 ▶ やりたかったこと *コードは少し修正を加えています if (!this.isPC) return try { // tryの処理 } catch (e) { // catchの処理 } if (this.isPC) { try { // tryの処理 } catch (e) { // catchの処理 } } 👇PCの時に処理を実行 早期リターン
Copyright coconala Inc. All Rights Reserved. 18 📕学んだこと 早期リターンさせて可読性を上げ、 条件の考慮漏れによるバグを軽減する
3 個人的にはブロックスコープの階層は減らしたい …!
Copyright coconala Inc. All Rights Reserved. 今後 Chapter 04 19
Copyright coconala Inc. All Rights Reserved. 今後 4 20 パフォーマンス、可読性、バグ軽減
etc… これらの学びの観点を他のファイルにも伝搬させ、 総合的により良いプロダクト開発をココナラで達成していきたい たった3つのPRの中にも学びの要素はたくさん含まれている!
Copyright coconala Inc. All Rights Reserved. 21 ご清聴ありがとうございました