Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

JavaScriptのセンターピン

Avatar for yosi yosi
August 08, 2022
Programming
180
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
130
小学生でもわかる SlackAPI×GAS
Avatar for yosi yoshisan
0
130
達人プログラマーになろう！
Avatar for yosi yoshisan
0
140
認証認可
Avatar for yosi yoshisan
1
170
オブジェクト指向が"チョットワカル"スライド
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
Java 27新機能 / Java 27 new features
Avatar for Naoki Kishida kishida
2
200
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
150
GitHubハンズオン講座 — 実務レベルのチーム開発のフローを身につけよう
Avatar for junhat6 junhat6
0
120
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
340
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
490
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
Avatar for Kobujee_53 oku053
0
120
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
34
15k
Simple Storage Service(S3) is not simple
Avatar for Yura Iwatsuka iwatsukayura
0
190
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
470
AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
130
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
120
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
Avatar for Prota prota
1
1.8k

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.1k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
4
4k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
40k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
420
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.3k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
420
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k

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