O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

11.403 visualizações

Publicada em

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

Publicada em: Engenharia
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

これからはじめるための 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. 最後に、 良い職場あったらおしえてください

×