Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScriptのセンターピン

Avatar for yosi yosi
August 08, 2022
Programming
170
0

 JavaScriptのセンターピン

Avatar for yosi

yosi

August 08, 2022

More Decks by yosi

See All by yosi
自社開発のエンジニアの私が 大事にしてること（n=1）
Avatar for yosi yoshisan
1
110
なるほどGit講座 (追跡ブランチが理解できます！)
Avatar for yosi yoshisan
0
210
「自分の時間を生きる」キャリア論
Avatar for yosi yoshisan
1
120
小学生でもわかる SlackAPI×GAS
Avatar for yosi yoshisan
0
120
達人プログラマーになろう！
Avatar for yosi yoshisan
0
140
認証認可
Avatar for yosi yoshisan
1
160
オブジェクト指向が"チョットワカル"スライド
Avatar for yosi yoshisan
0
140
Linuxについて"ほんのチョットワカル"スライド
Avatar for yosi yoshisan
1
140
Let's React!! "チョットワカル"の第一歩
Avatar for yosi yoshisan
1
230

Other Decks in Programming

See All in Programming
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
18k
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
Avatar for Har1101 har1101
0
160
AI時代のPHPer生存戦略 ～「言語、もうなんでもよくない？」に本気で向き合う～
Avatar for viviON vivion
0
230
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
Avatar for jsoizo jsoizo
1
270
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
400
壊れたパーサから始める関数型設計と構成的なパーサ #fp_matsuri
Avatar for ライガー raiga0310
2
440
Apache Hive: そしてCloud Native Lakehouseへ
Avatar for okumin okumin
1
200
為什麼你並不需要ViewModel / No, you don't need a ViewModel
Avatar for Elvis Shi lovee
1
480
信頼性について考えてみる（SRE NEXT 2026 miniLT）
Avatar for hayama hayama17
0
240
仕様駆動開発の消費期限
Avatar for watany watany
7
2k
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
3.5k
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
530

Featured

See All Featured
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.6k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
190
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.8k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
350
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.2k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
250
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

Transcript

  1. P r e s e n t e d b

    y y o s h i チーム開発。 JavaScriptで いかがでしょう👀？？
  2. None
  3. None

  4. センターピンとは？？ ところで,,,,

  5. 一番効果が望める力点

  6. 一番効果が望める力点

  7. プログラミング言語にも センターピンはございます。

  8. 範囲を先取りする。

  9. 視点 1.HTMLの主要のタグ

  10. JSはHTMLのtagu内のidを基点にしている！ →パターンはある程度決まってる！ どういう時に使われる？ ・フォームの送信(生成・新規作成) ・link移動(非同期通信) ・テーブル(表示一覧) なぜHTML？？

  11. 視点 2.イベントハンドラ

  12. ある特定の操作をトリガー(基点)として動きます。 →この基点がイベントハンドラ！ ・clickした時 ・ボタン状をホバーした時 ・LINKに飛んだ時 etc イベントハンドラ

  13. ある特定の操作を基点として動きます。 →この基点がイベントハンドラ！ JSの主要な要素は全てHTMLのタグが発火箇所にな ります！ イベントハンドラ一覧(抜粋)

  14. 視点 3.関数表記

  15. JSの記述は関数型言語に近い思想になります！ 知っておきたいこと ・オブジェクト指向 ・関数指向 書き方 ・無名関数 ・コールバック関数 なぜ関数？？

  16. 視点 4.DOM操作

  17. ブラウザ側がブラウザAPIは使用する際に JavaScriptをデファクトスタンダードで扱えるように してるから。 JavaScriptでブラウザAPIを動かしています。 その際にブラウザAPI側で書くドキュメントの各要素をオ ブジェクト的に動かせるようになってる。 →これがDOM操作！ なぜJSがフロントで必要？？

  18. ブラウザ側がブラウザAPIは使用する際に JavaScriptをデファクトスタンダードで扱えるように してるから。 JavaScriptでブラウザAPIを動かしています。 その際にブラウザAPI側で書くドキュメントの各要素をオ ブジェクト的に動かせるようになってる。 →これがDOM操作！ なぜJSがフロントで必要？？

  19. 範囲を先取りする。

  20. 御清聴ありがとうございました