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.5k
Webサービスの終活
tyage
0
890
ディストピアブラウザ
tyage
0
2.5k
Other Decks in Technology
See All in Technology
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
エンジニア向け技術スタック情報
kauche
1
250
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
200
GitHub Copilot の概要
tomokusaba
1
130
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
420
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
410
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
340
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
130
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Making Projects Easy
brettharned
116
6.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
A better future with KSS
kneath
239
17k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
KATA
mclloyd
29
14k
Designing Experiences People Love
moore
142
24k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Visualization
eitanlees
146
16k
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) • (動作環境が固定されていれば) ライブラリなしのほうが潔 いのかもしれない...? ◦ セキュリティ面で不安 誰かなんとかしてくれ~~~~
ありがとうございました