【初心者向け】Webプログラミングの勉強方法

当サイトのリンクには広告が含まれています。

ここ1年くらい、仕事やプライベートを含め、フロントからサーバーサイドまで色々な言語を触ってきました。

やってみて感じた、私が思うおすすめの勉強方法をまとめます。これからプログラミングを勉強しようと思っている方の参考になれば幸いです。

ちなみに私はWebをやっている人なので、WebサイトやWebアプリについての勉強法になります。機械学習とか、スマホアプリとか、ロボットとか作りたい人は別の詳しい人に聞いてください。

目次

STEP1 静的なページを作ってみる

まずは静的なページと言われる動きのないページ作成から始めます。いわゆるWebサイトと呼ばれるやつです。

初心者の勉強におすすめな教材はprogateなので、ぜひ登録してみましょう。登録したら以下の言語の順番でレッスンをクリアしてみましょう。

HTML・CSS

まずは基本中の基本のHTML。WebサイトはHTMLで作られています。
CSSはスタイルシートと呼ばれる、色をつけたり文字の大きさを変えたりと装飾をするものです。HTMLと必ずセットで覚えましょう。

この2つを覚えるだけでも最低限のホームページは作れます。
ただ、HTML,CSSだけだとできることが限られてきます。最近のサイトは色々動いたりと華やかですよね。もう少し動きのあるサイトを作るために次の言語を覚えましょう。

JavaScript

HTML,CSSでは作れない画面の動きを作れます。

jQuery

JavaScriptのライブラリと呼ばれるもので、JavaScriptで書くとめんどくさい処理を簡潔に書ける便利なやつなので覚えておきましょう。世の中の多くのWebサイトで使用されています。

ここまできたら、STEP1は終了です。Webサイトの作り方が分かったはずです。

STEP UP!

Progateを使ってここまで学んだら、次のステップとして以下の順に挑戦してみるといいでしょう。Webサーバーがなくてもローカル(自分のパソコンの中)だけで出来ます。

1.入門書を買ってもう一度やってみる

Progateは非常に良い教材ですが、これだけでは足りない部分もたくさんあります。本は細かい部分も載っていますので、買ってやってみると良いでしょう。

私のおすすめの本は以下の記事で紹介しておりますので、よかったら参考にしてみてください

2.デザインカンプからコーディングをしてみる

実際の仕事ではデザイナーが作成したデザイン完成図(デザインカンプと呼ばれる)を元にコーディングをします。Photoshop、XDなどで作られたデザインデータからコーディングができる能力が必要なので、やってみましょう。

デザインデータは、「コーディング教材」として色んなものがネット上で探せますので見つけてみてください。noteなどで販売している方も多くいます。

STEP1 まとめ

さあ、ここまでやってみていかがでしたか?

今、思った感想に近いものを下からお選びください。

(1)次はログイン機能とか投稿ができるWebアプリを作りたい!SNSを作りたい!ショッピングサイトとか作りたい!
→そんなあなたは、STEP2へ進み、プログラミングを勉強しましょう。

(2)もっとHTMLやCSSをやりたい。Webサイトを作る仕事がしたい!
→そんなあなたはWebサイトを作る仕事やコーダーの道があります。
JavaScriptやCSS設計などを学んで、さらにレベルアップするといいでしょう。

(3)コードを書くより、画面のデザインをするほうがやりたくなった。
→そんなあなたはWebデザイナーの道があります。デザインの勉強をするといいでしょう。

(4)あまり楽しくない。難しくて無理。
→人には向き不向きがあります。他に楽しんでできるものを探すのがいいかもしれませんね。良い選択を!

STEP2 動的なページを作ってみる

STEP1では静的なページと呼ばれる、いつ見ても同じ情報が表示されるページを作りました。STEP2では動的なページと呼ばれる、投稿が出来たり、ログインユーザーに応じて表示が変わったりする動きのあるWebアプリを作ってみます。

これらもprogateにコースがありますので、順番にやってみましょう。

UNIXコマンド

プログラミングには欠かせないコマンドです。黒い画面で文字を打つアレです。これからよく出てくるので、慣れておきましょう。コマンドの勉強法は使いまくって慣れるしかありません。私は仕事で毎日使っていたら慣れました。

PHP、Ruby

サーバーサイドを動かす言語です。PHPでもRubyでもできることは似たようなものなので、好きな方で良いです。

軽く触ってみた印象でもいいし、身近に先輩エンジニアいるなら、聞けるようにその人が得意な言語とかでもいいでしょう。どちらか覚えてしまえば後からもう一方を覚えるのもやりやすいのでどちらを選んでも大丈夫です。

SQL

動的なページにはデータベース(DB)というデータを保管するものが欠かせません。SQLはデータベースを操作したり、必要なデータを抽出する言語です。非常に大事な概念なので知識として覚えましょう。

Git

ファイルのバージョン管理システムです。仕事のように複数人で開発するときは必要になります。必要な知識なので使えるようにしましょう。

フレームワーク

Webアプリ制作が簡単にできる便利なやつです。PHPならCakePHP、Laravel、RubyならRuby on Railsが有名です。CakePHP、LaravelはProgateにはレッスンがないので(2018年6月現在)教材は自分で探してください。

ここまできたら、STEP2は終了です。Webアプリの作り方が分かったはずです。

STEP UP!

Progateを使ってここまで学んだら、次のステップとして以下に挑戦してみるといいでしょう。

1.ローカルに環境構築をしてみる

自分のパソコン上で動かせるように開発環境を構築してみましょう。

2.チュートリアルをやってみる

Ruby on Railsを選択した方はRailsチュートリアルをやってみましょう。

3.オリジナルWebアプリをつくってみる。

オリジナルのものを作ってみましょう。ログイン機能、投稿・編集・削除機能、画像の投稿機能などが含まれているといいです。オリジナルが思いつかない場合は、掲示板サイトかTwitterの模倣などでも良いでしょう。

4.デプロイしてみる

作ったアプリをWeb上に公開(デプロイ)してみましょう。Herokuを使うとWebサーバーがなくても無料でできます。Railsチュートリアルでやり方は学べます。

STEP2 まとめ

さあ、ここまでやってみていかがでしたか?

今、思った感想に近いものを下からお選びください。

(1)Webアプリ作るの楽しい。プログラマーになりたい
→オリジナルアプリを作って、勉強したことをアピールすればきっと仕事が見つかるでしょう。まだまだスタート地点です。日々、勉強し続けましょう。

(2)やっぱり、プログラミングより見た目を作る方が楽しい
→そんなあなたにはフロントエンドエンジニアの道があります。JavaScriptを勉強して、さらにステップアップを目指しましょう!

(4)サイトやアプリの企画とかのほうがやりたい。
→Webプランナーやディレクターの道がいいかもしれません。

(5)あまり楽しくない。難しくて無理。
→人には向き不向きがあります。もっと違う道があるかもしれません。良い選択を!

さいごに

ここはまだスタート地点です。この世界は一生勉強です。

挫折しないためには、わからない所を教えてくれるメンターを見つける。そして、共に励まし、切磋琢磨できる勉強仲間を見つけるのが良いでしょう。

勉強会とか参加してみるのもいいですし、Twitterには積極的に勉強している方々が沢山いるので、フォローしてみると切磋琢磨出来ますのでおすすめです。

ちなみにプログラミングの一番の上達方法は、仕事にすることです。何年も独学しているくらいだったら、さっさと就職した方が、成長しますよ!これは私が身を以て体感しました。

私も日々勉強です。共に頑張りましょう。

目次