姫路IT系勉強会vol.3で発表

1. ☆初心者向け(たぶん)☆
春のJavaScript祭り!
2012年3月17日
姫路IT勉強会 Vol.3
decobisu

2. じこしょうかい
☆畑 昌宏
☆兵庫県立大学大学院(今月で退院予定)
☆Twitter: decobisu
☆その他:はてな，facebook，tumblr
☆ミツバチ 工学
☆リア充爆発させたり箱文庫という読書会してます
☆色々楽しいことが好き
☆社会人にジョブチェンジ

3. 春のJavaScript祭り!

4. 祭りと言えば

5. 姫路ゆかた祭り

6. 春の祭りと言えば

8. モラエナイ!！
春のJavaScript祭り!
※春の祭りと銘打ってますが
お皿のプレゼントはありません!

9. お皿よりいいモノを
勉強して帰ろう！

10. 今日の話は
初心者っぽい人向けです

11. 「オレッちバリバリのJSer
なんでヨロシクゥ！」という方

12. ぜひ次回，発表しましょう

13. あじぇんだ
• JavaScriptってなに？
• JSことはじめ
• 初心者？
• 便利なものがあるらしい
• 実際に使ってみよう
• まとめ

14. JavaScript
そんなに書いた事がない！

15. JavaScriptってなに？
?

16. JavaScript
•歴史
•1995年, Netscape2.0にて実装．
LiveScript→JavaScript
•1997年, ECMAにより中核的な仕様がECMAScriptとし
て標準化
•2000年頃∼, GoogleやAmazonによる利用, MSが開発
した非同期通信を利用したAjaxによるブーム
•最近は色んなWebサービスやアプリ等で使用

17. JavaScript
•特徴
•オブジェクト指向スクリプト言語
•ブラウザがあれば動く(スマホでも)
•専用のエディタやコンパイラ不要
•サンプルコード多い！
•開発ツールもブラウザに最初からついてる
•ブラウザ間の実装に差がある

18. 開発が楽！
というのが重要

19. 初心者の次へ

20. 初心者？
•取り合えず動くものができると楽しい
•難しそうなコードは書けない
•中身の理解が追いつかない
•Coolにいきたい
•やる気

21. どうしよう？
•既存のものを美味しく楽しく使う
•楽に書くことを考える
•書きながら理解すべき
•先人に感謝
• 初心者→初級者へ！！！

22. JSことはじめ
（取り合えず書いてみよう）

23. jsdo.itというサービス

25. できた！

26. Hello Worldは
もう飽きた

27. やっぱり動くもの
作りたい

28. 便利なものがあるらしい
ほんとに！？

29. よく知らないから
調べてみよう
(お勉強タイム)

30. 調べてみた
• Ajax
• DOM
• JSON
• jQuery
• processing.js
• enchant.js

31. Ajax
•JavaScriptの非同期通信を利用した技術
で，Asynchronous JavaScript + XMLの略
•ユーザの操作や画面描画と並行してサーバ
と非同期通信
•ページ遷移なしでシームレスな機能を実現
•Googleやその他Web

32. DOM

33. DOM

34. DOM
•Document Object Model(DOM)
•HTML文書やXML文書をアプリケーション
から利用するためのAPI
•JavaScriptからHTMLなどの各要素を操作
•文書をツリー構造で扱える

35. JSON
•JavaScriptにおけるオブジェクト表記法を
ベースとしたデータ記述言語
•XMLより単純
•eval()関数で評価することでJavaScriptのオ
ブジェクトに変換することができる

36. ライブラリ

37. ネイティブの
JavaScriptに機能を
追加，記述を簡単に

39. jQuery
•JavaScriptを軽量で簡潔に書ける
•DOM操作と変更
•イベント
•CSS操作！
•エフェクトとアニメーション
•Ajax関連
•拡張プラグイン
•とても軽量

40. Processing.js
•Processingというプログラミング言語を
HTML5,JavaScriptに移植したライブラリ
•HTMLのcanvas要素にProcessingの処理結果を描画でき
る
•コードがわかりやすい
•ブラウザでお絵描き

41. enchant.js
•HTML5+JavaScriptベースのゲームエンジン
•ゲーム用の素材が提供
•軽量でコードも少ない
•プラグイン拡張
•学生向けのコンテストなど

42. 他にも色々あるみたいです
(なんとか.js etc...)

43. 絵書いたりとかゲーム作ったりとかは
初心者でも取っ付きやすい！！！

44. ちょっとなんか作ってデモしよう...

45. 間に合ってない

47. まとめ

48. まとめ
•JavaScriptは色々できる
•開発が楽で手を出しやすい
•作って遊べる環境が整っている
•HTML5等の技術やブラウザ環境(スマホなど)
•ライブラリも豊富にある
•デザイナーさん(CSS,HTML)

49. まとめ
•JavaScriptは色々できる
•開発が楽で手を出しやすい
•作って遊べる環境が整っている
•HTML5等の技術やブラウザ環境(スマホなど)
•ライブラリも豊富にある
•デザイナーさん(CSS,HTML)
•波

50. JavaScript
面白そう！！