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
16
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
IaC運用を続けて出会うイシューたち
coconala_engineer
0
67
CDN+αの利活用でサイトの高速化を実現してみた
coconala_engineer
0
66
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
440
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
260
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
350
開発生産性運用上の課題と 上流工程まで視野に入れた改善の取り組み
coconala_engineer
1
370
「しでかした」右も左もわからないと こんなミスもできる!
coconala_engineer
0
22
PagerDutyを活用したオンコール運用の軌跡(ココナラ編)
coconala_engineer
1
980
ココナラにおけるエンジニア評価制度について
coconala_engineer
0
110
Other Decks in Technology
See All in Technology
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
37k
1Q86
kawaguti
PRO
2
150
【リラン】AIの光と闇?失敗しないために知っておきたいAIリスクとその対応 ①政府の動き編
tkhresk
0
130
グイグイ系QAエンジニアでやっていくよ!
____rina____
0
700
QA経験のないエンジニアリング マネージャーがQAのカジュアル面談に出て 苦労していること・気づいたこと / scrum fest niigata 2024
yoshikiiida
2
600
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
2k
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
260
スクラムに出会って「できた」を実感できるようになってきた話 / Scrum makes me feel like I can do it
yayoi_dd
2
110
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
10
3k
能動学習のいろは:書籍「Human-in-the-Loop機械学習」3〜5章
hiroyoshiito
0
280
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
3
670
cgroup v2 で何が変わったのか / TechFeed Experts Night #28
tenforward
2
150
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Practical Orchestrator
shlominoach
183
9.8k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Designing for Performance
lara
601
67k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
The Cult of Friendly URLs
andyhume
74
5.7k
Designing with Data
zakiwarfel
96
4.8k
Automating Front-end Workflow
addyosmani
1357
200k
What's in a price? How to price your products and services
michaelherold
238
11k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
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 ご清聴ありがとうございました