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のやさしい話 jQueryからの次のステップ #ndsmeetup8

6,543 views

Published on

デモの手順は、こちらにまとめましたので実際に手を動かして試す場合には参考にしてください。
http://qiita.com/civic/items/82c0184bcadc50965f91
JavaScript初心者向けの、はじめの一歩として覚えたらいいということを紹介
jQueryをscriptタグ挿入で使っているような開発者向けの内容です。npmとwebpackでビルドをするという使い方の提案です。

Published in: Technology
  • Be the first to comment

むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8

  1. 1. むずかしくない
 JavaScriptのやさしい話 jQueryからの次のステップ NDS in Niigata #8 @civic
  2. 2. おまえ、誰よ? Twitter: @civic NDS主催 Python, Java TODO:ここに輝かしい実績を入れる1 TODO:ここに輝かしい実績を入れる2
  3. 3. 今日話す内容
  4. 4. 旧来のJavaScript開発から
 一段ステップアップする
  5. 5. 初心者向けの内容です
  6. 6. JavaScript
 スキルチェック
  7. 7. いくつチェック? jQueryを使ったことがある Chrome Developer Toolを使ったことがある nodejs, npmを使っている ES6やAltJS系を使っている(ことがある) browserify, webpackなどのモジュールシステムを使って いる grunt, gulpなどのタスクランナーを使っている
  8. 8. ✓ 1∼3個ぐらいの人を対象 jQueryなんかでJavaScriptを使っている ブラウザをリロードして確認
  9. 9. 目次 JavaScript開発は覚えることが多い ステップアップのためのツール パッケージマネージャー モジュールシステム
  10. 10. 覚えることが多い JavaScript関連技術は新しい ネタがどんどん出てくる
  11. 11. Xはもう古い これからはYの時代 https://flic.kr/p/6DvWAj プクスー/
  12. 12. オッサンには時間がない いきなり全部ではなく、はじめの一歩 まずはこれらを使ってみてはどうか 困ってから新しいことを覚えていくスタイル
  13. 13. ステップアップのためのツール https://flic.kr/p/5YWuWk
  14. 14. ステップアップのツール ○ パッケージマネージャー ○ モジュールシステム ー タスクランナー ー 各種フレームワーク (今回 対象外)
  15. 15. とりあえず
 この2つを覚える パッケージマネージャー モジュールシステム
  16. 16. デモの内容 デモの内容はチュートリアル記事としてまとめ ました
 http://goo.gl/KapBRp デモの手順を手を動かして確認する場合に
 どうぞ
  17. 17. パッケージマネージャー npm
  18. 18. npm JavaScriptライブラリの管理 Java(maven), Ruby(gem), Python(pip).... 「ライブラリを取ってきてくれるツール」
  19. 19. 旧来のWebページ作成 の流れ(例) HTML作成 「jQuery使うか」 jQueryのサイトを開いてjsのダウンロード <script>タグの挿入
  20. 20. demo
  21. 21. 旧来の問題点 ライブラリのダウンロードの一貫性 <script>タグだらけ 依存関係の問題→順序大事 ライブラリAの使用にはBが必要
  22. 22. npmの場合 npm initで初期設定 npm installでライブラリをダウンロード node_modulesに配備 --save でpackage.jsonという設定ファイルに モジュール名とバージョンを記録
  23. 23. npmを使った結果www npmでインストール 統一されたダウンロード方法 package.jsonに記録 環境の再現ができる
  24. 24. demo
  25. 25. <script>の問題は? <script>タグのsrcはnode_modules? <script>タグだらけの問題は変わらない? ライブラリの依存関係は? 次に説明するモジュールシステムで解決!
  26. 26. モジュールシステム WebPack
  27. 27. モジュールシステム ライブラリの依存関係を解決 1つのJavaScriptソースファイルに結合 (モジュールバンドラー)
  28. 28. WebPack モジュールシステムの1つ npmで入れたライブラリ(モジュール)を使う時
 var $ = require("jquery"); ビルドという作業を行う
 → JavaScriptの依存関係解決、連結
  29. 29. ビルドのやり方 $ webpack (ソースjs) (出力するJS) $ webpack main.js bundle.js
  30. 30. demo
  31. 31. ね、簡単でしょ?
  32. 32. どんな利点があるのか? ライブラリを気軽に利用可能 自身が作成するコードも小さいモジュールに分割 再利用可能に
  33. 33. さらに便利に
  34. 34. ファイルの連結時に
 圧縮したい
  35. 35. ファイルの連結時に
 圧縮したい --optimize-minimize
  36. 36. ビルドされたら
 デバッグしにくい!
  37. 37. ビルドされたら
 デバッグしにくい! デバッグするときにソースが読めないじゃん source-mapを使う 元のJSと、ビルド後のJSの行とを対応づける --devtool source-map
  38. 38. そんなにオプション引数
 覚えきれない!
  39. 39. オプション引数
 覚えきれない! webpack.config.jsに記述 オプション引数なしで起動可能に また設定ファイルの書き方を覚えなければ...
  40. 40. webpack.config.js module.exports = { entry: './main.js', output: {filename: 'bundle.js'}, devtool: 'source-map', };
  41. 41. ファイル編集のたびにコマ ンドを実行するのが面倒!
  42. 42. ファイル編集のたびにコマ ンドを実行するのが面倒! ファイルの変更を監視 webpack --watch Webサーバーとして動作・自動リロード webpack-dev-server --inline
  43. 43. demo
  44. 44. なんかES6とかいう新しい JavaScriptがあるようだけど! (ちょっと難しい話)
  45. 45. なんかES6とかいう新しい JavaScriptがあるようだけど ES6(ES2015)をES5に変換する 最新のJavaScriptで書いて、現行のJavaScriptに 変換して使う npm install babel-loader
  46. 46. webpack.config.js ... module: { loaders: [{ test: /.jsx?$/, exclude: /node_modules/, loader: 'babel' }] } (※babel6では babel?presets[]=es2015)
  47. 47. ファイルのコピーとか他に も色々やりたいことがある!
  48. 48. ファイルのコピーとか他に も色々やりたいことがある! そろそろ、タスクランナーも使おうな... gulp grunt
  49. 49. まとめ
  50. 50. 今日学んだこと ライブラリモジュールの管理 npmでやろう JSのビルド(依存関係解決) webpackでやろう
  51. 51. 今日学んだこと ライブラリ
 管理 ビルド コマンド npm webpack 設定ファイル package.json webpack.config.js
  52. 52. まずはこの2つを 使うことから始めてみよう ご静聴ありがとうございました

×