SlideShare a Scribd company logo
1 of 32
Download to read offline
とフロントエンド
知っておかなければならない、今と未来の話
@axross
話す人
Kohei Asai
@axross
Trifort, Inc.
UI/UX design division
Client-side JS, Node,
React, AngularJS, express, etc..
Nodeとは
よくある勘違い
'Node.js' === 'リアルタイムに強いJavascriptサーバサイド処理系' // false
まだこんな恥ずかしい勘違いしてる人、いませんよね?
(それなりに) 正しい認識
'Node.js' === ‘ノンブロッキングI/Oを持つJavascript CLI実行環境'
• CLI、Google V8
• シングルスレッド+イベントループ
• ノンブロッキングI/O
• 高い次元でのモジューラビリティ
• リアルタイム (関係ない)
どうでもいい知識
正式名称は「Node」です
When referring to the software or the project in general, it's
Node.js or simply Node. It is a proper noun, so capitalize it. The
.js appears with the first use, to disambiguate from other things
called "Node", and Node (without the .js) afterwards. One way to
think of this is that Node.js is the full name, and Node is the
more familiar first name.
なぜ
フロントエンドエンジニアでも
Nodeなのか
なぜ
フロントエンドエンジニアでも
Nodeなのか
• NodeのAPIやエコシステムがクライアントサイドJSで
も利用できる(ようになる)ケース増えてきた
• Javascriptという既知の言語によるLLとしての利用
• Isomorphic Javascriptという未来
Nodeのノウハウが
クライアントサイドJSでも
利用できるようになる
require()とか、
もう使ってるでしょ?
CommonJSスタイルのモジュールの仕組み
npmでも
npmに公開されているパッケージの中には、
NodeでもクライアントサイドJSでも
同じように使えるものが増えてきた
ネイティブAPIすらも
Stream API (Nodeでファイルの流れを扱う)
クライアントサイドJSにも実装すべく、
仕様策定中とのこと。
詳しい話はまた今度..
LLとしての利用
Javascript、得意でしょ?
我々はJavascriptとともに苦しみ、
時にはMicros●ftを罵り、
いろんな苦悩の末にやってきたはず
もはやJavascriptは、自分の手足のように動かせる
自動化したいことは
たくさんある
• API叩きまくってデータを取る
• Webスクレイピング、サンプルデータの作成
• 設定の整備とか
• 開発環境をよしなに
僕らにもできる!
RubyistやPythonista、
彼らはそういうタスクをコードで行っている
何で僕たちはできないのか?できるだろ?!
そう、Nodeがある!
Isomorphic Javascript
Javascript Lv.999
Javascriptはもはや、
「装飾のためのスクリプト」ではない
Ajaxの流行を境に、DOMを動かす立場に
そしてもはや、DOMの世界の支配者とも言える
MVWな
クライアントサイドWAFの隆盛
Bakcbone.js,
Knockout.js,
Ember.js,
AngularJS,
Vue.js,
Aurelia,
React.js(ちょっと違うけど),
Riot.js(ちょっと違うけど) ..
Javascript Application
それは、
すべてのDOM操作
HTTPリクエストの取り扱い
すべてをJavascriptが行い、
アプリケーションを構成する未来
サーバサイドもNodeだったら
クライアントサイドとサーバサイドの垣根を排除
いま2つに分かれてしまっている
ビジネスロジックを1つにできる
再利用性! 保守性! スケーラビリティィィ!!!
僕たちのWebは元来、そういうものだったはずだ!
Isomorphicな例
• ValidatorやServiceの使い回し
• 同じものをrequire()するだけ
• 同じロジックが別の実装で2つあるってそもそも
おかしいのでは
• Model層の共通化
• サーバーとクライアントでインターフェースが
統一される
• SEO的なアレ
• JS Applicationのサーバーサイドレンダリング
未来だ!!!!!!!1111
もはや言い訳は許されない
逃げていたら、死ぬだけ
GitHubのデザイナーの話
デザイナーとデベロッパーが
分かれている時代は
いずれ終わる
GitHubのデザイナーの話 (2)
僕の中では (勝手に) 有名な話
すべてを100%できろ、とは言わない
クライアントサイド80%、サーバサイド20%でもいい
お互いの分野を知り合うことが大事
GitHubのデザイナーの話 (3)
もっとコミュニケーションはしやすくなる、
もっと速く作れるようになる
もっとチャレンジングで
もっとエキサイティングで
価値あるプロダクトに取り組めるようになる
さあ、Nodeをはじめよう
とはいえ、
急にそんなこと
言われても困る..
Node ワークショップ
やります!!!!!!
適当なツール作ってNodeの基礎を学ぶ
近日予定、詳細未定、他ディヴィジョン歓迎
興味のある人はご一報ください
=> UI/UX div. 僕 まで
ご清聴
ありがとうございました

More Related Content

What's hot

TypeScriptへの入口
TypeScriptへの入口TypeScriptへの入口
TypeScriptへの入口Sunao Tomita
 
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」Shunsuke Watanabe
 
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみるづや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみるzuya
 
サーバサイドNodeの使い道
サーバサイドNodeの使い道サーバサイドNodeの使い道
サーバサイドNodeの使い道pospome
 
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしようNode.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしようYuusuke Takeuchi
 
Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリットSails.jsのメリット・デメリット
Sails.jsのメリット・デメリットIto Kohta
 
Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築AimingStudy
 
AngularJS2でつまづいたこと
AngularJS2でつまづいたことAngularJS2でつまづいたこと
AngularJS2でつまづいたことTakehiro Takahashi
 
Node.js×mongo dbで3年間サービス運用してみた話
Node.js×mongo dbで3年間サービス運用してみた話Node.js×mongo dbで3年間サービス運用してみた話
Node.js×mongo dbで3年間サービス運用してみた話leverages_event
 
worker_threadsを使った実装の勘所
worker_threadsを使った実装の勘所worker_threadsを使った実装の勘所
worker_threadsを使った実装の勘所yo_waka
 
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011Hiroh Satoh
 
MVCフレームワーク Sails.jsについて機能紹介
MVCフレームワーク Sails.jsについて機能紹介MVCフレームワーク Sails.jsについて機能紹介
MVCフレームワーク Sails.jsについて機能紹介kamiyam .
 
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発Shuichi Takaya
 
Node.jsに縁のない職場でnode.jsを使い始める戦術
Node.jsに縁のない職場でnode.jsを使い始める戦術Node.jsに縁のない職場でnode.jsを使い始める戦術
Node.jsに縁のない職場でnode.jsを使い始める戦術Isamu Suzuki
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
NodeにしましょうYuzo Hebishima
 

What's hot (20)

Nodeについて
NodeについてNodeについて
Nodeについて
 
TypeScriptへの入口
TypeScriptへの入口TypeScriptへの入口
TypeScriptへの入口
 
Node js 入門
Node js 入門Node js 入門
Node js 入門
 
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
 
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみるづや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
 
Node.js入門
Node.js入門Node.js入門
Node.js入門
 
サーバサイドNodeの使い道
サーバサイドNodeの使い道サーバサイドNodeの使い道
サーバサイドNodeの使い道
 
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしようNode.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
 
Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリットSails.jsのメリット・デメリット
Sails.jsのメリット・デメリット
 
Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築
 
AngularJS2でつまづいたこと
AngularJS2でつまづいたことAngularJS2でつまづいたこと
AngularJS2でつまづいたこと
 
20131012 nodejs
20131012 nodejs20131012 nodejs
20131012 nodejs
 
Node.js×mongo dbで3年間サービス運用してみた話
Node.js×mongo dbで3年間サービス運用してみた話Node.js×mongo dbで3年間サービス運用してみた話
Node.js×mongo dbで3年間サービス運用してみた話
 
worker_threadsを使った実装の勘所
worker_threadsを使った実装の勘所worker_threadsを使った実装の勘所
worker_threadsを使った実装の勘所
 
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
 
MVCフレームワーク Sails.jsについて機能紹介
MVCフレームワーク Sails.jsについて機能紹介MVCフレームワーク Sails.jsについて機能紹介
MVCフレームワーク Sails.jsについて機能紹介
 
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
 
Node.jsに縁のない職場でnode.jsを使い始める戦術
Node.jsに縁のない職場でnode.jsを使い始める戦術Node.jsに縁のない職場でnode.jsを使い始める戦術
Node.jsに縁のない職場でnode.jsを使い始める戦術
 
Bp study39 nodejs
Bp study39 nodejsBp study39 nodejs
Bp study39 nodejs
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
Nodeにしましょう
 

Viewers also liked

10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話takehiko yoshida
 
Java script初心者のためのnode.jsで学ぶドローン制御プログラミング
Java script初心者のためのnode.jsで学ぶドローン制御プログラミングJava script初心者のためのnode.jsで学ぶドローン制御プログラミング
Java script初心者のためのnode.jsで学ぶドローン制御プログラミング健一 茂木
 
Node.js Tutorial at Hiroshima
Node.js Tutorial at HiroshimaNode.js Tutorial at Hiroshima
Node.js Tutorial at HiroshimaYoshihiro Iwanaga
 
さくらのVPS で IPv4 over IPv6ルータの構築
さくらのVPS で IPv4 over IPv6ルータの構築さくらのVPS で IPv4 over IPv6ルータの構築
さくらのVPS で IPv4 over IPv6ルータの構築Tomocha Potter
 
libpgenでパケット操作
libpgenでパケット操作libpgenでパケット操作
libpgenでパケット操作slankdev
 

Viewers also liked (7)

Node canvas
Node canvasNode canvas
Node canvas
 
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
 
JUNOS: OSPF and BGP
JUNOS: OSPF and BGPJUNOS: OSPF and BGP
JUNOS: OSPF and BGP
 
Java script初心者のためのnode.jsで学ぶドローン制御プログラミング
Java script初心者のためのnode.jsで学ぶドローン制御プログラミングJava script初心者のためのnode.jsで学ぶドローン制御プログラミング
Java script初心者のためのnode.jsで学ぶドローン制御プログラミング
 
Node.js Tutorial at Hiroshima
Node.js Tutorial at HiroshimaNode.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
 
さくらのVPS で IPv4 over IPv6ルータの構築
さくらのVPS で IPv4 over IPv6ルータの構築さくらのVPS で IPv4 over IPv6ルータの構築
さくらのVPS で IPv4 over IPv6ルータの構築
 
libpgenでパケット操作
libpgenでパケット操作libpgenでパケット操作
libpgenでパケット操作
 

Similar to Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −

ななめ45°から見たJavaOne
ななめ45°から見たJavaOneななめ45°から見たJavaOne
ななめ45°から見たJavaOneAdvancedTechNight
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...Naoya Ito
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】Yasuhito Yabe
 
JSON Value into Power Automate
JSON Value into Power AutomateJSON Value into Power Automate
JSON Value into Power AutomateTomoyuki Obi
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実Takumi Ohashi
 
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Tokuhiro Matsuno
 
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!Hiroshi Hayakawa
 
javascript を Xcode でテスト
javascript を Xcode でテストjavascript を Xcode でテスト
javascript を Xcode でテストYoichiro Sakurai
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2Moto Yan
 
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5ゲームだけじゃないHTML5
ゲームだけじゃないHTML5Osamu Shimoda
 
はじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたい
はじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたいはじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたい
はじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたいKazumi IWANAGA
 
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッションKei Nakazawa
 
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansaiJavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansaiTomohiro Kumagai
 
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所真吾 吉田
 
AWSでオーバーレイネットワーク ハイパフォーマンスマルチキャストの実現
AWSでオーバーレイネットワーク ハイパフォーマンスマルチキャストの実現AWSでオーバーレイネットワーク ハイパフォーマンスマルチキャストの実現
AWSでオーバーレイネットワーク ハイパフォーマンスマルチキャストの実現Shinji Ito
 
2014-10-27 #ssmjp 腹を割って話そう (運用xセキュリティ)
2014-10-27 #ssmjp 腹を割って話そう (運用xセキュリティ)2014-10-27 #ssmjp 腹を割って話そう (運用xセキュリティ)
2014-10-27 #ssmjp 腹を割って話そう (運用xセキュリティ)Operation Lab, LLC.
 

Similar to Nodeとフロントエンド − 知っておかなければならない、今と未来の話 − (20)

ななめ45°から見たJavaOne
ななめ45°から見たJavaOneななめ45°から見たJavaOne
ななめ45°から見たJavaOne
 
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
SmartPhone development guide with CoffeeScript + Node + HTML5 Technology, for...
 
Groovyコンファレンス
GroovyコンファレンスGroovyコンファレンス
Groovyコンファレンス
 
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
 
JSON Value into Power Automate
JSON Value into Power AutomateJSON Value into Power Automate
JSON Value into Power Automate
 
Synquery ja
Synquery jaSynquery ja
Synquery ja
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
 
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
 
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
 
javascript を Xcode でテスト
javascript を Xcode でテストjavascript を Xcode でテスト
javascript を Xcode でテスト
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
 
はじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたい
はじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたいはじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたい
はじめての Bluemix でシングルサインオン ~ 雲間を越えて、つなげたい
 
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
 
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansaiJavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
 
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
 
AWSでオーバーレイネットワーク ハイパフォーマンスマルチキャストの実現
AWSでオーバーレイネットワーク ハイパフォーマンスマルチキャストの実現AWSでオーバーレイネットワーク ハイパフォーマンスマルチキャストの実現
AWSでオーバーレイネットワーク ハイパフォーマンスマルチキャストの実現
 
2014-10-27 #ssmjp 腹を割って話そう (運用xセキュリティ)
2014-10-27 #ssmjp 腹を割って話そう (運用xセキュリティ)2014-10-27 #ssmjp 腹を割って話そう (運用xセキュリティ)
2014-10-27 #ssmjp 腹を割って話そう (運用xセキュリティ)
 
マイクロソフトが考えるAI活用のロードマップ
マイクロソフトが考えるAI活用のロードマップマイクロソフトが考えるAI活用のロードマップ
マイクロソフトが考えるAI活用のロードマップ
 
覚醒!JavaScript
覚醒!JavaScript覚醒!JavaScript
覚醒!JavaScript
 

Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −