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
JavaScriptのセンターピン
yosi
August 08, 2022
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
93
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
210
「自分の時間を生きる」キャリア論
yoshisan
1
110
小学生でもわかる SlackAPI×GAS
yoshisan
0
120
達人プログラマーになろう!
yoshisan
0
130
認証認可
yoshisan
1
150
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
130
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
130
Let's React!! "チョットワカル"の第一歩
yoshisan
1
230
Other Decks in Programming
See All in Programming
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
nao_mk2
1
1.1k
The Arts and Crafts of Work in the AI Era — Toward Mastery in Software Development
kuranuki
1
670
初めてのRubyKaigiはこう見えた
jellyfish700
0
330
inferと仲良くなる10分間
ryokatsuse
1
270
Swiftのレキシカルスコープ管理
kntkymt
0
200
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
o0h
PRO
2
190
新規プロダクトを高速で生み出すハーネスエンジニアリング
seanchas116
15
7.4k
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
susisu
1
1.3k
権限チェックの一貫性を型で守る TypeScript による多層防御
mnch
4
970
oxlintはeslint/typescript-eslintを置き換えられるのか
shomafujita
2
290
今さら聞けないCancellationToken
htkym
0
200
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
manfredsteyer
PRO
0
170
Featured
See All Featured
The Curious Case for Waylosing
cassininazir
1
360
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
New Earth Scene 8
popppiees
3
2.3k
The Cost Of JavaScript in 2023
addyosmani
55
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
760
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
190
Making Projects Easy
brettharned
120
6.7k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.3k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
11k
Technical Leadership for Architectural Decision Making
baasie
3
380
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました