Web勉強会（HTML+CSS+JS入門の入門）

Web勉強会（HTML+CSS+JS入門の入門）
- どうやって学び、何に役立つのか -

内山紀明

2012/11/16 Copyright(c) 2012 Noriaki Uchiyama. All Rights Reserved. 1

自己紹介

• 内山紀明（うちやまのりあき）
– 株式会社リクルートホールディングス
– 株式会社Media Shakers

• 普段『R25』のデジタル企画（主にアプリ）やってます
• R25（アールニジュウゴ）
– web R25 http://r25.yahoo.co.jp/
– R25 for Smartphone http://r25rd.jp/spapp
@noriaki
• 趣味でプログラミングもしています noriaki.uchiyama
– Heroku + Rails + jQuery
• http://guevara.27th.celebration-day.com/
• http://shusei.27th.celebration-day.com/


今日のお題

• HTML+CSS+JSでどんなことができるのか
• これらを取り巻くキャリアにはどんなものがあるのか
• 習うより慣れろ。実際に作ってみる「世界のナベアツ」


HTML+CSS+JSで
どんなことができるのか


HTMLって？

タグとかでなんか書くと
ホームページができるんでしょ


CSSって？

スタイルシートって言うんでしょ。
なんかデザインで使うらしいよ


Javascriptって？

こう画面がぐいーんって動いたり
アニメーションしたりするんでしょ


だいたいあってる


HTML+CSS+JSでできること

• UI（サイト、ブログ、キャンペーンページ）

Gmail

演奏できるロゴ

http://jsfiddle.net/noriaki/eT9k7/show/



• メール



• スマホアプリ、ゲーム
R25アプリ Game by Unity

PhoneGap(Cordova)


[まとめ] HTML+CSS+JSでどんなことができるのか

• 原則
– HTML
• Webページやアプリの文書構造を規定する言語
– CSS
• Webページやアプリの見た目を規定する言語
– Javascript
• ロジックや機能、動的な演出を記述する言語

あくまでも手段なのでこれらを使って何をするのかが大切


取り巻くキャリアには
どんなものがあるのか


デザイナー・・・HTML, CSS

• デザインの絵をつくる人。
• たくさんいるから競争激しい。
• HTMLも分かっててあたりまえ。


コーダー・・・HTML, CSS, JS

• デザイナーの絵をHTMLに変換する人。
• デザイナーを兼ねてることもある。
• 競争激しい。
• SEOに有利なHTMLや動きのあるページを作
れる人もいる。


プログラマ、エンジニア・・・HTML, JS

• ページの仕組み、ロジックをつくる人。
• JSを中心に扱い、アプリやゲームなどをつくる
ことが多い。
• 決められた仕様に従ってつくれる人はたくさ
んいる
• 設計やHTMLコーディングができる人もいる


ディレクター・・・ぜんぶ

• プロジェクトの進行・管理をする人。
• デザイナー、コーダー、プログラマを兼ねてい
ることもある。
• スケジュールやコスト、プロダクトの品質まで
管理できる


プロデューサー・・・ぜんぶ＋ビジネス

• ディレクターに加えて、ビジネス企画やマネタ
イズ方法まで考える
• ときには営業を兼ねていることもある。
• 企画やプロジェクトと中長期計画やビジネス
戦略を描けるとなお良い


[まとめ] 取り巻くキャリアにはどんなものがあるのか

• スキルとしてのHTML，CSS，JS
• 単一知識や技術をもっていることそのものに
は、そんなに市場価値があるわけじゃない
• 複数を組み合わせられること、組み合わせて
実現できるものに価値がある

知識や技術を知っていると判断・決定が早くなる
あくまでも手段なのでこれらを使って何ができるのかが大切


習うより慣れろ。
実際に作ってみる「世界のナベアツ」
演習 http://jsdo.it/noriaki/mxGb


これから先もっと知りたいときは


入門の次

• できるだけ新しい情報にふれる。
– 本を買うにしても発行が新しいもの
– Webページでも更新日が新しいもの

• 本は読むだけじゃダメ。
– サンプルコードを丸写し（写経）する

• 写経できる素材がある無料サイトもあるよ。
– ドットインストール
• ３分動画で学ぶ初心者向けプログラミング学習サイト
• http://dotinstall.com/
– HTMLの基礎、CSSの基礎、Javascriptの基礎


中級とにかくパクってみる

• 自分で「良い」「真似したい」と思うサイトを分解してみる
– HTMLはどのように書かれているか
• 見た目とタグの関係を理解できる
– CSSの構造を分解してみる
• どのHTMLタグに、どんな順番で、どんなスタイルが適用されているか
理解できる
– Javascriptの動作を追いかけてみる
• ページ読み込み時に動いてるコード、ボタンを押したときに動いてる
コード、ドラッグ＆ドロップしたときに動いてるコードを分類できる
• それらのコードがどんな動作をしているか理解できる

もちろん読むだけじゃダメ。
コードを丸写し（写経）する
※部分だけ表示しても良い


上級・応用キーワードから自分で調べてみる

• 自分の興味がある分野のキーワードを調べて、
中級のことをやってみる
– さらに、できればその勉強の過程やそこで分かったこ
とを公開してみる
※写経したページそのものは公開したらダメ。著作権

• キーワード例
– jQuery
– レスポンシブWeb
– HTML5（Canvas, LocalStorage, Geolocation)
– CSS3（Gradient, Radius）
– Twitter bootstrap


まとめ

• HTML, CSS, JSはWebサイトやサービスを構成するための技術
– どんなことを実現できるのかをいくつか見た

• ホットな分野なのでスキルを持った人は多い
– 競争が激しいが突出したスキルや複合的なスキルを持っていると強い

• 知識・技術を持っていて、かつ、やりたいこと・実現したいことを考え
られると非常に価値が高い
– 知識・技術があると判断・意思決定スピードがあがる

• HTML, CSS, JSの世界は広い。ずっと勉強。だから、とにかく手を動か
すことが学びにつながる。

• 今日学んだ入門コードを拡張してみる。とにかくパクってみる。自分
の知ったことを公開してみる。


Web勉強会（HTML+CSS+JS入門の入門）

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Web勉強会（HTML+CSS+JS入門の入門） (20)

Web勉強会（HTML+CSS+JS入門の入門）