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
91
なるほど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
220
Other Decks in Programming
See All in Programming
なぜあなたのコードには「コシ」がないのか?〜AI時代に問う、最後まで美味しい設計と戦略〜 #phpconkagawa / phpconkagawa2026
shogogg
0
220
AlarmKitで明後日起きれるアラームアプリを作る
trickart
0
140
運用エージェントは "作る" から "育てる" へ - 記憶と自己進化の3層設計パターン / self-evolving-agents-three-layer-agent-design
gawa
8
550
色即是空、空即是色、データサイエンス
kamoneggi
1
140
~ 秘伝のタレ化した『神スプシ』と戦う ~ 関数型パラダイムで壊れない仕組みへ
h0r15h0
1
120
AI駆動開発勉強会 広島支部 第一回勉強会 AI駆動開発概要とワークショップ
hayatoshimiu
0
320
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
nao_mk2
1
540
要はバランスからの卒業 #yumemi_grow
kajitack
0
190
次世代リンターで探る、tsgo 時代における型認識カスタムルールの現実解
ytakahashii
1
760
新規プロダクトを高速で生み出すハーネスエンジニアリング
seanchas116
3
240
oxlintはeslint/typescript-eslintを置き換えられるのか
shomafujita
2
140
リセットCSSを1行消したらアクセシビリティが向上した話
pvcresin
4
530
Featured
See All Featured
Docker and Python
trallard
47
3.8k
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.5k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
300
The Curse of the Amulet
leimatthew05
1
12k
ラッコキーワード サービス紹介資料
rakko
1
3.4M
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Agile that works and the tools we love
rasmusluckow
331
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.3k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
380
A Soul's Torment
seathinner
6
2.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.1k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
930
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました