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
43
なるほど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
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
700
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
700
【re:Growth 2024】 Aurora DSQL をちゃんと話します!
maroon1st
0
770
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1k
CSC305 Lecture 25
javiergs
PRO
0
130
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
1
1.3k
42 best practices for Symfony, a decade later
tucksaun
1
180
暇に任せてProxmoxコンソール 作ってみました
karugamo
1
720
As an Engineers, let's build the CRM system via LINE Official Account 2.0
clonn
1
670
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
335
57k
Facilitating Awesome Meetings
lara
50
6.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Language of Interfaces
destraynor
154
24k
Six Lessons from altMBA
skipperchong
27
3.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Site-Speed That Sticks
csswizardry
2
190
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Raft: Consensus for Rubyists
vanstee
137
6.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました