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
56
なるほど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
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
400
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
620
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
460
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
420
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
450
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
610
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
390
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
550
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Six Lessons from altMBA
skipperchong
28
4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Fireside Chat
paigeccino
40
3.7k
Being A Developer After 40
akosma
91
590k
Designing for humans not robots
tammielis
254
25k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Building Adaptive Systems
keathley
43
2.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Context Engineering - Making Every Token Count
addyosmani
5
190
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました