ども！だいす（@dice_motosensei）です！
てかそもそもプログラミングって何なの？
基礎中の基礎からまずは教えて。
今回はこんな疑問に答えていきます。
本記事の内容
- プログラミングで作られているもの
- プログラミングとは
- プログラミング言語の種類
- プログラミングの3つの要素
プログラミングってなんだか小難しくてややこしそうなイメージありますよね。
でも、そのイメージだけで敬遠しちゃうのはちょっともったいないかと。
もちろん、実際にアプリ開発をしていくとなると決して簡単ではないんだけど、基本的な構造はわりとシンプル。
プログラミングの全体像が見えていると、学習もスムーズに進みます。
そこで本記事では、プログラミングを学ぶ前に知ってほしいプログラミングの基礎知識を解説。
本記事を読んでおけば、いざプログラミング学習を始めたときにイメージがわきやすくなりますよ。
記事の信頼性
筆者は、2019年3月に小学校教員を退職。
その後、2019年4月からおよそ10週間プログラミングスクールに通い、同年8月にエンジニア転職を果たしました。
駆け出しエンジニアなので、プログラミング初学者の気持ちが分かります。
プログラミングの基礎知識その1）プログラミングで作られているもの
- 家電
- Webサービス
- 社内システム
- 業務用ロボット
上記のように、動いている機械やパソコン上で扱っているサービスは基本的に全てプログラミングされています。
というのも、当然ですが機械は意思をもちません。
だから、「ユーザーがどの操作をしたときに機械がどう動けばいいのか」をあらかじめ命令しておく必要があります。
つまりあなたの身の回りはプログラミングだらけです。
プログラミングの基礎知識その2）プログラミングとは
プログラムを書くこと
そのまんまですね。
プログラムのことは、「コード」や「ソースコード」なんて呼ばれることもあります。
プログラムとは
前述の通り、「ユーザーがどの操作をしたときに機械がどう動けばいいのか」の命令が書かれたものです。
筆者がプログラミングスクールで学習したのはWebサービス。
なので、メルカリのようなWebサービスを例にとって説明します。
具体的には以下のような命令があります。
- サービスにアクセスしたら、データベースに登録されてる情報を一覧で見せる
- 登録ボタンを押したら、データベースに情報を登録する
- 編集ボタンを押したら、データベースに登録された情報を編集する
- 削除ボタンを押したら、データベースに登録された情報を削除する
おっと、ここでまたよく分からん言葉「データベース」が出てきましたね。
データベースとは
そのサービスがあつかっているあらゆる情報をしまっている場所です。
箱とか本棚とか倉庫とか、そういうものをイメージしてくれればOK。
あつかっている情報とは、例えば以下のようなもの。
- ユーザー情報
- 商品情報
- 取引情報
では、データベースにどのように登録されているのか。
ユーザー情報を例にとると、以下のような感じで登録されています。
エクセルの表をイメージしてもらえるといいですね。
※ダミーデータです。
Webサービスや社内システムの場合、データベースとは切っても切れない関係です。
プログラミングの基礎知識その3）プログラミング言語の種類
さて、前述のような動きを実現するためにプログラムを書くわけですが、そのときに使うのがプログラミング言語。
日本語、英語、中国語…と様々な言語があるように、プログラミング言語にもたくさんの種類があります。
さらに、役割によってそれらの言語を使い分けています。
Webサービスを作るときには、主に以下の3種類の言語を使います。
- フロントエンド言語
- サーバーサイド言語
- データベース言語
フロントエンド言語
ズバリ、見た目をデザインするための言語。
今あなたが見ているこのブログ記事も、フロントエンド言語で作られています。
具体的には以下のような言語を使います。
- HTML（エイチティーエムエル）
- CSS（シーエスエス）
- JavaScript（ジャバスクリプト）
HTML
テキスト部分を担当します。
あなたがこの記事をパソコンで見ているなら、記事上で右クリックして「検証」を選んでみてください。
「Elements」というタブの中に表れるのが、HTMLで書かれたこの記事のコードです。
あくまでテキスト担当なので、HTMLだけだとただ文章が書かれているだけのページになってしまいます。
CSS
デザインを担当。
具体的には、以下のようなものを定義します。
- 背景色
- 文字色
- フォントサイズ
CSSを使うことで、今あなたが見ているようなおしゃれで整ったページになります。
基本的にHTMLとCSSはセットですね。
JavaScript
動きを担当。
例えば以下のような動きを定義することができます。
- カーソルをボタンの上に動かしたら、ボタンの色を変える
- 指定したボタンを押したら、文字の大きさを変える
JavaScriptを使うことで、動きのあるページを作ることができます。
フロントエンド言語だけで作れるのは「静的」なページだけ
「静的」なページとは、毎回同じ内容を表示させるページのこと。
このブログ記事も「静的」なページ。
誰が、いつ、どこで見ても同じ記事内容です。
でも、Webサービスを使うときに、毎回同じ内容を表示しているのでは困ります。
メルカリで商品を出品したのに、その商品が一覧画面に追加されていなかったらおかしいですよね。
つまり、Webサービスを作るにはユーザーの操作によって内容が変わる「動的」なページが不可欠になります。
サーバーサイド言語
前述の「動的」なページを作るのに登場するのがサーバーサイド言語。
以下のような言語が代表的です。
- Ruby（ルビー）
- Java（ジャバ）
- PHP（ピーエイチピー）
先程の例でいえば、「このページにはAさんが出品した全ての商品をのせてね」って命令をサーバーサイド言語で出しておきます。
そうすれば、商品を追加しようが削除しようが、その時点での全ての商品を表示してくれます。
で、その命令を受けて、フロントエンド言語でページを作る。
ざっくりそんなイメージ。
これで、Aさんがその時点で出品している商品数によって内容が変わる「動的」なページになりますね。
で、サーバーサイド言語が「このページにはAさんが出品した全ての商品をのせてね」って命令を作るときの「Aさんが出品した全ての商品」の部分。
これはデータベース（データの倉庫）からひっぱり出してくる必要があります。
このデータベースからデータを引っ張り出してくるときには、また別の言語が使われます。
データベース言語
一般的には、「SQL（エスキューエル）」と呼ばれるものが使われます。
データベースからデータを引っ張り出してくるための言語です。
データの倉庫の管理人に「このデータちょうだい」ってお願いするときには、管理人に通じる言葉でお願いしないといけないわけですね。
こんな具体に、それぞれ役割分担しながらサービスを作っています。
プログラミングの基礎知識その4）プログラミングの3つの要素
最後に、プログラミングをするときに基本となる3つの要素を紹介します。
この3つの要素は、主にサーバーサイド言語を扱うときの要素です。
上から順番に処理する（順次処理）
「書かれている命令は上から順番に実行していくよ」ってことです。
どこかの命令を勝手に飛ばすことはありません。
条件によって処理を分ける（条件分岐）
「if文」なんて呼ばれるやつです。
例えばメルカリで商品を出品するときには、以下のような条件分岐が考えられます。
- 必須項目が全て入力されていたら、商品を出品する
- 必須項目が1つでも漏れていたら、エラーを出して入力画面に戻る
こんな具合です。
条件分岐は本当にたくさん登場します。
同じ処理を繰り返す（繰り返し）
「Loop」なんて呼ばれるやつです。
例えば、先ほど例に出したメルカリで商品を出品するときに必須項目が1つでも漏れていた場合。
これは、漏れている限り何度でもエラーを出して入力画面に戻るようにするわけですよね。
これが繰り返しです。
おわりに
本記事で紹介したのは、プログラミングの超基礎知識です。
でも、これが頭に入っているとプログラミング学習の全体像が見えて、今自分が何の学習をしているかがイメージしやすくなるはず。
あなたのプログラミング学習に役立てば幸いです。
