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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
120
小学生でもわかる SlackAPI×GAS
yoshisan
0
120
達人プログラマーになろう!
yoshisan
0
140
認証認可
yoshisan
1
160
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
140
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
140
Let's React!! "チョットワカル"の第一歩
yoshisan
1
230
Other Decks in Programming
See All in Programming
yield再入門 #phpcon
o0h
PRO
0
930
JAWS-UG横浜 #102 AWSサ終供養LT会 成仏できない AWS サービスたち 〜本日、三体供養します〜
maroon1st
0
310
AWS DevOps AgentのAzure接続機能を検証して見えた活用法/Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
masakiokuda
1
210
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
kentaroutakeda
3
650
Lean は証明の正しさを確認するためだけのツールって思ってませんか?
inoueasei
1
140
為什麼你並不需要ViewModel / No, you don't need a ViewModel
lovee
1
480
ここ半年くらいでAIに作らせたR用ツール
eitsupi
0
360
komatsuna「分散システムにおけるバグ分析手法」
komatsunaqa
0
230
5分で問診!Composer セキュリティ健康診断
codmoninc
0
850
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
petamoriken
0
200
信頼性について考えてみる(SRE NEXT 2026 miniLT)
hayama17
0
240
VibeCodingからAgenticWorkflowへ
starfish719
0
190
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
22k
Un-Boring Meetings
codingconduct
0
370
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
530
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
330
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
A better future with KSS
kneath
240
18k
Automating Front-end Workflow
addyosmani
1370
210k
Scaling GitHub
holman
464
140k
Paper Plane (Part 1)
katiecoart
PRO
1
10k
The Curious Case for Waylosing
cassininazir
1
450
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
260
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました