これからWeb系エンジニアを目指す方向けの記事です。

プログラミング初心者にとって、

「プログラミング始めたいけど、書籍とか学習サイトがありすぎてわからない…」
「未経験だけど、Web系エンジニアに興味があるから学習を始めたい」
「将来フリーランスになりたいけど、何から始めよう…」

という悩みをまず最初に持つでしょう。
わたしもそうでしたし。

ということで、今回は、これからエンジニアを目指す方や、手っ取り早くフリーランスになりたい方向けに

「現役Web系フリーランスが、時給5,000円になるまでに使った学習サイト」
「学習サイトを使った効果的な学習方法」

をご紹介してまいります。

わたし自身、今回紹介する3つの学習サイトを使って、学習を始め、Web系企業に入りました。
学習を続けた結果、20代半ばにはフリーランスとして独立して、最低時給5000円の案件がこなせるようになりました。

実はWeb系スクールの講師としても活動していた経験があるので、過去の経験からお話できればと思います。

Web系フリーエンジニアとして生計を立てるまでに使った3つの学習サイト

さっそくですが、個人的には下記の3つの学習サイトだけで十分だと思ってます。

  • ドットインストール(動画型)→ まずこれやる
  • Progate(スライド型)→ 手を動かしながら理解する
  • Udemy(動画型)→ 現役エンジニアから実践で学ぶ

1つずつ、「概要」と「元Web系スクール講師のわたしがおすすめする学習手順」を解説してまいります。
(※使ったことある人は次の章を読んでいただいて構いません。)

ドットインストール(動画型)

プログラミングで学習サイトと言えば、「ドットインストール」ですね。

ドットインストール

ドットインストールはこちら

どこの会社でエンジニアの仕事しても、「ドットインストール見ておいて」と言われると思います。

わたしもはじめてプログラミングを学習したときに、このサイトをネットで見つけて、学習しましたね。

特徴としては、

  • 動画を見ながら、メモするようにプログラミングできる
  • 無料で基礎が学習できる
  • とにかく初心者に優しい
  • 一回のレッスンの時間が短い
  • 更新頻度高め

レッスン1回、3分程度の動画でまとめられているので、少しずつ、スキマ時間で進められるのが魅力です。
毎日できるので、挫折することも防げますね。

初めての方は、ひとまず下記(すべて無料)をやっておくことをオススメします。

  • HTML/CSSの学習環境を整えよう Windows編
    (HTML/CSSの学習環境を整えよう mac編)
  • はじめてのHTML
  • はじめてのCSS
  • Chrome Developer Tools入門
  • 実践!ウェブサイトを作ろう
  • はじめてのJavaScript
  • jQuery入門
  • jQueryで作る先頭へのジャンプ機能

サーバーをすでに借りている方は、下記もやっておくといいです。

  • PHP入門
  • WordPress入門

サーバー借りてない方は、後ほど紹介する「Progate」でPHPは学べます。

ちなみに有料版もあります。

月額880円(記事執筆時の料金)で、中上級向けのレッスン動画もすべて閲覧できます。

レッスン一覧はこちら

ランチ代くらいの値段で実践的な内容が学習できるので、超オトクです。

有料版の特徴は下記です。

  • プレミアム動画の閲覧可能
  • 動画の文字起こし
  • ソースコード確認、コピペできる
  • 動画の再生速度変更

基礎を学んだ後に、プレミアムに入ってもいいと思います。

Progate(スライド型)

ドットインストールと同じく定番が、「Progate(プロゲート)」です。

プロゲート

Progateはこちら

未経験でWeb系企業に入ったら、「とりあえずドットインストールとProgateやっておいて」と言われると思います。
わたしもスクール講師やっていた時期に、「この2つは空いてる時間でやってください」と、受講生に言ってました。

特徴は、

  • スライドを見ながら、プログラミングを実践しながら学べる
  • 無料で基礎は学習できる
  • スライドが超わかりやすい
  • エラーのヒントもくれる
  • ポケモンみたいにレベルアップでモチベーションが保てる(SNS連動もできる)

レッスンごとにスライドを閲覧しながら、プログラミングができます。
見やすくて、内容がわかりやすいので、初心者は取り組みやすいですね。

すでに環境も用意してくれてるので、PHPやRubyなどの言語もブラウザにコードを書きながら、実行して確認できます。
初心者の場合、環境構築で躓きやすいですが、環境が整っているので、かなり学びやすいです。

初めての方は、ひとまず下記(すべて無料)をやっておくことをオススメします。

  • HTML&CSS 初級編
  • JavaScript (ES5) Ⅰ
  • JavaScript (ES5) Ⅱ
  • jQuery 初級編
  • PHP Ⅰ

ちなみにProgateも有料版はあります。

月額980円(記事執筆時の料金)で、基礎から応用、実践まですべてのレッスンを制限なく受けられます。

レッスン一覧はこちら

Progateに関しては、最初から有料版でもいいかなと思ってます。
2、3ヶ月有料版を登録すれば、HTML、CSS、jQuery、PHPのレッスンは2、3周できますよ。

Udemy(動画型)

個人的には、「Udemy」が一番おすすめですね。

Udemy

Udemyはこちら

ドットインストールと同じで動画で学習できるのですが、
月額ではなく、1つの講座を買い切るタイプです。

特徴をざっとあげると、

  • 月額ではなく、1つずつ購入するタイプ
  • 一度購入した教材は、サービスが続いてればずーっと見れる
  • 個人のエンジニアが動画を販売できる
  • ドットインストールやProgateより実践的な内容の講座も多い
  • 動画のクオリティがまちまちなので、評価で確認したほうがいい

期間限定のセールも多めで、クオリティ高めの教材が90%オフで買えたりするので、
ついストックしないように気をつけてくださいね。
買っても、やらなきゃ意味ないので。

動画によっては、教材が随時アップデートされたり、直接講師に質問もできます。

「HTML」、「CSS」、「PHP」など言語ごとに検索すれば、
評価の高い動画が出てくるので、検索してみてください。

基礎を身につけつつ、実践で学べるので、おすすめですね。

学習サイトだけで学習しても稼げないです【アレンジしてみよう】

これからエンジニアを目指す方向けに、3つの学習サイトを紹介しました。

しかし、残念ながら学習サイトをチュートリアルに沿って、こなしていくだけでは、なかなか就職も決まらないと思います。
20代なら、基礎が身につけば、十分採用される可能性はありますが、できるだけ面接に通る確率はアップさせたいですよね。

将来的に独立も目指すなら、学習サイトをこなすだけでは、当然時給5000円以上も稼げませんし。

なので、「学習サイトを使った効果的な学習方法」もご紹介します。

最低でも、下記を実践することをオススメします。

  • 学習サイトや書籍で、学んでいる過程で、少し自分なりにアレンジしてみることが大切
  • Webサイト、Webサービスを模写してみる
  • 一通り基礎を学んだら、なにか自分なりに作ってみる

ただ学習サイトや書籍の手順通りに沿っても、なかなか身につかないので、
自分なりに工夫が必要です。

CSSの基礎を身につけるなら、色を変更してみたり、レイアウトを変えてみたりして、ちょっとした工夫をしたほうが身につきやすいです。

基礎が身についたら、気になるWebサイトのソースコードを確認してみるといいですよ。
ソースコードを見ながら、模写にチャレンジすると、実践的に身につきますからね。

チャレンジしてみてください。

まとめ

最近は、すべて無料で、しかもネットでプログラミングスキルが学べる時代になりました。

わたし自身、フリーランスになるまでは、下記3つの学習サイトで繰り返し学習しましたね。

  • ドットインストール(動画型)→ まずこれやる
  • Progate(スライド型)→ 手を動かしながら理解する
  • Udemy(動画型)→ 現役エンジニアから実践で学ぶ

特にUdemyはプログラミング以外にも、デザインやマーケティング、撮影などの動画講義もあるので、
幅広く学べて便利です。

基礎と応用を学習するには、上記3つを組み合わせるといいですよ。

紹介した学習サイトで学んだあとは、
チュートリアルをアレンジしてみたり、自分でなにか作ったりすると、実績にもなるのでオススメです。

20代は、基礎が身につけばすぐに就職できると思うので、
学習サイトで学んだら面接を受けに行ったほうがいいです。

現場で実践しつつ、経験値をあげたほうが手っ取り早いと思いますので。
実務を積めば、独立までの近道になりますからね。

プログラミングの上達の秘訣は、学習や実践を「毎日やること」です。

サッカーも一流プレイヤーの動画を観てもうまくなりませんし、
料理もレシピサイトだけみても上達しません。
プログラミングも同じことです。

日々学んで、実践していきましょう。