迷ったときに立ち返る HTML, JavaScript, CSS 概論

Last updated at 2021-04-22Posted at 2021-04-22

前段

新人向けのナレッジを HTML, CSS をテーマで書いてみよう、ということなのでおじさん得意の苦労話や昔話でもと思ったのですが、まずは反応を探るためにも概論的な話を書いてみます。
まずはざっくり書きますので、詳しくは自分で調べるなり、後述するようにコメント残してもらえたらと思います。
HTML, CSS, JavaScript でこういうの知りたいとかありましたらコメントで残しておいてもらえると、次書く際の材料にしますので、よろしくお願いします。

Web上で動くシステムはだいたいこの絵で説明できます。
クライアント(Webブラウザ)からリクエストをサーバ(Webサーバ, アプリケーションサーバ(以下、APサーバ))に投げて、レスポンスを取得することで Webシステムは成り立っています。
サーバ～クライアント間のリクエストとレスポンスのやりとりは HTTP というプロトコル(お約束)で決められています。
HTTPS (暗号化通信) を使っていない限り、通信の中身は wireshark や tcpdump にてパケットキャプチャすることで確認することができます。興味がある方は一度試してみることをお勧めします。

リクエストとして Web サーバに URL やリクエストメソッド(GET や POST)を投げて、レスポンスとして HTML や CSS, JavaScript を取得し、クライアント(Webブラウザ) にてそれらを解釈し表示します。
- HTML, CSS, JavaScript が実行されるのはサーバではなく Webブラウザ上です。ここ大事。
レスポンスとして取得する(主に)HTMLは静的なファイルだけではなく、サーバ側で動的に生成されることもあります。 PHP や JSP, Servlet はサーバ側で HTML を生成しレスポンスとして返します。
- PHP や JSP が実行されるのはサーバ側です。これも大事。
最近はイチからコードを書き始めることは少なく、フレームワーク上で Web システムを作成することが多いですが、どのコードがどこで実行されているのかの意識は常に持つようにしておいてください。慣れないうちは自分が作ったシステムでないとどこで何が実行されているのか迷子になりやすいです。

リクエストを投げて、レスポンスが帰ってくるまで処理を待つのが同期通信。リクエストを投げた後、レスポンスを待たずに処理を継続し、あらかじめ登録された関数でレスポンスを取得するのが非同期通信。
- 非同期通信を JavaScript と XML で実現したのが Ajax。
- 非同期通信は画面遷移なしでレスポンスを取得することができる。この技術によりいまどきの Webシステムが実現された。非同期通信が実現する前の Webシステムは盛大な紙芝居。
前述のサーバ側にて動的生成されたレスポンスの取得は同期処理になります。
リクエスト/レスポンス以外でもネットワーク上でのサービスを扱うと同期処理、非同期処理の話はいろいろな所で出てきます。慣れないうちは扱っている処理が同期処理なのか、非同期処理なのか考えながら見てみると訓練になるのでやってみてください。

そういえばたいした説明もなしにサーバ、クライアントを記載していたので最後に触れておきます。リクエストを投げてレスポンスを受け取るのがクライアント、リクエストを受け付けてレスポンスを返すのがサーバになります。
- クライアントからの要求がなければサーバの仕事は基本ないです。(バッチ処理等もありますが、バッチ実行プロセスがクライアントだと思えば ...)
Webシステムではなく、クライアントPC上で動くアプリケーションと DBサーバ、APサーバで構成されているシステムをクライアント・サーバシステム(略してクラサバと言われることが多い)と呼ばれますが、これも基本的に上記のリクエスト、レスポンスと同じです。何をリクエストして、何がレスポンスとして戻ってくるかの違いです。

わからないことはだいたい google で解決しますが、それでも解決しないときはキーワードの作り方を疑ってください。ただし、キーワードの作り方は経験と想像力が必要なので、それらを磨く訓練は技術者として生き続ける限り磨き続けてください。
また、google や技術系サイトに慣れると自分が探していない情報以外辿り着けなくなってくるので、新聞や雑誌もまだまだ捨てたものではないですよ。
周りの先輩方に聞くのも問題解決に役に立ちます。教わった知識は周りや後輩にも分かち合うようにしましょう。