WEB開発の基礎知識(フロントエンド)

はじめに

WEB開発を行ううえでの、超初心者エンジニアが最初に覚えると良い基礎知識をまとめました。
フロントエンド開発をこれから勉強したい！という方向けの内容となっております。

実際の開発知識を身につける前に、
○この技術の誕生に至る背景はどのようなものか？
○普段当たり前に使用しているモノはどういう仕組みで動いているのか？
を頭に入れておく事はきっと役に立つはずです。

「ふーん、なるほどね」くらいで、そこら辺のフリーペーパーとでも思って見ていただければと思います。
※ 私自身も勉強中の身でして、初心者に一本毛が生えた位のレベルですので、間違い等お気づきになられましたら
お手数ですがご指摘頂けると幸いです。随時追記、修正していきますので悪しからず。

WEBの基礎知識

よく耳にする用語集

• WWW（World Wide Web）
  インターネット上の様々なコンテンツをインタラクティブ（相互的）に
  閲覧するための技術の総称です。
  単にインターネットという表現そのものを意味する場合もあるそうです。
  いろいろなURLの中に入っているwwwも、こちらが由来です
  （例）https://www.google.com/
  ちなみに一番最初のWEBサイトが公開されたのは1991年と言われています。
  意外と最近だったんですね。

• W3C（World Wide Web Consortium）
  WWWの様々な技術を標準化、推進する団体です。
  つまり、「WEBでこういうことがしたかったら、こういう方法で開発するのがオススメです！」
  というルールみたいなものを定義している人達。
  WWWの開発者でもある、ティム・バーナーズ=リーさんが1994年に設立しました。

• ハイパーテキスト
  ハイパーリンクと呼ばれる、他のWEBページに遷移することができる機能が用いられた
  ドキュメントのこと。後述しますがこれを書くための特有の言語があります。

• クライアント
  営業などのお仕事ではお客様みたいなニュアンスですが、WEBの世界では
  私達が直接使うPC環境、WEBブラウザのことです。
  そのためクライアントと言う言葉は時々、フロントと置き換えられます。
  クライアント側で、WEBを閲覧するためのインターフェースを提供するのがブラウザになります。

  インターフェース
  コンピュータで、異なる機器・装置のあいだを接続して、交信や制御を可能にする装置やソフトウェア。

• サーバー
  通信をするなにか。と思いがちですが、本当は、色々なデータを保存していて
  クライアントからの要求に応えて何らかの応答を返す媒体です。
  因みにこの要求をリクエスト、応答をレスポンスと呼びます。
  サーバーからのレスポンスにはHTMLやCSSのファイルが含まれており、
  それを受け取ったWEBブラウザがファイルを解析し、WEBページとして表示する仕組みになっています。

• HTML(Hyper Text Markup Language)
  ハイパーテキスト（WEBページ）をマークアップ（記述）するための言語です。
  私達が普段見ているWEBページも、ほとんどこのHTMLで記述されています。
  （厳密にはHTMLの他にも色々な技術が合わさって作成されています。）
  また、マークアップは訳すと「マークをつける」ということになりますが
  WEBページ内の様々なコンテンツに対して印を付け、ブラウザが認識し易くする。
  といった感じになります。

• CSS（Cascading Style Sheets）
  WEBページにスタイルをあてる（装飾する）ための言語です。
  検索してヒットするWEBページのほとんどは、HTMLにプラスしてこのCSSも
  使われている場合がほぼ100%と言って良いでしょう。
  因みにHTMLとCSSを使ってWEBページを作成する人を
  「マークアップエンジニア」と呼んだりします。

• Javascript
  おもにWEBで活用される、フロントエンド（見た目部分）に関与しているプログラミング言語です。
  先述したHTMLやCSSはプログラミング言語ではないようです。
  HTMLとCSSだけでは毎回同じサイトしか表示できませんが、
  Javascriptを用いると次のようなことができたりします。
  ・日付や時刻によって、サイトのヘッダー内容の表示を変える
  ・ボタンAが押されたら○○をする。というようなプログラムをWEBページに与えられる
  ・ブログの投稿のお気に入り数によって、ランキング一覧を毎回更新して表示する
  Javascriptを使うと、サイトを「動的」にすることができます。
  HTMLやCSSのみのページは「静的」です。
  フロントエンドの技術進歩は凄まじく、今はJavascriptで出来ることが沢山あります。

そもそもプログラミング言語とは

コンピュータ内で人間の頭脳にあたるパーツである、CPU（中央処理装置）が読める複雑な、
機械語というものを人間が理解しやすい様に開発された言語。

因みにこのプログラミング言語を機械語に変換（コンパイル）する必要があるが、２パターンの方式が存在する。

・コンパイラ方式 (windowsやmacアプリの開発言語に多い)
　あらかじめコンパイルをしておいてからプログラムを実行
　→プログラムを高速に処理できるが、プログラム修正のたびにコンパイルの作業が必要

・インタプリタ方式 (WEBの開発言語に多い)
　プログラムの実行と同時にコンパイルを実行
　→コンパイラ形式より実行速度は落ちるが、修正や変更のたびにコンパイルを行わずにすむ

フロントエンドって何？

ユーザの目に見える箇所全般のことを指します。
つまりフロントエンド開発とは、見た目の改善、見た目を作成する仕組みの改善を行い、
利用者に安心かつ最適なユーザーインターフェース（UI）を提供すること。だと思っています。

対立する用語はサーバーサイドといい、こちらはユーザが直接見ない部分である
サーバーに寄った部分のことを指します。
（ざっくりし過ぎですが、イメージ的にはデータベースとか、インフラとか、APIとか
ちょっとお固い感じ。）

因みに...フロントエンドのお仕事で最近よく聞く
- WEB制作
- フロントエンドエンジニア
これらは何が違うのかというと。
WEB制作...
HTML/CSS/JQuery(Javascriptのライブラリです)/
WordPress(CMSといってウェブサイトを簡単につくれるシステムです)
→これらを用いて静的なページをつくる。
フロントエンドエンジニア
HTML/CSS/Javascript/JSフレームワーク/..他大量の技術
→を用いて、サーバーサイドのエンジニアと連携して
WEB制作よりもしっかりした動的なサイトやアプリケーションをつくる。

といった感じです。

開発環境について

開発環境とは、その名の通りWEBの技術を開発する上での作業場所という意味になります。
サーバーで実行されるサーバーサイドの技術は、もちろんそのサーバーを準備する必要が
あり、設定や手順が厄介なものがありますが、フロントエンドの実行する場所はブラウザです。
ブラウザと文字が書けるエディタがあればプラクティスが可能です。