1年間のレビューの中からTOP3を紹介！

23新卒エンジニア 1年間の振り返りLT会の登壇資料。
https://uniquevision.connpass.com/event/311006/

Transcript

1. Copyright coconala Inc. All Rights Reserved. 1年間のレビューの中から TOP3を紹介！
2. Copyright coconala Inc. All Rights Reserved. アジェンダ 自己紹介 会社紹介 学びを得たレビュー3選 今後 2 1 2 3 4
3. Copyright coconala Inc. All Rights Reserved. 自己紹介 Chapter 01 3
4. Copyright coconala Inc. All Rights Reserved. 自己紹介 1 4 株式会社ココナラ プロダクト開発部 フロントエンド開発グループ 青木 希美（あおき のぞみ） • 大学は経済学部 • 旅行大好き！12月は3泊5日でフラン ス/ドイツ/スイスを巡回 • とりあえずやってみる
5. Copyright coconala Inc. All Rights Reserved. 会社紹介 Chapter 02 5
6. Copyright coconala Inc. All Rights Reserved. 会社紹介 2 6
7. Copyright coconala Inc. All Rights Reserved. 学びを得たレビュー3選 Chapter 03 7
8. Copyright coconala Inc. All Rights Reserved. 学びを得たレビュー3選 3 8 ①スプレッド構文を使うと〜 風にもかけますね！
9. 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 に格納したい
10. Copyright coconala Inc. All Rights Reserved. 10 今のままだとコードが冗長的だな。➡ スプレッド構文を使う！ スプレッド構文を使うと〜風にもかけますね！ 3 レビューのコード const categoryCardServices = [ { id: 1, title: 'サービスA', service: { ...CATEGORY_SERVICE } } シンプル!!! 💡スプレッド構文とは? スプレッド構文は、オブジェクトや配列のすべての要素を何ら かのリストに入れる必要がある場合に使用する
11. Copyright coconala Inc. All Rights Reserved. 11 📕学んだこと スプレッド構文を使うと〜風にもかけますね！ 3 自分だけが理解できるコードを書くのではなく、フロントエンドチームの 一員として冗長的なコードは避け、可動性のあるコードを意識する
12. Copyright coconala Inc. All Rights Reserved. 3 12 ②Lodashのdebounceを使うと 良さそうです 学びを得たレビュー3選
13. 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ミリ秒後に表示 ＊コードは少し修正を加えています
14. 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 → 一連のイベントが発生してから一定の時 間が経過した後に一度だけ関数を実行 🔥パフォーマンス向上🔥
15. Copyright coconala Inc. All Rights Reserved. 15 📕学んだこと ユーザーが快適にサイトを使えるよう利便性も考慮し、 パフォーマンスの観点も視野に入れる lodashのdebounceを使うと良さそうです 3
16. Copyright coconala Inc. All Rights Reserved. 3 16 レビューTOP3🥇 ③個人的にはブロックスコープ の階層は減らしたい…！
17. 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の時に処理を実行 早期リターン
18. Copyright coconala Inc. All Rights Reserved. 18 📕学んだこと 早期リターンさせて可読性を上げ、 条件の考慮漏れによるバグを軽減する 3 個人的にはブロックスコープの階層は減らしたい …！
19. Copyright coconala Inc. All Rights Reserved. 今後 Chapter 04 19
20. Copyright coconala Inc. All Rights Reserved. 今後 4 20 パフォーマンス、可読性、バグ軽減 etc… これらの学びの観点を他のファイルにも伝搬させ、 総合的により良いプロダクト開発をココナラで達成していきたい たった3つのPRの中にも学びの要素はたくさん含まれている！
21. Copyright coconala Inc. All Rights Reserved. 21 ご清聴ありがとうございました