こんにちは、キノトロープアカデミーです。

「キノトロープアカデミー」は、Web業界のトップランナーである株式会社キノトロープの社員が講師を務めるオンラインアカデミーです。リモートワーク時代に不可欠な「個のスキル」を高め、職人のような「匠」を目指す人を増やしたい。そんな願いを込め、基礎から経営判断、業務フローまで、一生モノのナレッジを惜しみなく公開していきます。

＜入門編 第1回＞
Webサイト制作における技術的基礎知識
についてお伝えします。

担当は高橋です。

Webサイト制作に必要な要素は、大きくフロントエンド、バックエンド、インフラの3つに分類されます。

フロントエンドはユーザーが直接目にする領域であり、文章構造を作るHTML、デザインを表現するCSS、ブラウザ側で処理を行うJavaScriptで構成されています。

バックエンドはサーバ側で動作する領域であり、PHPなどの言語によるプログラム処理や、大量のデータを安全に一元管理するためのデータベースが含まれます。

インフラはサイトをインターネット上に公開するための基盤であり、LinuxなどのOSや、Apache、Nginxといったミドルウェアの構築・制御が該当します。

Webサイトを技術的な面から正しく構築・運営するためには、これら3つの領域が相互に連携して動作する仕組みや全体像を把握しておくことが不可欠です。

”Webサイト制作における技術的基礎知識”をテーマに、
今日お伝えしたいことは3つあります。

この講座はプログラミングの基礎・入門的な内容を中心とした講座となっています。
Webサイトの制作を技術的な面で行う上での知識や、必要となるプログラミングについての概念やイメージをつかんでもらい、全体像をクリアにしてもらうための内容となっています。

対象としては、Webサイト制作にかかわる仕事に携わりたいと思っている人や、Webサイト制作やWebサイトの運営にすでに携わってはいるが、プログラミングの専門ではなくよくわかってはいないが知識を深めたい人向けの内容となっています。

一切の知識がない人向けではないのでその点はご了承ください。
また、当然ながらというか残念ながら、入門編の講座だけを見て、プログラミングが理解し出来るようになるものではありません。

Webサイト制作で必要なレベルのプログラミングという意味では、それほど難しいものではありません。高いレベルが必要なもの、アルゴリズムから考える必要があるものや、極限までの高速化や汎用性が求められるものなどでない限りは文章を書くことと大差ありません。

ですので、プログラム自体は一定レベルまでであれば、だれでもできるようになれる可能性のあるものです。とはいえ、基本を押さえるだけでも学習時間はかなり多く必要となり、1000時間、2000時間は必要といわれています。
また、実務をこなせるレベルとなると、経験も必要となってきます。

この講座では網羅的なプログラミング講座は含んでいませんが、入門編としてはWebサイト制作としての技術的なプログラミングおよび、Webサイト制作に関連する技術的な側面の全体像が把握できるようになるための内容となっています。

全６回を通して、一部だけではなくWebサイトを構成する要素全体の関係性や必要性についてイメージが出来るような内容となっています。

Webサイト制作におけるプログラミング講座ではありますが、そもそもの基礎としてWebサイトに必要なものや、Webサイトが提供される仕組み、お客様・一般の人がWebサイトを閲覧できる状態、インターネットで公開される状態となるための仕組みについて解説します。

はじめにWebサイトに必要なものは何かです。
根本的には中身、内容、Webサイトのコンテンツが必要ですが、ここではWebサイト構築に必要な技術的な要素についてです。

主に必要なものとしては、
・インターネット
・ドメイン
・ハードウェア
・ソフトウェア
が必要です。それぞれについて説明していきたいと思います。

【インターネット】
当然必要ですね。これがないとWebサイトもなにも話が始まらないのですが、
インターネットとはなんでしょう？

説明するまでもないですが、世界規模のコンピュータネットワークです。

重要なのは、インターネット・プロトコルという規約（ルール）に従って接続されている点です。

また特徴として、
・通信の物理的な手段を選ばない
・通信機器が特定されない
・対障害性が高い
・データに出来るものは何でも送受信できる
というものがあります。

【ドメイン】
キノトロープの場合であれば、サイトURLのうち「kinotrope.co.jp」の部分がドメインです。

ドメインを取得できるサービス、通常はお名前.comやムームードメインなどのサービス経由で取得するものとなります。

【ハードウェア】
サーバ・コンピュータのことです。
内容としては大きくはパソコンと変わりありませんが、性能面や耐久面などが違うと考えてもらえればと思います。極論は普通のパソコンでもWebサイト公開に使うことも可能ではあります。

ハードウェアの中で必要な要素としては、
・計算処理を行う「CPU」
・一次記憶装置である「メモリ」
・情報保存しておくための「HDD（SSD)」
があります。

現在はクラウド環境のAWSやGCP、Azureなどを利用することが多く、物理的なサーバを意識する必要性は少なくなってきていますが、クラウド環境のサーバを利用する場合でも、CPU、メモリ、HDDのスペックなどを指定して利用するかたちとなります。

【ソフトウェア】
大きくは
・OS
・ミドルウェア
・アプリケーション
があります。

OSはWindows、MacOSなどですが、Webサイト動かすためのOSとしてはLinux系とよばれるOSを利用されることが多いです。（RedHatLinux、CentOS、Ubuntu）

ミドルウェアとしてはApache、Nginx、MySQL,PostgreSQL、Postfix、PHPなどです。

アプリケーションとしては、作成したシステム、問い合わせフォームや予約システムなどです。

次にWebサイトが動作する仕組みについてこの後の説明、講座につながる部分としてのポイントを説明します。

IPアドレス：インターネット上で場所（住所）の特定に利用
DNS：「名前」で特定（識別）するために利用
これらは覚えておくと良いでしょう。

Webサイトを構成する要素、先ほどの仕組みに対応していきますが、ざっくりと以下のようなものです。
A. フロントエンド
B. バックエンド
C. インフラ

【フロントエンド】(HTML/CSS/Javascript)

サイト見る・利用する人が直接触れる部分です。Webブラウザで表示されているものはHTML/CSS/Javascriptあとは画像などで構成されています。

・HTML：文章の構造
・CSS：スタイル、デザインの表現
・Javascript：ブラウザ利用する人の操作にあわせて処理
が可能です。

【バックエンド】(PHP/Java(scala,kotlin)/Ruby/Python/Perlなど)

サーバ側で処理を行うプログラムです。
ブログのシステムやCMSなどと呼ばれるものはバックエンド側のプログラムとして動作しています。

フロントエンド側ではブラウザにしかデータを保存できません。

また専用のデータベースソフトを利用しなくてもPHPなどサーバサイドプログラムであればデータを保存しておくことも可能ですが、大量データとなった場合や複雑な構成となった場合は難しくなってきますので、通常Webサイトでのシステムを構築する際はデータベースを利用します。

【インフラ】(AWS,GCP,ミドルウェア、シェルスクリプト)

主にインフラエンジニアやネットワークエンジニアなどが関連する領域で、直接プログラミング言語はあまり関係がないですが、サイトをインターネット上に公開する上でかならず必要な要素となります。
プログラムやWebサイトを動かくためのミドルウェアというものが必要となります。

最後までご覧いただきありがとうございました。

の３点についての内容でした。