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
140
JavaScriptのセンターピン
yosi
August 08, 2022
Tweet
Share
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
57
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
180
「自分の時間を生きる」キャリア論
yoshisan
1
98
小学生でもわかる SlackAPI×GAS
yoshisan
0
110
達人プログラマーになろう!
yoshisan
0
110
認証認可
yoshisan
1
130
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
110
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
110
Let's React!! "チョットワカル"の第一歩
yoshisan
1
190
Other Decks in Programming
See All in Programming
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.9k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
チームの境界をブチ抜いていけ
tokai235
0
230
Cursorハンズオン実践!
eltociear
2
1.2k
モテるデスク環境
mozumasu
3
1.3k
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
270
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
810
Catch Up: Go Style Guide Update
andpad
0
250
NIKKEI Tech Talk#38
cipepser
0
240
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.4k
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
GraphQLとの向き合い方2022年版
quramy
49
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Gamification - CAS2011
davidbonilla
81
5.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
The Pragmatic Product Professional
lauravandoore
36
7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました