見出し画像

Webサービスを作りたいならJavaScriptをまずは学ぶべき３つの理由

Teshi - AIアプリ開発

こんにちは、Teshi(@atsuhio)です。フィリピンに住みつつ、欧米の子供向けプログラミングスクールCodeGrit Jrを開発中です。オンライン英会話サービスも運営しています。

Webサービスを作ってみたいけど、どうやって作ればいいか分からない。どれくらい開発に時間がかかるか分からない。

今回の記事は、こうしたこれからプログラミングを学んで自分のWebサービスを作りたいという方に向けて書いています。

僕自身、独学でプログラミングを学んでオンライン英会話サービスや、現在のCodeGrit Jrを開発しているので参考になるアドバイスができると思っています。

Webサービス作成の全体像

最初にまずWebサービスとはどのような技術によって作られているのか全体像を見ていきましょう。

クライアントサイドとサーバーサイド

Webサービスの仕組み

分かりやすいように画像にしました。ものすごく単純化しているのですが、一般的なWebサービスというのはクライアントサイドと、サーバーサイドに分かれています。

Webサイトを表示している部分がクライアントサイド。データベースやデータベースからのデータ取得やデータ変更を扱う部分がサーバーサイドと呼ばれます。

なぜクライアントサイドとサーバーサイドで分かれるのか？

Webサイトのデータや何をしているかは見ようと思えば丸見えです。裏側で何をしているかやどんなデータを扱っているのかは表に出す必要はないし出したくありません。そのため、間にWebサーバーを入れます。また、最近はパソコンの性能が上がってるものの、Webサイト側で全てを扱うとブラウザやパソコンの処理速度に依存してしまいます。そのため、複雑なことをしたり、重要なデータの取り扱いを行う場合はサーバーサイド側で処理をします。これらがクライアント側とサーバー側で役割を分ける理由です。

クライアントサイドのしていること

クライアントサイドのしていることは単純化すると、色々なデータをサーバー側にリクエストして、受け取った情報をブラウザで処理して表示する、ということをしています。

この際に、ページの構造、デザイン、動作(クリックした時の挙動など)を扱うためにHTML、CSS、JavaScriptの３つの言語が使用されます。

HTML - ページの構造
CSS - デザイン
JavaScript - 動作

こういう役割分担ですね。

サーバーサイドのしていること

サーバーサイド側は、Webサーバーとデータベースに更に分かれています。データベースは名前からわかりやすいと思いますがデータを保存するための場所です。

例えば、Webサイトでよくあるのがユーザー登録の機能です。登録されたユーザーの情報は、データベースに保存されいつでも取り出したり変更することができます。

Webサーバーはこのデータベースと、ブラウザとの間に立って情報の処理を行います。例えば、ユーザーの新規登録の際には次のようなことが起こります。

1. フロントエンド側で、ユーザーが名前やメールアドレスを入力する。
2. ブラウザからWebサーバーに入力された情報が送信される。
3. Webサーバーは、パスワードの長さやメールアドレスの形式が正しいかの確認を行い問題なければデータベースへ情報を送信する。
4. データベースに無事登録が行われたら、Webサーバーからブラウザにユーザー登録後のページの情報を送信する。
5. ブラウザは送信されてきた情報をもとにページを書き換える。

細かいところでは、もっと色々なことが起こりますが大まかには上記のようなことが起こります。

Webサービスの作り方

この仕組みから、Webサービスを作るには、次のことをしないといけません。

1. フロントエンド側のデザインや構築を行う。
2. Webサーバー側で動かすプログラムを作成し、データを自分の思い描く通り処理できるようにする。
3. Webサーバーとデータベースのサーバーをそれぞれ立ち上げてWebサービスを公開する。


これらのことは全て自分でやるととても大変ですが、幸いなことに現在では様々なツールが存在してます。こうしたツールを活用すれば多くのことは簡単に実現できてしまいます。

例えばですが、ユーザーの登録やログインを扱う部分はセキュリティ面を考えると見た目以上に自分で作るのは大変です。しかし、最近ではGoogleの運営するFirebaseというサービスを使うことによってセキュリティ面をGoogleが担ってくれて実装も簡単にできるようになりました。それだけでなく、ユーザー数が少なければ料金もかかりません。

なぜJavaScriptをまず学ぶべきなのか

さて、ここまでで簡単にWebサービスの仕組みについて説明してきました。すごく単純にしていますが、大体ここまでの内容で理解していて大丈夫です。

ここからはこのWebサービスの仕組みをふまえた上で、なぜJavaScriptをまず学ぶべきかを解説します。

1. JavaScriptはフロントエンド開発で必須

上記の画像を再度見ていただきたいのですが、クライアントサイドで動作を扱う部分の言語としてJavaScriptが唯一の言語となっています。(厳密にはDirtという言語などありますがJavaScriptが圧倒的シェアを持っています。)

モダンなWebサービスでは、Webサーバーから取得した情報をページ遷移なしに表示するような処理が重要です。こうした処理にはJavaScriptの利用が必須となります。

これらの処理は、以前は(今でも)jQueryのようなライブラリが使われている他、最近ではReact.js、Vue.jsといったより複雑なアプリケーション作成が可能なライブラリが使われています。

このReactやVueの登場によって、以前はサーバー側で行っていたような処理をクライアントサイド側に移すことが増えています。そのためクライアントサイド(フロントエンド)エンジニアに対する需要は現在伸びています。

2. JavaScriptはWebサーバーのプログラムも書ける

フロントエンド側で動きを与えることのできるほぼ唯一のプログラミング言語はJavaScriptです。

逆にWebサーバー側のプログラムは様々なプログラミング言語で書くことができます。画像内にもある通りWebサーバー構築に向いた言語であればRuby、Python、PHP、Golangなど様々な言語を選べます。

しかし、このWebサーバー側でもJavaScriptを使うことができます。以前はサーバー側のJavaScriptは使い勝手が悪かったのですが長年の改善の結果現在では多くのスタートアップや大企業がサーバーサイドの言語としてJavaScript(Node.js)を使っています。特にソケット通信と呼ばれる技術を使う際に使われることが多くNetflixもこの部分にJavaScript(Node.js)を採用しています。

逆に、Ruby、PHPなどを利用してWebサーバーのプログラムを書く場合、必然的にフロントエンド側のためにJavaScriptを学ぶことが必須となります。

つまりJavaScriptを学べば、一つの言語を学ぶだけでWebサービスのクライアント側、サーバー側両方のプログラムを書くことができるようになります。なお最近ではTypeScriptという言語を利用して、それをJavaScriptに変換するというのが一般的です。

僕が現在開発しているCodeGrit JrもJavaScript(TypeScript)でサーバーサイドとクライアントサイド両方を書いています。以前はRuby on Railsをサーバーサイドで利用していましたが2つの言語を利用すると頭の切替が大変だったりしやすく１言語にすることにかなりメリットを感じています。

3. JavaScriptの求人は豊富

さて、Webサービスを自分で作成したとしてそのサービスで食べていけるようになるには時間がかかるかもしれません。こうした時には、企業でエンジニアとして働きながら広告費、運営費、生活費の捻出をしないといけない場合もあるでしょう。

実は上述したReactやVueのようなツールはまだ登場してから10年以内、本格的に利用されるようになってからまだ数年と他の言語に比べて歴史が短いです。

それまではjQueryというツールが主要なものでしたが、本格的なWebアプリ開発には向いておらずJavaScriptエンジニアの重要性はそれほど高くありませんでした。

またJavaScript自体もES5(現在はES6)までは仕様に問題が多かったこともあり本格的なJavaScriptプログラマはまだまだ少ないのが現状です。

そのため、ReactやVueを書けるプログラマは世界中で引き手あまたとなっています。

こうした点でも、JavaScriptをまずマスターすることは保険としてオススメです。

JavaScriptの習得難易度は？

さて、ここまででJavaScriptの習得をオススメしてきましたが気になるのは習得の難易度ではないでしょうか？

JavaScriptの習得難易度は、他のプログラミング言語と比べてRubyやPythonのようなスクリプト言語と呼ばれる言語とほぼ同じ程度だと僕は感じています。TypeScriptをやろうとすると型の概念など憶えないといけないので少し大変になりますが、それでもJavaやGolangのような言語に比べると難易度は低めです。

もう一つのメリットは、JavaScriptならブラウザ内で簡単に試せるということです。例えばJSFiddle、CodePenのようなサービスを利用するとJavaScriptをブラウザ内で簡単に実行することができます。これも初心者の方には手軽で手を出しやすいといえます。

JavaScriptが学べるオススメのWebサービス

さて、初心者の方に手が出しやすいとは言ったもののどこから始めたらいいのかわからないという方も多いかと思います。そうした方にオススメなのは以下にあげるサービスです。

また動画講座やプロゲートの説明はわかりやすいものの、情報量の点では本や公式サイトがより優れています。本も組み合わせて学ぶのがオススメです。

より良い書き方を学びたい、効率的に学びたい場合は書籍や、動画講座に比べると高くなりますがプログラミングスクールも検討するといいでしょう。

プロゲート

プロゲートは、画像にある通り初心者の方がプログラミング学習をスムーズに始めることを主要目的において作られたサービスです。

プロゲートの特徴として、Webサイト内にコードを実行する環境がついているので初期設定を行う必要がないことです。またJavaScriptのバージョンもES6に対応しています。

料金: 月額1,078円(2019年10月1日より)
形式: オンライン
期間: 月更新で期間なし

Udemy

Udemyはアメリカ発のサービスで、個人の作成した動画講座を購入してプログラミングを学習できます。もともとアメリカのサービスなので英語ができたほうが選択肢は広がりますが日本語でも最近は講座数が増えてきています。英語ができる方に関して言うと、Udemyが一番おすすめでここで3つくらい人気コースを買ってやれば間違いなくサービスを作れるレベルに到達すると思います。

普段は、講座の料金が高めなのですが頻繁にセールをしているのでセールを狙って講座をまとめて買うのがオススメです。

料金: 1,440円(ただしセール中のみ)
形式: オンライン
期間: 買い切り

まとめ

いかがだったでしょうか？ これからプログラミングを学んでWebサービスを立ち上げたいという方や、既にアイデアがあるという方はぜひ参考にしてください。

また、この記事と関連して現在企業での採用件数が急増しているGatsby.jsを利用したWebサイト制作を学ぶ無料の学習コースを公開しています。JavaScriptの講座も含みますので興味のある方は是非ご覧ください。