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
150
0
Share
JavaScriptのセンターピン
yosi
August 08, 2022
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
86
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
200
「自分の時間を生きる」キャリア論
yoshisan
1
110
小学生でもわかる SlackAPI×GAS
yoshisan
0
120
達人プログラマーになろう!
yoshisan
0
130
認証認可
yoshisan
1
140
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
130
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
130
Let's React!! "チョットワカル"の第一歩
yoshisan
1
220
Other Decks in Programming
See All in Programming
Angular Signal Forms
debug_mode
0
110
CursorとClaudeCodeとCodexとOpenCodeを実際に比較してみた
terisuke
1
470
t *testing.T は どこからやってくるの?
otakakot
1
650
ハンズオンで学ぶクラウドネイティブ
tatsukiminami
0
130
PCOVから学ぶコードカバレッジ #phpcon_odawara
o0h
PRO
0
270
実用!Hono RPC2026
yodaka
2
220
Don't Prompt Harder, Structure Better
kitasuke
0
760
[RubyKaigi 2026] Require Hooks
palkan
1
200
クラウドネイティブなエンジニアに向ける Raycastの魅力と実際の活用事例
nealle
2
200
レガシーPHP転生 〜父がドメインエキスパートだったのでDDD+Claude Codeでチート開発します〜
panda_program
0
950
Running Swift without an OS
kishikawakatsumi
0
840
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
serradura
0
330
Featured
See All Featured
Accessibility Awareness
sabderemane
0
100
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.2k
エンジニアに許された特別な時間の終わり
watany
106
240k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
340
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
The Curious Case for Waylosing
cassininazir
0
300
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.6k
Everyday Curiosity
cassininazir
0
200
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
150
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました