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
96
JavaScriptのセンターピン
yosi
August 08, 2022
Tweet
Share
More Decks by yosi
See All by yosi
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
140
「自分の時間を生きる」キャリア論
yoshisan
1
80
小学生でもわかる SlackAPI×GAS
yoshisan
0
90
達人プログラマーになろう!
yoshisan
0
100
認証認可
yoshisan
1
94
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
95
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
81
Let's React!! "チョットワカル"の第一歩
yoshisan
1
140
ようこそ!!ココカラ勉強会へ!
yoshisan
0
82
Other Decks in Programming
See All in Programming
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.1k
設計の知識と技能で駆動するソフトウェア開発
masuda220
PRO
18
9.9k
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.1k
マイ隙間家具OSSたちのご紹介
karupanerura
2
150
PHPアプリケーションのスケーラビリティと 信頼性を革新する nginx+ngx_mrubyとGoの融合
pyama86
2
240
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
2.9k
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
3
830
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
130
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.1k
Dockerで始めるAWS Lambda開発
stutkhd0709
13
2.5k
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
Honoとhtmx
yusukebe
6
1.2k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
57
14k
Designing the Hi-DPI Web
ddemaree
275
33k
Infographics Made Easy
chrislema
237
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
For a Future-Friendly Web
brad_frost
170
8.9k
Building Your Own Lightsaber
phodgson
97
5.6k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Ruby is Unlike a Banana
tanoku
95
10k
Gamification - CAS2011
davidbonilla
76
4.5k
Scaling GitHub
holman
456
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました