これからプログラミングを始める人ためのWebアプリの仕組みの話

この記事は【Mentor Ver.】TechTrain Advent Calendar 2019 12日目の記事です。

自己紹介

はじめまして。
TechTrainのメンターをやっています、吉野です。

普段は福岡のFusicというシステム会社でエンジニアをしています。
TechTrain初の福岡の企業のメンターです。
今流行りの福岡で働きたい方はいつでも連絡ください！

記事の概要

メンターをやっていると、エンジニア志望の学生さんなどからよく聞かれる、Webアプリの仕組みについて、書いています。

しっかりじっくり知りたい人は、Webを支える技術などの本を読むといいかと思います。

本読むのが苦手で、とりあえずざっくり知りたい、という人向けの記事です。

具体的には、

• サーバー
• データベース
• プログラミング言語とフレームワーク
• フロントエンドとバックエンド

について、書いていきます。

実際にエンジニアとして働いている方からすると、全部当たり前のように使う言葉ですが、
これからエンジニアになりたいと思っている方で、わからないという人の手助けになればよいかなと思います。

※あくまでわかりやすく伝えることを念頭に書いているため、エンジニアとして厳密には違うと思われる内容もあるかもしれませんが、ご了承ください。

サーバー

本題に入っていきます。
まずは「サーバー」についてです。

「サーバー」と聞くと、こんな絵を思い浮かべるんじゃないかと思います。

Webアプリにおいて、「サーバー」は アプリの置き場所 です。

皆さんがアクセスしている全てのアプリケーションは、何かしらのサーバー上に存在しています。
（今アクセスしているであろうQiitaもサーバー上にあります。）

あなたが作成したアプリケーションを、あなたのPC上で立ち上げる際も、
あなたのPC上にサーバーをたてて、動かすことができます。

つまり サーバー = PC　と考えてもほぼ間違い無いです。
サーバーは画面のないパソコンのようなものであり、Webアプリケーションを置く場所、です。

　　

ちなみにURLはサーバーの住所を表します。あなたがQiitaのサーバーに辿り着いたのは、Qiitaの住所であるqiita.comがわかったためです。

あなたのアプリの開発時には、あなたのPC上のサーバーを使ってアプリケーションを動かせばいいですが、
実際にいろんな人に使ってもらうことを考えると、あなたのPC上で動かすのは現実的ではありません。（その場合、あなたの使っているPCをつけっぱなしにして、常にWi-Fiに繋がれ、多くのアクセスに耐えうる必要があります。）

そんな時に、「レンタルサーバー」や「VPS」などのサービスを使います。
色んなサービスがありますが、ここでは代表的なものを少しだけ挙げます。

• さくらレンタルサーバー

  • レンタルサーバーは安価で、phpなどの言語が最初から入っていて難しい設定が不要です。Wordpressでブログを作る人などによく使われているイメージです。
  • その代わり、自分でカスタマイズができないため、自作のアプリケーションを動かすのはあまり向いていません。

• heroku

  • レンタルサーバーよりもカスタマイズ性や柔軟性が高い上に、ある程度までは無料で使えるサービスです。
  • サービスのデモ環境で使用されることが多いですが、スケーリング機能も備えており、本番環境としても使用できます。

• Amazon EC2

  • Amazon Web Servicesのサーバーです。
  • 最初は何も入っていない状態ですので、サーバーとして使うには自分で色々と初期設定をする必要があります。
  • 使いこなすことができれば、たくさんのアクセスにも耐えられるスケーリング機能なども使うことができ、本格的なアプリケーションに向いています。

これらのサービスを使うことで、あなたの作ったWebアプリを外部向けに公開することができます。
アプリを作ることができたら、是非使ってみましょう。

データベース

次にデータベースについてです。
DBと記述されることが多いですね。

データベースはその名の通り、データが保存される場所です。
データベースもアプリケーションと同じで、サーバー上に存在します。

Webアプリケーションは、基本的にアプリ上に永続的なデータを持つことができません。
そのため永続的なデータはデータベースに保存し、いつでも出し入れができる状態にする必要があります。

データベースにもいくつか種類があるため、少しだけ紹介します。

• MySQLやPostgresSQL、MariaDBなど

  • これらはオープンソースのデータベールで、RDB(リレーショナルデータベース)と言われるものです。
  • 皆さんが普段触っているアプリケーションは、ほとんどがRDBにデータを保存していると思われます。
  • 名前の通り、データをリレーショナル(データの関係性を定義して)に保存したり、取り出したりすることができ、より複雑なデータの取得や、保存が可能です。

• DynamoDBやFireStoreなど

  • NoSQLと呼ばれるもので、Serverlessアプリケーションなどに利用されることが多いです。
  • RDBと比べると複雑な検索などはできませんが、処理速度が早く、拡張性が高い点が利点として挙げられます。

RDBとNoSQLの2種類を紹介しましたが、初心者の方は基本的にRDBから始める方がよいかと思います。

プログラミング言語とフレームワーク

次にプログラミング言語とフレームワークについてです。

プログラミング言語は、アプリケーション上のデータを扱うためのものです。

サーバーにインストールして、使用することができます。

データベースから取得されたデータは、サーバー上のプログラミング言語によって、加工・整形され、ユーザーに配信されます。

逆に、ユーザーから送られてきたデータも、プログラミング言語によって加工・整形をして、データベースに保存します。

フレームワークは、そのようなデータの流れをより開発者にとってよりわかりやすく、簡単にできることを実現したものです。

フレームワークを使用することで、複雑になりがちなアプリケーションの実装を、ある一定の基準の中でシンプルなものにすることが可能です。

プログラミング言語にもたくさんの種類がありますので、そのうちの一部を挙げます。

• Ruby, PHP

  • Webアプリケーションの開発に使用されることが多いです。
  • 日本でも使っている人が多く、その構築の速さからベンチャー企業などで採用されることも多いです。
  • Webアプリケーションのフレームワークだと、RubyはRuby on Rails、PHPはLaravelやCakePHPが有名です。

• Python

  • Webアプリケーションだけでなく、機械学習などにも使われることが多いです。
  • WebアプリケーションのフレームワークはDjangoやflaskが有名です。

その他にも、低レイヤーの言語や、関数型言語などたくさんの種類がありますが、ここでは割愛します。

ちなみにたまに聞かれますが、HTMLやCSSはプログラミング言語ではありません。
これらはマークアップ言語と呼ばれ、プログラミング言語と違って、データの加工・整形をすることはありません。
その代わりマークアップ言語は、プログラミング言語から受け取ったデータをユーザー向けに表示する役割を担っています。
詳しくは次のフロントエンドとバックエンドにて。

　　　　　　　　　　　　　　　　　

フロントエンドとバックエンド

最後にフロントエンドとバックエンドについてです。

基本的に、今回の記事で書いた内容のほとんどはバックエンドです。

• データベースからデータを取得
• 取得したデータを加工・整形
• データベースにデータを保存

これらは基本的にバックエンドの処理です。

フロントエンドの処理は、上述したHTML、CSSの行う、プログラミング言語から受け取ったデータをユーザー向けに表示することが大半です。

昨今Webの技術の進化によりフロントエンドのフレームワークが登場しました。
それらはJavaScriptという言語で作られており、バックエンドから受け取ったデータを更に加工したり、状態を保持したりすることができます。
またコンポーネントという単位で画面を切り出して、フロントエンドをよりプログラマブルに設計することができます。

JavaScriptのフレームワークには以下のようなものがあります。

• Vue.js

  • 3つのフレームワークの中で一番参入障壁が低いと言われています。
  • 小規模なアプリから導入することが可能ですが、大規模アプリになるとしっかりとした設計が必要となります。

• React.js

  • Facebook社が作ったフレームワークで、Vue.jsの次に学習コストが低いフレームワークです。
  • React Nativeというネイティブアプリを作るためのフレームワークも存在します。

• Angular.js

  • 上記の二つと比べると、学習コストは高いですが、大規模なアプリを作る際などはしっかりとして設計に助けられることが多いです。

これらのフレームワークは、Webアプリケーションを作成する上では決して必須なものではありません。

しかし、最近のWeb開発の動向を踏まえると、これらのフレームワークを触ることなしでWebアプリのエンジニアになることはなかなか難しいように思えます。

これらフロントエンドの言語は、バックエンドがサーバーで動いているのに対して、ChromeやSafariなどのブラウザで動いています。
そのためブラウザのバージョンや種類によっては動作しないことがある点も注意です。

これまでの説明を図に

簡単に図にしてみました。

まとめ

以上、本当におおまかでしたが、Webアプリの仕組みの大枠について書きました。

これからエンジニアを目指される方々は、しっかり自分で勉強をした上で、是非TechTrainを利用して色んなメンターにわからない箇所を聞くとよいかと思います。

最後まで読んでいただき、ありがとうございました！