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

JavaScriptのセンターピン

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for yosi yosi
August 08, 2022
Programming
0
150

 JavaScriptのセンターピン

Avatar for yosi

yosi

August 08, 2022
Tweet

More Decks by yosi

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

Other Decks in Programming

See All in Programming
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
450
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
760
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
210
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
640
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
510
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
Avatar for yimajo yimajo
3
600
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
2
900
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
7
3.4k
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
220
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
7
8.2k
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
190

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
230
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
270
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
45
Designing for Performance
Avatar for Lara Hogan lara
610
70k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.5k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
170
Done Done
Avatar for chrislema chrislema
186
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k

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