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
110
JavaScriptのセンターピン
yosi
August 08, 2022
Tweet
Share
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
42
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
160
「自分の時間を生きる」キャリア論
yoshisan
1
93
小学生でもわかる SlackAPI×GAS
yoshisan
0
100
達人プログラマーになろう!
yoshisan
0
110
認証認可
yoshisan
1
120
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
110
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
95
Let's React!! "チョットワカル"の第一歩
yoshisan
1
170
Other Decks in Programming
See All in Programming
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
160
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
Amazon Qを使ってIaCを触ろう!
maruto
0
400
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
200
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
280
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
みんなでプロポーザルを書いてみた
yuriko1211
0
260
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
4 Signs Your Business is Dying
shpigford
180
21k
How STYLIGHT went responsive
nonsquared
95
5.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Git: the NoSQL Database
bkeepers
PRO
427
64k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Building Applications with DynamoDB
mza
90
6.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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました