Progate前に読んでほしいwebアプリケーション開発入門

はじめに

本記事を読むことで以下について優しく学ぶことができます。

問題提起

Progateで勉強を始める時って、コースをいきなり始めることになるんですよね。「なんとなくプログラミングを勉強したい」という人が始める際、この構造は少し不親切だと感じます。Progateで学習を始める前に、これから学習することについてある程度の知識があれば、よりスムーズに学習できたり挫折せずに学習できるんじゃないかなと思いました。

Progateのとあるページでは、「Webアプリケーションを作れるようになること」をゴールに設定したが学習の順番が示されています。以下のような順番です。

確かにHTML/CSSやRuby、RailsはWebサービスの構成要素として必須のものです。しかし、具体的な作り方を知る前に「インターネットとは何か」「WWWとは何か」「そもそも私たちが普段利用しているwebサービスはどのような仕組みで成り立っているのか」を抑える必要があるんじゃないかなあと思います。

HTML/CSSやRuby、Railsを学習していると、こうした基礎的な概念を知っていることを前提とした概念が良く出てくるためです。

自分も初学者の頃はこれに気付かず、誤った理解をしていたが故に後で同僚に指摘されることが少なくありませんでした。また、知っていればもっとすんなり理解できただろうなあということもたくさんあります。

なのでまずは以下のインターネットについての基礎概念を抑えて、

その上で以下のようにHTML/CSS、Ruby、Railsなどの学習を重ね、スムーズに学習ができるようにしたら良いのではないでしょうか。

そこで今回は、身近なwebサービスを利用する様子をなぞりながら、これらについて説明してみます。

想定読者

Progateを利用してWeb製作またはWebアプリケーションを学びたいと思っている人、またはすでに学習中の人

本記事の内容

先の図で示した「インターネット」についての各概念を学ぶことができます。

本記事を読むメリット

Progateでの学習の効率が上がる

先に挙げた通りです。「インターネット」の基礎概念を理解しつつHTML/CSS, Ruby, Railsの学習に入ることで、いきなり学習し始める場合に比べて寄り道の学習が少なく済むため、学習がスムーズになります。

体系的に全体を俯瞰しながら学習できるようになる

「Webサービスを作れるようになる」ということがゴールの学習はその過程において「今何を勉強しているんだっけ？」「なぜこの勉強をしているんだっけ？」という疑問が生まれやすいです。学ぶべきことが多く、一つの単元を集中し深掘りしているうちに全体を見失うためです。まずは全体像を掴むための学習の地図を手に入れることで、いつでも現在地を見失わないようにしてください。

本編

ゴールの確認

Progateでの学習のゴールは、「Webアプリケーションを作れるようになること」です。ここではWebアプリケーションを「ChromeやSafariといったインターネットブラウザから利用できるWebサービス」と定義します。 Webアプリケーションを作れるようになるとはつまり、「Twitter」や「メルカリ」や「Amazon」や「youtube」のようなものを作れるようになる、ということです。これらは、利用者数的にも知名度的にも代表的なWebアプリケーションですね。

もちろん、世界中の人に利用されるものやビジネスとして大きな利益をあげるものを作るのは簡単ではありません。しかし、「インターネットを通じて誰かに使ってもらえるサービスを公開すること」自体は、今や勉強すれば誰でもできるようになってきています。

その際に学習が必要な内容の「第一の地図」を用意しました。こちらを見てください。

学ぶ必要があることについて、ジャンルごとに区分けして図示してみました。すでに学習している人は、知っている情報もあるかもしれません。灰色の「インターネット」の部分が、右の「クライアントサイド」「サーバサイド」の部分とかぶっています。これは、それぞれの学習の際に、必ずインターネットの知識が必要であることを示しています。「インターネット」の項目についてはこの後すぐにこの記事で学ぶことができます。

「第一の地図」と題したのは、実際に学習が進んでいくにつれさらに学ぶ内容が増えていくからです。学習が進んだ段階での、「第二の地図」がこちらです。

第一の地図に比べ窮屈になりましたが、新しく追加された「開発に必要な情報」と「アプリ公開・運用に必要な情報」については、誤解を恐れずに言うなら必要に応じて適宜学ぶので十分な「枝葉」の知識です。

とにかく、第一の地図に書かれた「インターネット」「サーバサイド」「クライアントサイド」の3つの内容をしっかり固めるのが先決です。第一の地図の内容に求める理解度は、「何も見ないで人にしっかり説明できる状態」です。

Webサイトを利用する流れをおさらいする

まず事前準備として、私たちがどのようにWebアプリケーションを利用しているか再確認してみましょう。 私たちがAmazonを利用する時、その方法は主に2通りあります。

1つ目の方法は、Chromeやsafariなどのインターネットブラウザでgoogleを開き検索する方法です。以下の動画のように、検索欄に「amazon」と入力し検索ボタンをクリック、そして出てきた検索結果一覧の中からamazonのリンクをクリックします。

2つ目の方法は、インターネットブラウザのURL欄に直接「amazon.co.jp」と入力し、検索ボタンを押す方法です。以下の動画のようにします。

どちらの方法でも、最終的には「amazon.co.jp」から情報を受け取りブラウザ上でページを表示することができていますね。

これだけ見ると、普段からパソコンを使っているならばよくやっているであろう何気ない操作だと思います。しかし、この一連の流れがどのようにして成り立っているのかをきちんと理解するだけで、一気に学習がスムーズになります。

まずは、インターネットにまつわる基本概念について定義を確認しましょう。

インターネットとネットワークについて学ぶ

今や普段の生活の中で、スマートフォンやPCを通じてインターネットを使わない日はありません。仕事でメールも使うし、先ほど見た通りAmazonを使って買い物もします。それらは全てインターネットのおかげです。私たちの生活はインターネットに支えられています。

インターネットとは

インターネットとは、コンピュータネットワークの1種です。コンピュータネットワークとは、コンピュータ同士をケーブルや赤外線、電波などなんらかの手段で繋いで様々なデータをやりとりできるようにした状態のことです。インターネットは、コンピュータネットワークの中でも世界規模でコンピュータがやりとりできる状態にしているものを指します。

インターネットにおける重要な概念を学ぶ

インターネットによって、遠く離れたパソコン同士で情報をやりとりすることができるようになりました。インターネットを通じたやりとりで一番身近なのは、普段のWebサイト閲覧ですね。Amazonに繋がるのも、Web漫画が読めるのも、全てインターネットを通じて自身のコンピュータとWebサイトを提供するコンピュータが通信しているからです。こうしたサービスの総称を、WWW(world wide web)と呼びます。

WWW

世界中のコンピュータがネットワークを介し情報を公開、共有できるサービスです。ここで言う情報とは、テキスト、音声、画像、動画データなどです。

Webサイト、動画などあらゆるコンテンツは、インターネットを通じて別のコンピュータから送られてきています。このコンピュータのことを、サーバと呼びます。

Webサイトの情報を持っている「サーバ」

次に、この先の話をする上で必ず必要な「サーバ」というものについて学びます。 サーバは、簡単に言ってしまえばWebサービスを提供するパソコンです。本体はこの地上のどこかに存在しています。私たちが普段利用している「パソコン」と「サーバ」は、インターネットを通じて繋がっています。

先ほどAmazonの例で確認した通り、私たちはブラウザからURLによってWebサービスにアクセスします。この時、情報を返してきているのがサーバです。TwitterにはTwitterのサーバがあり、メルカリにはメルカリのサーバがあり、AmazonにはAmazonのサーバがあります。

サーバも大雑把に捉えれば同じ「パソコン」なのですが、役割が違うため以下の画像のような違いがあります。

サーバには、全世界にWebサービスを届けるという役割があります。誰でも住所さえ知っていればアクセスできるように、住所が固定されています。また、24時間365日アクセスできるよう、基本的には電源を落とすことはありません。

IPアドレスとドメイン

先ほど、サーバには住所があると言うことを学びました。これを、IPアドレスと言います。IPアドレスは、基本的に3桁までの数4つを.(ドット)で区切った形になります。

サーバはそれぞれ固定されたIPアドレスを持ちます。しかし、このような数字の羅列だと人間にとって覚えづらく不都合です。そこで、「amazon.co.jp」のようなあだ名をつけます。このあだ名のことを、ドメインと呼びます。 基本的に1つのIPアドレスに1つのドメインを紐付けます。ただし、複数のサーバで同じサービスを提供する場合もあるため、同じドメインに複数のIPアドレスが紐づくこともあります。こうすることで、人間にとって覚えやすい形でアクセスすることができます。

ブラウザからドメインを利用してWebサービスにアクセスすると、DNSというソフトがドメインに紐づくIPアドレスを教えてくれます。これにより、正しいサーバにアクセスすることができます。

リクエストとレスポンスについて

私たちがWebサービスを利用する時、ドメインを介してIPアドレスでサーバにアクセスし、情報を受け取っていることがわかりました。インターネットの仕組みにおいて、このアクセスのことを「リクエスト」と呼び、サーバが情報を返すことを「レスポンス」と呼びます。

私たちがインターネットを通じてWebサービスを利用する際は、このリクエストとレスポンスが繰り返されているのです。

webサーバについて

サーバ上では様々なプログラムが動いています。その中でも重要なのが、リクエストを受け取り適切なレスポンスを返すプログラムです。これを、webサーバと呼びます。webサーバ自体はプログラミング言語によって作られており、作るためのプログラミング言語は何でも構いません。Progateで学ぶRubyやPHPで作られたWebサーバもあれば、それ以外のものもあります。

HTML/CSSについて理解する

amazon.comをリクエストすると、amazon.comで表示されるべき文や見た目の装飾について書かれた文書がレスポンスされます。これが、HTMLとCSSです。Chromeなどのブラウザは、HTMLとCSSを解析し、私たち人間に見やすいよう表示してくれるという役割を果たしているのです。

webアプリケーションの仕組み

静的コンテンツと動的コンテンツ

webサーバからレスポンスされる情報は、静的コンテンツと動的コンテンツの2つに分類されます。 HTML/CSSは、言ってしまえばただの文書です。リクエストに応じてWebサーバがレスポンスを返す際、書いてあるものをそのままレスポンスするだけです。こうした単純なレスポンスを、静的コンテンツ、と呼びます。 対して、動的コンテンツというものがあります。代表的な動的コンテンツはWebサービスです。例えば、Twitterについて考えてみてください。

Twitterは、アクセスするたびに表示されるツイートが変わりますよね。これは、自分がフォローしている人たちが次々にツイートして、タイムラインに表示すべきものが変わるためです。このように、アクセスするたびに表示が変わるコンテンツのことを動的コンテンツと言います。

では動的コンテンツはどのように実現されているのでしょうか？そこで重要になってくるのが、データベースです。

データベース

データベースとは、情報を蓄積するもののことです。例えば、Twitterでどのようにデータベースが活用されているか見てみましょう。 twitterでは、日々のユーザーの呟きをデータベースに保存しています。現在主流のデータベースはリレーショナルデータベースと呼ばれ、エクセルのように行と列のある表のような形で情報を保存する形式になっています。Twitterもこのリレーショナルデータベースを活用しています。

レスポンスを返す際、webサーバはあるユーザーがフォローしている人の呟きをまとめてHTMLとして生成し、レスポンスします。 このとき、あるユーザーがフォローしている人の呟きはデータベースに保存されているので「データベースから情報を取得してこれをレスポンス用に加工する」という処理が必要です。こうした処理は、webサーバとは別のプログラムが担当します。

Webサービス開発について理解する

Webサービスの開発は、基本的に自分のパソコン上で行います。自分のパソコンでRubyを書きWebサーバを作ることもできますし、自分のパソコンの中でデータベースとRubyを連携させて動的コンテンツを作ることもできます。この段階では、Rubyやデータベースの他に、パソコン自体を管理しているOS(オペレーティングシステム)と呼ばれるものについても知っておく必要があります。代表的なOSに、LinuxやMacOSがあります。というのも、プログラムの実行は人間がOSに指示を出すことで行うからです。人間からOSに指示を出すには、基本的には「コマンド」と呼ばれる指示方法を使います。このコマンドは「ターミナル」と呼ばれるソフトから打ち込み、実行することができます。

Webサービスの公開について理解する

Webサービスを全世界に公開するには、自前のサーバを用意してその中でWebサーバを動かします。自分のパソコン上でサービスを公開しようとしても、通常は住所(IPアドレス)が固定されていないためユーザーにアクセスしてもらうことができません。また、普段使いのパソコンの電源を24時間入れっぱなしにする、というのも非現実的でしょう。

サーバを用意するには

基本的にはサーバは業者から借ります。借りるといっても自宅にサーバとなるパソコンを送ってもらうわけではなく、インターネットを通じて借りたサーバにアクセスし、様々な設定を行うことになります。AmazonやGoogle、Microsoftといった有名な会社がサーバを貸し出すサービスを展開しているので、これらを活用することになります。

webサーバを動かすには

作成したプログラムを公開予定のサーバに移し、起動します。

Progateにおいて各項目を学ぶ理由

ここまでの知識があれば、Progateで学ぶ項目がなぜあのラインナップなのか理解できます。

HTML/CSS

HTML/CSSを学ぶのは、レスポンスとしてブラウザに返ってくる情報が基本的にはこれらだからです。HTML/CSSを学ぶことで、ブラウザ上にWebページを表示し、そのレイアウトを自由に作成することができます。

Ruby

Rubyを学ぶことで、Webサーバを作成することができます。また、後述するRuby on Railsを利用する際に必要になります。

Ruby on Rails

Ruby on Railsは、Webアプリケーション作成を協力にサポートしてくれるツールです。Rubyで作られており、必要に応じてRubyを書き足していくことでデータベースと連携して動的コンテンツを返すWebサービスを作成することができます。 なぜRuby on Railsを使うかというと、0から全てRubyを使ってWebサービスを作るのは非常に大変だからです。

最後に

最後に、もう一度冒頭に載せたWebアプリケーション開発の地図を載せておきます。

学習していく中で迷ったら、何度でもこの地図に立ち返り、「自分は今どこを勉強しているのか」「この勉強をするのは何故なのか」を確認してください。そうすることで、何倍も学習がスムーズになるはずです。