Downloaded 23 times
More Related Content
![[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント](https://cdn.slidesharecdn.com/ss_thumbnails/grapecity-webtechforum20181207-181225045631-thumbnail.jpg?width=640&height=640&fit=bounds)
これからはじめるための JavaScript 開発環境
- 1.
- 2. 自己紹介…... ● 名前 – 東川諒央 – @biwakonbu ● 職業 – 大阪産業大学 契約助手 – 今年度で辞めます – しごとください ● 言語 – Ruby, Lisp, … – キワモノも好き
- 3.
- 4.
- 5.
- 6. JavaScript 開発環境 ● JavaScriptって綺麗に書くの難しい – デバッグするの難しい ● プログラムにルールが欲しい (フレームワーク) – jQuery は便利だけど設計に関するルールはない – C から Perl に変わった位の感動はあった ● JavaScript の下準備めんどくさい – Ruby で言う RubyGems みたいなの求む ● ページ毎のライブラリの構成管理したい – ライブラリの数が増えるともう意味不明
- 7. 生 JavaScript い汚... ● altJS 種類 – CoffeeScript ● 型ない – Haxe(ヘックス) ● 型ある – JSX ● 型ない – TypeScript ● 型ある – Dart ● 型ない 出力後のコードも綺麗 出力後のコードも綺麗
- 8. CoffeeScript ● Rails で標準採用 ●Ruby と Python から影響を受けた仕様 – Python の様に綺麗で Ruby の様に柔軟 ● コードが凄く綺麗 ● 資産の流用が出来る ● 型は無い
- 9. TypeScript ● MicroSoft 社が開発 –C# を設計した人が設計 ● CoffeeScript 程では無いけどスッキリで綺麗 ● 資産の流用も出来る ● 基本は JavaScript なので覚えやすい ● 型がある
- 10. フレームワーク ● Angular JS –何か一つだけ覚えるならコレで代替イケル (らしい) ● Backbone.js – シングルページ向きの軽量フレームワーク ● Ember.js – Backbone の対極の立ち位置でデカい ● Vue.js – 軽量 Angular とも言われてる – API 凄く少なくて学習コスト低い
- 11. ツール下準備 ● Bower っていうのがありました ●コマンド打ったら入ります ● パッケージ管理最高!! ● でもライブラリの読み込み等はやってくれない...
- 12. ライブラリ み み読込 管理 ● RequireJS あるよ ● 非同期ローディング ● HTML に設定ファイルの読み込みだけ入れれば OK
- 13. りあえず取 pick up ●環境 – TypeScript・・・言語 – Backbone・・フレームワーク – Bower・・・・・パッケージ管理 – RequireJS・・・ライブラリ読み込み管理 よし、使えるようにしてみよ う
- 14. Windows/Linux /BSD/...? ● Windowsはごめんなさい・・・ – そっちは全く詳しく無いんです – 多分なにかあるはずです!! ● Linux/BSD/... – そんなマニアックなの使ってるなら簡単ですってきっと – apt か yum か ports か Make してください
- 15. するもの用意 ● ターミナル – Xcode経由で入れたりするアレ – 使ってるだけでギークな気分の奴 ● Homebrew・・・Mac のパッケージマネージャ ● npm・・・JavaScript 系ツールはコレで入れる ● TypeScript, Bower, RequireJS, Backbone.js ● 気合い ● 負けない心
- 16.
- 17.
- 18. サンプルプロジェクト ● テキトーなディレクトリを作成して作業します ● 作ったディレクトリの中に移動します ●おもむろに実行します ● 色々聞かれますが取りあえずはデフォルトで ● そして
- 19. TypeScript + Backbone ●TypeScript で既存のライブラリを読み込む為に – 定義ファイルを用意する – 今回で言うと backbone.d.ts を用意 – 定義ファイルは GitHub で共有されています (大体は)
- 20.
- 21.
- 22.
- 23. TSD ディレクトリ構造 ● tsdコマンドを使ってインストール – ./typings/** に入ります ● ./typings/backbone ./typings/jquery 等々 ● ファイルの拡張子は *.d.ts です – backbone.d.ts, jquery.d.ts 等々 – 定義ファイルをまとめて読み込む用のファイルもある
- 24. TypeScript ● ファイル拡張子は *.tsです ● 定義ファイルを読む – 厳密には、依存関係の指定と言います ● ポイントは /// です – // と二つで書いて勝手にハマってました... – これで問題なくコンパイル出来る事を確かめます tsc・・・TypeScript の コンパイラです
- 25. use Bower ● bowerで必要なライブラリを install してください ● インストールすると ./bower_components に – デフォルトの設定ではの話
- 26.
- 27. use RequireJS ● baseUrl: –require.js 内でのベースディレクトリの指定 ● paths: – 各 JavaScript ライブラリ(bower で入れた奴) ● shims: – モジュールの依存関係、グローバル変数の定義 – 正直まだ良くわかってません...すみません...
- 28.
- 29.
- 30. 仕様 H H^^ 使用感 ● TypeScript は使い心地がは思っていたより良かった – これから使いたい – でもジェネリクスとか難しかったのは事実 – あと、まだまだコレからな言語 ● Backbone も実際にやりたかったんですが... – 能力と時間の問題で割愛... – とりあえず読み込みで ● RequireJS は簡単に触っただけでも凄かった – コンフィグで管理出来るので良い – そこはかとなく漂う Rails 感... ベネ!!
- 31.
- 32.