Tech Select 学習サイト

# プログラミング言語

# はじめに

プログラミングを用いた開発が行われているが、そもそもプログラミングとは何か、プログラミングには多くの言語があるがそれぞれ何が違うのかを知ろう。

# 概要

プログラミングとその言語について学ぶ。

# 目的

  • プログラミングについて知ろう
  • 言語について知ろう
  • フロントエンド言語
  • サーバーサイド言語

# プログラミングについて知ろう

プログラミングとは簡単にいうと、コンピューターにさせたい仕事をコードを書いて指示する作業のことです。

私たちの生活で使用するスマートフォン、もはや生活の必需品と言っても過言ではありません。スマートフォンで Twitter ・ Instagram ・ LINE などの SNS や、 Google マップなどを使っている方も多いです。これらは、プログラミングで作られたアプリケーションです。プログラミングとは私達の身近にあるものだといえます。これらを開発する場合、開発したいアプリの種類によって扱う言語は変わります。プログラミングでできることは以下の通りです。

  • アプリケーションの作成
  • ゲーム開発
  • WEB サイトの作成

また、アプリとはいっても種類はたくさんあり、作りたいものによって開発言語も変わります。

  • Web アプリ ... Ruby
  • iPhone アプリ ... Swift
  • Android アプリ ... Java

次に言語について簡単に紹介していきます。またカリキュラムで学ぶ言語もあるので特徴を簡単に理解しておきましょう。

# 言語について知ろう

一言でプログラミング言語とは言っても言語には種類もあります。 ここでは代表的なサーバーサイド言語フロントエンド言語の 2 つの言語を紹介します。
サーバサイド言語とはサーバ側で動く言語です。フロントエンド言語はこの逆で、クライアント（ユーザー）側で動く言語です。

例を挙げると、会員登録の機能を作る場合サーバーサイドとフロントエンドを作る必要があります。 サーバーサイドは名前や住所電話番号を入力させて登録できたら完了画面に移るようにする機能 フロントエンドは会員登録のページ、画面を表示させる機能です。

要するにサーバーサイドは中で動く機能、人の目に見えない機能をつくる役割になります。
フロントエンドは、スマホやパソコンで見れるページをつくる役割になります。

サーバーサイドとフロントエンドについての違いは理解できましたか。
次はサーバーサイドとフロントエンドの言語についてどのような言語があるか一部紹介します。

# フロントエンド言語

フロントエンドの言語とは、主に Web ブラウザ上で動作する言語のことを言います。 Web ブラウザで動作する言語には、 HTML 、 CSS 、 JavaScript の 3 つがあります。 HTML と CSS は、厳密にはプログラミング言語ではなく、HTML は Web ページの構造を指示する仕様であり、 CSS は HTML などの構造に対して どのように修飾するかを指示する仕様です。 プログラミング的な考え方が必要であったり、 プログラミング言語である、JavaSciprt と同時に利用したりすることが多いため、 一括に プログラミング言語 として表現されることもあります。

# HTML

HTML とは、タイトルや見出し、写真を配置を決定する言語です。 HTML には、タグと言われる決まった役割があり、タグを組み立てて Web サイトを構成していきます。 タグは<>で囲む必要があります。

例

  • <h1> ... 見出しを作る
  • <p> ... 文章を書く
  • <img> ... 写真や画像を貼る
  • <a> ... 他のページへのリンクを貼る
  • <div> ... 枠を作る

しかし、このままでは、枠や構成があるだけでそれぞれに色や形をつけられません。このままでは、白黒の見栄えのない Web サイトになってしまいます。 そこで必要となるのが、 CSS と呼ばれる言語です。

# CSS

CSS は、 HTML のタグに色や形をつけていく言語です。では、どのように色や形を装飾するのか見ていきましょう。 まず、ページの見出しを作りたいと思ったときに <h1>テックセレクト</h1> に文字の大きさと色を決めたい場合、下記のように書きます。

例

h1 {
  font-size: 24px;
  color: blue;
}
1
2
3
4

CSS は基本的に上記のような書き方をします。
色や形をつけたいタグを指定して、色や大きさなどについて { } に指定します。

セレクタ {
  プロパティ名: 値;
  プロパティ名: 値;
  ...;
}
1
2
3
4
5
  • セレクタ: セレクタには、「h1」等どこに { } に指定したものを反映させるかを記述します。
  • プロパティ名: プロパティ名には何を指定するかを記述します。
  • 値: 値には具体的な数値や色等を記述します。

# JavaScript

JavaScript の最大の特徴は、その高い汎用性です。現在主流となっているのは、この JavaScript だといわれています。

JavaScript は HTML や CSS など、他のプログラミング言語と組み合わせて使うことで、フロントエンドでアニメーションを付与させることができます。画像を動かしたり、メーニュータブを付けたりできます。近年は、 Node.js （ノードジェイエス）という、フロントエンド側だけでなくサーバー側でも動く JavaScript も普及してきました。

# サーバーサイド言語

# Ruby

言語が使われているサービス例

  • Cookpad
  • Twitter

Web アプリを作りたい場合によく使われる言語で、日本人が作った言語でもあるので馴染みやすいです。 SNS やショッピングサイトを作る場合はこちらの言語で開発すると良いと言われています。

# PHP

言語が使われているサービス例

  • Facebook
  • Wikipedia

PHP の主な特徴として 2 つあります。

  1. HTML で記述したファイルの中に埋め込んで使える
    通常サーバーとフロントエンドの言語は別のファイルで書き込みますが、 PHP は HTML のファイルに書き込むことができます。

  2. PHP が得意とするのは動的ページ Web サイト上には「静的ページ」と「動的ページ」があります。
    静的ページ: いつでもどこからでも毎回同じものが表示されるページ
    動的ページ: アクセスしたタイミングや状況によって表示内容が変わるページ
    例えばですが、ショッピングサイトなどユーザーの購入状況によっておすすめされる製品が違います。これが動的ページの例です。

# Python

言語が使われているサービス例

  • YouTube
  • Google

Python の特徴としてはデータの収集、処理、分析、機械学習、ディープランニングです。 もちろん Web アプリの開発もできるので汎用性の高いことと、 AI 開発でも注目されている言語です。

# まとめ

  • プログラミングとは私達が日常的に使っているもので使われている。
  • プログラミングにはそれぞれ役割があり、言語によって特徴がある。
  • フロントエンドの言語には HTML / CSS / JavaScript などがある。
  • サーバーサイドの言語には Ruby / PHP / Python などがある。

← エディタ →