ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/992/room ーーーーーーーーーーーーーーーーーーーーーーー

1. 授業開始前に
Google Chrome インストール
をお願いします
Copyright © TribeUniv All Rights Reserved.

2. 非エンジニアのための
プログラミング講座
Copyright © TribeUniv All Rights Reserved.

3. 自己紹介
職業 : エンジニア
所属 : 株式会社トライブユニブ
経歴：
マーティングツール開発・運用(前職)
新卒エンジニア研修の内容考案・実施(前職)
現在はCodeCampの教務を担当

4. Agenda
1. 自己紹介
2. プログラミング
- なぜ学ぶ必要があるのか
- プログラミングとは
- 具体例
- 学ぶ利点
- 学び方
3. プログラミング体験
4. CodeCampについて
5. まとめ

5. Agenda
1. 自己紹介
2. プログラミング
- なぜ学ぶ必要があるのか
- プログラミングとは
- 具体例
- 学ぶ利点
- 学び方
3. プログラミング体験
4. CodeCampについて
5. まとめ

6. プログラミングの必要性が
様々な場所で叫ばれている

7. すべての人にプログラミングを学んでほしい
第44代アメリカ合衆国大統領 バラク・オバマ氏
出典: https://www.youtube.com/embed/6XvmhE1J9PYpage=2

8. プログラミング言語は、アイデアを形にする武器であり、
のりとはさみと一緒だ。
DeNA取締役ファウンダー 南場智子氏
記事出典: http://toyokeizai.net/articles/-/27289?page=2
写真出典: http://ja.wikipedia.org/wiki/%E5%8D%97%E5%A0%B4%E6%99%BA%E5%AD%90

9. Agenda
1. 自己紹介
2. プログラミング
- なぜ学ぶ必要があるのか
- プログラミングとは
- 具体例
- 学ぶ利点
- 学び方
3. プログラミング体験
4. CodeCampについて
5. まとめ

10. 「プログラミング」とは?

11. プログラムを組むこと

12. 「プログラム」とは?

13. program
【名】
1. 予定（表）、日程、計画
2. 《生物》生体プログラム
3. 講義要目、課程、学習計画、カリキュラム
4. 〔政党の〕綱領、政綱
5. 〔演劇や演奏会などの〕プログラム、演目一覧
6. 〔テレビやラジオの〕プログラム、番組一覧
7. 《コ》プログラム
出典: http://toyokeizai.net/articles/-/27289?page=2

14. 手順を正確に記した文章

15. Agenda
1. 自己紹介
2. プログラミング
- なぜ学ぶ必要があるのか
- プログラミングとは
- 具体例
- 学ぶ利点
- 学び方
3. プログラミング体験
4. CodeCampについて
5. まとめ

17. 1. 時刻の設定
朝7時になったら目覚ましを鳴らす
2. 音の設定
鳴らす音は「ジリリ」にする
3. 音量の設定
音量は中くらいにする
4. 停止条件の設定
ボタンを押されたら音を鳴らすのをやめる

18. コンピュータプログラミング
とは?

19. コンピュータに対して
手順を正確に記した文章を
組むこと

20. プログラミング言語

21. プログラミング言語の種類
PHP
Objective-C
JavaScript
Ruby
PerlJava
C++
C#
C

22. プログラミング言語の種類
PHP
Objective-C
JavaScript
Ruby
PerlJava
C++
C#
C
200種類以上
それぞれ用途や特徴がある

23. Agenda
1. 自己紹介
2. プログラミング
- なぜ学ぶ必要があるのか
- プログラミングとは
- 具体例
- 学ぶ利点
- 学び方
3. プログラミング体験
4. CodeCampについて
5. まとめ

24. 1.論理的思考
製品の売上が
低下している
営業担当者の
商談力が弱い
販売代理店の
販売力が弱い
顧客への訪問回数が
不足している
営業担当の製品
知識が不足している
代理店の営業担当の
販売力が弱い
市場縮小で
価格競争が激化した
同価格帯で性能が
よい製品がある
営業担当者の
営業力が弱い
製品の価格が高い
Why
Why

25. プログラミングは一般教養として必要、
なぜなら『いかに考えるか』を教えられるからだ
出典: http://code.org/

26. 2.効率化

27. 同じ作業でもやり方は複数ある

28. 自動化・高速化・正確化

29. 3.エンジニアを理解できる

30. よくある事例

31. 「開発期間もっと短くできないの?」
「開発費用もっと安くできないの?」

32. エンジニアの反応

33. 「これを作ってください。簡単でしょ?」
「仕様変更してください。簡単でしょ?」

34. エンジニアの反応

35. Agenda
1. 自己紹介
2. プログラミング
- なぜ学ぶ必要があるのか
- プログラミングとは
- 具体例
- 学ぶ利点
- 学び方
3. プログラミング体験
4. CodeCampについて
5. まとめ

36. ✓ 書籍
✓ WEBサイト参照
✓ 講義型指導
✓ 個別指導
✓ etc.

37. プログラミングは最初の壁が高い

38. 最初は人による手助けが必要

39. Agenda
1. 自己紹介
2. プログラミング
- なぜ学ぶ必要があるのか
- プログラミングとは
- 具体例
- 学ぶ利点
- 学び方
3. プログラミング体験
4. CodeCampについて
5. まとめ

40. 目覚まし時計 for Web

41. ■ ブラウザ
Google Chrome
■ テキストディタ
自由
■ 初期ファイル(alarm.html)
http://goo.gl/52ovh6
用意するもの

42. [コンピュータ]プログラミング

43. アクセスした日時を表示

44. アクセスした日時を表示
[00:00:00]固定 現在日時を表示

45. アクセスした時刻を表示

46. 日時を表示 時刻を表示
アクセスした時刻を表示

47. 常に現在時刻を表示

48. 時刻の変化なし 常に現在時刻を表示
常に現在時刻を表示

49. 目覚まし時間になるとアラートが発生

50. 目覚まし時間になるとアラートが発生
一致するとアラート発生

51. セットクリック&目覚まし時間になるとアラートが発生

52. セットクリック&目覚まし時間になるとアラートが発生
セットクリック後
時刻一致でアラート発生

53. リセットクリックでアラート非発生

54. リセットクリックでアラート非発生
リセットクリック後
時刻が一致してもアラート非発生

55. セットクリックで目覚まし変更不可

56. セットクリックで目覚まし変更不可
セットクリック 目覚まし変更不可

57. リセットクリックで目覚まし変更可

58. リセットクリック 目覚まし変更可
リセットクリックで目覚まし変更可

59. 目覚まし時計 for Web

60. 初期 完成

61. のプログラムとは?
(手順を正確に記した文章)
目覚まし時計 for Web

62. 1. 現在時刻の表示
・現在の時刻を [時 : 分 : 秒] の形式で表示する
・時刻は日本(東京)を基準とし、海外からのアクセスは
考慮しなくて良い
2. 目覚まし時刻の設定
・目覚まし時刻 [時] [分] [秒] をそれぞれ個別に設定で
きる
・時刻は[スライダー] 又は [テキストボックス]の操作に
より設定できる
・[スライダー]と[テキストボックス]は連動しており、片
方を操作するともう片方の値が自動的に同じ値となる
・数値以外が入力された場合、値は0とする
3. 目覚ましセット
・目覚まし利用のオンオフを2つのボタンで切り替えが
できる
・セットボタン
目覚ましセット状態へ変更
目覚まし時刻の値を設定不可に変更
セットボタンをクリック不可に変更
・リセットボタン
目覚まし非セットへ変更
目覚まし時刻の値を設定可に変更
セットボタンをクリック可に変更
4.目覚まし機能
・以下の条件を満たした場合、目覚ましを鳴らす
目覚ましがセット状態
現在時刻と目覚まし時刻が一致
・目覚ましはアラートで「wake up!!」と表示

63. 1. 現在時刻の表示
・現在の時刻を [時 : 分 : 秒] の形式で表示する
・時刻は日本(東京)を基準とし、海外からのアクセスは
考慮しなくて良い
2. 目覚まし時刻の設定
・目覚まし時刻 [時] [分] [秒] をそれぞれ個別に設定で
きる
・時刻は[スライダー] 又は [テキストボックス]の操作に
より設定できる
・[スライダー]と[テキストボックス]は連動しており、片
方を操作するともう片方の値が自動的に同じ値となる
・数値以外が入力された場合、値は0とする
3. 目覚ましセット
・目覚まし利用のオンオフを2つのボタンで切り替えが
できる
・セットボタン
目覚ましセット状態へ変更
目覚まし時刻の値を設定不可に変更
セットボタンをクリック不可に変更
・リセットボタン
目覚まし非セットへ変更
目覚まし時刻の値を設定可に変更
セットボタンをクリック可に変更
4.目覚まし機能
・以下の条件を満たした場合、目覚ましを鳴らす
目覚ましがセット状態
現在時刻と目覚まし時刻が一致
・目覚ましはアラートで「wake up!!」と表示
これらは一般的に「要件」と呼ばれる

64. [コンピュータ]プログラミング

65. Agenda
1. 自己紹介
2. プログラミング
- なぜ学ぶ必要があるのか
- プログラミングとは
- 具体例
- 学ぶ利点
- 学び方
3. プログラミング体験
4. CodeCampについて
5. まとめ

66. 現役エンジニアによるオンライン個別指導の
プログラミングレッスン

67. 実際のレッスン動画
レッスン風景

68. JavaScript
「自ら考えてプログラミングができる」を目標に
Webページ作成に必要な4つの言語を習得可能

69. JavaScript

70. 出典：
ダフニー・コラー
「オンライン教育が教えてくれること」
個別指導を受けた人の98%が、
講義型指導を受けた人の中央値を超えてくる
講義型指導と個別指導の習得度の違い
講義型指導
個別指導

71. 考える力を身につける
カリキュラム
現役エンジニアによる
個別指導
場所・時間を問わない
オンラインレッスン
確実にプログラミング習得できる
学習環境をご提供

72. ベーシックコース スタンダードコース マスターコース
料金 48,000円 128,000円 298,000円
受講回数 15回 45回 105回
目安となる受講期間 ２週間∼2ヶ月 １ヶ月∼4ヶ月 ３ヶ月∼12ヶ月
対応言語 HTML5/CSS3 HTML5/CSS3
JavaScript(jQuery)
HTML5/CSS3
PHP/MySQL
JavaScript(jQuery)
CodeCampサービス例

73. 百聞は一見に如かず
初回受講は無料

74. 初回ではHTML/CSS/JavaScriptの役割を体験&説明

75. Agenda
1. 自己紹介
2. プログラミング
- なぜ学ぶ必要があるのか
- プログラミングとは
- 具体例
- 学ぶ利点
- 学び方
3. プログラミング体験
4. CodeCampについて
5. まとめ

76. 「プログラム」とは?

77. 1. 時刻の設定
朝7時になったら目覚ましを鳴らす
2. 音の設定
鳴らす音は「ジリリ」にする
3. 音量の設定
音量は中くらいにする
4. 停止条件の設定
ボタンを押されたら音を鳴らすのをやめる
手順を正確に記した文章

78. プログラミングを学ぶ利点

79. 1.論理的思考
製品の売上が
低下している
営業担当者の
商談力が弱い
販売代理店の
販売力が弱い
顧客への訪問回数が
不足している
営業担当の製品
知識が不足している
代理店の営業担当の
販売力が弱い
市場縮小で
価格競争が激化した
同価格帯で性能が
よい製品がある
営業担当者の
営業力が弱い
製品の価格が高い
Why
Why

80. 2.効率化

81. 3.エンジニアを理解できる

82. 現役エンジニアによるオンライン個別指導の
プログラミングレッスン

83. お疲れ様でした
Copyright © TribeUniv All Rights Reserved.

84. アンケートにご協力ください
http://goo.gl/s2ZkPp