Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

これからはじめるための JavaScript 開発環境

11,382 views

Published on

JavaScript をこれからはじめるために環境をセットアップする

Published in: Engineering
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

これからはじめるための JavaScript 開発環境

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

×