プログラミング

【初心者の教科書】Web系プログラミングの学習前に読むべき基礎まとめ

プログラミング初心者
プログラミング初心者
web系のプログラミングを学習したいけど、初心者の場合はどのプログラミング言語から始めれば良いですか?
将来はフリーランスのエンジニアとして自由に稼げるようになりたいです。

この疑問を本記事で解決します。

 

本記事の内容まとめ
  • Webプログラミングの学習前に読むべき基礎
  • Webプログラミングの最適な学習方法

 

こんにちはヒロキです。

2005年にITビジネスで起業して以来、主に上場企業のWebマーケティングや制作で稼いでいます。

基本的に月250〜300万円はWeb系のプログラミングだけで稼げています。

そこで本記事では、プログラミングで稼ぎたい初心者向けに

  • Web系のプログラミングの基礎知識
  • 向いているプログラミング言語、必要な言語の解説
  • Web系のスキルがあると人生は安定する理由

について具体的な事例を交えて解説していこうと思います。

 

これからプログラミングのスキルを身につけて自由に稼いでいきたい方は、ぜひ最後までご覧ください。

 

【初心者必見】Web系プログラミングの学習前に読むべき基礎まとめ

プログラミング初心者がWeb系プログラミングの学習前に知っておくべきことは以下の通りです。

  • Web系プログラミングにはフロントエンドとバックエンドがある
  • それぞれに個別のプログラミング言語がある
  • それぞれに個別のフレームワークもある
  • どの言語を勉強するにも決まった勉強方法がある

という感じです。

初心者の段階では「何をどうやって勉強すれば良いのか分からない」といった不安があると思いますので、順序立てて丁寧に説明していきたいと思います。

 

Web系プログラミングにはフロントエンドとバックエンドがある

Web系のプログラミングでは主に、フロントエンドとバックエンドと大きく分けて2種類のプログラミングを行います。

フロントエンドとは名前の通り、フロント(前面)のWebサイトの見た目を作っていくプログラミングスキルです。

例えば、上記はこのブログのTOPページのデザインですが、新着記事が並んで、右側にプロフィールとよく読まれる記事のリストを配置するといったユーザーが操作する表面の仕組みを構築することがフロントエンドの役割となります。

 

フロントエンドの構築で必要なプログラミング言語

主に以下の3つですね。

  • HTML
  • CSS
  • JavaScript

この辺りはテックアカデミーの無料体験で解説されている内容が分かりやすいです。

» 参考:テックアカデミーの無料体験を徹底レビュー【割引とアマギフ特典付き】

  • HTMLは家の骨組み
  • CSSは家のデザイン(装飾)
  • JavaScriptは電気を通すなど、より快適に暮らす補助

という感じですね。

極論を言えば、JavaScriptを使わなくても、HTMLとCSSだけでもWebページを作ることはできます。

 

そして、上記の3つのプログラミングスキルを学習すれば、簡単なWebサイトやLPページのコーディング案件を受注することができるので、クラウドソーシングサイトなどで稼ぐことができます。

学習難易度も高くないので、初心者の方が最初に学習しやすいスキルになります。

ということで、フロントエンドの学習手順は、後述していきます。

 

バックエンドはデータベースを扱うスキルです

フロントエンドがサイトの表面を構築する技術なら、バックエンドは名前の通り(背景)を構築するスキルです。

Webサイトの背景とは、つまりデータベースになります。

 

例えば、ブログであれば

ブログのタイトル、記事本文、写真データなどがデータとしてサーバーに蓄積されています。

SNSであれば、ユーザーごとのアカウント情報やプロフィール情報、どの投稿に「いいね」やコメントをしたのか?なども全てがデータベースです。

これらのデータを扱うスキルがバックエンドになります。

 

バックエンドの構築で必要なプログラミング言語

主な言語がPHPとRubyです。

WordPressはPHPで動いていますし、Rubyは有名なサイトでも結構使われています。

クックパッド・Airbnb・Gunosy・クラウドワークス・Kickstarter・食べログ・価格.com・twitter・hulu・GitHubなどが全てRubyで作られています。

» 参考:初心者がRubyを使って作れるWebアプリを解説【実例から学ぶ】

 

そして、フロントエンドでもバックエンドでも「フレームワーク」という予め用意されたフレームがあるので、それを活用することで、より手軽にプログラミングをすることができるようになっています。

 

Web系プログラミングで使えるフレームワーク

フレームワークとは、より手軽にプログラミングをするために、予め作られた型です。

フロントエンドでもバックエンドでも、それぞれにフレームワークが存在しますので、紹介していきます。

 

フロントエンドで使えるフレームワーク

フロントエンドで使えるフレームワークで有名なのが以下の3つです。

  • Vue(初心者向けで使いやすい)
  • Angular(Googleが開発したフレームワーク)
  • React(初心者は無視でもOK)

これらはJavaScriptのフレームワークで、これらのフレームワークを活用することで、プログラミングの時間を大幅に短縮できると同時に、より質の高いサービスを作ることができます。

後述しますが、初心者はVueだけ学習すればOKです。

 

バックエンドで使えるフレームワーク

結論は、RubyであればRuby on Railsで、PHPならLaravelです。

現時点で「個人がプログラミングで稼ぐ」を考えるとWordpressでの構築やカスタマイズが必須になるのでPHPのLaravelを先に学習するのはありです。

 

理由は、PHPの方が初心者にも分かりやすいドキュメントや情報が豊富だからです。

PHPの理解がある程度深くなれば、Rubyも学習しやすくなります。

 

この辺りは言葉と同じで、英語を喋れるようになると、その他の言葉も覚えやすくなるという感じに似ていると思います。

 

基本的にプログラミング言語の種類も数も、これ以上にたくさんあります。

正直に「全てをマスターする必要」なんてありません。

初心者の段階での目標はシンプルに

  1. まずはフロントエンドを学習する
  2. そのあとにバックエンドとしてPHPを学習する

くらいの感じでOKです。最初から無理に詰め込みすぎると挫折につながるので、目標はシンプルにしておきましょう!

 

【初心者向け】Webプログラミングの最適な学習方法

プログラミング初心者が最短でスキルを身に付ける方法は以下が結論です。

  1. 無料サービスで基礎知識を学ぶ
  2. プログラミングスクールを活用して稼げるレベルまでブースト
  3. アウトプットを繰り返してスキルを定着させる

以上です。

 

この辺りは【断言】大学生からプログラミング学習を始めても全然遅くない理由!でかなり詳しく解説していますので、合わせてご覧ください。

 

ということで、本記事ではフロントエンドとバックエンドの効率的な学習手順を紹介していきます。

 

フロントエンドの学習手順

まずは、基礎知識の学習をProgateで始めましょう!

学習するページは以下の2つでOKです。

基本的に課金は不要です。全て無料で、基礎知識をまずは学習しましょう!

【初心者向け】プログラミング学習時のProgateの正しい使い方でも解説していますが、3回くらい学習すれば完璧です。それ以上は単なる自己満になってしまうので、次の学習に進みましょう!

 

プロゲートでの基礎学習が終われば、さらにビジネスの実践で通用するスキルまで最短で成長するためにプログラミングスクールを活用しちゃいましょう!

※この時点で独学を始める人がいますが、オススメしません。理由としては独学の場合は「学習が進んで、分からない部分が合った時に質問できる相手がいない」からです。

この辺りはプログラミング初心者が挫折に繋がる3つの壁を簡単に乗り越える方法もご参考ください。

 

プログラミングスクールはテックアカデミーをどうぞ

フロントエンドの学習の場合はテックアカデミーのフロントエンドコースが充実しています。

プログラミング初心者でも、問題なく実践スキルが身につきます。

ちなみにフロントエンドコースでは先述したJavaScriptのフレームワークであるVueも同時に学習することができるので一石二鳥です。

この辺りは実際にフロントエンドコースを受講した体験談も合わせてご参考ください。

»【初心者が体験】TechAcademyのフロントエンドコースで身に付くスキルまとめ

テックアカデミーのフロントエンドコースを受講した感想をまとめた! この疑問について解説します。 こんにちはヒロキ(@hiroking10ten )です。 2005...

 

バックエンドの学習手順

バックエンドの学習も同じですね。

まずはプロゲートで基礎学習をしてからの、プログラミングスクールでブーストでOKです。

Rubyの学習については【無料】プログラミング初心者がRubyを効率的に勉強する3つの手順も合わせてどうぞ。

 

基礎知識を学習したあとはテックアカデミーをどうぞ。

» テックアカデミーの公式サイト

Rubyの場合はWebアプリケーションコース、PHPの場合はPHP/Laravelコースをどうぞ。

 

プログラミング初心者
プログラミング初心者
プログラミングスクールって受講費が高いし、行く意味ありますか?

と思う場合は、無理に行かなくても良いと思います。

独学でも頑張れば習得できます。

問題点は、プログラミング初心者の独学は90%以上が挫折している現状なので、この辺りの挫折を防ぐ体系的な仕組みがプログラミングスクールにはあるので、価値を感じる方はどうぞ。

» プログラミングスクールは高いけど今すぐ受講すべき理由【注意点もある】

 

さらに「もっとコスパを高めてスクールを受講したい」場合は【コスパ重視】プログラミングスクールの受講費を回収する4つの手順がお役に立てると思いますのでどうぞ。

 

「テックアカデミーって、ぶっやけどうなの?」と不安に思う場合は以下の記事で詳しくまとめましたのでご覧ください。

» テックアカデミーを受講した感想を本音で暴露【公式よりリアルな口コミ】

 

Webに詳しい人間になるだけで将来は安定します【断言】

それでは記事をまとめようと思います。

  • Webプログラミングはフロントエンドとバックエンドに分かれます
  • それぞれにオススメのプログラミング言語があります
  • フレームワークも学習することで時間短縮につながります
  • 初心者はフロントエンド+PHPの学習がオススメです
  • 基礎知識はプロゲート、スキルのブーストはスクールを使いましょう
  • テックアカデミーは初心者が確実にスキルを習得できるのでオススメです

以上です。

 

基本的に、この記事を読んでも90%以上の人が何も行動せずに記事を閉じて終わります。

しかし、自分の人生を変えることができるのは行動できる一握りの人だけです。

大切なことは「自分の将来を安定させるために行動する」ことです。

ということで、サクッと行動していきましょう!

 

人気記事【必見】テックアカデミーのウケ放題を受講しなくて良い論理的な理由

人気記事テックアカデミーを受講した感想を本音で暴露【公式よりリアルな口コミ】

合わせて読みたい記事