SlideShare a Scribd company logo
とフロントエンド
知っておかなければならない、今と未来の話
@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

PDF
最近のフロントエンドツールの紹介
PDF
Node.jsでブラウザメッセンジャー
PDF
Node.js を選ぶとき 選ばないとき
PPT
Node.js で Web アプリ開発
PPTX
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
PDF
Hello, Node.js
PDF
Node.js基礎の基礎 - Miyazaki.js vol.2
PPTX
Node.js Hands-On
最近のフロントエンドツールの紹介
Node.jsでブラウザメッセンジャー
Node.js を選ぶとき 選ばないとき
Node.js で Web アプリ開発
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Hello, Node.js
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js Hands-On

What's hot (20)

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

Viewers also liked (7)

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

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

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

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