SlideShare a Scribd company logo
1 of 22
Download to read offline
altJSの選び方
terurou
デンキヤギ株式会社
2014/06/21
自己紹介
1
自己紹介/所属等
• デンキヤギ株式会社 代表取締役
• 社員, フリーランス, 協業企業 募集してます
• DSTokai管理人
• 東海地方のメタコミュニティ
• IT勉強会カレンダーっぽいやつの東海地方版
• NGK(名古屋合同懇親会)
• エンジニア向けクロスコミュニティ忘年会
• ここ数年は100人超の参加者
2
自己紹介/技術領域
• フロントエンドアーキテクト(自称)
• 大量データ×フロントエンドが専門?
• 数百万件以上をストレスレスに操作
• 100万件を編集するExcelっぽいヤツとか…
• バックエンド込みのアーキテクチャ設計から
フレームワーク・コンポーネント実装まで
• 最近はHaxe製SPAフレームワークとか
• Haxe/JS歴2年, その他にWPF, Silverlight等
• JavaScript歴は12年ぐらい
3
altJSとは?
4
altJSとは?
• Alternative JavaScript
• JavaScriptの代替プログラミング言語
コンパイル
altJSで書かれた
ソースコード
JavaScriptの
ソースコード
5
なぜaltJSが必要なの?
6
JavaScriptが色々つらい
7
JavaScriptのつらいところ
• 言語仕様が難しく、柔軟すぎる
• prototype, thisスコープ, クラスっぽい何か
• 人やライブラリによってコードスタイルが
大きな差異がある
• 結果的にレビュー, ドキュメントが増加…
• 動的型付け
• 静的型付けよりもバグ混入の可能性が高い
• 学習コストの上昇, 保守性の低下へ…
8
それ ECMAScript 6 で…
• 使える時代が来るまで待つのが…
• 2014年12月を目標に仕様策定中
• 仕様に従ったブラウザが来るのはその後
• IE13以上?が普及した時代が来れば…
• ES6が来ても全てが解決する訳ではない
• 仕方ないのでJavaScriptは生成しましょう
9
altJSを選ぶ
10
altJSは100種類以上…
https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS
11
とりあえずメジャーなaltJSに絞る
• TypeScript
• 今一番の注目株
• 最近1.0がリリースされ、本も3冊出版された
• Haxe
• マルチプラットフォーム言語
• CoffeeScript
• Railsに採用されている
安定性, 採用実績, 国内外のユーザ数, 将来性等を
考慮すると、このあたり(2014年6月時点)
12
ここから更に選定するためのポイント
• 静的型付け or 動的型付け
• 世間の流れは静的型付け
• 静的型付けの方が開発効率や品質面で有利
• 前はそうでもなかったが、技術は進歩する
• 開発対象
• Web? マルチプラットフォーム? …
• Rails? PHP? Java? ASP.NET? …
• メンバーの学習コスト
• 既に習得済み? 近くの人に聞ける? 本は?
• 過去にやったことがある言語に似てる?
13
TypeScript
• モダンな言語仕様
• ECMAScript 6に似た構文(ES6の先行実装)
• 静的型, 型推論, 構造的部分型, …
• 開発体制, 品質が信用できる(Microsoft製)
• 開発環境, 日本語情報が整備されている
• コンパイルが遅い(数秒から十数秒)
• 実際はバックグラウンドコンパイルするので
遅さが気になる場面は限定されるが…
14
Haxe
• 構文は少し古臭いが、高度な言語機能
• ActionScript 3やC#に似た構文
• 静的型, 型推論, 構造的部分型, 代数的データ型,
マクロ(AST変換)等、TypeScriptより高機能
• 若干JavaScriptとの親和性が低い
• マルチプラットフォーム
• JS以外にFlash, PHP, C++, C#, Java等
• 超高速コンパイル(数万行でも1秒未満)
• なぜか名古屋と福岡にユーザが多い
15
CoffeeScript
• JavaScriptの構文をとにかく軽量化
• Rubyに似ており、記述するのは非常に楽
• が、前提知識がないとコードが読めない
• 動的型付け
• altJSの草分け的存在
• Railsに採用されている
• 歴史的経緯から現在のユーザ数は多いが、
今後のユーザ増加は望み薄っぽい
16
まとめ
17
結局どれ?(個人の見解)
• TypeScript
• 特に決め手がなければコレ
• 日本語文献(書籍, Web)が多数、今後も増える
• Haxe
• マルチプラットフォーム、ゲーム開発
• ML由来の高度な型システムとmacroが欲しい
• コンパイルが遅い言語は使いたくない
• CoffeeScript
• Rails案件または既にユーザであれば…
• 今から決め手もなく選択するのは、うーん…
18
altJSを使わないという選択肢もある
検討した結果、altJSを使うメリットがない
ケースも当然存在する
• jQueryでちょっとEffectをつける程度
• 俺たちはJavaScript忍者だ
• altJSとか信用できない
でも、altJSを適用すべき範囲は結構広い
19
全てをaltJSに置き換える必要もない
• ツールからJavaScriptすることが一般化
• Flash/CreateJSで書きだしたりとか
• 生成コードをaltJSに書き直しとかありえない
• altJSとJavaScriptが混在する開発スタイル,
アーキテクチャは当たり前
• メンバー構成や担当作業に最適化
• もちろん無秩序にならないように設計は必要
20
個人的には Haxe 推しです
今回の発表では詳細な解説は
全てすっ飛ばしたので、
質問・クレームは @terurou まで
21

More Related Content

What's hot

アプリしか作れないけどAzureに触ってみた #ngtnet
アプリしか作れないけどAzureに触ってみた #ngtnetアプリしか作れないけどAzureに触ってみた #ngtnet
アプリしか作れないけどAzureに触ってみた #ngtnet
Kazumune Katagiri
 
Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築
AimingStudy
 
オープンデータのためのスクレイピング
オープンデータのためのスクレイピングオープンデータのためのスクレイピング
オープンデータのためのスクレイピング
直之 伊藤
 

What's hot (20)

サブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in express
サブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in expressサブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in express
サブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in express
 
グラフ解析で社長の脳内さらす!
グラフ解析で社長の脳内さらす!グラフ解析で社長の脳内さらす!
グラフ解析で社長の脳内さらす!
 
アプリしか作れないけどAzureに触ってみた #ngtnet
アプリしか作れないけどAzureに触ってみた #ngtnetアプリしか作れないけどAzureに触ってみた #ngtnet
アプリしか作れないけどAzureに触ってみた #ngtnet
 
Node.jsで使えるファイルDB"NeDB"のススメ
Node.jsで使えるファイルDB"NeDB"のススメNode.jsで使えるファイルDB"NeDB"のススメ
Node.jsで使えるファイルDB"NeDB"のススメ
 
BluemixでサクッとIoT ! ~ IoT Foundation, Node-RED や Azure Event Hub との連携もお助けヾ(o´∀`o)ノ
BluemixでサクッとIoT ! ~ IoT Foundation, Node-RED や Azure Event Hub との連携もお助けヾ(o´∀`o)ノBluemixでサクッとIoT ! ~ IoT Foundation, Node-RED や Azure Event Hub との連携もお助けヾ(o´∀`o)ノ
BluemixでサクッとIoT ! ~ IoT Foundation, Node-RED や Azure Event Hub との連携もお助けヾ(o´∀`o)ノ
 
Webサービスのコンテンツパターン 或いはデータの活⽤
Webサービスのコンテンツパターン 或いはデータの活⽤Webサービスのコンテンツパターン 或いはデータの活⽤
Webサービスのコンテンツパターン 或いはデータの活⽤
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
Nodeにしましょう
 
Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築Node.jsではじめるサーバ構築
Node.jsではじめるサーバ構築
 
ガチリアルな修羅チーム開発
ガチリアルな修羅チーム開発ガチリアルな修羅チーム開発
ガチリアルな修羅チーム開発
 
オープンデータのためのスクレイピング
オープンデータのためのスクレイピングオープンデータのためのスクレイピング
オープンデータのためのスクレイピング
 
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
 
NuxtJS + REST APIで運用中サービスをNuxtJS + GraphQLに変更したことによる光と影
NuxtJS + REST APIで運用中サービスをNuxtJS + GraphQLに変更したことによる光と影NuxtJS + REST APIで運用中サービスをNuxtJS + GraphQLに変更したことによる光と影
NuxtJS + REST APIで運用中サービスをNuxtJS + GraphQLに変更したことによる光と影
 
A/BテストをAzure×Googleアナリティクスで試してみました。
A/BテストをAzure×Googleアナリティクスで試してみました。A/BテストをAzure×Googleアナリティクスで試してみました。
A/BテストをAzure×Googleアナリティクスで試してみました。
 
ご注文は構成管理ですか??
ご注文は構成管理ですか??ご注文は構成管理ですか??
ご注文は構成管理ですか??
 
Microsoft機械学習の簡単な紹介
Microsoft機械学習の簡単な紹介Microsoft機械学習の簡単な紹介
Microsoft機械学習の簡単な紹介
 
Python Tip LT 20210805 nlog2n2
Python Tip LT  20210805 nlog2n2Python Tip LT  20210805 nlog2n2
Python Tip LT 20210805 nlog2n2
 
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
 
脆弱性検知ツールVulsを試してみた
脆弱性検知ツールVulsを試してみた脆弱性検知ツールVulsを試してみた
脆弱性検知ツールVulsを試してみた
 
S14 t3 yosuke_yamashita
S14 t3 yosuke_yamashitaS14 t3 yosuke_yamashita
S14 t3 yosuke_yamashita
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
 

Viewers also liked

altJS勉強会「Haxeすごいからみんな使え!」
altJS勉強会「Haxeすごいからみんな使え!」altJS勉強会「Haxeすごいからみんな使え!」
altJS勉強会「Haxeすごいからみんな使え!」
政樹 尾野
 
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
terurou
 
ネタじゃないScala.js
ネタじゃないScala.jsネタじゃないScala.js
ネタじゃないScala.js
takezoe
 
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
Dmitry Soshnikov
 
Type-safe front-end development with Scala
Type-safe front-end development with ScalaType-safe front-end development with Scala
Type-safe front-end development with Scala
takezoe
 

Viewers also liked (15)

altJS勉強会「Haxeすごいからみんな使え!」
altJS勉強会「Haxeすごいからみんな使え!」altJS勉強会「Haxeすごいからみんな使え!」
altJS勉強会「Haxeすごいからみんな使え!」
 
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
 
Full Stack Scala
Full Stack ScalaFull Stack Scala
Full Stack Scala
 
ネタじゃないScala.js
ネタじゃないScala.jsネタじゃないScala.js
ネタじゃないScala.js
 
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
HelsinkiJS meet-up. Dmitry Soshnikov - ECMAScript 6
 
Elm overview
Elm overviewElm overview
Elm overview
 
Scala初心者がPlay/ScalaでロックなWebアプリを作ったお話
Scala初心者がPlay/ScalaでロックなWebアプリを作ったお話Scala初心者がPlay/ScalaでロックなWebアプリを作ったお話
Scala初心者がPlay/ScalaでロックなWebアプリを作ったお話
 
Purescript with Monad
Purescript with MonadPurescript with Monad
Purescript with Monad
 
cocos2d-xおよび開発ツールについて
cocos2d-xおよび開発ツールについてcocos2d-xおよび開発ツールについて
cocos2d-xおよび開発ツールについて
 
IdrisでWebアプリを書く
IdrisでWebアプリを書くIdrisでWebアプリを書く
IdrisでWebアプリを書く
 
Type-safe front-end development with Scala
Type-safe front-end development with ScalaType-safe front-end development with Scala
Type-safe front-end development with Scala
 
Cocos2d-x(JS) ハンズオン #07「新エディタ Cocos Creator v1.0」
Cocos2d-x(JS) ハンズオン #07「新エディタ Cocos Creator v1.0」Cocos2d-x(JS) ハンズオン #07「新エディタ Cocos Creator v1.0」
Cocos2d-x(JS) ハンズオン #07「新エディタ Cocos Creator v1.0」
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScript
 
何となく勉強した気分になれるパーサ入門
何となく勉強した気分になれるパーサ入門何となく勉強した気分になれるパーサ入門
何となく勉強した気分になれるパーサ入門
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
 

Similar to altJSの選び方

Upwind Technology, Inc. Company Profile(Japanese)
Upwind Technology, Inc. Company Profile(Japanese)Upwind Technology, Inc. Company Profile(Japanese)
Upwind Technology, Inc. Company Profile(Japanese)
Upwind Technology Inc.
 
プロダクトマネージャーはエンジニアリングマネージャーになれるのか
プロダクトマネージャーはエンジニアリングマネージャーになれるのかプロダクトマネージャーはエンジニアリングマネージャーになれるのか
プロダクトマネージャーはエンジニアリングマネージャーになれるのか
Atsumi Kawashima
 

Similar to altJSの選び方 (20)

CTOの考えるエンジニアマネジメント2
CTOの考えるエンジニアマネジメント2CTOの考えるエンジニアマネジメント2
CTOの考えるエンジニアマネジメント2
 
エンジニアのキャリアを考える
エンジニアのキャリアを考えるエンジニアのキャリアを考える
エンジニアのキャリアを考える
 
PCCC21:株式会社日立製作所 「研究開発力向上のための研究DXソリューション」
PCCC21:株式会社日立製作所 「研究開発力向上のための研究DXソリューション」PCCC21:株式会社日立製作所 「研究開発力向上のための研究DXソリューション」
PCCC21:株式会社日立製作所 「研究開発力向上のための研究DXソリューション」
 
サービスデザイン思考×ピクト図解 V1.1
サービスデザイン思考×ピクト図解 V1.1 サービスデザイン思考×ピクト図解 V1.1
サービスデザイン思考×ピクト図解 V1.1
 
Bp study bmg_ピクト図解_20140226_v2_公開用
Bp study bmg_ピクト図解_20140226_v2_公開用Bp study bmg_ピクト図解_20140226_v2_公開用
Bp study bmg_ピクト図解_20140226_v2_公開用
 
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
 
失敗しない仮想化環境の設計・構築法
失敗しない仮想化環境の設計・構築法失敗しない仮想化環境の設計・構築法
失敗しない仮想化環境の設計・構築法
 
Upwind Technology, Inc. Company Profile(Japanese)
Upwind Technology, Inc. Company Profile(Japanese)Upwind Technology, Inc. Company Profile(Japanese)
Upwind Technology, Inc. Company Profile(Japanese)
 
ビジネスパーソンのためのDX入門講座エッセンス版
ビジネスパーソンのためのDX入門講座エッセンス版ビジネスパーソンのためのDX入門講座エッセンス版
ビジネスパーソンのためのDX入門講座エッセンス版
 
開発現場から考える プロジェクトで活躍する 新入社員の育て方とは?
開発現場から考えるプロジェクトで活躍する新入社員の育て方とは?開発現場から考えるプロジェクトで活躍する新入社員の育て方とは?
開発現場から考える プロジェクトで活躍する 新入社員の育て方とは?
 
マイクロソフトにおけるエバンジェリズム活動
マイクロソフトにおけるエバンジェリズム活動マイクロソフトにおけるエバンジェリズム活動
マイクロソフトにおけるエバンジェリズム活動
 
楽天の中のわたしと勉強会
楽天の中のわたしと勉強会楽天の中のわたしと勉強会
楽天の中のわたしと勉強会
 
自治体のデータ利活用ポイント(20171025)
自治体のデータ利活用ポイント(20171025)自治体のデータ利活用ポイント(20171025)
自治体のデータ利活用ポイント(20171025)
 
日本仮想化技術株式会社のインターンシッププログラムについて
日本仮想化技術株式会社のインターンシッププログラムについて日本仮想化技術株式会社のインターンシッププログラムについて
日本仮想化技術株式会社のインターンシッププログラムについて
 
サービス×現場
サービス×現場サービス×現場
サービス×現場
 
プロダクトマネージャーはエンジニアリングマネージャーになれるのか
プロダクトマネージャーはエンジニアリングマネージャーになれるのかプロダクトマネージャーはエンジニアリングマネージャーになれるのか
プロダクトマネージャーはエンジニアリングマネージャーになれるのか
 
最新技術でここまでできる!VR・AR・MRの活用と一歩先行くテレワーク
最新技術でここまでできる!VR・AR・MRの活用と一歩先行くテレワーク最新技術でここまでできる!VR・AR・MRの活用と一歩先行くテレワーク
最新技術でここまでできる!VR・AR・MRの活用と一歩先行くテレワーク
 
仮想環境の設計手法
仮想環境の設計手法仮想環境の設計手法
仮想環境の設計手法
 
クラウドとは何か
クラウドとは何かクラウドとは何か
クラウドとは何か
 
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasiaサンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
 

More from terurou

FIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScriptFIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScript
terurou
 
Metro Style AppsでMSIL ver.2012/06/09
Metro Style AppsでMSILver.2012/06/09Metro Style AppsでMSILver.2012/06/09
Metro Style AppsでMSIL ver.2012/06/09
terurou
 
Scala×silverlight
Scala×silverlightScala×silverlight
Scala×silverlight
terurou
 
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミングDLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
 
クラウドGPS(仮)
クラウドGPS(仮)クラウドGPS(仮)
クラウドGPS(仮)
terurou
 

More from terurou (20)

Webブラウザ上で動作する帳票エンジンを作る話
Webブラウザ上で動作する帳票エンジンを作る話Webブラウザ上で動作する帳票エンジンを作る話
Webブラウザ上で動作する帳票エンジンを作る話
 
自社サービスでDurable Functionsを採用した話
自社サービスでDurable Functionsを採用した話自社サービスでDurable Functionsを採用した話
自社サービスでDurable Functionsを採用した話
 
Computation Expressions for Haxe
Computation Expressions for HaxeComputation Expressions for Haxe
Computation Expressions for Haxe
 
デンキヤギの採用の考え方
デンキヤギの採用の考え方デンキヤギの採用の考え方
デンキヤギの採用の考え方
 
Vue.jsをhaxeで
Vue.jsをhaxeでVue.jsをhaxeで
Vue.jsをhaxeで
 
MQTTとAMQPと.NET
MQTTとAMQPと.NETMQTTとAMQPと.NET
MQTTとAMQPと.NET
 
DataGridを自前実装する話
DataGridを自前実装する話DataGridを自前実装する話
DataGridを自前実装する話
 
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxeオブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
 
動的なILの生成と編集
動的なILの生成と編集動的なILの生成と編集
動的なILの生成と編集
 
FIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScriptFIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScript
 
大規模なJavaScript開発の話
大規模なJavaScript開発の話大規模なJavaScript開発の話
大規模なJavaScript開発の話
 
Metro Style AppsでMSIL ver.2012/06/09
Metro Style AppsでMSILver.2012/06/09Metro Style AppsでMSILver.2012/06/09
Metro Style AppsでMSIL ver.2012/06/09
 
Metro Style AppsでMSIL
Metro Style AppsでMSILMetro Style AppsでMSIL
Metro Style AppsでMSIL
 
Yet Another DLR for Silverlightの試作
Yet Another DLR for Silverlightの試作Yet Another DLR for Silverlightの試作
Yet Another DLR for Silverlightの試作
 
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
 
CommonJSの話
CommonJSの話CommonJSの話
CommonJSの話
 
Scala×silverlight
Scala×silverlightScala×silverlight
Scala×silverlight
 
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミングDLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
 
Iron Python / Iron Ruby で .NET Programming
Iron Python / Iron Ruby で .NET ProgrammingIron Python / Iron Ruby で .NET Programming
Iron Python / Iron Ruby で .NET Programming
 
クラウドGPS(仮)
クラウドGPS(仮)クラウドGPS(仮)
クラウドGPS(仮)
 

altJSの選び方