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
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
260
Classmethod Odyssey 登壇資料
yamahiro
0
390
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
How STYLIGHT went responsive
nonsquared
93
5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Design by the Numbers
sachag
277
18k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Facilitating Awesome Meetings
lara
46
5.8k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
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 ご清聴ありがとうございました