1月12日(土)に、プログラミング入門教室を行いました。 今回は3回シリーズの第1回目です。
プログラミング入門(中学生~おとな向け)
2019年1月12日(土)・2月9日(土)・3月9日(土)
開場 10:15、開始 10:30~12:30
場所:中央公園文化センター(王子駅または十条駅)
プログラミングが初めての方向けの講座なので、プログラミング言語の歴史や命令などを復習しました。
命令とは、
指定したメモリから読む
指定したメモリに書く
足し算、引き算などの計算
計算結果で、ジャンプする
です。歴史こんな感じで復習してみました。
■1970年 UNIX(オペレーティングシステム)
☆1972年 C言語(しーげんご、UNIXの開発用)
■1974年 パソコンCPU(8080, 6800)アセンブリ言語(機械語)
□1975年 Microsoft BASIC(ベーシック、もともと教育用言語)
■1980年 MS-DOS(オペレーティングシステム)
□1983年 C++(しーぷらぷら、クラスやオブジェクト)
■1990年 Windows 3.0(文字からグラフィックへ)
■1990年 WWWサーバとブラウザ(インターネットの普及)
■1991年 Linux(リナックス。オープンソースの普及)
□1991年 Visual Basic (Windowsのアプリケーション開発用)
□1994年 PHP(ピーエイチピー。WWWサーバ用の言語)
☆1994年 Python(パイソン。汎用言語)
☆1995年 JavaScript(ジャバスクリプト。ブラウザ用の言語)
□1995年 Java(ジャバ。汎用言語)
□1995年 Ruby(ルビー。汎用言語)
☆2006年 スクラッチ
GitHub.com (ギットハブ)にアカウントを作り、「リポジトリ」を「フォーク」して、自分のホームページを公開する方法を学びました。
なんて、小難しいことをなさっているのでしょう!
Gitとは、分散型バージョン管理システムの一つで、もともとLinuxのソースコードを効果的に管理するために開発されました。他にも Mercurial , Bazzar などの分散型と呼ばれるバージョン管理システムがあります。
亀さんマークのSubversion や CVS のように集中管理型(クライアント・サーバ型)もあります。
一度にプログラムを仕上げることはできないし、修正したり、機能を追加したり、みんなで開発したりしますので、バージョン管理はプログラミングで必ずといっていいほどやることです。
Gitでは、ファイルの状態を好きなときに更新履歴として保存しておくことができます。そのため、一度編集したファイルを過去の状態に戻したり、編集箇所の差分を表示したりすることができます。GitのHub(ハブ:集まり)はプログラムなどのファイルを公開することができるようにしたウェブサービスです。(昨年Microsoftさんが買収されましたね。)
リポジトリは、GitHub が、プロジェクトに関連するファイルをまとめて保管する単位です。
企業ベースだと、リポジトリをチーム内で共有して、作業目的ごとにブランチ (Branch:枝) と呼ばれるコピーを作り、適当なタイミングでブランチに対して行われた更新をマスター(Master:本流) に反映するというのが、開発の 1 つのパターンです。
個人でも、ファイル編集で「変更前にもどしたい」とおもったり、あれこれ手入れをするためにコピーしたり、備忘録としてファイルに日付を追加しますね。すると、どれが最新なのかわからなくなっちゃったりします。そういったバージョン管理の問題を解決するのがGitです。プログラムのソースだけじゃなくて、Excelファイルや、画像も管理できます。(特にExcelファイルはどれが最新なの~ってなっちゃいますよね。…Excel禁止令がでたことがあります…)
GitHub のアカウントを持っていると、自分のアカウント内に既存のリポジトリのコピーを作れます。これが、フォーク(食器のフォークみたいに分かれていくかんじかしら?)です。フォークしたリポジトリは自分の所有物なので、自由に更新ができます。これなら、安心してたくさん失敗できますね。
■GitHubにアカウントをつくる方法
■今回の講座で作ってみたページ
■実際のプログラムはこんなかんじ (講座で実際に作ってみたソース )
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="description" content="JavaScript れんしゅう">
<meta charset="UTF-8">
<title>JavaScriptのれんしゅう</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body style="font-size:2em">
<h1>
ハローワールド ああああああああああああああああああああああああ
</h1>
にゅうりょく1<input type="text" id="input1" /> <br />
にゅうりょく2<input type="text" id="input2" /> <br />
<br />
<button onclick="calculate();">けいさん</button>
<div id="result">
</div>
<script>
// ここから JavaScript (ジャバ スクリプト)のプログラムが、はじまるよ
// 「//」はコメント。にんげんのための文で、プログラムではないんだ。コンピュータは、ムシするよ
//
// ★れんしゅう1★
// 上にかいてある ハローワールド を、じぶんの、すきな文字にかえてみよう。
// そのあと、下にある、みどりのボタン「Commit changes」を、おして保存しよう。
// ウェブページを、もういちどひらくと、いま、いれた文字がひょうじされるよ。
//
// ★れんしゅう2★
// がめんの「けいさん」ボタンを押すと何がでるか、ためしてみよう。
// alert() は、がめんに、もじをポップアップで表示する、かんすうだよ。
// そのあと、じゃまだから、「//」をあたまにつけて、コメントアウトしよう
// function は、「かんすう」のはじまり。「けいさん」ボタン(button)を押すと、うごきだすよ。
function calculate () {
// alertは、じゃまになったら、消してもいいよ
alert("うわっ!ビックリした。");
var text1 = $( "#input1" ).val();
var text2 = $( "#input2" ).val();
var result = text1 + text2;
// ★れんしゅう3★
// にゅうりょく1とにゅうりょく2に、数字を入れて、「けいさん」ボタンを押すと何がでるかな?
// たしざんをするには、「Number()」を使って、文字を、数に変えてから「+」を使うんだ。
// つぎの行のコメント(//)を消して、もういちどためしてみよう。
// result = Number( text1 ) + Number( text2 );
// ★れんしゅう4★
// 計算や、ひょうじされる文字をかえて、プログラムがどうかわるか、ためしてみよう。
// たしざんは、+
// ひきざんは、-
// かけざんは、*
// わりざんは、/
// () もつかえるよ
// ★れんしゅう5★
// このあとのプログラムで、けっかが、10より大きかったら、文字を赤くするようにしているよ。
// けいさんけっかが、10より大きくなるように、けいさんして、本当かためしてみよう。
// ★れんしゅう6★
// すきな色に、かえてみよう。
// 赤は red だよ。青は blue。ピンクは pink。
var result_text = "";
if ( result > 10 ) { // もし10よりおおきかったら
result_text = "<b style='color:red'>" + result +"</b>";
} else { // そうじゃなかったら
result_text = "<b>" + result + "</b>";
}
// ★れんしゅう7★
// けっかが、500より大きかったとき、色がかわるようにしてみよう。
// ( result > 10) のところを、( result > 500)にすれば良いよ。
// いろいろ、すうじをかえてみると、どうなるか、ためしてみよう。
var html = "<div> 「" + text1 + "」と「" + text2
+ "」をたすと「" + result_text + "」です。</div>";
// けっかを、ひょうじする。
$( "#result" ).append( html );
}
// ここでJavaScriptは、おわり
</script>
</body>
</html>
皆さんこれで、立派なプログラマーです。新しいこと始めるっていいですね。わたくしも初めてです。
次回はギットハブを使って、JavaScriptをさらに深く学びます。
午後は 未来美術部 の方がいらっしゃって、本格的な機材で、バーチャルリアリティを体験して頂きました。
午後の講座の記事はまた次回更新します。