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
JavaScriptのセンターピン
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
yosi
August 08, 2022
Programming
0
150
JavaScriptのセンターピン
yosi
August 08, 2022
Tweet
Share
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
73
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
190
「自分の時間を生きる」キャリア論
yoshisan
1
100
小学生でもわかる SlackAPI×GAS
yoshisan
0
110
達人プログラマーになろう!
yoshisan
0
120
認証認可
yoshisan
1
140
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
120
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
120
Let's React!! "チョットワカル"の第一歩
yoshisan
1
210
Other Decks in Programming
See All in Programming
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
130
CSC307 Lecture 05
javiergs
PRO
0
490
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
500
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
370
CSC307 Lecture 06
javiergs
PRO
0
680
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
yimajo
3
610
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
140
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
240
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
190
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
420
dchart: charts from deck markup
ajstarks
3
990
「ブロックテーマでは再現できない」は本当か?
inc2734
0
340
Featured
See All Featured
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
300
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1k
sira's awesome portfolio website redesign presentation
elsirapls
0
140
Discover your Explorer Soul
emna__ayadi
2
1.1k
Why Our Code Smells
bkeepers
PRO
340
58k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
Making the Leap to Tech Lead
cromwellryan
135
9.7k
GitHub's CSS Performance
jonrohan
1032
470k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.6k
Chasing Engaging Ingredients in Design
codingconduct
0
110
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
55
Transcript
P r e s e n t e d b
y y o s h i チーム開発。 JavaScriptで いかがでしょう👀??
None
None
センターピンとは?? ところで,,,,
一番効果が望める力点
一番効果が望める力点
プログラミング言語にも センターピンはございます。
範囲を先取りする。
視点 1.HTMLの主要のタグ
JSはHTMLのtagu内のidを基点にしている! →パターンはある程度決まってる! どういう時に使われる? ・フォームの送信(生成・新規作成) ・link移動(非同期通信) ・テーブル(表示一覧) なぜHTML??
視点 2.イベントハンドラ
ある特定の操作をトリガー(基点)として動きます。 →この基点がイベントハンドラ! ・clickした時 ・ボタン状をホバーした時 ・LINKに飛んだ時 etc イベントハンドラ
ある特定の操作を基点として動きます。 →この基点がイベントハンドラ! JSの主要な要素は全てHTMLのタグが発火箇所にな ります! イベントハンドラ一覧(抜粋)
視点 3.関数表記
JSの記述は関数型言語に近い思想になります! 知っておきたいこと ・オブジェクト指向 ・関数指向 書き方 ・無名関数 ・コールバック関数 なぜ関数??
視点 4.DOM操作
ブラウザ側がブラウザAPIは使用する際に JavaScriptをデファクトスタンダードで扱えるように してるから。 JavaScriptでブラウザAPIを動かしています。 その際にブラウザAPI側で書くドキュメントの各要素をオ ブジェクト的に動かせるようになってる。 →これがDOM操作! なぜJSがフロントで必要??
ブラウザ側がブラウザAPIは使用する際に JavaScriptをデファクトスタンダードで扱えるように してるから。 JavaScriptでブラウザAPIを動かしています。 その際にブラウザAPI側で書くドキュメントの各要素をオ ブジェクト的に動かせるようになってる。 →これがDOM操作! なぜJSがフロントで必要??
範囲を先取りする。
御清聴ありがとうございました