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
66
CDN+αの利活用でサイトの高速化を実現してみた
coconala_engineer
0
65
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
410
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
260
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
350
開発生産性運用上の課題と 上流工程まで視野に入れた改善の取り組み
coconala_engineer
1
350
「しでかした」右も左もわからないと こんなミスもできる!
coconala_engineer
0
22
PagerDutyを活用したオンコール運用の軌跡(ココナラ編)
coconala_engineer
1
950
ココナラにおけるエンジニア評価制度について
coconala_engineer
0
110
Other Decks in Technology
See All in Technology
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
780
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
180
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
1
750
.NET Profiler in 2024.
kkamegawa
2
2.2k
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.4k
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Musicを例に~
otanet
0
320
さらばあのボタンとは言わせない SORACOM LTE-M Button powerd by AWSをまだ使えるようにした(前編?)
miura55
0
100
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
120
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
2
150
個人のAWSアカウントをマルチ運用してみた
miura55
2
240
Gemini, Google's Large Language Model
glaforge
0
120
認知症フレンドリーテックとスタックチャン
naokiuc
0
350
Featured
See All Featured
Embracing the Ebb and Flow
colly
80
4.2k
BBQ
matthewcrist
80
8.8k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Six Lessons from altMBA
skipperchong
22
3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Product Roadmaps are Hard
iamctodd
45
9.8k
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 ご清聴ありがとうございました