【プログラミング】目の前のものを便利にする。

Rくん

2024年6月16日 07:26

こんにちは。Rくんです。

突然ですが、みなさんは「プログラミング」をしたことがありますか？
ゲームを作ったり、業務効率化システムを作ったり…。
プログラミングは「生活をより豊かにするもの」とよく言われます。

…でも、結局プログラミングってなに？

ということで今回は、プログラミングとは何か、日常に役立つかもしれない基礎的な知識を一緒に学んでいきたいと思います。

注意事項

本記事の作者は情報技術系の学者でもなんでもありません。
プログラミングが大好きな一個人として、もっとみんなに普及させよう！というノリです。
そのため、一部変なことを言っているかもしれませんが、ご容赦くださるとありがたいです。

プログラミングとは

まず、プログラミングというのはなんでしょうか。Wikiさんに聞いてみると…

プログラミング（英語: Programming）とは、コンピューター上で、ある特定のコンピューティングの結果を得るために、実行可能なコンピュータープログラムを作成することである。

プログラムのソースコードは、コンピューターのCPUで直接実行される機械語ではなく、プログラマー（ヒト）が理解できるプログラミング言語で書かれる。プログラミングの目的は、あるタスクを自動化する一連の命令をコンピューターに実行させ、与えられた問題を解決することである。

Wikipedia - プログラミング

うーん、堅苦しいｗ
ぼくなりに要約させていただくと、

プログラミングはプログラムという機械に命令する文章を作成すること。プログラムのソースコードは、コンピュータの中身が直接理解できるような文章（機械語）ではなく、人間が理解できるような言葉（高級言語）で書かれる。プログラミングの目的は、与えられた問題を解決することにある。

こんな感じだと思います。
コンピュータに命令するためにあるんですね。

具体例

とはいうものの、プログラムで作成されるものってどんなものがあるんでしょうか。
下のサイトを見てみてください。

このサイトは、元素学習アプリ「エレメント・マスター」です。簡単に言うと、ウェブ上で動くゲームアプリ、要はWebアプリの1つです。
Webアプリを作成するには、画像を配置しただけでは意味がありません。「動き」を追加するのが必要です。

こんな時に行うのが「プログラミング」です。
プログラムは、ゲームやWebアプリ、ツールなど、動的なシステムを構築するのに使われます。

プログラミング「言語」

ところで、この世界ではいろいろな言語があり、それぞれ発音や文字は違えど同じような意味を持ちます。

それと同じようなことがプログラミングの世界でもあります。
たとえば、「こんにちは」と出力するのに、JavaScriptという言語では

console.log("こんにちは");

と書きます。Javaという言語では、

System.out.print("こんにちは");

C#という言語では

Console.WriteLine("こんにちは");

…のように、書き方が違う言語がたくさんありますが、すべて同じ意味なのです。このようにプログラミングに使う言語をまとめて「プログラミング言語」と言います。

ちなみに、JavaScriptとJavaって名前が似ていますよね。
これ、別々のものなんです。プログラマーに言ったら怒る人もいるかもしれません…ｗ
よく言われるのは、インドネシアとインドみたいな関係です。それぞれ派生元が違うので、先ほど記述したように書き方も異なります。

マークアップとスタイルシート

さて、プログラミングの基礎はこんな感じです。
次はネットとプログラミングについて学んでいきましょう。

プログラミング言語…と言われると、このようなサイトを作るためのツールと仰る方もいます。
が、それは半分あっていて半分間違っていると思います。

実は、このようなサイトも機械に「こんな感じで表示しなさい」というように命令するためのソースコードでできています。
このように、見た目の基礎を作成するための言語を「マークアップ言語」といいます。
マークアップ言語にもいくつか種類があり、主に使われている言語は以下の４種類です。

HTML
XML
XHTML
SGML

この中で、よくネットで使われるのはHTMLとXML、特にHTMLです。
HTMLとは、HyperText Markup Language（ハイパーテキストマークアップランゲージ）の略で、ほぼ全部のサイトの基礎がこちらで作られています。

実際にHTMLを見てみましょう。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RくんのITかんりしつ</title>
  <link rel="stylesheet" media="all" href="/css/ress.min.css" />
  <link rel="stylesheet" media="all" href="/css/style.css" />
  <script src="/js/jquery-3.6.0.min.js"></script>
  <script src="/js/style.js"></script>
  <!-- Favicon -->
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <link rel="icon" href="/favicon.ico" type="image/x-icon"> </head>
<body>
  <header>
    <div class="container">
      <div class="row">
        <div class="col span-12">
          <div class="head">
		  <a href="/"><img src="/img/logo.png" alt="RくんのITかんりしつ" style="width:60%"></a>
		  <div class="telbox"><a href="/contact" class="button">お問い合わせ</a></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col span-12">
          <nav>
            <div id="open"></div>
            <div id="close"></div>
            <div id="navi">
              <ul>
                <li><a href="/">ホーム</a></li>
                <li><a href="/admin">管理しているもの</a></li>
		<li><a href="/#service">サービス</a></li>
		<li><a href="/#news">お知らせ</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>

これは、ぼくのホームページのソースコードです。
見てわかるように、HTMLは<〇〇〇>で始まって</〇〇〇>で終わる形式で書かれています。

このようなマークアップ言語は、もちろんサイトを作成することができるんですが、以下のようにデザインがとてもぐちゃぐちゃになってしまいます。

このようなデザインの問題を解決するためにあるのが、デザインを司る言語、スタイルシート言語です。

CSS
SCSS
Less

この３つが主なスタイルシート言語ですが、一番よくつかわれているのはCSSです。
ぼくのホームページのCSSはこんな感じ。

@charset "UTF-8";
@import url("grid.css");
@font-face {
  font-family: "Zen";
  src: url("/ZenKakuGothicNew-Regular.ttf") format("truetype");
}

:root {
    --base-color: #000;
    --link-color: #666;
    --linkhover-color: #999;
    --back-color: #f7f7f7;
    --border-color: #ccc;
    --white-color: #fff;
}
html {
	font-family: "Zen", sans-serif;
	font-weight: 400;
	font-style: normal;
	scroll-behavior: smooth;
}
img {
	max-width:100%;
	height: auto;
}
a {
    display:block;
    color: var(--link-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}
a img {
    margin-bottom: 1rem;
}
a img:hover {
	opacity: 0.8;
}
.underline {
	border-bottom: 3px solid var(--base-color);
	padding-bottom: 0.5rem;
}

スタイルシート言語では、HTMLなどで作り上げた基礎オブジェクトの配置や色、フォント、さらには少しアニメーションまでつけることができちゃいます。

ここまでまとめてみると、ネット上にあるサイトはこんな感じで構成されています。

基礎オブジェクトを司るマークアップ言語、
デザインを司るスタイルシート言語、
動きをつけるプログラミング言語。

この３言語を混同してすべて「プログラミング言語」というのは少し語弊がありますので、気を付けて使いましょう。
こちらもまた一部のプログラマーは怒るかもしれませんｗ

実際にプログラミング言語を書いてみよう！

以上、プログラミングの基礎について解説していきました。
それでは実際にプログラミング言語を書いてみます。

…といいたいところですが、そろそろ5,000文字。2部構成にしたくなかったのですが、ここからは次回に回したいと思います。

それではまた！

この記事が気に入ったらサポートをしてみませんか？