ウェブログラム

実践しながらじっくり学ぶ、Webプログラム習得サイトです。自作サービスの公開までWeb開発を実践していきましょう!

Webrogram

自分のオリジナルサービスを作って運営しよう!

Webサービス開発初心者は「何を勉強」して「どう進めれば」良いのか?

f:id:iku8:20180828004538j:plain Webサービス開発の初心者の方は、この記事のタイトルにとても共感してくれるんじゃないでしょうか?

初心者の時に思うことと言えば、

プログラミング言語を学んで if分とかfor分とか分かった! で、次は何をすればいいの? 本当は会員制のサイトを作ったり、ソーシャルコミュニティーのサービスを作ったりしたいのに、 for分で何回も同じ文字表示して、何が楽しんだ。Webサービス開発なんて出来る気がしない。

こういう事を思う人はかなり多いと思います。 とりあえずサービス作りたいのに、何から始めれば良いのか分からない。何が分からないのかも分からないから次に進めない。

そういった思いがある人に、この記事は最高に有意義なものになると思います。

さて、Webサービス開発で必要なことがらを0から10まで教えましょう。

Webサービス開発の流れ

具体的な内容の前に、どういった流れWebのプログラミングを勉強して、どのように開発して 全世界に公開していくのかを簡単に説明したいと思います。

  1. HTML&CSS&JavaScriptを学ぶ
  2. デザインのフレームワークを学ぶ
  3. サーバサイド言語を学ぶ
  4. ソースコードバージョン管理を学ぶ
  5. データベースを学ぶ
  6. 開発環境を作る
  7. Webアプリケーションフレームワークを学ぶ
  8. VPSなどのクラウドサーバを使えるようになる
  9. ドメインをサーバに設定出来るようになる

※2,4,7に関しては無くても問題はありませんが、ないと最高にしんどいです。

これで一通り、自分一人だけで0から開発し全世界にWebサービスを公開できるようになります。 順をおって一つずつ説明していこうと思います。

HTML&CSS&JavaScriptを学ぶ

なんと言っても、Webですからこの辺は習得しておかないといけません。 習得と入っても、細かい設定など覚える必要はなく、どうやったら答えが見つけられるか(ググれるか)が重要です。 HTMLのタグなんて全て覚える必要はありません(100少しなので覚えられますが)

HTMLはサイトの構成、ここにはサイドバーがあって、ここにはナビバーがあるといったことが出来ればOKです。 CSSも色をつけられたり、HTML要素を中央揃えに出来る程度で問題ありません。

JavaScriptは言語なので、少しむずかしいですが、アラートを出したり、タイマーを作ったり出来れば良いぐらいです。

この辺の技術は3日もあれば結構習得できちゃいます。そして自分の作りたいサービスを作りながら、徐々に能力を高めて行ければよいでしょう。

デザインのフレームワークを学ぶ

CSSフレームワークと呼ばれる、既に出来上がっているWebデザインの雛形があります。 例えば、よく使うボタンなどのデザインなどを、既に色々なパターンを用意してくれています。

しかもそのデザインを利用するには、HTMLに「btn-success」などのclassをつけるだけ(あくまで例です)。 自分でCSSを考え、調整しつつデザインする必要はないんです。

しかも、勝手にレスポンシブデザインにしてくれたりもします。 CSSは自分で頑張って書かなくてもいいんです。

もちろん、CSSフレームワークだけでは手の届かないところもあるので、CSSの基本は抑えておくのがベストです。

CSSフレームワークには有名なところだと、

  • Bootstrap
  • Foundationn
  • Semantic UI

などがあります。 Bootstrapはかなり多くのサイトで使われているので、使ってみてはどうでしょう。Bootstrapを改良したフレームワークなどもあったりします。

サーバサイド言語を学ぶ

さて、Webデザインは出来るようになりました。これでWebサイトというものは作れるようになりましたが、 Webサービスは作れないでしょう。

今まで話してきた、HTMLやCSSJavaScriptはユーザに見える部分クライアントサイドの技術です(フロントエンドとよく呼ばれます)。 例えば、フォーム画面などでユーザからの入力によって、会員登録処理やコメント投稿を行う場合、

サーバサイドの言語の知識が必要です。

サーバサイドの言語は以下のようなものがあります。

などがあります。JavaScriptではできないのか?いえ、出来ます。JavaScriptにはNode.jsと呼ばれるサーバサイド用の環境があります。 しかし一般的によく知られているのは上に上げた言語です。

これらの言語はサーバ側で動きます。JavaScriptはブラウザ上で動くので、つまりユーザのPCで動きます。 一方インターネットを飛び越えて、サーバまで到達し動くのがサーバサイドの言語です。

サーバ上で動かすことで、DBからデータを取り出したり入れたり、ユーザのログイン情報を保持したりと、様々なことが出来るようになります。 ブラウザ上で動かすだけでは完結しないことが出来るようになるんです。この辺は実践してみるまでは概念が難しいと思います。

データベースを学ぶ

上のサーバサイドの言語のところで、データベースが出てきましたが、これは非常に重要な技術です。

ユーザを登録したり、ユーザが投稿したデータを保存したりと、ありとあらゆるデータを保存する場所です。 これがなければ、会員制サイトなど作れないといってもよいでしょう。

データベースは以下のようなものがあります。

まずはMySQLを初めてみて、DBのイメージを付けるのが良いです。実際にデータを入れてみたり取り出して見たり。

DBの操作に慣れてきたら、サーバサイドの言語を使ってDBを操作するということをしてみてください。 言語からDBを操作することが出来ると、データを加工したり抽出して入れなしたりと自由にできますよ。

ソースコードバージョン管理を学ぶ

ここは一番勉強することをおすすめしたいです。

バージョン管理、要は

ソースコード書いたけど、今まで書いてきた履歴を残す」

って感じです。 あまり重要そうに思えませんよね?履歴とか言われても、あまり見ないし・・・。 しかし、コレは本当に本当に重要です。

  • もし今まで書いてきた「コード」が消えたら?
  • 間違ってファイルを上書きしちゃったら?

こんな時役に立つのが「バージョン管理」です。 バージョン管理をすることで、1ファイルずつ変更点の履歴がずらーと見れます。 「あーあの時に戻りたい」と思ったら、自由に戻れます。

もう一つ、重要な要素として「チームでの開発」に向いています。 一人だけの開発だったら、ファイルの管理も楽ですが、複数人になるとどうしても 「あの人がこのファイルを修正しているから、今は触らないでおこう」 「あ、間違って上書きしちゃった」 なんてことがザラです。こんなことをしていたら、開発効率がぐんぐんさがります。

そんな時に「バージョン管理」が使えれば、他人がどのファイルを使っていようがお構いなく開発できます。 ブランチと呼ばれる、自分専用の空間みたいなのが出来、そこで作業すればOKです。

この辺も実際に使ってみて、少しずつ恩恵を受けられるようになると「バージョン管理なしじゃいられない!」となるはずです。

バージョン管理はGitと呼ばれるものを使うことをオススメします。現時点での主流です。

開発環境を作る

開発環境というのは、あるサービスを開発するにあたってそのサービスに特化した環境のことです。

例えば、言語はPHPバージョン...を使いたい、DBはMySQLの...を使いたいなど、サービスの特性によって好みのツールをチョイスしていくことになります。

Mac本体に全部入れて開発するぜっ」ってするのも楽で良いですが、他のサービスを作ろうとなり、使うツールが変わったらどうでしょう?その度消して入れ直すのは現実的ではないです。

なので開発環境と呼ばれる、自分の作りたいサービスに特化した環境を作りましょう。 詳しくは以下に記事を書いてみました。

webrogram.hatenadiary.jp

開発環境はインフラ知識が必要不可欠なので、敷居は高いですが、この辺の技術を学ぶと開発中何かと役に立ちまつし、 インフラを知っている開発者は貴重で重宝される存在です。

Webアプリケーションフレームワークを学ぶ

このフレームワークはサーバサイドのフレームワークを意味します。

PHPフレームワークJavaフレームワークなどがあります。

これらは何をするかというと、よく使うであろうプログラムを提供してくれています。 例えばDBへの登録処理。自分で頑張って書いても良いですが、セキュリティのことを気にかけたり、無駄な処理を書いてないかなど、気になることが多いです。

フレームワークを利用すると、その辺りのよく使うであろうプログラムを提供してくれ、なおかつ直感的で分かりやすく使いやすいものとなっています。 また、チームで開発する時もフレームワークの書き方に沿ってプログラムをしてくと、人毎に悪いクセが出づらく、整理されまとまったコードになっていきます。

Webアプリケーションフレームワークには以下の様なものがあります。

他にもかなり多くのフレームワークが存在します。最初のうちはフレームワークの特性など良く分からないことが多いので、どれか一つ学ぶのが良いと思います。 等ウェブログラムでは「Laravel」を取り上げています。ココ最近のトレンドでもあり、非常に人気もあるので学んでみると面白いですよ。

webrogram.hatenadiary.jp

VPSなどのクラウドサーバを使えるようになる

今まで紹介してきた技術で、一通りサービスは開発できるようになります。 が、みんなそこ止まりです。せっかくサービス作って、目的は全世界に公開して一稼ぎしたいのに、

自分のPCで動いて終わりは非常にもったいない。

どうせ開発するんだったら公開までしちゃいましょう。そこまで敷居は高くないです。

おすすめはVPSと呼ばれるものです。これは自分のサーバをレンタル出来るっといった感じです。 レンタルと入っても、サーバの設定は事細かくできるので、自分の思い通りです。

私はよく「さくらのVPS」を使っています。月額600円程度です。月に6本ジュース我慢すれば使えるので、そういう目でみるとお得ですよ。 何より、サービスが公開でき、サーバを持つことで知識も付きます。

公開までの流れはこうです。

ドメインについては後ほど。

たったこれだけです。サーバの初期設定を少しする必要がありますが、公開までそんなに大変じゃありません。

一度借りてみることをオススメします。

さくらのVPS以外にも、ConoHaやAWS、Herokuなど公開できるところはたくさんあります。この辺も調べてみると楽しいです。

ドメインをサーバに設定出来るようになる

VPSのところで少し出てきましたが、借りたVPSで全世界にサービスを公開するにはURLが必要です。 URLとはgoogle.comなどのドメインというものが必要です。

これは買う必要があります。日本であれば「お名前.com」や「ムームードメイン」などで年間契約で変えます。 安いもので年間30円、一般的に使われる「.com」のドメインは1000円程度です。 年間このくらいの値段ならほぼ痛手ではありません。

ドメインを買ったらVPSなどのサーバに対応づけます。するとGoogle検索エンジンがいずれやってきて、 世界から見えるようにしてくれます。

この辺の設定は初心者であれば、少し難しいのでいずれウェブログラムでも設定方法は紹介したいと思います。

まとめ

最初のうちはやることが膨大に見えて、大変そうなのは事実です。 ですが、着実に今回説明したステップをたどれば、自分で自由自在にサービスを開発し公開することが出来るようになります。

やはり開発は実践あるのみなので、作っては壊し作っては壊しを繰り返して徐々に習得していきましょう。

ウェブログラムでも、「サービスを公開し収益を得るまで」を全力でサポートするので、一緒に楽しみましょう! 「あなたが最高の開発者になることを祈っています」