プログラミング

プログラミング初心者の学習の始め方【WEB制作スキルの習得を徹底解説する】

こんにちは、ぽんこつです。

最近は、Webサイトを制作したり、Webサービスを作ったり、UdemyでPython/Djangoの勉強をしたりしています。

 

当記事では、プログラミング初学者に向けて、

「プログラミングで何が出来るようになるの?」
「WEBサイトを作りたいけど、何から始めればいいのか分からない!」
「独学でも大丈夫かな?スクールに通おうかな?稼げるようになるかな?」

など。そのような疑問にお答えします。

自身の経験を元に『WEBサイトはどのように作ることができるのか』を解説し、WEBサイト制作までの最短距離をお教えします。さらに、この記事の内容をマスターすることで、様々なWEBサイト制作に関する案件を獲得することも可能です。

プログラミングを用いて、独立したいとお考えの方はぜひご覧ください。

 

はじめに

日本では、IT/WEB業界の急成長に伴って、エンジニア不足が騒がれています。それは『2020年問題』とも言われ、IT技術者不足が揶揄されています。

そのため最近では、各社エンジニア採用のハードルを下げており、採用年齢の引き上げや、インド人やベトナム人などの外国籍のエンジニアなども積極的に採用しています。

そんな中、メガベンチャーや大手インターネット企業(DeNA、楽天、サイバーエージェント、グリーなど)では、技術レベルの高い学生に対して新卒採用であっても、1000万円に近い給与・年収を提示しています。

技術レベルの向上は必須ですが、プログラミングスキルを身につけ、エンジニアとして働くことで、年収のレンジをあげることも可能です。また、エンジニアであればリモートでワークすることも可能です。

共に技術を身につけ、豊かな暮らしはもちろん、時間的に自由な暮らしも手に入れてしまいましょう。

 

WEBサイト制作に必要な知識とスキル

簡単なWEBサイトであれば、超初心者でも20時間ほどで作れます!

ぜひ1週間くらいで簡単なWEBサイトを作ってみましょう!
※その方法や学習順序も次の章で後々説明します。

必要となる知識やスキルは主に下記の5つ。

  1. HTML
  2. CSS
  3. JavaScript
  4. PHP&SQL
  5. Bootstrap

簡単なWEBサイトであれば②までのスキルで作れます。しかし、それ以上のサイトを作るようであれば、もう少しだけ学ぶ必要があります。

それでは1つずつ見ていきましょう。

1. HTML

『先生が黒板に書いた文字をノートに書き写していく』

はじめはそれぐらいのイメージで構いません。

HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。今、あなたが見ているこのページもHTMLで書かれています。

つまり、HTMLはWEBページそのものです。

HTMLでは「見出し」「段落」「リスト(箇条書き)」「表」「強調」などの役割を与えることができます。これによって、機械や視覚的にこのページを見ている人以外(音声ソフトを利用している方)にも情報を伝えることができます。

HTML=WEBページ(ホームページ)なのです。

2. CSS

こちらは、ウェブページのスタイルを指定するための言語です。HTMLだけで書かれたものは、書いた順に文字や画像が並んでいるだけで、見やすくなく美しさもありません。

『HTMLで書かれたWEBページにデザインを加えていく』そんなイメージです。

HTMLに対して「色を指定」したり「サイズを指定」したり「配置場所を指定」したり「背景画像を指定」したり「幅や高さを指定」したり。様々なデザインをCSSで加えることが可能です。

簡単なWEBサイトであれば、『HTML』と『CSS』の2つのスキルだけで可能です。僕が実際に本を見ながら独学で作ったWEBサイトの『Komorikomasha』

3. JavaScript

簡単なWEBサイトであれば、上記の2つの言語のみでWEBサイトを作れます。

しかし、WEBサイトに動きをつけたい場合はJavaScriptを用います。何枚かの写真をスライドして表示させたり、ランキングやバナー広告などを表示するサイドバーを出し入れしたり、ユーザーが操作して表示を替えれるWebページはJavaScriptなどで制作されています。また、WEBページ上に地図を表示させるGoogle Maps APIなどもJavaScriptで利用することが出来ます。

最近は、『jQuery』という簡単にJavaScriptを記述する事ができるライブリの登場が後押しし、現在では多くのWEBサイト・ホームページで使用されている言語です。

※Javaと名前が似ているため混同してしまいますが全くの別物です

4. PHP&SQL

PHP

PHPとは、Hypertext Preprocessorの略称で、Web開発に適したサーバーサイド言語となっています。PHPを学ぶことで、ユーザーからデータを受け取りそれを表示するなど、 実際のWEBサービスで必要な機能を作ることが出来ます。

つまり、PHPを用いることで「お問合せフォーム」「ブログ」「ショッピングサイト」「会員制サイト」などのように、ユーザーに情報を送信させ、それに応じた表示をするようなホームページを作ることができるようになります。

HTMLでも、入力フォームなどを用いて情報を送信することは可能ですが、その情報を受け取ることができません。

例えば「ショッピングサイト」では、ユーザーが会員情報として「名前・メールアドレス」と「パスワード」を入力・登録します。その情報を受け取って、間違っていれば再ログイン画面を表示したり、受け取った情報をメールに送信したりするのにPHPが必要になるわけです。

SQL

SQLとは、データの操作や分析にも使えるデータベース言語です

先ほど、データを受け取るにはPHPのようなサーバーサイド言語が必要になってくるとしましたが、データは1度受け取ると破棄されてしまい、保存されません。

例えば、「ショッピングサイト」「会員制サイト」のようにユーザーに情報を入力させ、新規登録が必要になるようなサイトを作るとします。

しかし、PHPのみの場合、情報を受け取ることができてもその情報を保存しておくことはできません。せっかくユーザーに「佐藤さん」として新規登録してもらっても次にログインするときには「佐藤さん」の情報は存在しないのです。新規登録した時と全く同じ「名前」「メールアドレス」「パスワード」を入力しても、その情報はどこにも保存されていません。

なぜなら、PHPだけでは情報のやりとりができ、「佐藤さん、新規登録ありがとうございます!」のような表示ができても、その情報を保存できないからです。

つまり、「ショッピングサイト」「会員制サイト」のようなサイトの場合は、入力された「名前」「アドレス」「パスワード」などの情報をどこかに保存しておく必要があります。

そして、その保存先がデータベースであり、MySQLやsqllight3になるわけです。

5. Bootstrap

BootstrapにはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されています。

正直に言います。Bootstrapを用いることで「高速で」「簡単に」「デザイン性の高い」サイトを作れるようになります。

現に私も1からデザインすることなく、Bootstrapを用いてWEBサイトを制作しています。

Bootstrapは必須ではないですが、早いうちに学んでおいて損はありません。

 

以上、5つの知識とスキルになります。初めにこれを見てしまうと覚える量が多いと感じるかもしれませんが、やってみるとそうでもありません。ではさっそく、これらのスキルをどのように身につけることができるのか見ていきましょう。

 

プログラミング学習の方法

プログラミングの学習方法は多岐に渡ります。例えば、

  • 書籍
  • WEBサービス
  • プログラミングスクール
  • 学校(情報系の大学や専門学校など)

など。もちろん大学や専門学校に通うことで高度な知識は身につきます。しかし、そこまで時間もお金もないのが実情ではないでしょうか?さらに、本当に良質でわかりやすいサービスというのは限られております。

しかし、当記事では実体験をベースに厳選してお教えします。

難易度を考慮し、学習の順序も考えているため、この順番のまま進めていくことで『気づいたらWEBサイトが作れるようになっていた』という状態まで持っていくことが可能です。ぜひチャレンジしてみてくださいね。

 

プログラミングスクールという選択肢も?

独学が不安であれば、プログラミングスクールに通うという選択もありです。私のおすすめは、下記3つのプログラミングスクールです。

Skill Hacks:WEBアプリケーションの開発を学習したい方向き
TechAcademy:オンラインで学習を進めたい方向き
TECH::CAMP:プログラミング教室で学習を進めたい方向き

プログラミングスクールは、

  • エンジニアになりたい方
  • 今の職場でキャリアアップ・キャリアチェンジしたい方
  • ビジネスパーソンとしての総合的なスキルをあげたい方
  • フリーランス・副業として、プロとして通用するスキルを身につけたい方

などの、本気でプログラミングを学びたい方におすすめです。

 

WEBサイト制作の学び方・おすすめの流れ

初めに、WEBサイトが作れるようになるまでの簡単な流れをご紹介します。

  1. Progate『HTML&CSS』をすべてコンプリートする
  2. 『いちばんやさしいHTML5&CSS3の教本』で学ぶ
  3. Bootstrapを『Bootstrap3の使い方』で学ぶ
  4. Progate『JavaScript』学習コース1-4をコンプリートする
  5. 『作りながら学ぶjQueryの教科書』で学ぶ
  6. Progateで『PHP』の学習コース1のみをクリアする

それでは1つずつ詳しく見ていきましょう。

1. Progate『HTML&CSS』

まずはProgateで『HTML&CSS』をすべてコンプリートします。学習コースと道場コースをすべて終わらせましょう。気合いを入れて進めれば、3,4日で全てクリアすることができるはずです。

また、1週目はかなり時間がかかったとしても、2週目には半分ぐらいの時間で終わります。初めはわからないのが普通です。くじけずに粘り強く取り組んでみてください。

※最低でも2週することをおすすめしています。

2.いちばんやさしいHTML5&CSS3の教本

こちらの書籍で手を動かしながら実践を通して学んでいきます。また、実際にWEBサイトを制作することで、一通りの流れと感覚を把握できるようになります。

黒本(作りながら学ぶ HTML/CSSデザインの教科書)と迷いましたが、出版日が古く、現在ではもう使わないような記載表現もあるため今回は除外しました。
※こちらも勉強のしやすさは抜群です。こちらをすでにお持ちの方や借りられる方は代わりにお使いください。

2目のステップで使う書籍はこちらからどうぞ⤵︎

 

3. 『Bootstrap3の使い方』を学ぶ

Bootstrap3の使い方』Bootstrapの知識・スキル・使い方を学びながら、前のレッスン『いちばんやさしいHTML5&CSS3の教本』で作った自分のWEBサイトを改良します。

ここまで来ると、自分で作ったWEBサイトが唯一無二の創作物になってきます。

このサイトをポートフォリオに加え、営業をかけ、サイト制作を仕事にすることも可能です。

また、クラウドソーシングなどでWEBサイト制作やランディングページ(LP)制作の案件を獲得することもできるようになります。

4. Progate『JavaScript』

次に、Progate『JavaScript』の学習コース1-4をコンプリートします。JavaScriptまでくると、初心者が想像するようなエンジニアっぽくなります。

次に学ぶjQueryの予習にもなりますので、難しいですが気合を入れて学習していきましょう。

※こちらも最低でも2週することをおすすめしています。

5. 作りながら学ぶjQueryの教科書

上でJavaScriptの基本を習得したことで、jQueryも効率よく学習することができます。

また、こちらでも実際に手を動かしながら学んでいきます。

6. Progate『PHP』

Progate『PHP』の学習コース1のみをクリアします。全てのコースをやってもいいですが、サイト制作のみであれば、学習コース1のみで事足ります。

※こちらも最低でも2週することをおすすめしています。

ここまでくれば、もう怖いものはありません。分からないことがあってもググりながら解決することができるでしょう。

これで、『WEBサイト制作に必要なスキル』と『一通りの学習の流れ』がわかりましたね。それでは今回使っていくサービスや書籍の詳細を紹介していきます。

 

利用するサービスや書籍の紹介

Progate

Progateはプログラミングをこれから始めようと考えている方に最適です。プログラミングを楽しく学びたいのであれば、これ以上はありません。わかりやすいスライドに加え、実際にProgate上のキャラクターと一緒に遊び感覚で勉強ができます。

学習の形式は、ひつじ仙人のエンジニア歴が何十年もあり、プログラミング初心者のにんじゃわんこに教えていく対話式です。また、初心者のつまづきやすいポイントを開発側が熟知しているため、ひつじ仙人が繰り返し教えてくれるような形式となっています。

 

[学習イメージはこちら]

そして、Progateには多数のプログラミング言語が収録されています。

いちばんやさしいHTML5&CSS3の教本

こちらは、人気講師が教える本格Webサイトの書き方 「いちばんやさしい教本」シリーズです。

実践的なWebサイトを作りながら学べる!講義+実習のワークショップ形式で、実践的なWebサイトを作りながら学べる「はじめてでも挫折しない」HTML&CSSの入門書です。

また、「なぜそうするのかを知りたい」「応用できる基礎を身に付けたい」そんな要望に応える新しい教本です。

※学習しやすいソースコード&全画像素材付き。

  • WordPressなどのCMSではなくHTMLとCSSで作りたい人
  • Web制作者を目指している人
  • Webサイトを運営している飲食店や小売店の店長・Web担当者

におすすめとなっています。

作りながら学ぶjQueryデザインの教科書

サンプルを動かしながら、レスポンシブ対応の美しいサイトを作ることで、テクニックが必ず身につきます。
レスポンシブWebデザインから最新UI/UXまで、この一冊で学べます。

●目次
■第1章 jQueryの基本
■第2章 ページのデザインに役立つUIの作成
■第3章 動きのあるコンテンツの表示
■第4章 Webページ全体を制御する
■第5章 データからページを生成する
■第6章 カルーセルを作成する

となっています。

 

独学が不安ならプログラミングスクールを使おう


独学が不安なのであればプログラミングスクールに通うのがおすすめです。下記の3つは、数あるスクールの中でもおすすめのプログラミングスクールです。

Skill Hacks:WEBアプリケーションの開発を学習したい方向き
TechAcademy:オンラインで学習を進めたい方向き
TECH::CAMP:プログラミング教室で学習を進めたい方向き

僕が利用していたプログラミングスクールは、『TECH::CAMP』です。

プログラミングスクールは、

  • エンジニアになりたい方
  • 今の職場でキャリアアップ・キャリアチェンジしたい方
  • ビジネスパーソンとしての総合的なスキルをあげたい方
  • フリーランス・副業として、プロとして通用するスキルを身につけたい方

などのプログラミングを学びたい方におすすめしています。

 

Skill Hacks

Skill Hacksは、動画を使ってWebアプリケーション開発に関するプログラミングを学ぶ教材になっています

公開から3週間経たずに250人以上が受講し、受講生の評価もよく、絶対に挫折させない仕組みがあることが伺えます。

開発者:迫 佑樹(さこ ゆうき)さん。
中高生から社会人まで、今まで3000人以上にプログラミングを教えながら、フリーランスとして活動する学生エンジニアさんです。さらに、Udemyベストセラー動画の著者・書籍執筆経験という実績も持っています。

Skill Hacksの受講対象者

  • プログラミングに興味があるが何から学んでいいかわからない方
  • Webアプリケーション開発をやってみたい方
  • 以前プログラミングに挫折した方
  • 手軽な価格でメンターをつけたい初心者の方
  • エンジニアを目指す第一歩を踏み出したい方

-Skill Hacks- 動画で学ぶWebアプリ開発講座 

 

なんと現在、94本の動画と無制限質問サポートがついて税込69,800円にて販売しています。※今後はこの価格をあげていく予定だそうです。

 

<Skill Hacksの特徴>

  • LINE@による無制限質問サポートで挫折しない仕組みがあること
  • 94本ものしっかりとした教材が揃っていること
  • どのプログラミングスクールよりも手頃であることです

 

WEBアプリケーション(TwitterやInstagram、Facebookなど)開発の学習を始めたい方には、管理人も激推しの教材となっています。

 

【無料お試し公開中】47 Rails及びWebアプリの概要⤵︎

 

TechAcademy

TechAcademyでは、プログラミングやアプリ開発を学べます。また、1人ではプログラミング学習が続かない方のための、パーソナルメンターがつく「オンラインブートキャンプ」です。短期間で未経験からプロを育てるオンラインブートキャンプを開催し、現役エンジニアのサポートと独自の学習システムで短期間で成長が可能のプログラミングスクールです。

TechAcademyの特徴>

  1. スクールに通わなくても、自宅などでオンライン学習できる
  2. わからないことはいつでもチャットでメンターに質問できる
  3. パーソナルメンターがついてオリジナルサービスやオリジナルアプリの公開までサポート

自分のオリジナルサービスやアプリを開発しながらプログラミングを実践的に学んでいただき、わからないことはいつでも現役エンジニアのメンターに相談することができます。

 

TechAcademyでは、今だけ限定で【無料体験】も実施しています。ぜひお試しください。

 

TECH::CAMP

TECHCAMPの特徴は、未経験からサービスをつくることが出来るエンジニアになる短期集中プログラミング学習プログラムです。

実際にTECH::CAMPのカリキュラムを受講しましたが、わかりやすい上に、Rubyを用いたWEBアプリケーションを作ることができ、最終的に、自分のWEBサービスとして世の中にリリースすることもできました。

TECH::CAMPの特徴>

  1. 未経験から急成長→学習効率を高めたプログラムで未経験者でも一気に実力をつけます。
  2. 最高の学習教材→5,000回以上の改善を重ねたTECH::CAMPオリジナル教材
  3. いつでも質問即回答→キャンプ中はメンターが常時待機し、1秒でも早く参加者の疑問を解決します。

『人生を変える1ヶ月 最高のプログラミングスキルを最短で』さらにTECH::CAMPでは、転職キャッシュバックで実質0円で受講することも可能です。

 

当記事で紹介したプログラミングスクールはこちら⤵︎

Skill Hacks:WEBアプリケーションの開発を学習したい方向き
TechAcademy:オンラインで学習を進めたい方向き
TECH::CAMP:プログラミング教室で学習を進めたい方向き

 

終わりに

プログラミング学習では多くの人がつまずきます。絶対につまずきます。そこでめげない根気の強さが必要です。

プログラミング学習に必要な素質は、学習を辞めない根気の強さだけです。

この記事で紹介した学習手順を踏み、実際に成果物を作ることでWEB制作会社に就職することも可能です。大学生であれば、ポートフォリオに加えてエンジニアとして就職活動をすることもできるでしょう。

まずは1つだけでも実際に手を動かしながら作ってみてください。その先にしか見えない世界がきっとあるはずです。

共に頑張っていきましょう。