なんでフロント開発にサーバーがいるのかって疑問だったので動いてみた

この記事を読むと良いと思う人

• なんでフロントエンド開発サーバー立てるとか用意するとか言うん？って思ってる人
• サーバーって、とりあえずバックエンドだけど、いっぱい種類あるん！？
  ってそろそろ思ってきた人
• WEBサーバーって何？今までサーバーって言ってきたそれとは違うの？って思ってる人
• 開発環境の構築やりたいんだけど疑問だらけの人

いる・いらないは知らないと判断できないから

分かってないのに
あーだこーだいうのはなんだか個人的に許せんので
一旦、全部いっきに理解は無理だとしても理解に努める

知っとる人はこちら→ここ

サーバー、サーバーとよく聞くけど沢山種類あがる

　サーバーって１つだと思ってた。
　そんなに沢山いるだなんて聞いてない！
　とにかく略して会話する機会が多い。

【サーバーの種類】

• データベースサーバー
• WEBサーバー
• メールサーバー
• ファイルサーバー
• FTPサーバー　etc.

　初めましての時、紹介されるでもなくよく聞ニックネームだけで
　その人を知ってるつもりだった感じ。
　友達の会話に「かなちゃん」ってよく出てくるから、かなちゃんって呼んでたけど
　「かな子ちゃん」と「かな美ちゃん」と「かなたちゃん」って別の人の話を
　同一人物だと思って聞いてた気分。
　知ってる人は文脈から察せるけどさ、
　詳しく突っ込まなかった自分が悪いんだけどさ。って感じ。

「サーバー」の本名は
「サーバーソフトウエア」でソフトウエアである

　で、色々種類があるのは分かったんだけど、

　【サーバーって何なん？】

　　『サービスを提供する「ソフトウエア」』

　そう、実在する見た目(コンピューターのこと)を言ってない。
　サービスを提供するっていうっていうソフトのこと。
　英語でserverっていうじゃん？
（↑英和訳見るとなんかしっくりきた。「server = service + ver」）
　サービスする人（ソフトウエア）なのよね。
　機械本体とは切り離して考えてもいいかもしれない。

　　〇〇サーバーってのは、〇〇のサービスを提供してくれるソフトウエア。

• WEBサーバー　→　WEBサイトを表示するためのサービスを提供してくれるソフトウエア
• DB サーバー　→　データ（情報）の管理などのサービスを提供してくれるソフトウエア
  　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　etc.
  この２つはいわゆる静的サイトと呼ばれる分野のこと。

　サーバーって何って言われても、想像してみたら頭に浮かばなかった。
　かろうじて浮かんだのは黒い機械の箱だった。（間違いではないと思ってる。）

サーバーって「サーバー機」ってのに
ソフトウエアが入って実在している

　前項目の最後に「浮かんだのは黒い機械の箱だった」といっていたそれも「サーバー機」。

　【〇〇サーバーっていうソフトウエアが入った機械のことである】

　黒い箱の見た目だけじゃない。
　とにかくソフトウエアが入っていればサーバー機なのだ。
　ノートPCでも自宅や会社にあるPCだって
　〇〇のサーバーのソフトウェアが入っていればサーバー機。
　入っていればというか、
　入っていればそのサービスを提供してくれるようになるのでサーバー機になる。

　「サーバー機」というのは分かりやすく呼んだのだけれど、
　「サーバーマシン」とか「サーバー」とも呼ぶ。
　後者は混乱する。言葉は略されていくとわかっていても、
　初心者には混乱の原因な気がする。

　　「〇〇サーバーとして使われているコンピューター」

　　しっくりきた。
　　ソフトウエアもコンピューターもサーバー関連は全部サーバーって呼ばれるんだね。

「どこかの見えない何か」ではなく
自宅にもサーバーは存在できるみたい

　【「サーバー機」ってのにソフトウエアが入って実在している】

　ソフトウエアが入っている機械があってそれはこの世界のどこかに存在する。
　（ひとつなぎの財宝みたいでカッコイイななんか。どこにあるのか知りたくなるよね。）

　Googleのサーバー機も存在すれば、自宅の個人のサーバー機も存在する。

　違いは「共有範囲」「管理者」の違い。
　例に話してるのはファイルサーバー。
　企業さんが大きく展開しているのはそこで管理しているし、お客様に共有している。
　個人の自宅にサーバー機がある場合なら管理は個人がしているし、共有範囲は狭くなる。

　ふわっと、どっか異空間に存在しているみたいな感じ方してたので
　存在確認するとなんだか安心した。
　「怖いものこそよく見ろ」が私の中の信じてることでもある。笑
　知らないものは怖いし、近づきたくなくなるけどよく見たらなんてことないことも多い。

フロントの開発だから
バックエンドっぽいサーバーって不必要なんじゃ？

　なんとなく分かった気するけど、

　htmlってクリックで開くよ？WEBサーバーいる？

　きっとね、いると思うんだよね。
　どのフロントエンド開発関連記事もサーバーありきで話し始めるし。
　サーバーについて先に書いたから
　WEBサーバーあたりいりそうなのがわかる。んだけど…

　以下のようなサイトはなんでWEBサーバーをローカルに立てなきゃならないんだろう？

• お客様データ（情報）とかを表示させないようなサイト
• データペースから情報を引っ張ってこないようなサイト

　皆様はこの辺りってどこで習ったのか。
　はたまた習わずとも好きなジャンルだから知らぬ間に理解してたのか。
　エンジニアお得意のググれカスにしても
　検索ヒットする先の馴染みのサイトくらいヒントくれよ～
　って思うのは私だけだろうか？

フロント開発でとにかく立ててるのはWEBサーバー

　まずサーバーを用意する。って環境構築備忘録記事巡りで必ず見かける始まりの呪文。

　【必要なのはわかったけどWEBサーバーはなぜいるの？】

• WEBサイトに必要なサービスを提供してくれるのが
  WEBサーバーというソフトウエアだから

　そう、そうなんだけどさWEBサーバー。
　しかも本当にhtmlやcssだけで間に合いそうなWEBサイトで
　WEBサーバーは何してくれてるのか。
　そこが知りたくなった。

　本番環境に合わせた記述にできるから

　そうそう、それもよく聞くんだけど…
　そうなると本番環境とローカルの差って何なんだ？
　って知らないといけない気がする。

　色々とネットだけで調べて理解したかったけど
　この時点では説明できるほどわからなかった。
　「本番環境とローカル環境での違い」を探りながら別の方面からアプローチしたいなぁ。
　HTTP通信が関わってくるのかな…
　いつも既にあるプロジェクトをクローンしてしまっているのでいい機会。

四の五の言わずに開発の環境構築やってみた

　理解できない時は、
　実際にやってつまずいてこけてみよう！

　【簡単なプロジェクトを立ち上げてみる】　

　仕事ではもう教えて頂いた手順をこなしていたので、
　ゼロスタートからいつも仕事で触ってる環境くらいまで構築してみることに。

　ここでいう「ゼロスタート」とは？

　プロジェクトファイルを右クリックで新規フォルダ作成して命名し
　.htmlファイルも新規ファイル作成するところから。

　【とりあえずやった結果　- 流れ】

　　実際の工程・流れは別ページを用意して振り返ります。→ここから（coming soon）

　　ざっくり、大まかにここでは触れておきます。
　　この中のどの地点でWEBサーバーが出てくるのかが今回の内容に対する収穫。

• htmlとcssを用意してstylesheetをhtmlに記述して読み込ませて文字を赤色に変えてみたが
  なんか基本に立ち返る、ほっこり。
• 基本をベースに何が足りないか思いつくままの１つ目が「SCSSで書きたい」。
  　→SCSSって変換されたメタ言語なのだと気づく。
  　→SCSSを書くには書いたものをCSSへ変換する必要あり。
  　　そこでその役割を担ってくれてたのがGulpだったと思いだす。
  　→Gulpで変換設定してみる。変換するだけならWEBサーバー要らなかった。
  　→あれ？CSS関連じゃないのか？と思いったり。
  　→htmlファイルにリンク書いてみるか！
• 急に飛べるリンクを書き込む。
  　→外部サイトへのリンク。ちゃんと飛ぶ。
  　→プロジェクト内のページへ飛ぶリンクwww直下からパス書いても機能しない…なぜ…
  　　→→調べる。fileわからん。
• 「SCSSで書きたい」からのGulpでできる機能設定に気づきGulp設定に戻る。
  　→GulpでSCSSなどの自動更新を設定。
  　　WEBサーバーの立ち上げが関わってくる記述発見。
  　→ポート、プロキシ（localhost:8000）設定が必要そうだったので
  　　WEBサーバーを立ち上げた。★
  　　（ここで立ち上げたけどもしかしたら、WEBサーバー無い設定があるかも）
  　→自動更新にWEBサーバーいるのかな？って思う。
• 突然思いついてさっき書いたリンククリックしてみる。
  　→ 「file://」で始まるパスでプロジェクト内ページへ
  　　リンク移行できていたがそれができなくなり。
  　→www直下からのパスでリンクが飛ぶようになった。★
• その後、Gulpがいつも自分の開発環境を支える役割だったことに感謝し、
  　さらに機能を知りたくなって追いかけたのでした。

　【とりあえずやった結果　- 大事そうなポイント】

• htmlとCSSファイルだけならWEBサーバーまだいらない
• 開発環境を再現したら、CSS変換したくなりGulpの必要性に気づきよく利用する機能
  （タスク）にWEBサーバーが必要そうな部分発見。
• htmlにリンクタグ書いたらWEBサーバー導入前と後でパスの書き方変わった。

「別にWEBサーバー無くったって」ってどう？通じそう？

　一見通じそうに思えた。
　しかし、「本番環境とローカルの差」※というワードが頭をよぎった。

　【WEBサーバーを用意したことで変化したのは
　　link要素のプロジェクト内のページ移動のリンク】

　ファイルパスが違う。
　本番ではWEBサーバーは必ず使われている。
　それはファイルパスがWEBサーバーを使うことで変わることを指す。
　だって、公開して皆にアクセスして欲しいからドメインやらあるわけで。
　上記の状態にローカルで開発したWEBサーバーなしで書いたパスを本番に上げても
　上手くリンク先に移動できるわけないのだ。

　本番UP時に本番用に書き換え不要で、リンク先を確認しながらがらコードが書ける

　とても当たり前のことを言ったきがする。
　でも理解して言えたきがする。

《結論》
　WEBサーバーは必要。DBサーバーは不要

　【静的サイトをコーディングするにはWEBサーバー】

　その結論にたどり着いた。
　けど、ややこしそうなWEBサーバーとやらとなるべく関わりたくない精神から
　まだ、ごちゃごちゃ脳内がうるさい。

　「最悪WEBサーバーなしで、
　　プロジェクト内ページ移動は書き換えて本番にUPすればいいんじゃない？」

　と、一瞬思いかけたけど。

　アナログでのチェック項目増やすリスクが高い。

　たぶん忘れたりする。
　本番に忘れてUPして、そのまま気づかないか後から気づいて修正するのが目に見える…

　【サーバーの種類を理解したら
　　DBは動的サイトに追加で必要なものだと気づく】

　サーバーってなんかデータベースって勘違いしてた。
　サーバーってデータ扱わないなら不要って勘違いしてた。

まとめ

　【結論】WEBサーバーは必要

　完璧に理由を言えたわけではないが
　確かに作業量や確認事項の多いコーディング作業ではしなくていい作業は省けたら省きたい。
　
　そして、本番とローカルの差分がないほどに
　エラーやバグなく本番へUPすることができるのではないだろうか。

　環境構築の一つWEBサーバーについて少し分かったきがする。
　けど、環境構築はまだおわらない。
　今回の実際にやってみたことからGulpについて、
　開発手助けツールについて知らなさすぎることにも気づいた。
　また、記事にしてしっかり理解したい。

開発環境

PC: windows
WEBサーバー：IIS

言語：
HTML
CSS / SCSS
JavaScript

開発ツール：
Node.js/Gulp

気になるワードと、とっかかり参考URL

• （DBサーバーの所在より）データセンターとクラウドの違い
• （サーバーって何なん？より）ソフトウエアとは、ハードウエアも詳しく説明はできないよね
• （とにかく立ててるのはWEBサーバー）ネットの知識不足を補わないとわかりにくい範囲。前提知識含め読み直したい
• (「とにかく立ててるのはWEBサーバー」)HTTPを理解しようと思ったらでできてたリンク同士のつなぐサービス「ハイパーテキスト」
• 開発時にローカルWEBサーバーを立てる理由かもしれない➀「絶対パス（URI）と相対パス（URI）の使い分け」
• 開発時にローカルWEBサーバーを立てる理由かもしれない➁「絶対パスと相対パスの使い分けをする」
• Gulpって何？
  　→画像の自動圧縮(仕事場では専用サイトで行ってたので単体タスクで導入してもいいかも)

【mome】

　→なぜCSSでその便利な書き方を追加しないのかって初心者は思うのだけどのはまた別の話しでとりあげたい