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
130
JavaScriptのセンターピン
yosi
August 08, 2022
Tweet
Share
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
54
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
180
「自分の時間を生きる」キャリア論
yoshisan
1
98
小学生でもわかる SlackAPI×GAS
yoshisan
0
110
達人プログラマーになろう!
yoshisan
0
110
認証認可
yoshisan
1
130
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
110
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
110
Let's React!! "チョットワカル"の第一歩
yoshisan
1
190
Other Decks in Programming
See All in Programming
構文解析器入門
ydah
7
1.8k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
200
AIのメモリー
watany
11
950
Caude codeで爆速開発
codelynx
0
100
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
700
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
TypeScriptでDXを上げろ! Hono編
yusukebe
3
860
Porting a visionOS App to Android XR
akkeylab
0
910
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
6k
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
2
1.3k
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
For a Future-Friendly Web
brad_frost
179
9.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Visualization
eitanlees
146
16k
Code Reviewing Like a Champion
maltzj
524
40k
Building an army of robots
kneath
306
45k
Site-Speed That Sticks
csswizardry
10
720
Faster Mobile Websites
deanohume
308
31k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Bash Introduction
62gerente
613
210k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.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がフロントで必要??
範囲を先取りする。
御清聴ありがとうございました