13年3月13日水曜日

13年3月13日水曜日
Hackers’ Cafe
ノンプログラマーのための
プログラミング講座
13年3月13日水曜日
Hackers’ Cafe
この講座について
目的
プログラミングとは何かについて
体験しながら学んでいきます
対象
プログラマーでない学生・社会人
到達目標
教養としてのプログラミングを学ぶ
簡単なプログラムを組むことが出来る
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
第ニ回(2/25) 講師:伏見遼平
ビジュアルプログラミング入門
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
第ニ回(2/25) 講師:伏見遼平
ビジュアルプログラミング入門
第三回(3月上旬) 講師:清水亮
ブロックからJavaScriptへ
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
第ニ回(2/25) 講師:伏見遼平
ビジュアルプログラミング入門
第三回(3月上旬) 講師:清水亮
ブロックからJavaScriptへ
第四回(3月下旬) 講師:伏見遼平
JavaScriptでゲーム開発する
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
第ニ回(2/25) 講師:伏見遼平
ビジュアルプログラミング入門
第三回(3月上旬) 講師:清水亮
ブロックからJavaScriptへ
第四回(3月下旬) 講師:伏見遼平
JavaScriptでゲーム開発する
第五回(4月上旬) 講師:清水亮
プログラミングの未来
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
第ニ回(2/25) 講師:伏見遼平
ビジュアルプログラミング入門
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
第ニ回(2/25) 講師:伏見遼平
ビジュアルプログラミング入門
第三回(3月上旬) 講師:清水亮
ブロックからJavaScriptへ
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
第ニ回(2/25) 講師:伏見遼平
ビジュアルプログラミング入門
第三回(3月上旬) 講師:清水亮
ブロックからJavaScriptへ
第四回(3月下旬) 講師:伏見遼平
JavaScriptでゲーム開発する
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
第ニ回(2/25) 講師:伏見遼平
ビジュアルプログラミング入門
第三回(3月上旬) 講師:清水亮
ブロックからJavaScriptへ
第四回(3月下旬) 講師:伏見遼平
JavaScriptでゲーム開発する
第五回(4月上旬) 講師:清水亮
プログラミングの未来
13年3月13日水曜日
Hackers’ Cafe
ノンプログラマーのための
プログラミング講座
第三回 ブロックからJavaScriptへ
講師:清水亮
13年3月13日水曜日
前回のおさらい
13年3月13日水曜日
13年3月13日水曜日
13年3月13日水曜日
ところで
13年3月13日水曜日
プログラムを日本語訳すると・・・
13年3月13日水曜日
プログラムを日本語訳すると・・・
算譜
になります
13年3月13日水曜日
算術楽譜 = 算譜
13年3月13日水曜日
そう。プログラムは言葉のまとまりなのです
13年3月13日水曜日
プログラムは声明である
13年3月13日水曜日
プログラムは歌である
13年3月13日水曜日
プログラムは詩である
13年3月13日水曜日
プログラムは楽譜である
13年3月13日水曜日
プログラムは文学である
13年3月13日水曜日
プログラムは、文学作品なので
作者のクセや特徴が出ます
13年3月13日水曜日
前回は前田ブロックを学びました
13年3月13日水曜日
Hackers’ Cafe
前田ブロック
ビジュアルプログラミング言語
初心者から上級者まで使える環境を目指す
慣れると40秒でゲームが開発できる
誰でも無料で利用可能
13年3月13日水曜日
Hackers’ Cafe
前田ブロック
ビジュアルプログラミング言語
初心者から上級者まで使える環境を目指す
慣れると40秒でゲームが開発できる
誰でも無料で利用可能
という感じでしたね
13年3月13日水曜日
本当に上級者も使えるのか?
という疑問にまずお応えしましょう
13年3月13日水曜日
Demo
13年3月13日水曜日
↑秘密はこれ
13年3月13日水曜日
「実行」ブロックを多用
13年3月13日水曜日
Hackers’ Cafe
ビジュアル言語の利点と弱点
利点
構造が解りやすい
タッチスクリーンでも作りやすい
弱点
条件式など複雑な概念の表現が苦手
かゆいところに手が届かない
13年3月13日水曜日
そこでこの実行ブロック
中にはまるごとJavaScriptを書くことが出来ます
13年3月13日水曜日
Demo
やってみよう
13年3月13日水曜日
ビジュアル言語
タイプライター言語
二つの言語はお互いにいつでも翻訳可能
ただし、ビジュアル言語→タイプライター言語は翻訳が簡単だが、
タイプライター言語→ビジュアル言語は翻訳がちょっと大変(不可能ではない)
13年3月13日水曜日
ビジュアル言語
タイプライター言語
実行ブロックは
ちょうど橋渡し役になる
二つの言語はお互いにいつでも翻訳可能
ただし、ビジュアル言語→タイプライター言語は翻訳が簡単だが、
タイプライター言語→ビジュアル言語は翻訳がちょっと大変(不可能ではない)
13年3月13日水曜日
JavaScriptを見てみよう
13年3月13日水曜日
JavaScriptを見てみよう
クラスの名前を
定義してる
13年3月13日水曜日
JavaScriptを見てみよう
クラスの名前を
定義してる
画像ファイル名
13年3月13日水曜日
JavaScriptを見てみよう
クラスの名前を
定義してる
画像ファイル名
画像の大きさ
13年3月13日水曜日
JavaScriptを見てみよう
クラスの名前を
定義してる
画像ファイル名
画像の大きさ
実行ブロックの中身
13年3月13日水曜日
JavaScriptを見てみよう
クラスの名前を
定義してる
画像ファイル名
画像の大きさ
実行ブロックの中身
出現ブロック
13年3月13日水曜日
論より証拠!
13年3月13日水曜日
さあ、ついに本格的なプログラミングへの
扉が開きます
13年3月13日水曜日
13年3月13日水曜日
ようこそ!コードの世界へ
13年3月13日水曜日
13年3月13日水曜日
code is beautiful
13年3月13日水曜日
code is the god
13年3月13日水曜日
code is a description of
the world
13年3月13日水曜日
では、前田ブロックで作った作品を
JavaScriptコードだけで動かしてみましょう
13年3月13日水曜日
code.9leap.net
に新規登録し、ログインしてください
13年3月13日水曜日
13年3月13日水曜日
ここをクリック
13年3月13日水曜日
ここをクリック
「Fork」をクリック
13年3月13日水曜日
13年3月13日水曜日
main.jsを選択
13年3月13日水曜日
13年3月13日水曜日
↑この部分を削除して、
前田ブロックのjavaScriptをコピペしよう
13年3月13日水曜日
コピーできたらこれを押そう
13年3月13日水曜日
コードを直接編集してみよう
13年3月13日水曜日
コードを直接編集してみよう
この部分に追加
13年3月13日水曜日
他にもいろいろ試してみよう
使用可能なキーワード
zigzagX
zigzagY
randomAppearTop
randomAppearLeft
randomAppearRight
randomAppearBottom
moveUp
moveLeft
moveRight
moveDown
tapMove
tapChase
randomSetup
standAlone
13年3月13日水曜日
もう少し複雑なコードを書いてみよう
13年3月13日水曜日
コードの基本を勉強してみましょう
13年3月13日水曜日
括弧の意味をまず理解しよう
( ) .... 数学の括弧と関数
{ } .... プログラムが書いてある部分
[ ] .... 配列
< > .... JavaScriptでは使わない
/* */ ... コメント
.... 文字列
.... 文字列
13年3月13日水曜日
括弧の意味をまず理解しよう
hogehoge()
関数hogehogeの呼び出し
13年3月13日水曜日
括弧の意味をまず理解しよう
hogehoge(1)
関数hogehogeにパラメータ1をつけて呼び出し
13年3月13日水曜日
括弧の意味をまず理解しよう
hogehoge(1,2)
関数hogehogeにパラメータ1,2をつけて呼び出し
13年3月13日水曜日
括弧の意味をまず理解しよう
hogehoge(1,2, hoge )
関数hogehogeにパラメータ1,2, hoge をつけて呼び出し
13年3月13日水曜日
括弧の意味をまず理解しよう
function hogehoge(a)
{
alert(a);
}
関数hogehogeがaというパラメータをとって、
alertを呼び出すという関数の定義
13年3月13日水曜日
括弧の意味をまず理解しよう
a = [1,2,3]
aという配列に1,2,3という要素を入れる
13年3月13日水曜日
括弧の意味をまず理解しよう
a[1]
aという配列の1番目の要素を取り出す
13年3月13日水曜日
ドットシンタックス
a.x = 5
a.y = 8
aオブジェクトのxプロパティに5、
yプロパティに8を入れる
13年3月13日水曜日
おめでとうございます!
あなたはプログラマーになりました
13年3月13日水曜日
Hackers’ Cafe
本日のまとめ
13年3月13日水曜日
Hackers’ Cafe
本日のまとめ
プログラミングとは叡智である
13年3月13日水曜日
Hackers’ Cafe
本日のまとめ
プログラミングとは叡智である
目覚まし時計の設定もプログラミングである
13年3月13日水曜日
Hackers’ Cafe
本日のまとめ
プログラミングとは叡智である
目覚まし時計の設定もプログラミングである
コンピュータは見た目は違っても構造は一緒
13年3月13日水曜日
Hackers’ Cafe
本日のまとめ
プログラミングとは叡智である
目覚まし時計の設定もプログラミングである
コンピュータは見た目は違っても構造は一緒
用途に応じて様々なプログラミング言語がある
13年3月13日水曜日
Hackers’ Cafe
本日のまとめ
プログラミングとは叡智である
目覚まし時計の設定もプログラミングである
コンピュータは見た目は違っても構造は一緒
用途に応じて様々なプログラミング言語がある
ビジュアル言語は教育に適している
13年3月13日水曜日
Questions?
13年3月13日水曜日
Hackers’ Cafe
この講座の構成
第一回(2/11) 講師:清水亮
教養としてのプログラミング
第ニ回(2/25) 講師:伏見遼平
ビジュアルプログラミング入門
第三回(3月上旬) 講師:清水亮
ブロックからJavaScriptへ
第四回(3月下旬) 講師:伏見遼平
JavaScriptでゲーム開発する
第五回(4月上旬) 講師:清水亮
プログラミングの未来
13年3月13日水曜日