プログラミングど素人がWebサービスを作れるようになった勉強法 | Tomoyuki Kato's Blog

プログラミングど素人がWebサービスを作れるようになった勉強法

LIFE
この記事を書いた人

PharmaXというオンライン薬局のスタートアップで薬剤師・エンジニアとして働いています。Rails・React・TypeScriptなどを書きます。英語が得意でTOEIC900点・通訳案内士資格取得。主に薬剤師の働き方やプログラミング、英語学習について書きます。当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
>> 詳しいプロフィール

Tomoyuki Katoをフォローする

 

「プログラミング初心者は、どこから勉強すれば良いんだろう?」

 

たしかに、どこから勉強すれば良いか分からないですよね。

僕自身もプログラミング学習を始めた頃、すべてが手探りで大変でした。

 

そこでこの記事では

  • プログラミング初心者がWebサービスを作るようになれる勉強法
  • どのプログラミング言語を学べば良いのか

などについてまとめてみました。

 

この記事を書いている僕は、薬剤師をやりつつプログラミングを独学してWebアプリを公開できるまでに上達したという経験があります。

 

なので、その経験をシェアできればなと。

 

以下の記事でも書きましたが、本業がエンジニアじゃなくてもプログラミングを学ぶメリットは大きいので。

 

では本題へ。

 

プログラミング初心者はどこから勉強すべきか

 

さっそくプログラミング初心者にオススメの勉強法を解説していきます。

ステップ1:プログラミング初心者はHTML&CSSから勉強しましょう

プログラミング初心者は、

  • HTML
  • CSS

を最初に勉強しましょう。

 

HTMLは見た目を作る言語

HTMLは、Webページを作るのに必要なもっとも基本的な言語です。

例えば、以下のようなコードを書いたとします。

 

<h1>Hello, World!!<h1>

<p>This is a sample site.</p>

<p>Enjoy programing!</p>

 

そうすると、こんなページが作られます。

これがHTMLです。

CSSは見た目を装飾する言語

CSSはWebページをデザインするための言語です。

CSSを書くことによって、Webページの見た目をキレイに整えることができます。

 

先ほどHTMLで作ったページの見た目を変えてみましょう。

変更前がこれです。

 

 

で、CSSで以下のように書きます。

 

h1 {

color  red;

font-size:  60px;

}

 

p {

font-weight:  bold;

color: green;

}

そうすると、先ほどまで地味だったページが、こんな風に変わります。

文字が大きくなったり、文字に色がつきました。

このように、CSSはWebページの見た目を装飾する役割があります。

 

HTML & CSSのオススメ勉強法

HTMLとCSSは、Progateで学ぶのがオススメです。

Progateはオンラインのプログラミング学習サービスで、とにかくわかりやすいことが特徴。

 

プログラミングは始めるまでの下準備(環境構築)が非常に大変なのですが、Progateは環境構築をすっ飛ばして勉強できます。

 

そのため、ガチ初心者がプログラミングを勉強するためのハードルが一気に下がるのです。

 

さらに言えば、

  1. スライドを読んで概要をつかむ
  2. 実際にコードを書く

のステップで勉強が進むので、記憶にも残りやすいです。

 

イメージとしては、こんな感じ。

 

 

 

 

しかも月額980円。

 

このクオリティで980円はすごいですね。。

ちなみに、僕はなんだかんだ3年ちょっとくらい課金し続けています。

 

プログラミングの本を買うくらいなら、まず月額980円を払ってProgateで勉強しましょう

それくらいガチ初心者にはオススメです。

Progateで勉強する

 

ステップ2:HTML&CSSを学習したらBootstrapを学ぶのがオススメ

HTMLとCSSを勉強し終わったら、Bootstrapの勉強をしましょう。

Bootstrap=CSSをメッチャ楽に書けるようになるもの

Bootstrapとは、CSSのフレームワークです。

 

「CSSをメッチャ楽に書けるもの」

と思っておけばOKです。

 

CSSで書こうと思ったら5行かかるものを、Bootstrapなら1行ですむということも珍しくありません。

 

それくらいBootstrapを使うと、開発が楽になります。

そして楽なのもメリットですが、フレームワークは何より楽しいです。

 

初心者でもそれなりに良い感じのデザインになってしまうのがBootstrapの良いところなので、早い段階で勉強しておきましょう。

 

Bootstrapのオススメ勉強法

Bootstrapは、ドットインストールで勉強しましょう。

ドットインストールもProgateと同じくらい有名なオンラインプログラミング学習サービスです。

 

Progateと違いは、動画でプログラミングを学べること。

無料講座と有料講座がありますが、幸いにもBootstrap講座は無料です。

 

ぜひチェックしてみてください。

ドットインストールで勉強する

 

ステップ3:サーバーサイド言語を学ぼう

ここまでは、Webサービスの見た目を作るための勉強法でした。

見た目を作るための勉強が終わったら、サーバーサイドの言語を学びましょう。

 

サーバーサイド言語=Webサービスのシステムを作るための言語

サーバーサイド言語とは、Webサービスのシステムを作るための言語です。

 

よく「どの言語を学ぶべきか」という話題になりますが、ここでいう言語がいわゆる”サーバーサイドの言語”のことです。

 

僕が以前に作った「おくすり薬価検索」というサービスを例に出して説明します。

名前の通り、このサービスは薬の値段を検索できるサービスです。(すでに閉鎖)

 

おくすり薬価検索は、データベースの中に薬の情報が入っています。

 

で、下の画像のように「ロキソニン」と検索窓に入れると、ロキソニンの情報がデータベースから取り出されるというわけです。

おくすり薬価検索の使い方

おくすり薬価検索の検索結果

 

この薬の情報をやりとりしているのが、サーバーサイドの言語です。

 

まとめると

  • 見た目→HTML・CSS・Bootstrap
  • 裏でシステムを動かす→サーバーサイド言語

と理解してもらえればOKです。

 

ガチ初心者はどのサーバーサイド言語を選ぶべきか

Webサービスを作るのによくオススメされているのが

  • Ruby(ルビー)
  • PHP(ピーエイチピー)
  • Python(パイソン)

の3つです。

 

ちなみに、僕はRubyを使っています。

僕の場合、完全独学でプログラミングを始めたので、どの言語を学べば良いかわかりませんでした。

 

なので、それぞれ勉強してみて最終的にしっくりきたのがRubyだったので、Rubyを今でも使っています。

 

プログラミング初心者はRubyが勉強しやすい

個人的には、プログラミング初心者にはRubyがオススメです。

なぜかというと、Rubyは日本語の情報が多いからです。

 

プログラミングは、どうやって機能を実装するかGoogleで検索することがよくあります。

 

この時、英語で検索しなけらばならないこともであるのですが、Rubyの場合は日本語コミュニティが活発のため、日本語で検索しても解決策が分かることが多いです。

 

これはプログラミング初心者にとって、かなり大きなメリットかなと。

 

そして何より、Rubyは書いていて楽しいです。

楽しいと挫折しにくくなるので本当にオススメですね。

 

繰り返しになりますが、どのプログラミング言語を勉強するか迷っている場合は、とりあえずRubyを勉強しておけば挫折しづらいかなと思います。

 

サーバーサイド言語を覚えたらフレームワークも勉強しよう

サーバーサイド言語を学んだら、サーバサイド言語のフレームワークも勉強しましょう

 

先ほども書いた通り、フレームワークとは「コードをめっちゃ楽に書けるもの」と思ってもらえればばOK。

 

楽になるのもメリットですが、そんなことよりフレームワークはとても楽しいので、ぜひ勉強してほしいです。

 

ProgateでRubyのフレームワーク「Ruby on Rails」を学べます。

Twitterのようなアプリを作る実践的な講座です。

 

個人開発する時に役立つ知識をしっかり学べるので、ぜひチェックしてみてください。

Progateで勉強する

 

ひと通り勉強したらプログラミングでプロダクトを作ろう

 

ひと通り勉強が終わったら、オリジナルのプロダクトを作ってみましょう。

プログラミングは基礎学習をずっとしていても意味がない

Progateやドットインストールでずっと勉強していても、プログラミングは上達しません。

なので、基礎学習が終わったらオリジナルのWebアプリを作りましょう

 

よくありがちなのが

「もうちょっと基礎を勉強してから何か作ろう」

と考えてしまうことです。

 

気持ちは分からなくもないですが、それはポケモンで例えると「最初の町でコラッタをひたすら倒して経験値を稼ぐ」のと同ようなものなんですね。

 

レベルを上げるには、どんどん先の町に行って強いポケモンを倒し、より経験値をたくさん稼いだ方が効率的です。

 

この”どんどん先の町に行く”という過程が、プログラミングで言うところのプロダクト製作というわけです。

 

プロダクト製作後に基礎学習すると点と点がつながりやすい

たぶん基礎学習をしている時、

「このコードってどういう意味があるんだろう?」

と疑問に思うことがでてくると思います。

 

しかし、その状態で何かしらWebアプリを作ることが重要です。

なぜなら、実戦経験を積むことにより、点と点がつながって疑問が晴れることが多いから。

 

抽象的で分かりづらいと思いますが、応用学習をすると不思議と基礎知識も充実してくるのです。

 

とりあえず僕が言いたいことは、

「基礎学習が終わったら、とりあえず何か作ろう」

ということです。

 

プログラミングが1番上達するのは、何かを作っているとき。

これは間違いありません。

 

特に作りたいものがないなら、2chみたいな掲示板を作ってみましょう。

「Ruby 掲示板」みたいな感じでググれば、作り方はいくらでも出てきます。

 

コツコツ頑張りましょう。

 

まとめ

まとめると、以下のステップで勉強するのがプログラミング初心者にはオススメです。

 

【オススメ勉強法】

  1. HTML&CSS
  2. Bootstrap
  3. Ruby
  4. Ruby on Rails
  5. プロダクト製作

 

以下の記事でも書きましたが、本業がエンジニアじゃなくてもプログラミングを学ぶメリットは大きいです。

 

プログラミングを学ぶハードルはかなり低くなっているので、興味があればぜひチャレンジしてみてください。

 

参考になれば嬉しいです。

では!

タイトルとURLをコピーしました