こんにちは、ライターのヘルメです。昨今の教育現場には「読み書きそろばん」に加えて「プログラミング」の授業があると聞きました。ヤバイっすね。
ギリギリゆとり世代の私はプログラミングが一切できませんが、最近のIT/Web系企業でイケてる会社を見渡して、Webサービスつくりたい欲とプログラミング技術を身につけたい欲が半端じゃありません。
でも、Webと聞けば必ずセットになって付いて来る、HTMLやCSS、Rubyなどが何を意味しているのかが全くわかりません。このままではサービスが作れない！
ということで、今日は弊社の取締役でエンジニアのづやさんにWebサービスを作るための技術について教えてもらいました。
完全に初心者の僕は、「HTMLって何の略？はてな丸？」というところからのスタートですが、そんな僕にもわかるようにWebサービスの作り方を教えていただきます。
Webサービスを作るための技術って、何があるの？
ー づやさん！ Webサービスを作るための技術について教えてください！
 |
人物紹介：LIG 取締役 高遠 和也 通称、づやさん。LIG。すごくプログラミングができるし、すごく早いらしい。今回は僕にも理解できるように、多少厳密ではないけどわかりやすい説明をしてくれる予定。 |
|---|
いまサービスのローンチ前でめちゃくちゃ詰まってるけど、1時間だけなら、いいよ。
ブラウザはWebサイトを表示するためのソフト
ー では、よろしくお願い致します！
まず、ブラウザってわかる？
ー インターネットの画面のことですか？
そう、Internet Explorerとか、SafariとかChromeとか。
ブラウザはWebサイトを表示するためのソフトなんだけど、それぞれ違う会社が作っているよね。Internet Explorerだったらマイクロソフト、ChromeだったらGoogleというように。でも、例えばLIGブログというWebサイトはインターネットにひとつだけだ。じゃあ、なんで違う会社が作ったブラウザが、LIGブログをほとんど同じように表示できるのか、不思議になる。それは、Webの標準規格を決めている組織があって、その規格に従ってHTMLっていう“ルール”が定められているからなのね。
こういうルールで書いたら、こういうふうにブラウザで表示されるよ、って統一ルールで定義しているのが、HTMLっていう言語なんだ。
Webサイトに表示させるための“ルール”がHTML
ー なるほど！ じゃあWebで何かを表現するにはHTMLが必要なんですね。
そう。ブラウザが表示しているのはHTMLという言語で書かれた世界なんだ。そこで表示されるサイトの構造とか要素を構成するための言語が、HTMLだと思えばいい。なので、まずこれがないとWebサイトにものを表示することができない。ちなみに今、主流になっているのはHTML5という規格。
ただ、バージョンが上がるごとに増えたり減ったりするから、現在進行中でどんどん変わっていっているんだけど、HTMLのルールに則っていないと、まず画面に表示ができないので、ある程度は絶対覚えていないとWebで何かを作ることはできない。
Webサービスを作ろうと思ったら、いわゆるPHPとかJavaとかRubyっていうプログラム用の言語が必要なんだけど、それも最終的にはHTMLという言語にしてあげる必要があるんだ。
CSSはサイト上の表示を整えるもの
ー HTMLがないと、Webに何も表示できないことは分かりました！ でも、それだとすべてのWebサイトが全部同じ見栄えになってしまうんじゃないですか？
その通り！ 文字の色や大きさを変えたいと思うとき。その表示されているテキストなどの見栄えを整えるための言語がCSSなんだ。何もしないとブラウザのデフォルトの見栄えになってしまうので。CSSなしでもできるけど、Web上のサービスはだいたいCSSが使われている。だからHTMLとセットで必ず学んでおくといいよ。
ー CSSで見栄えを整えるって、具体的にはどんなことですか？
繰り返しになるけど、文字の色や大きさを変えるのはもちろん、例えばこれが記事になったときに、セリフが枠線で囲まれていると思うんだけど、それもCSSで装飾している。最新の企画であるCSS3だったら、3Dの回転のような立体的なアニメーションができるようになるんだ
サーバーサイド言語って？
ー じゃあ、先ほどづやさんが言っていた、JavaとかPHPとかRubyとかは何なのでしょうか？
JavaとかRubyとかPHPとか、そういうのはまとめてサーバーサイド言語って言われるんだけど、これらがよくイメージされるような、いわゆるプログラムのこと。どういうことかというと、HTMLは表示するための言語だから表示することしかできない。いつもLIGブログを書くときに使っているWordPressがわかりやすいと思うけど、「公開」ってボタンを押すと公開されるし、「非公開」って押したら非公開になるじゃない。でも、そういう処理はHTMLとCSSだけだとできない。
HTMLとCSSはあくまで表示に関わる言語なので、リンクで違うページをつないで遷移させるとかはできるんだけど、動的な計算とかはできないんだ。
操作によってサイトの挙動を変えることができる
ー どういうことでしょう？
例えば、「ログイン」って処理があるよね。で、ログインでパスワードが間違っていたら「エラーです」って返ってくる。逆にパスワードが当たっていれば、ログイン後の画面に飛ぶ。
それってボタンを押したら、何かの処理があってその判定が返ってきているわけだよね。そして「エラー」のHTMLを返すのか、「ログイン後」のHTMLを返すのか、判定の処理自体を返すのがサーバーサイド言語。入力した値によって操作を変える、サイトの挙動を変えるとか、そういうことをやりたいときに必要なの。
ー じゃあ、普通にWebサイトを見せるだけだったら、HTMLとCSSでいけるってことですか？
そうそう。ここに画像を表示する、とか表示する内容はHTML。フォントとか色、配置はCSS。
でも、例えばGoogle検索するとき、トップ画面で「a」って検索したら、「a」の検索結果が出るよね。これはリンクじゃないんだ。a用のページがあるわけじゃなくて、その時々によって検索結果を変えたり、検索する人によっても結果のページを変えたりする処理をしている。そういう動的な物事を処理するにはサーバーサイド言語（プログラム）が必要。そして、やりたいことに合わせて、それぞれの使いようが変わってくる。
個人的な考えだと、単純に覚える難しさでいえば、難易度が一番やさしいのがPHP、次にJava、一番難しいのがRubyかなと思う。それぞれの言語に得意不得意があるけど、サーバー内で動いて処理する言語って意味では、同じだね。
JavaScriptとJavaは同じじゃないの？
ー そういえばJavaScriptっていうのも聞いたことがあるな・・・Javaと同じなんですか？
名前は似ているんだけど、違う。JavaScriptってブラウザ上で動く言語なの。Javaってのは、どこかにあるサーバーの中で動く言語なの。例えば、LIGブログで下の方にスクロールしていくと、ページトップに戻るアイコンが右下に出るよね。これを押すと、少し時間をかけてページトップに戻る動きがあると。これが、ブラウザ上で動くJavaScriptなのね。これは時間をかけて上まで戻れ、というプログラムを書いているんですよ。
このアイコンの見栄えと位置はCSSで設定されていて、押したときに上に動かしているのがJavaScript。で、JavaScriptを動かしているのはChromeとかIEとかのブラウザという関係。
他には、WordPressの管理画面で記事を更新しましたと。そしたら、おれのブラウザもヘルメのブラウザも、記事の内容が変わっているよね。それはサーバー側で内容を変えている。それがサーバーサイド言語。LIGブログでいうとPHP。
一方「ページトップへ」とか、ブラウザ内だけで動かしたいのはJavaScriptじゃないとできない。これはサーバーサイド言語に対して、クライアント言語って呼ばれているんだ。
サービスを作る上で、なくてはならないデータベースのこと
ー サーバーサイド言語とクライアント言語、なるほど。
そして、さっき「記事の内容が変わっている」って言ったけど、この記事の内容を変更したのを保存しているのが、データベースと呼ばれるものなんだ。
ー データベース？ 聞いたことあるような・・・
データベースというのは、データを保存するためのソフトのこと。そして、データって、保存してあるだけでは意味がなくて、特定のデータを素早く取得したりとか、新しいデータを追加したりとかが必要だよね。そういうデータベース内の動きはまた別の言語が担当しているんだけど、それは今回は置いておこうか。で、Webサービスを作ろうと思ったら、お客さんの情報を登録したり、検索したりできないといけないよね。イメージは本がいっぱい置いてある図書館みたいなもの。ここでいうとデータは本になって、たくさんのジャンルや著者情報があって、借りたり返したりするんだ。
ー 具体的にイメージがつかないです、、
じゃあ、Twitterだったら、つぶやきの内容はデータベースに保存されて、ハッシュタグで検索できるじゃない。そういうのをデータベースがやってるんだ。
づやさんはどうやってプログラミングを学んだのか
ー なるほど。Webサービスの仕組みが分かってきました！ それにしても、づやさんはなんでエンジニアになったんですか？
ハローワークでおすすめされたからかな（笑）高校のとき授業で触ったことはあったんだけど、東京で仕事を探していたときに“未経験可”っていう求人があったから。
ー そ、そんなきっかけなんですね（笑）でも、そんなづやさんも今ではみんなに頼られるスーパーエンジニアじゃないですか。どうしてここまでなれたんですか？
が、頑張ったからじゃないかな。当時就職したのはSierで、国とか銀行とかのシステムを作ってたんだけど、それだと国とか銀行に就職しない限り自分が作ったものに触れないんだよね。そのときに代表のゴウに誘われて独立して、Webのプログラムをやりだしたんだけど、サーバサイド以外はHTMLもCSSもJavaScriptもわかってなかったから、ひとつサービスを作るたびにめちゃくちゃ勉強したんだよね。おれはぜんぜんスーパーエンジニアじゃないけど、それで成長できたとは思うよ。
ー なるほど。でも、ここまで聞いていてやっぱりちょっと難しいかも、とは思ったのですが、づやさんはプログラミングのどこに魅力を感じて、ここまでやってこられたんでしょうか？
そうねえ、単純だけど、思い通りに動いてくれるプログラムが書けたらうれしいし、やっぱり作ったサイトやサービスが誰かの役に立って、喜んでくれるのがうれしいからかな。独立しはじめて、HTMLもCSSもサーバサイド言語もJavaScript言語も全部自分一人でやったサービスがあるんだけど、それを納品した後に喜びの声をお客さんから頂いたときは、やっぱりうれしかったよ。懐かしいね。
プログラミング独学ならオンライン教材
づやさんのお話で、Webサービスがどのように作られているのか、そしてプログラミングの魅力がわかりました。でも、づやさんもいまのようになるにはやっぱりめちゃくちゃ勉強したんですよね。僕には無理かもしれない、と思っていたときに、紹介していただいたのがこちらのサービスです。
オンライン教材「世界で3万人が受講！未経験からWebプログラマーになるための全て」
http://act.share-wis.com/courses/23
こちらはゼロから基礎を学び、習得したスキルを実用的に活かすためのノウハウを網羅した、超初心者向けのプログラミング言語習得カリキュラム。5分～10分程度のレクチャー動画をチャプターごとに200以上、トータル30時間分のレッスンコンテンツを提供しています。
また、受講期限は設定されていないので、一度購入すれば必要なレッスン内容を頭出しで何度でも復習することができます。自分のペースで学習できそう！
本当に初心者でも、これを順を追って学んでいったら、なかなかのもんが作れるんじゃないかなぁ、そこそこ動きのあるものまでできる気がする。
うん、基礎からしっかり学べそう。プログラミングが身に付いてから、本当にいいサービスを作ることができるようになるまでの道のりは長そうですが、じっくり勉強していきたいです。
よーし、いいサービス作るぞ〜〜〜！！！
