独学でゼロからWebアプリケーション・Webサービスを開発するための勉強方法・ステップ【プログラミング初心者向け】

この記事ではプログラミング初心者が、独学でWebサービス・アプリケーションを開発するための手順や勉強方法を紹介していきます。

以前に比べ、WebサービスやWebアプリケーションを開発するのは比較的簡単になりました。

実際に一人で開発・運営しているWebサービス・アプリケーションも数多くあります。

しかし、プログラミング未経験者が独学でゼロから開発するのはかなり大変です。

というのも、何をどのように勉強していけばいいのか分からないからです。

周りにプログラマーやエンジニアがいない限り、Webアプリケーションを開発するために何をどの順番で勉強したらいいのかというのは分からないと思います。

今回はそんな人のために、独学でWebアプリケーション・Webサービスを開発するために勉強すべきことや、その順番、方法などを詳しく紹介していきます。

スポンサーリンク
PC用の広告

独学でWebアプリケーション・Webサービスを開発する際に必要となる知識やプログラミング言語

まずはWebアプリケーションやWebサービスを開発する上で、どのような知識が必要になってくるのかを先にまとめておきます。

(それぞれについての詳細は次の章から書いていきます。)

必須の知識は、

①HTML・CSS

②Ruby on Rails

③SQL

必須ではないけど知っておいた方がいい知識は

④Webアプリケーションそのものの理解

⑤jQueryかjavascript

⑥Ruby

以上の6個がWebアプリケーションやWebサービスを独学で開発する際に必要な知識です。

整理してみるとそんなに多くないことが分かります。

Ruby on Railsは骨が折れますが、HTMLやSQLやjQuery等は比較的簡単にマスターできます。

それではここからはそれぞれの詳細を見ていきます。

さらにどのような順番で勉強していくかについても紹介していきます。

ステップ1 まずはHTML・CSSを勉強しないと始まらない

一番最初に勉強すべきことはHTMLとCSSです。

HTMLはWebサイトの骨格をつくる部分です。

パソコンやスマホで見ているサイトは全てHTMLでできています。

WebアプリケーションやWebサービスを作る際にもHTMLの知識は必須です。

また、CSSはHTMLで作ったものに装飾をする役割があります。

色をつけたり、大きさを変えたり、などです。

HTMLだけのサイトは全てが黒い文字で、レイアウトもぐちゃぐちゃです。

それを見やすくするのがCSSの役割です。

基本的にHTMLとCSSはセットです。

どちらか一方を勉強するのではなく、一緒に勉強するのが基本となっています。

市販されている本もHTMLとCSSはセットで勉強できるようになっているのが普通です。

Webサービス・アプリケーションを作るために最初にやることはこのHTMLとCSSを身につけることです。

ただ、身につけると言っても暗記する必要はありません。

「本やネットを見ながらであればどうにか書ける」というレベルになれば十分です。

おすすめの勉強方法は、『HTML5&CSS3レッスンブック』という本をまず読みながら、実際に手を動かしてHTMLとCSSを学ぶことです。

この本一冊であれば、数時間で終えることができると思います。

この本だけでも、HTMLとCSSの基礎を身につけられます。

ただ、この本だけだとレスポンシブなサイトは作れません。

(レスポンシブなサイトとは、スマホの画面のサイズにも合うサイトのことです。パソコンの画面で見るときとスマホの画面で見るときにレイアウトが変わるサイトのこと。)

現在であれば、WebアプリケーションやWebサービスもレスポンシブであることが多いので、レスポンシブなサイトを作りたいなら「HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)」という本も読んでおいた方がいいでしょう。

先ほど紹介した本の続編なので、先ほど紹介した本を読み終わった後であればスラスラ読めます。

どちらの本も全くのプログラミング未経験者向けに書かれた本ですので非常に分かりやすいです。

それでいてしっかりとHTMLやCSSをマスターできます。

HTMLとCSSに関してはこの二冊で問題ないです。もちろん他の本で勉強することも可能ですが、

大事なのはちゃんと手を動かすことです。

また、現在であればHTML5とCSS3の本を選ぶようにしましょう。

以上が最初のステップであるHTMLとCSSの勉強です。

所要時間は一冊5時間とすると、合計10時間ほどです。たった10時間でWebサイトが作れるようになります。

ここまで勉強すると、動きはないけど、見た目のしっかりとしたサイトが作れるようになります。

ステップ2 Webサイトに動きをつけるのがjQuery(ここは飛ばしてもいい)

HTMLとCSSだけだと、基本的には動きのないサイト(静的サイト)となります。

動きのあるサイト(動的サイト)にしたいなら、jQueryかJavascriptを勉強する必要があります。

例えば、トップページの一番上の大きな画像をスライドさせる、などの動きをつけることができます。

ここは必須ではないので、とにかく一番の近道でWebアプリケーションやWebサービスを作りたい人は飛ばしても大丈夫です。

jQueryはJavascriptで書かれています。

そう聞くと、Javascriptを先に勉強しなくてはいけない気がしますが、そうではありません。

jQueryは、Javascriptをより簡単にしたものというイメージです。

Javascriptで書くと10行必要なところを、jQueryでは1,2行で書けてしまいます。

もちろんJavascriptの知識があった方がより凝った動きを実現できますが、普段目にするものであればjQueryだけで実現可能です。

時間に余裕があればJavascriptを先に勉強してもいいですが、個人的には手っ取り早くjQueryから勉強すべきだと思います。

WebアプリケーションやWebサービスを開発する上で最も大事なのはRuby on Railsの部分なので、それ以外のところはできる限り手を抜く(いい意味です。)ことをおすすめします。

jQueryを勉強するなら、「jQuery レッスンブック jQuery2.X/1.X対応」という本がおすすめです。

jQueryの基礎を学べるのと同時に、そのまま自分のオリジナルサイト作成に使える例がいっぱい載っています。

今後自分でWebサービスを開発する際に重宝すると思います。

jQueryに関してはこの一冊で問題ありません。

もしこの本に載っている以外の動きをサイトにつけたいのであれば、ネットで調べれば問題ありません。

この本を勉強しておけば、ネットの情報もすんなりと理解できるようになります。

所要時間は3-5時間ほどです。

HTML・CSSと合わせても15時間ほどでここまで終えられます。

ここまでやれば、動的なサイトが作れるようになります。

と言っても、それは見た目だけの動きです。

ログイン機能などの本格的な機能はまだつけられません。

それをつけるための勉強は次のステップです。

ステップ3 Webアプリケーション・Webサービスの概要・根本的なところを理解する(ここは飛ばしても大丈夫です)

続いて勉強すべきはRuby on Railsです。

が、その前にWebアプリケーションとはなんぞやという部分を理解するステップがあります。

このステップを踏んでおくと、Ruby on Railsで開発する際にもスムーズにいきやすいです。

ただ、この知識は必須ではないので、飛ばしても全然問題ありません。

(個人的にはこのステップを踏んでおいたほうがいいとは思いますが。)

Webアプリケーションはそもそもどういうものなのか、ということを理解するための方法は「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか」という本を読む。ただそれだけです。

この本は本当に良著です。全くのプログラミング未経験者でも読み進めていけます。

それでいて、Webアプリケーションとは何かであったり、セキュリティの部分であったり、サーバーの部分についての説明が詳しく分かりやすく載っています。

この本に関しては以前の記事で紹介したので興味ある人は見てみてください。

もし本を買うのがお金がもったいなければ、図書館で軽く読んでみてください。

かなりの良著なので、図書館にも置いてあると思います。

もしなければ本屋さんで立ち読みしてください。

続いてがいよいよRuby on Railsです。

Webアプリケーション開発の最も重要なフェーズです。

ステップ4 最難関であるRuby on Railsの勉強だ ここを乗り越えればゴールは目前

ステップ4はRuby on Railsです。

Ruby on  RailsはRubyのフレームワークの一つです。

WebアプリケーションやWebサービスを比較的容易に開発するためのフレームワークです。

名前から分かると思いますが、元の言語はRubyです。

もちろん、WebアプリケーションやWebサービスを開発する際にPHPやJavaやPythonを使うことも可能です。

が、Rubyは日本生まれの言語なので書籍やネット上の解説も多く、さらに日本の多くの企業がRubyを使っています。

また、Rubyは初心者にも比較的わかりやすい言語です。(この点はPythonも一緒ですが。)

ですので、あなたが日本人であり、かつプログラミング初心者であればRubyで開発していくことをおすすめします。

今回の記事ではRubyを用いるという前提で話を進めていきます。

Ruby on Railsを使いこなすには、最低限のRubyの知識も必要です。

ただ、Ruby on Railsの勉強は実際にWebアプリケーションを作っていくので楽しいですが、Rubyだけの勉強はつまらないものが多く、途中で挫折する可能性が高いです。

なので、Ruby on Railsを勉強しながら、分からないところが出てきたらRubyの勉強もするというスタイルがいいと思います。

せっかくHTMLやCSSを身につけたのに、ここで挫折してしまっては元も子もないので。

Ruby on Railsの勉強の仕方ですが、大きく分けて二つあります。

まず一つ目がここまで同様、書籍を使って勉強していく方法です。

(もちろんこの際にも実際に手は動かします。)

おすすめの本としては、まずはRuby on Rails 5 超入門をおすすめします。

プログラミング初心者がRuby on Railsを勉強する際には環境構築も意外に面倒くさいと思います。

そのようなプログラミング初心者がつまづきがちな部分も分かりやすく説明されています。

Ruby on RailsでWebアプリケーションを開発するための基礎はこの一冊でかなり身につきます。

しかし、自分でオリジナルのWebアプリケーション・サービスを作るためにはこの一冊だけでは到底太刀打ちできません。
Ruby on Rails 5アプリケーションプログラミング」などの本も二冊目に読んだ方がいいと思います。

Ruby on Railsのおすすめの本はこちらの記事でも紹介しているので、参考にしてみてください。

二冊を読み終えたら、いよいよ独自でWebアプリケーションやWebサービスの開発を開始できます。

HerokuというWebサービスを使えば無料で、比較的簡単に環境構築をしてオリジナルのWebサービスを開発・公開できます。

それに関してはまた別の記事で書きます。

データベース周りの知識は、必要になったら「スッキリわかる SQL 入門 ドリル215問付き! (スッキリシリーズ)」などで勉強しましょう。

このあとは、分からない場所があればネットで調べて自分で対処していく必要があります。

これが意外に大変です。エラーが出て、全然解決できないことが多々あります。

何か新しい機能をつけたいけど、どうしたらいいのか全く分からないという状況も起こりえます。

周りにエンジニアやプログラマーなどがいれば、そのような人に聞きながら進めていきましょう。

経験者が近くにいない人や、挫折しやすい人はWebアプリケーションの作り方を学ぶオンラインサービス等を利用するのもおすすめです。

これがRuby on Railsを勉強するもう一つの方法です。

これらのオンラインサービスを使えば、現役エンジニアが手取り足取り教えてくれます。

実際にエンジニアの方がメンターとして一対一で教えてくれます。

やはり自分で全てを勉強するよりかなり効率良く学べますし、実際にオリジナルのWebアプリケーションやWebサービスを開発してリリースできます。

Ruby on Railsだけでなく、HTML・CSSからSQL(データーベースを扱う言語)までを一気に勉強できるので、より効率良く勉強したい方はオンラインサービスを使うことをお勧めします。

有名どころだと、CodeCampTechAcademy [テックアカデミー]などがあります。

ただ個人的には、いきなりお金を払うのではなく、一回無料体験を受けてみるのがいいかと思います。

もしそれで自分に合うようであればそのサービスを使っていけばいいですし、もし合わないなと思うなら他のサービスを試すか、もしくは書籍とネットを駆使して独学でやりきりましょう。

ちなみに独学でWebアプリケーションやWebサービスを開発する際のおすすめのオンラインサービスに関してはこちらの記事でまとめています。

おわりに

今回はプログラミング初心者が独学でWebアプリケーションやWebサービスを作るために、どのような勉強をするべきかを紹介しました。

最終的にオンラインサービスの宣伝みたいになってしまいましたが、お金を出来るだけ使いたくない人は、独学でもなんとかなるということが分かって頂けたでしょうか。

実際に開発しリリースすると本当に達成感があると思います。

一人でWebアプリケーションを開発するという目標に向かって頑張りましょう!

スポンサーリンク
PC用の広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
PC用の広告