Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Atomエディタで振り返る、昨今のWeb周辺事情
Search
tyage
May 16, 2015
Technology
1
3.7k
Atomエディタで振り返る、昨今のWeb周辺事情
tyage
May 16, 2015
Tweet
Share
More Decks by tyage
See All by tyage
Webフロントエンドの脆弱性つまみ食い 2024年版
tyage
17
5.6k
Webサービスの終活
tyage
0
910
ディストピアブラウザ
tyage
0
2.5k
Other Decks in Technology
See All in Technology
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.1k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
3
680
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.3k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
AI開発ツールCreateがAnythingになったよ
tendasato
0
120
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
250
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
140
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
330
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.4k
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
9
3.5k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
220
2025年夏 コーディングエージェントを統べる者
nwiizo
0
130
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
What's in a price? How to price your products and services
michaelherold
246
12k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
How to Ace a Technical Interview
jacobian
279
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
For a Future-Friendly Web
brad_frost
180
9.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Transcript
Atomエディタで振り返る 昨今のWeb周辺事情 2015/05/16 @tyage
こんにちは
自己紹介
チューターの山崎です • twitter: @tyage • 京都の大学の4回生 • セキュリティ&プログラミングキャンプ2010卒業生 • CTF
◦ tyage ∈ Epsilon Delta ⊂ binja ⊂ fuzzi3 ドーモ、ミナ=サン
話すこと
面倒くさいのは Webセキュリティ だけじゃない
アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
アジェンダ 最近のJavaScript周辺の話題を軽く振り返ってみます ※ エディタ戦争はしない
Atomエディタで振り返る 昨今のJavaScript周辺事情 2015/05/16 @tyage
アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
Atomエディタの話
Atomエディタ(以降Atom) • ナウでヤングにホットなテキストエディタ • 去年OSSになってからとにかく盛り上がってる
Atomざっくり • Chromiumとio.jsで動くエディタ ◦ エディタだけど、中身はWebページ • Webページからio.jsが叩ける!!! ◦ 後述のelectronをベースに作っている ◦
XSSできると... • 内部のコードはほぼCoffeescript
None
None
electron(旧名: Atom shell) • HTMLとJSでデスクトップアプリケーションを作れるフレーム ワーク ◦ nw.jsと似てる • chromiumのrendererプロセスとbrowserプロセスにio.jsが
組み込まれている ◦ Webサイトではできなかったあれこれができて便利
https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
electron(旧名: Atom shell) • 各種アプリケーションで採用 ◦ VSCode(Microsoft製エディタ) ◦ Vivaldi(元OperaCEO製ブラウザ) ◦
Slack(チャット)
Atom, electronがとにかく 盛り上がっている (気がする)
アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
サーバサイドJS
• 今年の2月まではnode.js • 今年の2月からio.jsを採用 ◦ 正確には https://github.com/atom/node AtomでのサーバサイドJS
• 去年の末にnode.jsをフォークしてio.jsができる ◦ リリースサイクルを早める ▪ 新しいバージョンのV8のサポート ◦ オープンガバナンスモデル ▪ 開発過程が外から見える
▪ 他の開発者がコントリビュートしやすいように node.jsとio.js
• io.jsとnode.jsが合流するかも? ◦ node.js 3.0?(もしくは4.0, 5.0, ...) ◦ Microsoftが支援体制に入った! ▪
https://github.com/microsoft/node node.jsとio.js
• 5/14にio.jsとnode.jsが合流することに決定! ◦ node.js 3.0?(もしくは4.0, 5.0, ...) ◦ Microsoftが支援体制に入った! ▪
https://github.com/microsoft/node node.jsとio.js
おめでとうございます
アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
HTML関係のJSライブラリ
• SpacePen ◦ Atom自家製UIライブラリ Atomでの遷移
• 去年まで使われていたAtomの自家製ライブラリ • jQueryを継承した関数 ◦ class View extends jQuery (※CoffeeScriptのclassです)
• 最近はWebComponentsに対応したらしい Space pen
class NiigataMiniCamp extends View @content: -> @div => @h1 "日程"
@p "5/16 - 5/17" (new NiigataMiniCamp).appendTo "body" Space pen
• SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM
Atomでの遷移
• facebook製のUIフレームワーク ◦ サーバサイドでHTMLを生成する感じでHTML作れる • VirtualDOM, one way data flow,
jsx, flux… • Atomでは去年の7月ごろにReactで書かれたエディタがデ フォルトで使われるように ◦ jQueryからの脱却! React
• テンプレートオブジェクトからHTMLが生成される ◦ JSX記法が使えて、なんとなくPHPっぽい React var App = React.createClass({ getInitialState:
function() { return { text: click me } }, changeText: function() { this.setState({ text: clicked! }) }, render: function() { return <div onClick={this.changeText}> {this.state.text} </div> } }); React.render(<App/>, document.body); click me clicked!
• テンプレートオブジェクトからHTMLが生成される ◦ JSX記法が使えて、なんとなくPHPっぽい React var App = React.createClass({ getInitialState:
function() { return { text: click me } }, changeText: function() { this.setState({ text: clicked! }) }, render: function() { return <div onClick={this.changeText}> {this.state.text} </div> } }); React.render(<App/>, document.body); clicked! click me
• ただし、速度が落ちると困る ◦ stateが変わるたびにDOMを更新しているとリフローで遅そう • VirtualDOMは速いらしいぞ ◦ <div onClick=...>から生成されるのは実際のDOMではなくVirtualDOM ◦
VirtualDOM同士の差分を計算して、必要なところだけ一気更新するから速 いらしい ▪ さっきの例だと、textNodeだけ置き換える ▪ requestAnimationFrameのタイミングで更新? React
• SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM
• → WebComponents ◦ 男ならDOM APIを叩くべし!! Atomでの遷移
• Atomでは去年の10, 11月ごろにCustom Elementや Shadow DOMといった要素を取り入れた ◦ どちらもWebComponentsの仕様 • WebComponents
◦ Webの機能をコンポーネント化してプラグインとして使えるように ◦ 上記以外にHTML Imports, HTML Templatesを含む WebComponents
• <my-element> みたいなオレオレ要素が定義できる ◦ 既存の要素の拡張もできる Custom Element class SecCamp extends
HTMLElement { createdCallback() { this.textContent = '応募締め切りは6/22' } } secCampElem = document.registerElement('sec-camp', SecCamp) console.log(new secCampElem())
Atomでは... Custom Element
• DOMツリーをセマンティック用の構造と、見た目用の構造に 分割 ◦ 本質的でない(見た目のための)DOMを、ツリーの構成上隠すのでShadow DOM ◦ CSSセレクタ, JSからアクセスする場合は専用のAPIを使う •
今までだとiframeとかcanvasが近い Shadow DOM
Shadow DOM <div id="content">this is not shown</div> content = document.querySelector('#content')
shadow = content.createShadowRoot() shadow.textContent = 'this is in shadow' content.textContent // => 'this is not shown' content.shadowRoot.textContent // => 'this is in shadow'
• 実は身近なところに... ◦ Chrome devtoolsで ”Show user agent shadow DOM”
をチェック Shadow DOM
Shadow DOM
• 今年の2月頃からReactをやめて、直接DOM APIを叩くよう になった ◦ React依存があまりよくないという判断 ◦ Atom上では直接DOM APIを叩くほうが早かった ところで、Reactはどこに?
None
DOM API直打ち
• SpacePen ◦ Atom自家製UIライブラリ • → React.js ◦ 噂のVirtual DOM
• → WebComponents ◦ 男ならDOM APIを叩くべし!! Atomでの遷移
で、結局どれがいいんだ!
わからん!
アジェンダ 1. Atomエディタの概要 2. サーバサイドJSエンジンの変化 3. HTML周りのJSライブラリの変化 4. altJSの変化
AltJS
AltJS • JavaScriptにコンパイルできる言語の総称 ◦ 主な理由はJavaScriptを書きたくないから • 数年前から大量発生 ◦ https://github.com/jashkenas/coffeescript/wiki/List-of-languages- that-compile-to-JS
• AtomではCoffeeScript, babel, TypeScriptをサポート
CoffeeScript • Atomでは拡張子をcoffeeにすると使える • Atomはほぼこれで書かれてる • Ruby, Pythonっぽく書ける point =
() -> Math.random * 100 result = if point > 50 then 'good' else 'bad' data = name: 'tarou' result: result
babel(旧6to5) • ECMAScript6のコードをECMAScript5のコードに変換 ◦ AltJSっていうと怒られるかも...? • Atomでは "use babel" プラグマを入れると使える
class MyArray extends Array { constructor() { super() this.push('initial data') } }
TypeScript • JavaScript + 静的型付け ◦ ECMAScript6の先行実装っぽい面も • Atomでは拡張子をtsにすると使える interface
Person { name: string } function howOld(name: Person) { return "You are 39." } howOld({ name: "tamura" })
ちょっとした懸念 • CoffeeScriptで宣言したclassをbabelのclassで継承すると ちゃんと使えるの? ◦ 逆も同様 • → 今のところ(僕は)問題なかったけど不安...
まとめ
まとめ • 未だにJavaScriptのUI周辺は流動的で追うのが大変 ◦ 今回紹介した物 + angular, polymer, etc… ◦
解析もめんどくさくなってる(特にShadow DOM) • (動作環境が固定されていれば) ライブラリなしのほうが潔 いのかもしれない...? ◦ セキュリティ面で不安 誰かなんとかしてくれ~~~~
ありがとうございました