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
160
0
Share
JavaScriptのセンターピン
yosi
August 08, 2022
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
87
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
200
「自分の時間を生きる」キャリア論
yoshisan
1
110
小学生でもわかる SlackAPI×GAS
yoshisan
0
120
達人プログラマーになろう!
yoshisan
0
130
認証認可
yoshisan
1
150
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
130
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
130
Let's React!! "チョットワカル"の第一歩
yoshisan
1
220
Other Decks in Programming
See All in Programming
AIと共に生きる技術選定 2026
sgash708
0
110
Server-Side Kotlin LT大会 vol.18 [Kotlin-lspの最新情報と Neovimのlsp設定例]
yasunori0418
1
190
How Swift's Type System Guides AI Agents
koher
0
310
アクセシビリティ試験の"その後"を仕組み化する
yuuumiravy
1
180
Going Multiplatform with Your Android App (Android Makers 2026)
zsmb
2
450
決定論 vs 確率論:Gemini 3 FlashとTF-IDFを組み合わせた「法規判定エンジン」の構築
shukob
0
130
Claude CodeでETLジョブ実行テストを自動化してみた
yoshikikasama
0
980
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
itsmedreamwalker
0
560
AIベース静的検査器の偽陽性率を抑える工夫3選
orgachem
PRO
4
370
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
marcoroth
0
310
「Linuxサーバー構築標準教科書」を読んでみた #ツナギメオフライン.7
akase244
0
1.4k
PicoRuby for IoT: Connecting to the Cloud with MQTT
yuuu
2
680
Featured
See All Featured
Design in an AI World
tapps
1
200
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
380
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
340
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Being A Developer After 40
akosma
91
590k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
Unsuck your backbone
ammeep
672
58k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
280
GitHub's CSS Performance
jonrohan
1032
470k
How to build a perfect <img>
jonoalderson
1
5.4k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
130
Making the Leap to Tech Lead
cromwellryan
135
9.8k
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました