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
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
64
なるほど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
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
wisemuji
0
150
新卒エンジニアのプルリクエスト with AI駆動
fukunaga2025
0
240
Denoのセキュリティに関する仕組みの紹介 (toranoana.deno #23)
uki00a
0
190
ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた
nearme_tech
PRO
0
210
Python札幌 LT資料
t3tra
7
1.1k
生成AIを利用するだけでなく、投資できる組織へ
pospome
2
430
ThorVG Viewer In VS Code
nors
0
460
re:Invent 2025 のイケてるサービスを紹介する
maroon1st
0
160
ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party
k0kubun
1
300
Cap'n Webについて
yusukebe
0
150
從冷知識到漏洞,你不懂的 Web,駭客懂 - Huli @ WebConf Taiwan 2025
aszx87410
2
3.2k
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
7
2.4k
Featured
See All Featured
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
99
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
35
My Coaching Mixtape
mlcsv
0
15
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
0
100
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
0
980
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
So, you think you're a good person
axbom
PRO
0
1.9k
Building Flexible Design Systems
yeseniaperezcruz
330
39k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
350
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました