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
170
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
110
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
210
「自分の時間を生きる」キャリア論
yoshisan
1
120
小学生でもわかる SlackAPI×GAS
yoshisan
0
130
達人プログラマーになろう!
yoshisan
0
140
認証認可
yoshisan
1
160
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
140
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
140
Let's React!! "チョットワカル"の第一歩
yoshisan
1
230
Other Decks in Programming
See All in Programming
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
junyaokabe
0
120
まだ間に合う!今年の夏こそSchemeのマクロ展開器を完全理解!
omasanori
0
500
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
dachi023
0
7.8k
PostgreSQL 18で考えるUUID主キー
kazuhiro1982
0
500
私のClaude Code活用法 (個人開発編) - PHPerKaigi mini #4(2026/08/24)
panda_program
1
160
人間の目はかわらない、だからJPEGは30年もつ
yuzneri
12
19k
ALB ログから Trace を気合で繋げる技術
fohte
5
490
Flow は今どうなっているか
mizdra
PRO
0
710
引き算の組織 ― アウトカムとAIに全振りするために辞めたこと ― / Organization by Subtraction
hirokiyamamoto14
PRO
0
300
仕様駆動開発の消費期限
watany
20
9k
Press start. Python's next generation.
willingc
PRO
3
130
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
pizzacat83
0
180
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Context Engineering - Making Every Token Count
addyosmani
9
1.1k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
210
Leo the Paperboy
mayatellez
8
2.2k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
360
The Cost Of JavaScript in 2023
addyosmani
55
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
WCS-LA-2024
lcolladotor
0
810
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
580
How STYLIGHT went responsive
nonsquared
100
6.2k
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました