プログラミング向上雑記

プログラミングが趣味のだらだら学生。自作したプログラムの紹介やいまハマってることなんかを適当に書いていったりいかなったり。Twitterはこちら→ @niishi_8

初心者でも始められるプログラミング生活:第0回目~プログラミングとは?から簡単なプログラムを書いてみるまで~

はじめに

プログラミングと聞くとどうしても難しいという印象が持つ人が多いのではないでしょうか。

プログラミングをしたことのない人からしたらまったくもって未知の世界でしょうし、学校の授業などで習った人は扱ったプログラミング言語によっては良くわからないまま終わってしまったり、取り敢えず書いてたら動いてたけどよくわからなかった、そんな経験がある人もいるでしょう。

しかし、プログラミングは難しくありません!簡単なルールを少し覚えるだけであっという間にいろいろなことができるようになります!この「初心者でも始められるプログラミング生活」シリーズでは、見た目が楽しいプログラムを簡単にかけるプログラミング言語を採用しているので、皆さん気持ちを楽に遊び感覚でプログラムを学んでいきましょう♪少しでもプログラミングが好きな人が増えていただけると嬉しいです。

 

目次

 

 

プログラミングとは

プログラミングの言葉自体はよく聞くかもしれませんが、いったい何ものなのでしょうか?

いま皆さんの目の前にはコンピュータがあると思います。パソコンのかたはもちろん、スマホタブレットの中にもコンピュータが入って動いています。そのコンピュータも勝手に自分で考えて動いているわけではありません。人から与えられた命令を実行し動いているわけです。人からの命令が一切なければコンピュータは動きません。

このコンピュータに与える命令の事をプログラムといい、プログラムを作ることをプログラミングと言います。コンピュータは人間から与えられたプログラムを解析し、それ通りにきちんと実行してくれるのです。

 

f:id:kirari0831:20170521234628p:plain

プログラミング言語とは

では、人からコンピュータに命令を与えたいときはどうするのでしょう?「~こうしてね」、「~ああしてね」と人の言葉で伝えても動きません。コンピュータが理解できる言葉で教えてあげないといけません。そこで用いるのがプログラミング言語です!

言語を覚えるというと英語のような人の話す言葉を想像し習得が大変だなあと思うかもしれません。まして機械用の言葉を覚えるなんて途方もないことと思ってしまう人もいるかもしれません。しかし、ご安心を!覚えることは断然少ないですし、テストがあるわけでもないので忘れてしまったら調べなおせばいいだけの話なので無理に覚える必要もありません。気楽にやっていきましょう♪

 

実はプログラミング言語は世の中にたくさんあります。その数は数百から数千ともいわれており、非常に様々な言語があります。主流なプログラミング言語にしぼってもCやJavaPythonJavaScriptRuby,Swiftなどなど数えだしたらきりがないです。そんなたくさんあるプログラミング言語ですが、各言語には得意不得意があり用途に合わせて使う言語が異なってきたりします。場面に応じて使える言語が異なってくるので新しく覚えなければいけません。何個も言語を覚えなければいけないと聞くとさらに気が遠くなるかもしれませんがご安心を。プログラミング言語は多種多様あるとはいえ、ほどんどの言語は似たような書き方をしています。つまり、一つの言語をマスターしてしまえば二つ目三つ目の言語の習得は一つ目よりずっと楽なのです!それに味でちょこっとプログラミングするくらいなら何個も覚える必要はないのでご心配なく

 

f:id:kirari0831:20170522000443p:plain

Processingとは

この「初心者でも始められるプログラミング生活」シリーズではProcessingという言語を用いてプログラミングをしていきます。Processing自体はあまりメジャーではない言語ですが、この言語はJavaという超メジャー言語をもとにつくらており文法や書き方はJavaそのものです。先ほど、一つ言語を習得したら二つ目三つ目は楽になるといいましたが、ことProcessingとJavaに限れば1回で二つの言語を習得できます。

また、このProcessingはアニメーションなど動きあるプログラムをJavaよりも簡単に書くことができます。簡単に目に見えて動きあるプログラムを作成することができるため、初心者向けの言語であるとも言われており大学の授業などでも採用されることのある言語です。

 

インストールから起動まで

まずはProcessingの環境をインストールしていきましょう。

https://processing.org/download/にアクセスしたら左側のメニューの中からDownloadをクリックしてください。

ダウンロード画面が表示されたらWindowsのPCを使っている人はWindowsの64bit版を(うまくいかなかったら32bit版を),AppleのPCを使っている人はMac OS Xをダウンロードしてください。

f:id:kirari0831:20170521153230p:plain

 

ダウンロードができたらzip形式になっていると思うので解凍してください。

 

f:id:kirari0831:20170521153943p:plain

 

解凍すると「processing-バージョン名」(下の画像ではprocessing-3.3.3)というフォルダができると思うのでそれをクリック。

 

そのなかに「processing.exe」というファイルがあると思うのでそれをクリックしてください。これでProcessingの起動は完了です。

f:id:kirari0831:20170521153950p:plain

画面説明・使い方の説明

 

processing.exeを起動すると以下のような画面が表示されたと思います。

 

f:id:kirari0831:20170521155524p:plain

①の中に何も書いていなかったり、④のウインドウは出てないはずですが概ね同じだと思います。画面の見方ですが、

 

  1.  テキストエディタ……ここにプログラムを打ち込む
  2. 実行ボタン……実行ボタンを押すと①で書いたプログラムが実行される
  3. 停止ボタン……プログラムの実行を止める
  4. 実行画面……プログラムの実行結果が表示される(実行ボタンを押す前は表示されていない)

 

となります。基本的には

  1. プログラムを①の中に書いていき
  2. プログラムを書き終わったら②の実行ボタンを押し、
  3. 実行結果を④のウインドウでみて
  4. 最後に③の停止ボタンを押す

といった具合に進めていきます。

Processingで遊んでみよう!

インストールも終わり使い方もわかったところで、少しProcessingで簡単なプログラムを書いてみましょう!今回のは導入部なので覚える必要もありませんし、気楽にやってみてください♪

まずは先ほど説明した①のテキストエディタのところに以下のプログラムを打ち込んでみてください。

 

void setup(){
  size(600,600);
  background(255);
  rect(100,100,300,300);
}

 

 

 プログラムがうちこめたら実行ボタンを押してみてください。間違いなく打ち込めていたら下のような実行画面が出ると思います。もし実行ができなかった場合は書き写し間違いの可能性があるので間違いがないかよく確認してみてください。

 

f:id:kirari0831:20170522001234p:plain

 

 

今のプログラムでは真っ白な四角形が表示されましたが、四角形に色をつけてみましょう。先ほどのプログラムに色を付ける命令をくわえます。

 

void setup(){
  size(600,600);
  background(255);
  fill(52,152,219);
  rect(100,100,300,300);
}

 

実行ボタンを押すと今度は青色の四角形が表示されたと思います。

 

f:id:kirari0831:20170522001800p:plain

 

ここではfill()は色を付ける命令、rect()は四角形を表示させる命令だと簡単に理解しておくだけでかまいません(覚えなくても全然問題なし!)

 

次は四角形を複数個表示してみます。

 

void setup(){
  size(600,600);
  background(255);
  fill(52,152,219);
  rect(100,100,300,300);
  fill(231,76,60);
  rect(200,300,400,200);
  fill(46,204,113);
  rect(300,50,200,300);
}

 

青、赤、緑の四角形が表示されたら成功です!

さらに、background(255)の次の行にnoStroke();という命令を新たに書き加えると下の画像のように枠線なしで表示することができます。

f:id:kirari0831:20170521222459p:plain

 

ちなみに、プログラムは基本的に上から下へ順番に実行されます。上のプログラムでは上から順番に青色赤色緑色の順番で四角形を表示する命令をかいたのでちゃんとその順番に描画されているのがわかります。興味のある方は、上のプログラムのfill()とrect()の命令のセットの順番を入れ替えてみて実行結果がどう変わるのか試してみましょう。

 

動くプログラムを作ってみる

少し動きのあるプログラムも書いてみましょう。

void setup(){
  size(600,600);
}

void draw(){
  background(0);
  stroke(mouseX,mouseY,100);
  line(width/2,height/2,mouseX,mouseY);
}

 

プログラムを実行したら実行画面内のいろんな場所へカーソルを持って行ってみてください。いろいろな色の線が描かれると思います。

 

f:id:kirari0831:20170521230626g:plain

 

では次にbackground(0);をsetupの中に移動したらどうなるのでしょう?少し面白い事が起こります。

 

void setup(){
  size(600,600);
  background(0);
}

void draw(){
  stroke(mouseX,mouseY,100);
  line(width/2,height/2,mouseX,mouseY);
}

 

 

今度は描画された線が消えずに残ります。なぜでしょう?

 

 

f:id:kirari0831:20170521230455g:plain

解説

setup()の中に書いた命令はプログラム実行を始めたとき、一度だけ実行されます。それに対しdraw()の中にかいた命令はデフォルトでは1秒間に60回実行されます。draw()の中にあるline(width/2,height/2,mouseX,mouseY);の命令は画面の中央からマウスカーソルの位置まで線を引くという命令なのですが、これが1秒間の間に何回も実行されることによりパラパラ漫画の要領で動いてみえたわけです。

これは皆さんがよく知るアニメーションの原理だと思いますが、これを実現するためには毎シーン初めから書き直す必要があります。初めから書き直さなければ動いてるキャラクターの残像が見えてしまいますbackground()命令は実行画面の全体を指定された色で塗りつぶすことをするのですが、draw()の中の先頭にこれを書くと毎回画面を真っ黒にできるのでアニメーションのように動きのあるプログラムをかけたのです。setup()の中に書いた場合はプログラム実行時にしか呼ばれませんから、前のシーンで書いたものも消えず線が残っていってたわけです。

何か動きのあるプログラムを書きたい場合はほとんどの場合draw()の先頭にbackground()命令を入れるわけですが、上のプログラムのようにわざと抜かして残像のあるアニメーションを作ることも可能です。中々面白いですよね。

 

今回のまとめと次回

 

  • プログラミングとはコンピュータに与える命令を作ること
  • プログラミングは難しいことではない!
  • Processingのインストー
  • Processingで簡単なプログラムを作ってみた

 

今回、さっそく簡単なプログラムも作ってみましたがどうだったでしょうか。ほとんど解説もいれなかったので無理に理解しようとしなくても平気です。なんとな~くの動きさえ理解していただければ構いません。これからこのシリーズを読んでいきたくさんプログラムをかいていく中で徐々に理解していただければ幸いです。

もしこの記事を読んで分からないことやもっと知りたいことがあればぜひぜひコメントしてください!

 

さて、次回からいよいよ本格的な解説も交えつつ様々なプログラミングの書き方について学んでいきます。次回は「変数」について扱う予定なのでお楽しみに~♪

 

次記事:

niisi.hatenablog.jp

 

付録

今回の記事で出てきたProcessingの命令について軽い説明を載せておきます。もっと詳しい説明が知りたいという方はProcessingのリファレンスもみてみてください(https://processing.org/reference/)(英語ですが……)

 

sertup()……プログラム実行時一度だけ実行される

draw()……1秒間に指定された回数(デフォルトだと60回)だけ実行される

size(width,height)……実行画面の大きさを指定する。size(800, 600);で幅が800ピクセル、高さが600ピクセルの画面になる。

background(gray)……指定された色で画面全体を塗りつぶす。0で真っ黒、255で真っ白。background(255,0,0);のように三つの数字を指定することもできてその場合は色々な色を付けることが可能(詳しくはfill()を参照)。

fill(red, green, blue)……塗りつぶしの色を指定する。四角形や円を描くときの中身の色はfillで指定された色になる。red, green, blueともに0~255までの値をとることができて255に近いほどその色が強くなる。fill(255,0,0)→赤色、fill(0,255,0)→緑色、fill(0,0,255)→青色。fill(255,0,255)→紫(赤+青)、fill(255,255,0)→黄色(赤+緑)、fill(0,255,255)→水色(青+緑)

rect(x, y, width, height)……指定された位置に指定された大きさの四角形を表示。前二つの数字が位置を、後二つの数字が大きさを表している。

stroke(red, green, blue)……線の色を指定する。中に入れる数字の意味はfillやbackgroundと同じ

line(x1, y1, x2, y2)……指定された二点間に線を描画する。前二つの数字が始点の座標、後二つの数字が終点の座標。

 

width……実行画面の幅

height……実行画面の高さ

mouseX……現在のマウスカーソルのx座標

mouseY……現在のマウスカーソルのy座標