登場人物
駆け出しエンジニア（以下、後輩👦 と呼ぶ）
やっとの思いでHTML/CSS/JavaScriptを習得した、駆け出しエンジニア。
JavaScriptのライブラリやフレームワークも経験して、
とりあえずイメージしたWEBアプリを作成できるレベル感に達成した。
使っているブラウザはGoogle Chrome。
駆け出しエンジニアの友人（以下、先輩🧔 と呼ぶ）
駆け出しエンジニアと同じカリキュラムで勉強をした後、
駆け出しエンジニアよりも１年早くサーバー関連の仕事を経験してきた、彼の友人。
あらすじ
後輩👦 :
サーバーサイド言語を学ぶべきなのはわかるけど、これを学んだら何ができるようになるんだろう？
オンラインサービスが作れるようになる、というのはわかるんだけど、それだけなのかな？
なんかパッとしないな〜。
先輩🧔 :
おっ、後輩。
なにやら勉強のモチベーションに行き詰まっているようだね？
後輩👦 :
先輩！
そうなんだよ〜。サーバーサイド言語がとっても大事な知識だというのは理解してるんだけど、
JavaScriptでもいろいろ作れるようになって楽しんでるから、
今まで作れなかった、こんなものが作れるようになる！みたいなワクワク感がないと、
モチベーションがあがらないんだよ〜。
先輩👦 :
ちょうど、そんな時期かな〜と思って、相談にのりにきたよ。
１年前の僕も、おなじ気持ちでモヤモヤしていたから、僕が経験して得た知識を伝授してあげよう。
後輩👦 :
やったー！
オンラインサービス
先輩🧔 :
サーバーサイド言語を学ぶ一番の目的がオンラインサービスを作ることだというのは、わかるよね。
後輩👦 :
うん、自分が入力したデータを世界中の人と共有するには、
自分のPCのかわりにデータを配信してくれるPC（＝サーバー）が必要なんだよね。
先輩🧔 :
そう。そしてデータ共有方法の発展系として、
ユーザーのひとりが情報を更新したらリアルタイムで全てのユーザーに内容を反映できる「WebSocket」や、
ユーザーからのアクションがなくともサーバーからユーザーにデータを送信できる「Push通信」などがあるね。
ログインシステム（ユーザー情報の保存）
先輩🧔 :
オンライン化の次に大事な目的が、
ユーザーの情報を、こちらがわのPC、つまりサーバーに保存しておけることだよ。
後輩👦 :
JavaScriptの内容はすべてユーザーの手元に渡ってしまうものだから、
JavaScriptだけでパスワードっぽい機能を実装することは何の意味もないっていう話は聞いたことあるよ。
先輩🧔 :
そう。どんなに難読化などの対策を頑張っても、
ユーザーに見せたくない情報をJavaScriptに持たせている時点で、仕組みとしては欠陥品だね。
後輩👦 :
うんうん。
ただ、ユーザーの情報を保存しておく目的っていうのはイマイチイメージできないよ。
もちろん、保存する必要なんてない！とは思わないけど、
具体的にどんなことができるようになるかは、いまいちわからない。
先輩🧔 :
いちばんの目的は、ログインシステムを導入することだね。
IDとパスワードが一致するユーザーは同一人物だと判断することで、
たとえ使っているデバイスやブラウザが変わっても、そのユーザーの情報をひきつづき利用することができるよ。
後輩👦 :
うん。たしかに、それはそうだね。
先輩🧔 :
それに、会員の情報がなければ、「お誕生日おめでとうメールを送る」みたいな、情報をもとに分岐する作業はできないよね。
後輩👦 :
いやいや、別にサーバーに保存してなくても、誕生日を入力してもらう画面で情報を取得してlocal storageなどに保持しておけば
ユーザーがアクセスしてきたタイミングで「お誕生日おめでとうメッセージの表示」はできるんじゃない？
先輩🧔 :
たしかに。
後輩は、JavaScriptだけでもいろんな事ができるように、頑張って勉強しているよね。
ちなみに、JavaScriptでもメールを送る方法はあるから、「メッセージの表示」じゃなくて、ふつうに「メールを送る」こともできるよ。
気になるなら「JavaScript メール送信」でググってみてね。
後輩👦 :
そうなのか！
やっぱりJavaScriptって、なんでもできるんだなあ。
先輩🧔 :
まあ、話がそれちゃったけど、
ユーザーの情報をサーバーに保存しておくとどういうメリットがあるのかは、あとで詳しく説明する事にするよ。
閑話 シェル言語について
先輩🧔 :
ところで「シェル言語」については、既に習得済みだったかな？
後輩👦 :
うん。「コマンドライン」とか「シェルスクリプト」とか「Linuxコマンド」とか呼ばれているものだよね。
Windowsなら「コマンドプロンプト」や「PowerShell」、
Macなら「Terminal」を開いて入力することで、
PC内のファイルを作ったり消したりできる、PCの操作をするための言語だよね？
先輩🧔 :
うん。
ちなみにMacやLinuxで一般的に使われているシェル言語は「bash」という名前の言語だよ。
あ、最近のMacは、これを更に便利にした「zsh」という言語を標準で使うように変更されたね。
後輩👦 :
「絶対やっておいた方がいい」って言われて、とりあえず勉強したんだよ。
基本は難しくなかったし、
黒い画面でカタカタする感じがプログラマー！！って感じがして楽しかったけど、
ぶっちゃけまだ有効活用できてない。
先輩🧔 :
それもそのはず。
実はシェル言語を使う機会って、サーバーの操作をするときか、
手元のPCにサーバーに関わる設定をするときがほとんどだからね。
後輩👦 :
あっ、そうなの？
先輩🧔 :
うん、理由は単純で、サーバー用のPCには基本的にデスクトップ画面やマウスがないから。
手元にあるPCからサーバーに「SSH接続」して、シェル言語を使って操作するような方法しかない。
だから必然的に必要になってくるというわけ。
後輩👦 :
なるほど。学習中、どういう時につかうべきなのかイマイチ想像できなかったのは、
手元のPCでは基本的に使う必要がないからなのか。
先輩🧔 :
ちなみにサーバー用のPCを用意するとき、使われるOSはほとんどの場合「Linux」というOSだよ。なんてったって無料だからね。
「Linux」の標準のシェル言語は「bash」なので、手元のPCがMacであれば練習に使えるけど、
手元のPCがWindowsの場合、ルールやコマンドが色々違うから、「コマンドプロンプト」や「PowerShell」で練習するときは注意しながら進めたほうがいいよ。
それと、これは余計なお世話かもしれないけど、学習サービスによっては、
「パーミッション」という概念について解説されていないところがあるらしい。
シェルでファイルを操作するようになったら必ず必要になる大事な知識だから、
実際にサーバーに触りはじめる時には、勉強しておく事をオススメするよ。
後輩👦 :
僕が使った学習サービスでは、「パーミッション」というのはやらなかったな…。
その時が来たら、調べてみるね。
プログラミング単体で実行できる
先輩🧔 :
ところでなんで急にシェル言語の話をしたかというと、
次の話の説明をするためなんだ。
JavaScriptは、HTMLで読み込むことで、ページを開いたときに自動で実行されるのが標準の動作だよね。
後輩👦 :
そうだね。
先輩🧔 :
対して、サーバーサイド言語は基本的に「シェル」でコマンドを叩くことでも実行できるようにしてあるものなんだ。
JavaScriptをサーバーサイド言語として使えるようにした「Node.js」という仕組みも、こういうことをできるようにするためのものなんだよね。
まず、サーバー、もしくは自分のPCに好きなサーバーサイド言語をインストールする。
そうすると「シェル」でサーバーサイド言語を実行するためのコマンドが使えるようになる。
後輩👦 :
つまり、検証ツールのConsoleと同じようなことを、「コマンドプロンプト」や「Terminal」などの、
いわゆる「シェル」でできるのがサーバーサイド言語っていうこと？
先輩🧔 :
うん、Consoleみたいにひとつひとつ命令を実行していくこともできるけど、
基本的には、JavaScriptと同じようにプログラム言語を書いたファイルをつくっておいて、
そのファイルを「シェル」で一気に実行する、っていう使い方が一般的かな。
後輩👦 :
そうなんだ。
先輩🧔 :
つまりシェルでプログラミング言語を単体実行できることが、
JavaScriptと大きく違うポイントだっていうこと。
後輩👦 :
プログラミング言語だけを実行するっていうのが、いまいちイメージできないな。
先輩🧔 :
たとえばさっきの「お誕生日メール」を例にすると、
PCのどこかにユーザーの情報を保存しておけば、
その情報を取得しにいって、誕生日ならメールを送る、という処理を単体で実行できるよね。
後輩👦 :
ああ、そういう感じか。
JavaScriptのプログラミングは最終的にConsole.logするか、HTMLに出力するかっていうのが基本だったけど、その最終地点をメールにしちゃえば、プログラム単体で目的が達成できるもんね。
先輩🧔 :
そういうこと。
JavaScriptが「WEBページを開いている間しかプログラムを実行できない」ことに対して、
サーバーサイド言語は「プログラム単体で実行できる」ということも、サーバーサイド言語でできるようになるひとつのメリットだよ。
好きな時間にプログラムを実行できる
先輩🧔 :
プログラム単体で実行できることを踏まえて、
サーバーは更に「好きな時間にプログラムを実行できる」というメリットがあるよ。
サーバーに限らず基本的なPCの機能として、決まった時間に「シェル言語」を実行するための「cron」という仕組みがあるんだけど、知ってる？
後輩👦 :
聞いたことないよ。
あらかじめ実行するコードと、実行する時間をきめておけば、その時間に自動実行してくれるっていうこと？
先輩🧔 :
そのとおりだよ。
だから「cron」の設定をすれば、好きな時間に好きなプログラムの実行ができるというわけ。
もちろん、PCが起動していなかったらcronも動かないから、サーバーは常につけっぱなしにする事がほとんどだよ。
ユーザーがWEBページを開いていなくても、こちらの好きな時間にユーザーに対するアクションを起こすことができる。
ユーザーに対するアクション以外にも、サーバー内のデータの整理や、外部サービスを利用するために必要な情報を送信するみたいな処理を、自動で実行することができる。
これはJavaScriptには出来ないから、サーバーサイド言語ならではのメリットだよね？
後輩👦 :
たしかに。なんか勉強するぞって気持ちになってきたかも！
データベース
先輩🧔 :
ちなみにユーザーの情報を保存しておいたり、誕生日の人のメールアドレスだけ取得する、みたいな柔軟な情報操作をするために「データベース」っていう機能がよくインストールされるよ。
後輩👦 :
「データベース」は聞いたことある。そういう時に使うやつなんだね。
っていうか、データベースってインストールするものなの？
先輩🧔 :
うん。サーバーだって普通のPCと同じで、最初はただのPCだからね。
サーバーサイド言語も、データベースも、WEBサーバーという機能ですらも、
ぜんぶシェル言語を使ってインストールすることで使えるようになる、アプリみたいなものなんだよ。
後輩👦 :
そう聞くと、なんだかサーバーというものが今までより身近に感じるかも。
先輩🧔 :
データベース自体は、シェルから実行して単体で使うものなんだけど、
サーバーサイド言語には、その言語からデータベースにアクセスするための方法が用意されているから、
それを学べばサーバーサイドのプログラムでデータベースの情報を利用できるようになるよ。
WEBサーバー
先輩🧔 :
そういえば、さっきチラっと触れたけど
そもそもWEBサーバーってどういう機能か知ってる？
後輩👦 :
たぶん、わかってると思う。
HTMLやCSSやJavaScriptのファイルを、ネットを介してユーザーに配信できるんだよね？
先輩🧔 :
まあ、そのとおりだね。
そして配信する際に、特定のIPアドレスからのアクセスをブロックしたり、
アクセスされたアドレスによって表示するファイルを決めるのも、WEBサーバーの機能だよ。
後輩👦 :
表示するファイルを決めるって…
ユーザーがアクセスするアドレスは、サーバーのディレクトリ構成やファイル名そのままじゃなくても大丈夫ってこと？
先輩🧔 :
うん。◯◯◯というアドレスにアクセスされたら、△△△というファイルを表示するっていうことができる。
仮にサーバー内のディレクトリ構成やファイル名がごちゃごちゃしちゃっても、
ユーザーがアクセスしてくるアドレスは単純なものに変更できてしまうので、これもメリットのひとつかもね。
サーバーサイドレンダリング
先輩🧔 :
WEBサーバーの機能とサーバーサイド言語を組み合わせて利用した、重要な機能があるんだ。
サーバーでは、配信するファイル（主にHTML）の内容を書き換えて配信することができるんだよ。
後輩👦 :
JavaScriptでもHTMLの内容を書き換えることはできるけど、
サーバーでそれをするメリットは何なの？
先輩🧔 :
JavaScriptでHTMLを書き換えるということは、書き換え前のHTMLの内容も、書き換え後のHTMLの内容も、すべてユーザーの手元にある状態だよね？
後輩👦 :
えーっと…
書き換え前のHTMLの内容は、ブラウザの「ソースを表示」機能で見ることができるし、
JavaScriptの内容は、検証ツールの「Sources」タブから見ることができるから、
それを読み解けば把握できちゃう状況ではあるね。
先輩🧔 :
うん。それに対して、サーバーでファイルの内容を書き換えてから配信するということは、
ブラウザの「ソースを表示」機能で見れるHTMLが、既に書き換えられた状態になってるということ。
なので、どのように書き換えたかがユーザーに全く伝わらず、よりセキュリティ的に良い（＝セキュアな）仕組みになるよ。
それと、配信するファイルの容量も軽くなるから、通信量的にもお得になるね。
後輩👦 :
なるほどなあ。たしかに、HTMLとJavaScriptの内容を削減して配信できるわけだから、その分データは軽くなりそうだね。
先輩🧔 :
うん。だから、ユーザーがページ内で行った行動（入力やクリックなど）によって表示内容を判断しなきゃいけない部分はJavaScript、
ページ内での行動にかかわらず、ページを表示する時点でどのような表示内容にするか判断できる場面なら、サーバーサイド言語で書き換えるのが合理的だよ。
もちろん、必ずそうしろという事ではないけどね。
このようにサーバーで予めファイルの情報を書き換えて配信することを「サーバーサイドレンダリング」と呼ぶよ。
CMS（WordPressやEC-CUBEなど）
後輩👦 :
サーバーサイド言語でできること、いっぱい理解できたよ！
先輩🧔 :
よかった。最後に、CMSという使い方について説明するよ。
CMSというのは、WordPressやEC-CUBEなどのように、必要な情報を書き加えるだけで、
ブログやWEBサイト、通販サイトなどを作成できるシステムのことだよ。
後輩👦 :
聞いたことある！
先輩🧔 :
このCMSという仕組みは、さっき説明されていたような機能をはじめ、
サーバーサイド言語でできる事をフル活用して構築されているんだ。
なので、サーバーサイド言語が使えない環境では動かない。
言い換えると、CMSを使うにはサーバーが必要ということだよ。
後輩👦 :
じゃあ、CMSを使うためには、まずサーバーの勉強をしないといけないの？
先輩🧔 :
そうだよ。ただ、WordPressはとても人気なシステムなので、
サーバーについて知識がない人のためにWordPress環境を構築してくれるサービスもたくさんある。
だから、WordPressに限って言えば、サーバーの知識がなくても使うことができるんだ。
後輩👦 :
そうなんだ。
たしかに、WordPressはだれでも使えるっていうイメージがあったけど、そういう事だったのか～！
まとめ
先輩🧔 :
どうかな？
サーバーサイドを学ぶことで、
- オンラインサービスを作成できる！
- ログインシステムを実装できる！
- プログラム単体で実行できる！
- 好きな時間にプログラムを実行できる！
- データベースを利用したシステムを作れる！
- WEBサーバーを作れる！
- サーバーサイドレンダリングができる！
- WordPressやEC-CUBEのようなCMSがつかえる！
少なくともこれだけの事ができるようになるんだから、今までよりもっといろんなシステムが作れるようになる。
学習のモチベーションは、上がったかな？
後輩👦 :
うん！もちろん！
何のために勉強するのか、具体的に想像することができて、すっごく助かったよ！
ありがとう！！
先輩🧔 :
もちろん、僕の知識以外にも、出来るようになることはもっともっといっぱいあるとおもう。
もしかしたら、コメント欄で教えてもらえるかもしれないから、チェックしてみてね。
後輩👦 :
みなさま、コメント欄へのコメントお待ちしております！
先輩🧔 :
後輩くん以外の駆け出しエンジニアのみんなにとっても、
この記事が学習のモチベーションを上げるきっかけになったら、とってもうれしいな！
長い話になりましたが、最後まで読んでくれて、どうもありがとうございました！
後輩👦 :
ありがとうございました！！