Web勉強会（HTML+CSS+JS入門の入門） - 2012/11/16

入門の入門として仲間内で発表しました。分かりやすさを優先しています。HTML+CSS+JSでできること、とりまくキャリア・職業、世界のナベアツに学ぶFizzBuzz。2012/11/16 Web勉強会（HTML+CSS+JS入門の入門）

Transcript

1. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. Web勉強会（HTML+CSS+JS入門の入門） - どうやって学び、何に役立つのか - 内山 紀明 2012/11/16 1
2. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. • 内山 紀明（うちやま のりあき） – 株式会社リクルートホールディングス – 株式会社Media Shakers • 普段『R25』のデジタル企画（主にアプリ）やってます • R25（アールニジュウゴ） – web R25 http://r25.yahoo.co.jp/ – R25 for Smartphone http://r25rd.jp/spapp • 趣味でプログラミングもしています – Heroku + Rails + jQuery • http://guevara.27th.celebration-day.com/ • http://shusei.27th.celebration-day.com/ 自己紹介 2012/11/16 2 @noriaki noriaki.uchiyama
3. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 今日のお題 • HTML+CSS+JSでどんなことができるのか • これらを取り巻くキャリアにはどんなものがあるのか • 習うより慣れろ。実際に作ってみる「世界のナベアツ」 2012/11/16 3
4. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. HTML+CSS+JSで どんなことができるのか 2012/11/16 4
5. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. HTMLって？ 2012/11/16 5 タグとかでなんか書くと ホームページができるんでしょ
6. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. CSSって？ 2012/11/16 6 スタイルシートって言うんでしょ。 なんかデザインで使うらしいよ
7. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. Javascriptって？ 2012/11/16 7 こう画面がぐいーんって動いたり アニメーションしたりするんでしょ
8. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. だいたいあってる 2012/11/16 8
9. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. HTML+CSS+JSでできること • UI（サイト、ブログ、キャンペーンページ） 2012/11/16 9 Gmail 演奏できるロゴ http://jsfiddle.net/noriaki/eT9k7/show/
10. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. HTML+CSS+JSでできること • メール 2012/11/16 10
11. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. HTML+CSS+JSでできること • スマホアプリ、ゲーム 2012/11/16 11 R25アプリ Game by Unity PhoneGap(Cordova)
12. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. [まとめ] HTML+CSS+JSでどんなことができるのか • 原則 – HTML • Webページやアプリの文書構造を規定する言語 – CSS • Webページやアプリの見た目を規定する言語 – Javascript • ロジックや機能、動的な演出を記述する言語 2012/11/16 12 あくまでも手段なのでこれらを使って何をするのかが大切
13. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 取り巻くキャリアには どんなものがあるのか 2012/11/16 13
14. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. デザイナー・・・HTML, CSS • デザインの絵をつくる人。 • たくさんいるから競争激しい。 • HTMLも分かっててあたりまえ。 2012/11/16 14
15. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. コーダー・・・HTML, CSS, JS • デザイナーの絵をHTMLに変換する人。 • デザイナーを兼ねてることもある。 • 競争激しい。 • SEOに有利なHTMLや動きのあるページを作 れる人もいる。 2012/11/16 15
16. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. プログラマ、エンジニア・・・HTML, JS • ページの仕組み、ロジックをつくる人。 • JSを中心に扱い、アプリやゲームなどをつくる ことが多い。 • 決められた仕様に従ってつくれる人はたくさ んいる • 設計やHTMLコーディングができる人もいる 2012/11/16 16
17. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. ディレクター・・・ぜんぶ • プロジェクトの進行・管理をする人。 • デザイナー、コーダー、プログラマを兼ねてい ることもある。 • スケジュールやコスト、プロダクトの品質まで 管理できる 2012/11/16 17
18. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. プロデューサー・・・ぜんぶ＋ビジネス • ディレクターに加えて、ビジネス企画やマネタ イズ方法まで考える • ときには営業を兼ねていることもある。 • 企画やプロジェクトと中長期計画やビジネス 戦略を描けるとなお良い 2012/11/16 18
19. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. [まとめ] 取り巻くキャリアにはどんなものがあるのか • スキルとしてのHTML，CSS，JS • 単一知識や技術をもっていることそのものに は、そんなに市場価値があるわけじゃない • 複数を組み合わせられること、組み合わせて 実現できるものに価値がある 2012/11/16 19 知識や技術を知っていると判断・決定が早くなる あくまでも手段なのでこれらを使って何ができるのかが大切
20. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 習うより慣れろ。 実際に作ってみる「世界のナベアツ」 2012/11/16 20 演習 http://jsdo.it/noriaki/mxGb
21. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. これから先もっと知りたいときは 2012/11/16 21
22. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 入門の次 • できるだけ新しい情報にふれる。 – 本を買うにしても発行が新しいもの – Webページでも更新日が新しいもの • 本は読むだけじゃダメ。 – サンプルコードを丸写し（写経）する • 写経できる素材がある無料サイトもあるよ。 – ドットインストール • ３分動画で学ぶ初心者向けプログラミング学習サイト • http://dotinstall.com/ – HTMLの基礎、CSSの基礎、Javascriptの基礎 2012/11/16 22
23. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 中級 とにかくパクってみる • 自分で「良い」「真似したい」と思うサイトを分解してみる – HTMLはどのように書かれているか • 見た目とタグの関係を理解できる – CSSの構造を分解してみる • どのHTMLタグに、どんな順番で、どんなスタイルが適用されているか 理解できる – Javascriptの動作を追いかけてみる • ページ読み込み時に動いてるコード、ボタンを押したときに動いてる コード、ドラッグ＆ドロップしたときに動いてるコードを分類できる • それらのコードがどんな動作をしているか理解できる 2012/11/16 23 もちろん読むだけじゃダメ。 コードを丸写し（写経）する ※部分だけ表示しても良い
24. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 上級・応用 キーワードから自分で調べてみる • 自分の興味がある分野のキーワードを調べて、 中級のことをやってみる – さらに、できればその勉強の過程やそこで分かったこ とを公開してみる ※写経したページそのものは公開したらダメ。著作権 • キーワード例 – jQuery – レスポンシブWeb – HTML5（Canvas, LocalStorage, Geolocation) – CSS3（Gradient, Radius） – Twitter bootstrap 2012/11/16 24
25. Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. まとめ • HTML, CSS, JSはWebサイトやサービスを構成するための技術 – どんなことを実現できるのかをいくつか見た • ホットな分野なのでスキルを持った人は多い – 競争が激しいが突出したスキルや複合的なスキルを持っていると強い • 知識・技術を持っていて、かつ、やりたいこと・実現したいことを考え られると非常に価値が高い – 知識・技術があると判断・意思決定スピードがあがる • HTML, CSS, JSの世界は広い。ずっと勉強。だから、とにかく手を動か すことが学びにつながる。 • 今日学んだ入門コードを拡張してみる。とにかくパクってみる。自分 の知ったことを公開してみる。 2012/11/16 25