初心者がウェブアプリ作り出す前のざっくりした理解のためのエントリ
この記事の対象は「サーバーって何？」くらいの人を想定しています。というか、これから何か作ろうというゼミの仲間に向けて書きました。ウェブについて「何も知らないのでまずはどういうものか知りたい」という人に役立てれば幸いです。
目次
- ウェブとは
- HTMLとCSS
- クライアントとサーバー
- ローカル環境と本番環境
- 使う言語の選択肢
- 独学するためのいろいろ
- 今回紹介しなかったいろいろ
- 何を作る？（2014年4月、加筆）
- まとめ
ウェブとは
via: photo by Iguana Jo
World Wide Webはとっても便利な通信手法です。ウェブ上では様々な資源がHTMLという言語で書かれた文書として、ハイパーリンクを通じてつながっています。
ハイパーリンク
サイトひとつひとつのドメインを覚える必要も無くネットのコンテンツを楽しめているのはハイパーリンクのおかげと言ってもいいのではないでしょうか。HTML文書にこのように書くだけで、それはハイパーリンクになります。
<a href="http://shgam.hatenadiary.jp">文系学生のプログラミング入門</a>
「ウェブ」と「インターネット」の違い
僕自身、言葉として「ウェブとインターネットって何が違うのさ」という疑問がけっこう長い間ありました。高機能なブラウザが当たり前の時代でインターネットを利用していると、この違いを意識するのは難しいです。
インターネットはウェブよりも大きな概念です。Wikipediaにはこう書かれています。
インターネットは、コンピュータネットワーク自体を指す言葉であり、ウェブはその応用技術のひとつである。
World Wide Web - Wikipedia
「httpリクエストを送った」なんてことを意識せずにハイパーリンクをクリックすればネット上を飛び回ってあらゆる資源をダウンロードできる。インターネット上に成り立っているこの素晴らしいシステムがウェブです。
高度に発展してきた技術を最初から俯瞰できるはずもないので、最初はふわっと捉えておけばいいと思います。インターネットやウェブはそれ自体が一つの技術ではなく、たくさんの技術の組み合わせによって成り立っています。
HTMLとCSS
たいていのウェブページは以下のようなHTMLという言語で書かれています。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>こんにちは</title> </head> <body> <a href="/">トップへ戻る</a> <h1>こんにちは！</h1> </body> </html>
これを装飾するのがCSSです。
h1 { font-size: 30px; color: red; }
昔はマークアップもデザインもHTMLに書いちまえという感じだったみたいですが、今はしっかりHTML（マークアップ）とCSS（装飾）で分けてデザインをする流れになっています。
クライアントとサーバー
いきなりクライアントとサーバーと言われてもイメージがしにくいと思いますが、クライアントもサーバーもコンピュータであることに変わりありません。クライアントはサーバーに対して「ファイルをくれ」と言い、サーバーはそれに応答します。要はそのコンピュータが担当する役割によって呼び名が違うのです。テニスでもサーバーとレシーバーがいますし、野球でもピッチャーとキャッチャーがいます。そんな感じです。
クライアント「ファイルくれ」
サーバー「ほらよ」 -> "index.html"
クライアントのわかりやすい形としてアプリケーション単位で言うと、ブラウザのことです。すなわちInternet ExplorerやGoogle Chromeなどです。
サーバーはたいていLinux系のOSを搭載したマシンで、そのマシンのApacheなどのサーバーのプログラムが対応します。聞き慣れない単語だったら流してかまいません。ちなみにクライアントはサーバーに対して日本語で話しかけるのではなく、httpという形式で「くれ」という旨を伝えます。
ローカル環境と本番環境の準備
ウェブアプリケーションを作りたいと思ったとき、一番つまづきやすいのがこの環境構築の部分でしょう。詳細は言語などによって違うので書きませんが、まあとにかく面倒なことが多いです。
ここでいう「環境」というのは、要は（ローカルも本番も）サーバーのことです。上でクライアントとサーバーについて書きましたが、「ほらよ」と言ってブラウザなどのクライアントにファイルを渡したりする役目をします。
ローカル環境
ローカル環境とは、要は自分が使ってるパソコンのことです。通常、いきなり本番用のマシンを用意しないで、自分のMacなりWindowsのノートパソコンなどで動作を確認しながらウェブアプリケーションを開発していくことになります。
本番環境
本番環境とは、実際にユーザーにレスポンスを返すサーバーのことです。世界中の人がアクセスできるようにドメインを取得して結びつけてあげます。
とても難しそうですが、「自前で用意したコンピュータを自分でサーバー用にセットアップして...」ということをしないでも大丈夫です。今はVPSだクラウドだPaaSだ、といろいろ便利なサービスがあります。たとえばSqaleというサービスを使えば、AWSというちょっと難しそうなクラウドプラットフォームを簡単に利用することができます。
初心者がウェブアプリを作るのであれば、上のようなサービス（PaaS）がベストだと思います。もし英語が最低限読めて無料で使いたいということだったら、Herokuの方が良いかもしれません。いずれにしても、最初からサーバーインフラの全てを理解するのは無謀です。難しいところはどこかに任せてでも、まずは何かしら作ったものを公開するという姿勢が最初のうちは重要だと思います。
使う言語の選択肢
サーバーは、「index.htmlを返してあげてね」というだけの設定にもできますがユーザーによって表示するものを変えたり、ユーザーからもらったデータをデータベースに保存したりもできます。
そういった処理を指定するためにあるのが、プログラミング言語です。サーバーサイドのプログラミングなので、そのままサーバーサイドプログラミングと言います。
これに使われる言語でメジャーなのが
などです。どれが良いのかは書きません。こういう宗教的なこと（プログラミング言語は一部では宗教扱いされています）をブログに書くのはとても恐ろしいことなのでやめておきます。
素人の自分からでも言えるのは、自分が使いたい環境でサポートされている言語、教えてくれる人が近くにいるのならその人が使っている言語が良いということです。初めてでスムーズに開発が進むなんてことはまず無いので、困った時に助けてくれる人がいると本当に助かります。
あと個人的には日本語の情報が多いものが嬉しいです。たとえば英語ができる人はよくPythonを選ぶ印象がありますが、自分の場合はそれほど英語をすらすら読める方ではなかったので、Rubyが好ましかったです。Rubyは日本人が生み出し日本人に愛されている言語です。そのため、検索すれば日本語の情報がたくさん見つかりました。
独学するためのいろいろ
学校で習ったり仕事で覚えるのと違って、独学でウェブアプリケーションを作るのは始めるのもやめるのも簡単です。もくもくと独学で開発を続けていくには何が必要なのでしょうか。
- 欲
- ドットインストール
- Mac
僕は、この３つが必要だと思っています。偉そうなことを書ける立場ではありませんが、どうしてこの３つなのかというのを書いてみます。
欲
正直、ゼミで発表するためとか単位もらうだけのためにウェブアプリケーション作るなんてまずモチベ持ちません。「これできたら絶対面白いな」というワクワク感とか、「広告を貼って金にするんだ」という欲が無いと、ヘタしたら環境構築でだるくなってやめるんじゃないかと思います。
ドットインストール
もうほんとに何をしたらいいかわからない、ぐぐるにもなにをぐぐればいいのかわからない。そんな状況からでも優しく教えてくれるのがドットインストールです。まずは開発環境を作るためにこのレッスンを見ましょう。
今回紹介しなかったいろいろ
簡単に書きたかったので、ごく一部しか紹介しませんでした。今回紹介しなかったけれど重要そうな技術ももちろんいろいろあります。HTML5といって、ウェブの新しい規格によっていろいろできるよーという話です。
リッチなアニメーションとかそういう表現には長いことFlashが使われてきましたが、最近はHTML5でやろうぜという流れがあります。あと、Canvasといって、ブラウザ上で絵を描いたりする技術もあります。
こういうブラウザ周りの技術の進化によって、ブラウザ経由で使うWebアプリケーションがプログラムをインストールしてから使うネイティブアプリケーションと同じくらいの使い勝手で提供されるようになってきています。
何をつくる？
作りたいものがあり、それに向かって一直線にコードを書いていくのは素晴らしいと思います。ですが、一方で危険なところもあります。セキュリティ面です。
たとえばブログのようにユーザーがテキストを投稿できるということは、ユーザーからデータを受け付け、そのデータをもとにプログラムを動かすということです。こちらで意図していないデータに大してどう対処するかというのがわかっていないと、サーバーが不正に操作されてしまう危険があります。
そういったリスクが小さいものからつくることをおすすめします。例えば、僕が最初につくったのはローカルで動くJavaScript製のRSSリーダーでした。こういったものなら、そもそもサーバーサイドのプログラミングが必要なく、RSSの配信元さえ安全だとわかっていれば、特に危険はありません。
とはいえ、何が危険で何が安全か、というのも最初のうちはよくわからないと思います。結局、作りながら勉強していくしかありません。「本を読んでセキュリティを完全に理解してからアプリケーションを作ろう」というのはなかなか辛いものがあります。というのも、本を読むだけだと、今読んでいる部分の10ページ前の事柄ですら忘れてしまうのです。あれは本当にイライラします。それよりかは、作ってから脆弱性を検証して、大丈夫なら公開するというプロセスが（個人開発では）ちょうどいいのではないでしょうか。
まとめ
ウェブアプリはどんなものを作りたいかによって、学習範囲も大きく異なってきます。最初はなかなか辛いですが、ウェブそのものについての基本的な理解と、困った時の調べ方を身につけると、一気に学習ペースは早くなると思います。頑張りましょう。
