Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
JavaScriptのセンターピン
Search
yosi
August 08, 2022
Programming
180
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
JavaScriptのセンターピン
yosi
August 08, 2022
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
120
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
220
「自分の時間を生きる」キャリア論
yoshisan
1
130
小学生でもわかる SlackAPI×GAS
yoshisan
0
130
達人プログラマーになろう!
yoshisan
0
140
認証認可
yoshisan
1
170
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
140
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
140
Let's React!! "チョットワカル"の第一歩
yoshisan
1
230
Other Decks in Programming
See All in Programming
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
minodriven
35
17k
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
akihisaikeda
0
150
個人開発者よ、Honoを使え(おじさんver)
tanahiro2010
2
280
PyConTW 2026 - AI Coding 不只是工具升級, 區域醫院醫療資訊系統協作開發與資訊團隊轉型實踐
cclai999
0
200
Long Living Tokens, Die, Die, Die! (or: The One Ring is Banned in Modern)
sylph01
0
370
Snowflake Openflow Connector利用の勘所 / 20261024developersio2026tokyo-snowflake-openflow
kasacchiful
PRO
0
180
sbt 2.0: takeoff
eed3si9n
0
170
クラウドゲーミングのパフォーマンス最適化に挑む / Cloud Gaming Performance Tuning
vivion
0
260
3回つくってわかった、 定期実行ジョブ基盤の本質情報
takai
4
3.2k
Vue Fes Japan の “作る側”に関わってみて
naokihaba
1
190
Optunaを作ったときにやりたかったこと、その後 (2026/10/16, Optuna Meetup #3)
iwiwi
4
1.3k
React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기
leegeunhyeok
0
150
Featured
See All Featured
The SEO identity crisis: Don't let AI make you average
varn
0
610
sira's awesome portfolio website redesign presentation
elsirapls
0
470
Why Our Code Smells
bkeepers
PRO
340
58k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
310
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
450
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
Google's AI Overviews - The New Search
badams
0
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
53
4k
Ethics towards AI in product and experience design
skipperchong
2
440
What does AI have to do with Human Rights?
axbom
PRO
1
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.7k
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました