Webサイトを作りたい人へ。一歩踏み出すために知りたい3つのこと

はじめに

こんにちは。先日「ゆとり世代の文系でも一人でWebサービスを作ってみました」を公開し、β版をリリースしました。 ご覧くださった方、シェアしてくださった方、セキュリティをチェックしてくださった方、どうもありがとうございました。

多くの温かいコメントを頂き、Webサイトを作った喜びをより一層味わうことができました。 中でも「参考にする」「自分もやってみる」「モチベーションが上がった」といったコメントが多く、舞台裏を公開して良かったと思います。

おかげさまで2週間足らずで9万PV弱を達成し、リリース初月で10万PVが達成できそうです。 検索流入も順調に増えていて、このペースなら来月には生活費をペイできそうです。

前回の記事では長くなりすぎるため、詳しい勉強法などは書きませんでした。 そこで今後の記事ではMonosyを作るために行った勉強法について書いていきたいと思います。 今回はその前提としてWebサイトを作る前に、僕が知っておきたかったこと、知っていればもっと早く始めていたであろうこと、を書きます。 また各言語・フェーズの勉強法へのリンクをまとめ、ハブページとしたいと思います。

Webサイトを作る、プログラミングを始める、といった時に、多くの人が先入観だけで「難しい」と思っているのではないでしょうか。 この記事が先入観を払拭し、一歩踏み出す後押しになれば幸いです。

Webサイトを作る上で知っておきたい3つのこと

Webサイトを作るに当たって、まず知っておきたいことは次の3つです。

  1. プログラムを書くとはどういうことか
  2. Webサイトがどのように動いているのか
  3. Webサイトを作る上で何が必須で何がプラスαか

これらを知っていると、Webサイトを作るということ、そのためにやるべきことのイメージができます。 イメージはとても重要です。人間、イメージできないものはマイナスの方向に過大評価する生き物です。 またゴールまでの道のりがわからないので、「あと一歩なのに」という状況で挫折してしまうこともあります。 本人からしたらあと一歩かどうか知る由もないのですね。 まずはイメージを作りましょう。

プログラムを書くとは

「PHPで電子メールを送信するプログラムを書きなさい」

こんな課題が出されたらどう思いますか?
「メールってどういう仕組みで送られてるんだ?」
「ネットワークの勉強からしなくちゃいけないの?」
「初心者には難しずぎる」

僕も始める前はそう思っていました。 しかし実際は、たった一行のコードでメールが送信できるのです。 プログラミングの勉強を始めてすぐにそれに気づき、一気に敷居が下がりました。

ほとんどの人がエクセルの関数を使ったことがあると思います。SUM関数やMAX関数など。 PHPなどの言語もエクセルと同じで、ほとんどの処理は関数で行います。 先の例ではmail関数やmb_send_mail関数で、一行でメールを送信するプログラムができてしまうのです。

多くの人が、「mail関数の中身を作ることがプログラミング」という先入観を持っているのではないでしょうか。 実際はそれらの一番難しい部分は関数が用意されているのですね。 なので「プログラムを書く」ということは、「関数を使う」ということなのです。 目的を果たすためには、またより効率的なコードにするためには、どのような順番で関数を並べれば良いのかを考える、「プログラムを組む」ということがプログラミングの本質です。

プログラムを組むとはパズルのようなもので、特に数学的な感じでもなく、かと言って暗記が必要なわけでもありません。 「持ち込みOKな大学のテスト」くらいにイメージすると、随分敷居が低くなりますね。

Webサイトがどのように動いているのか

Webサイトを作るには、プログラミングだけではなく、ドメインの取得やサーバー設定などが必要になります。 また先入観で難しそうだと感じるかもしれませんが、必要最低限の設定はあっという間に終わります。 作りながらWebの仕組みを理解するのもよいですが、必要以上のことに寄り道しないように、ざっくりとイメージしておきましょう。

ユーザーが「http://example.com/foo/bar」というURLにアクセスすると、まずはDNSに問い合わせ「example.com」をIPアドレスに変換してサーバーを特定します。 サーバーにはWebサイト公開用のディレクトリが設定してあり、例えば「/var/www/html」というディレクトリが公開設定されているとします。 そうすると「http://example.com/foo/bar」へのアクセスは、サーバーの「/var/www/html/foo/bar」というファイルへのアクセスになります。

DNSの仕組みなどは深く知る必要はありません。 GoogleMapで「都庁」と入力すると、「東京都新宿区西新宿二丁目8番1号」と解釈して調べてくれます。 IPアドレスも「49.212.212.49」のような数字の羅列で紛らわしいので、「example.com」とドメイン名でアクセスできると楽ですよね。 その変換をするのがDNS、といった程度の認識で大丈夫です。 都庁が一つしかないから可能なことなので、ドメイン名も世界で一つでなくてはいけません。

ここまでアクセスという言葉を使ってきましたが、ファイルへのアクセスとはそのファイルを実行するようにリクエストすることなので、今後はリクエストと書きます。 送られたリクエストはApacheなどのWebサーバーが処理し、ファイルを実行した結果を返します。

ここで「bar」というファイルが「bar.html」というHTMLファイルだったとすると、そのままファイルの中身が結果として返ります。 これも立派なWebサイトです。ページのレイアウトは同じで、条件に応じて要素を変えたい場合にPHPなどを使います。 例えばMonosyの場合、「Tシャツ」と「カジュアルシャツ」のページはレイアウトは同じですが、URLが違うだけで中身が変わります。

上記のように「bar」がPHPなどのプログラムだった場合は、そのプログラムが実行されます。 Webページを表示させるのであれば、このプログラムの最終的なゴールはHTMLファイルを作ることです。 HTMLファイルの所々にPHPが混在し、見出し文だけデータベースから取得してHTMLを完成させるといった処理をします。 結局HTMLファイルを返すことになるので、HTMLファイルを補強するといったイメージでよいと思います。

HTMLが返ってくるとページの表示が始まります。 もしHTMLに画像などのリソースを読み込む箇所があれば、再度サーバーに画像をリクエストして表示させます。 Webページにアクセスしたときに一気にページが完成しないのは、必要なタイミングでサーバーとのやりとりが発生し、その結果を待たないといけないためですね。 また、JavaScriptがあればページが読み込まれる段階で実行されます。

以上がざっくりとしたWebの仕組みです。 思ったよりも単純だと感じませんか?

Webサイトを作る上で何が必須で何がプラスαか

Webの仕組みを解説する中でも、何が必須なのか見えてきたかもしれませんが、ここで一通り必須となるものをまとめてみます。

  1. サーバーの用意・ドメインの取得・DNSの設定
  2. Webサーバーの用意
  3. HTML・CSSの勉強
  4. PHPなどサーバーサイドプログラミングの勉強
  5. MySQLなどのデータベースの勉強

全ページ直接HTMLを書くのであれば、4,5番目は必要ありません。 また、データをAPIから都度取得するなど、自前では保持しない場合は5番目は必要ありません。 逆にWordpressでブログを作る場合などは、そのCMSの勉強が必要になります。 このように作るものによって若干違いはありますが、概ねこの5つをやっておけばOKです。

最初何もわからないと、「Cやった方がいいよ」「いまどきjQueryでしょ」「Rかわいいよ、R」といった言葉に釣られ、目的にあった言語を選べないことも多いのではないでしょうか。 jQuery(JavaScript)はプラスαでOKですし、CやRに至ってはほとんどの人が使わないでしょう。 「まだ作るものも決まってないけど、何かしら始めたい」という人は、3番か4番をやると良いでしょう。

おすすめの勉強法

ここからは僕が実際に行った勉強法やこうすれば良かったと思う勉強法を紹介します。 勉強方法は各々に合ったやり方が良いと思いますので、あくまでも一例として参考にしてみてください。

まずは先程挙げた5つの必須要素を揃えていく順番ですが、次のようなフェーズを踏むと良いと思います。

  1. 企画
  2. HTML・CSSの勉強・モックの製作
  3. PHP・MySQLの勉強・MVCの構築
  4. サーバーの契約・ドメインの取得
  5. Webサーバーなどサーバー環境を整備
  6. DNSの登録・サイト公開

最初に企画フェーズを入れました。やはり作るものが決まってるかどうかでスピードもモチベーションも違うので、出来れば何かしらゴールをイメージしたいところです。 「楽天APIを使って商品検索サイトを作る」と題してWebサイト公開までの一連の流れを記事にしようかなと思っているので、何も企画がないという人はマネして作ってみてください。 (※筆者の気分により、予告なく変更または中止することがございますので、予めご了承ください。)

2番と3番の順序は、サイトの「見える部分」ができた方がモチベーションが高まるということで2番が先になっています。 ただし、クロールしてデータをためる場合は、データがたまるまでに時間がかかることがあるので、先にクローラだけ作って動かしておくのが良いでしょう。

サーバーなどのお金がかかるものは公開直前まで契約しなくて大丈夫です。 クロールしたデータを最初からサーバーに保存したい場合や、本番環境と同じ環境で開発したい場合などは先に契約してしまっても良いでしょう。

それでは各フェーズの勉強法を紹介します。 記事が長くなってしまうので、それぞれ別の記事として書きます。

おまけ

おわりに

最後までお読み頂きありがとうございました。 いかがだったでしょうか?思っていたよりもやらなければいけないことは少ないと思いませんか? 本記事が先入観を払拭するきっかけになれば幸いです。

今回は前提ばかりだったので、次回は具体的な方法論を書きたいと思います。 前述のリストの中で「これが読みたい」というのがあれば、優先度上げますのでお知らせください。

今後ともどうぞ宜しくお願い致します。

コメント機能は設置していないので、ご質問やご意見がございましたら、記事URLとともにTwitter@m0n0syにてお願いします。

Monosyブログ」の関連記事を読む