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

JavaScriptのセンターピン

Avatar for yosi yosi
August 08, 2022
Programming
0
140

 JavaScriptのセンターピン

Avatar for yosi

yosi

August 08, 2022
Tweet

More Decks by yosi

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

Other Decks in Programming

See All in Programming
pnpm に provenance のダウングレード を検出する PR を出してみた
Avatar for mattsuu ryo_manba
1
150
CSC509 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
あなたとKaigi on Rails / Kaigi on Rails + You
Avatar for Hiroshi Shimoju shimoju
0
180
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
570
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
210
バッチ処理を「状態の記録」から「事実の記録」へ
Avatar for HideyukiKitao panda728
PRO
0
190
Flutterで分数(Fraction)を表示する方法
Avatar for kouki.miura koukimiura
0
140
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
580
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
Avatar for 入井 啓太 iriikeita
0
320
AI 駆動開発におけるコミュニティと AWS CDK の価値
Avatar for Kenji Kono konokenj
5
160
Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
Avatar for ねぎなす neginasu
2
450
実践Claude Code：20の失敗から学ぶAIペアプログラミング
Avatar for 武田隆志 takedatakashi
18
7.5k

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.6k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
161
23k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
115
20k

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