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
29
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
事業会社におけるセキュリティ・ ITガバナンス強化への道のり
coconala_engineer
0
9
徹底解説!Insight SQL Testingを活用したデータベース移行の実践ポイント
coconala_engineer
0
110
人材・モチベーション・情報システムの融合とエンゲージメント
coconala_engineer
0
83
Macインスタンスを活用したアプリE2Eテストの実現
coconala_engineer
1
310
スケーラビリティの課題解決に向けたココナラのデータベース移行戦略
coconala_engineer
1
570
IPO準備企業必見!ココナラから学ぶ上場前後でのセキュリティ改革プロセス
coconala_engineer
0
140
IaC運用を続けて出会うイシューたち
coconala_engineer
0
110
CDN+αの利活用でサイトの高速化を実現してみた
coconala_engineer
0
170
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
570
Other Decks in Technology
See All in Technology
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
260
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
120
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
310
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Why Our Code Smells
bkeepers
PRO
332
56k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Navigating Team Friction
lara
181
13k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Rails Girls Zürich Keynote
gr2m
93
13k
Infographics Made Easy
chrislema
238
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
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 ご清聴ありがとうございました