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

JavaScriptのセンターピン

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for yosi yosi
August 08, 2022
Programming
160
0

 JavaScriptのセンターピン

Avatar for yosi

yosi

August 08, 2022

More Decks by yosi

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

Other Decks in Programming

See All in Programming
(Re)make Regexp in Ruby: Democratizing internals for the JIT
Avatar for TSUYUSATO Kitsune makenowjust
3
1k
Symfony AI in Action - SymfonyLive Berlin 2026
Avatar for Christopher Hertel chr_hertel
1
140
SREに優しいTerraform構成 modulesとstateの組み方
Avatar for hiyanger hiyanger
2
170
属人化しないコード品質の作り方_2026.04.07.pdf
Avatar for Masaki Murano muraaano
0
330
Building on Bluesky's AT Protocol with Ruby
Avatar for Kuba Suder mackuba
0
110
20260514 - build with ai 2026 - build LINE Bot with Gemini CLI
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
390
UaaL×Androidアプリのメモリ計測 — Memory Profilerの先へ
Avatar for Ryosuke Shimizu (RIO) rio432
0
140
when storing skills in S3 file
Avatar for watany watany
3
1.5k
Programming with a DJ Controller — not vibe coding
Avatar for seki at druby.org m_seki
3
810
tRPCの概要と少しだけパフォーマンス
Avatar for Keigo Ebihara misoton665
2
270
Liberating Ruby's Parser from Lexer Hacks
Avatar for ydah ydah
2
2.7k
空間オーディオの活用
Avatar for Yuki Yasoshima objectiveaudio
0
150

Featured

See All Featured
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
220
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
120
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.9k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.2k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
920
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
170
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k

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. 御清聴ありがとうございました