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
160
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
100
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
210
「自分の時間を生きる」キャリア論
yoshisan
1
120
小学生でもわかる SlackAPI×GAS
yoshisan
0
120
達人プログラマーになろう!
yoshisan
0
130
認証認可
yoshisan
1
160
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
140
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
130
Let's React!! "チョットワカル"の第一歩
yoshisan
1
230
Other Decks in Programming
See All in Programming
キャリア迷子上等 ─ "ない道"は自分で作ればいい
16bitidol
3
2.1k
「エンジニアインターン、どうやって取った?」準備のリアルを語るLT会 Progate BAR
akiomatic
0
140
AI 輔助遺留系統現代化的經驗分享
jame2408
1
760
ふつうのFeature Flag実践入門
irof
8
4k
Agentic UI
manfredsteyer
PRO
0
180
dRuby over BLE
makicamel
2
380
そのテスト、説明できますか?~LWテスト戦略FW~のご紹介
nakahara
0
150
Lemonade + Foundry Toolkit でお手軽アプリ開発
seosoft
1
360
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
nrslib
14
5.6k
技術記事、 専門家としてのプログラマ、 言語化
mizchi
13
6.2k
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
ioki
0
210
フロントエンドとバックエンドで「1文字」を揃えよう
youkidearitai
PRO
0
710
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
247
13k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
2.1k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
780
Six Lessons from altMBA
skipperchong
29
4.3k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
400
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
610
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.2k
Done Done
chrislema
186
16k
First, design no harm
axbom
PRO
2
1.2k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
330
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
170
RailsConf 2023
tenderlove
30
1.5k
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました