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
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
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
AHC070解法紹介
eijirou
0
110
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
wp_daisuke
0
150
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
furukawayasuto
0
180
Jetpack Compose メカニズム
skydoves
0
360
Deep dive into the select statement (GopherCon UK)
jespino
0
180
選挙速報を多くのユーザーへ 届ける Live Activities 設計
hamayokokuririn
0
130
巨大モノリシックアプリ モダン化大作戦
ktcryomm
0
980
仕様駆動開発による爆速プロダクト開発 / Bakusoku Spec Driven Development
kobakei
0
100
Family mrubyの進捗
kishima
1
120
Webの地図
yosuke_furukawa
PRO
6
4.4k
20260914 AIエージェント時代のPlatform Engineering LLM基盤とプロダクトの責務境界線
kanfab1
6
1.8k
AIは賢い。でも実行環境は? CLIおじさんがAI時代に伝えたいこと ~ CLIおじさんがAI時代に伝えたいこと ~
curekoshimizu
1
240
Featured
See All Featured
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
4
640
Git: the NoSQL Database
bkeepers
PRO
432
67k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
420
Amusing Abliteration
ianozsvald
1
300
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
230
A Tale of Four Properties
chriscoyier
163
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.6k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Optimizing for Happiness
mojombo
378
71k
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました