MENU
カテゴリー
だいち
このブログの管理者
異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

プログラミング独学ロードマップ【ポートフォリオ作成までのまとめ】

道に立つ男性

どうも、ダイチです。

この記事では個人的におススメする独学の勉強ロードマップ(ポートフォリオ作成まで)をまとめています。

※ここでいうプログラミングとはWEB制作に必要なスキルのことを示していますのでご了承ください。

僕は副業でWEB制作の受注ができるようになりましたが、これまでスクールなどには通わず独学でやってきました。

かなり遠回りもしていますし、効率の良くない進め方もしてきました。

ただ、効率が悪い勉強の進め方を経験しているからこそ、振り返ると「こうしておけば良かった」と思うことが沢山あります。

また、僕は有名な方々が作成している有料ロードマップなるものもほぼ見ていませんので、比較されると突っ込みどころも多々あるかとは思います。

ただ、この記事は何も知らなかった半年前の僕へ、僕自身の経験に基いて伝えるためにまとめた勉強の流れであることをご了承ください。

−かいつまむとこんな感じ−
<1>とっつきやすい教材でプログラミングを学ぶ
<2>エディタを使って復習をする
<3>サイト模写
<4>架空サイト制作
<5>ポートフォリオ作成

目次

遅延評価勉強法がおススメ

まず初めに「勉強」と聞くと殆どの人は受験勉強や、学生時代のテスト勉強のことを考えます。

机に座り教科書を広げ、ノートにペンを走らせて何度も記憶に刷り込んで本番に臨む、みたいな。

ただ、実案件を対応する際はググることがOKです。教科書持ち込み可みたいなものです。

むしろ、書籍などでインプットしている時よりも手を動かしながらググっている時が一番勉強できてます。

よく言われますがWEB制作に限らず、プログラミング全般において暗記は必要ありません。

こういった特性からプログラミングの勉強には「遅延評価勉強法」という勉強法がおススメされています。

「遅延評価」という言葉を調べてみると、「ある式を、その結果が本当に必要になる時点までは評価しないでおくテクニック」とあります。そのメリットは、「条件次第で捨ててしまうような値を事前に準備することは非効率的である。このような場合遅延評価を行うと必要なときだけ値が計算されるので計算量を低減できる」とありました。

ここから遅延評価勉強法とは、「その知識が必要になった時に初めて勉強する方法」です。もっと言えば、「○○を学んだから××をやってみる」ではなく、「××をやりたいから○○を勉強する」と定義できます。

ハッカーと遅延評価勉強法

この記事に詳しく記載されてます。

LukeSilvia’s diary
ハッカーと遅延評価勉強法 - LukeSilvia’s diary
ハッカーと遅延評価勉強法 - LukeSilvia’s diary日本の(というかはてな界隈)ハッカーはほぼ「遅延評価勉強法」をしている気がします。 僕はまだまだ世界のハッカーについて詳しくもないし、日本のハッカーですら、はて...

要するに必要になった時にその都度必要な知識だけを勉強する、という方法です。

プログラミング関連の知識は幅広いので、今の自分に必要な知識だけを習得していく「遅延評価勉強法」が効率的と言われています。

これから紹介する方法に共通して言えることではありますが、時間をかけてインプットをするのは学習の遠回りになります。

都度アウトプットをして、必要な知識を身に着けていくスタンスで取り組むのがいいと思います。

まずは有名教材で基礎に触れてみる

ドットインストール(はじめてのHTML・はじめてのCSS /1周)

あわせて読みたい
ドットインストール
ドットインストールHTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくこと...

→目安時間:4時間程度

1コマ2〜3分程度の動画を見ながら、実際のコーディングを学べる教材です。

勉強は後述するProgateからはじめよう!とオススメされてることが多いですが、僕個人の経験則としてはコーディング自体のイメージを先に持っておく方が重要だと思いました。

このドットインストールでは、そのイメージを短時間で味わうことができます。

動画内ではわりと実践的なことを当たり前のトーンで話されたりするので、初めは全く意味がわからないです。

サラッと流しながら見るだけだったら1時間程度で終わりますので、正直それでもいいと思います。

ただ、ここでは動画の通りに自分のPCにエディタをインストールしてみて、動画の通りにコードを記述(コピペ用のコードもあるのでそこからでもOK)して、ブラウザに自分の記述したコードが反映する体験をしてみてください。

自分のブラウザに、自分が記述した「Hello World」が表示された時の喜びを僕は未だに忘れていません。笑

Progate(HTML・CSS/2周)

Progate
Progate(プロゲート) | Learn to code, learn to be creative.
Progate(プロゲート) | Learn to code, learn to be creative.Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

→目安時間:延べ30時間程度

ドットインストールでコーディングのイメージを掴んだところで、本格的に基礎のインプットをしましょう。

ドットインストール を流し見しただけで理解が難しかったところも、Progateではしっかり解説されています。

導入部分は無料でできますが、月額980円/月(税別)の有料会員にはなっておきましょう。

ここではまずHTML・CSSの上級編最後までやりましょう。

1周目はやってもちんぷんかんぷんだと思います。 2周目は進むスピードも若干早くなると思いますが、僕の体感では理解度50%~70%ってところだったと思います。

不安だと思いますが次に進んでみましょう!

エディタを使って復習 [HTML&CSS]

→目安時間:延べ10〜20時間程度

ドットインストールの時のイメージを思い出しながら、Progateのサイトを自分のエディタで書き起こしてみましょう。

あとで行うサイト模写にいきなり取り組んで挫折する人も多いのでここはとても大事です!

なのでこれはサイト模写の予行練習というイメージで取り組んでみてください。

画像はフリーの素材サイトや自分で撮影した写真を使ってもいいですし、Progateの画像を使うでもいいでと思います。

  • ヒントが横にない状態で行う初のコーディングであること
  • 画像を用意すること
  • パス(相対パス・絶対パス)の考え方
  • デベロッパーツールの扱い方

このあたりで躓くと思います。

復習内容とは別に自分でググりながら調べる必要があると思いますが、これこそコーディングの醍醐味だと思います!

ここでアウトプットを挟むことが非常に重要なので頑張りましょう!

そしてここまででサイトの見た目を作れるようになりました!

継続と根気が必要なので、ここまででいっただけでもめっちゃ凄いと思いますよ!(→自分を褒める)

書籍を使って体系的に知識をおさらいしつつ、コードを書いてみるのもおすすめです!

サイトに動きをつける[js(jQuery)]

Progate(JavaScript ES5 /1周)

→目安時間:8時間程度

初のプログラミング言語「JavaScript」の登場です。

WEB制作をする場合jQueryが使えることが必須になりますが、jQueryはJavaScriptのライブラリというものです。

バージョンが二つあり、最新はES6ですが、jQueryはES5基準なのでそちらをしましょう。

ただJavaScriptに時間をかけなくていいです。 理由はWEB制作に使えるイメージが湧きづらいからです。 あと、たぶんめちゃくちゃ難しいので。

関数、引数、戻り値、If文とは?みたいなものを知れたらとりあえずOKです。

Progate(jQuery/1周)

→目安時間:11時間程度

ほとんどのWEBサイトはユーザーのクリックやタップなどで反応する動きが施されています。

この動きはjQueryが使えると実装できるようになります。

ちょっと難しいですが、自分がコーディングするWEBページに動きをつけるイメージが持てるのでこれはやっていて結構楽しいです。

また、実装時に使えそうなコードなどはネットや書籍に沢山サンプルがあるので、あまり難しく考え過ぎずに進めましょう!

サイト模写前の確認・準備運動

時間管理について

ここまでで70時間〜80時間程度でしょうか。

存分に時間がある人で2週間、僕みたいに普段会社員している人がスキマ時間でやって約1ヶ月程度かと思います。

ただ、僕の場合は当初仕事の日は0時間、休みの日も5〜10時間程度しかできていなかったので、ここまでいくのに2ヶ月はかかっていたと思います。

これくらいのペースだとなかなか知識定着せず、後々同じ勉強をし直す時間が増え、結果的に効率が悪くなるということを実感しました。

なので、スキマ時間でやっている人も週間目安20時間、最低でも15時間は確保しておきたいです。

もっと言えばまとめて時間をとることより、毎日30分でもPCを開くことの方が重要かな、と思います。

エディタの切り替え

ここからサイト模写にうつりますが、その前にエディタをVSCodeに変更しておきましょう。

ドットインストールではAtomだと思いますが、VSCodeは動作も軽く、便利な機能が多いので乗り換えをオススメします。

VSCodeの使い方は色んなサイトでにもありますが、ドットインストール でも紹介されています。

あとはオススメの拡張機能を使って、少しでも快適にコーディングができる環境を整えておきましょう。

Shibajuku
2020年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します | Shibajuku
2020年時点で僕のVSCode(Visual Studio Code)に入ってるプラグインや設定を紹介します | Shibajuku僕のVScode(Visual Studio Code)に入れているWebサイト制作に便利なプラグイン(拡張機能)や各種設定を紹介します。これらのプラグインや設定があれば開発環境を構築し...

Sassの勉強

Progate(Sass /1周)

→目安時間:1時間30分

実際にコーディングしながらじゃないと扱い方は勉強できないので、ここはさくっと概要を知りましょう。

Sassは後回しでもいいかなとも思ったんですが、CSSのコーディング効率化を考えたらここで知っておいたほうがいいと思いました。

Sassを使うためにはコンパイルという作業が必要ですが、VScodeには自動でやってくれる拡張機能があるのでインストールしておきましょう。

僕は「Easy Sass」を使ってます。

教科書変わりに一冊書籍を手元に置いておくのはありだと思います。

ここまでの習得状況が不安な方へ

当時の僕はこのあたりでBootstrapやGitHub、復習のための書籍や動画教材のUdemyなど色々手を出したりしていました。

結果的に初めてサイト模写した時、勉強開始から3ヶ月以上は過ぎていました。

今振り返るとこのへんの時間が一番ムダだったと思います。

頑張って時間をかけてインプットしても、結局自分が手を動かす時に使わないと記憶から薄れていきます。

なので、ここあたりで違う教材などで復習もかねて勉強し直すのもいいとは思いますが、その期間も目安1週間程度にしておきましょう。

サイト模写にチャレンジ(1〜2サイト)

ようやく噂のサイト模写にチャレンジです。

全く手が動かず、結局一つ一つ調べながら進むことになるかもしれません。僕はヘッダー書き上げるのに4時間かかっていました(ヤバイ)

ただ、そこで初めて実践的な知識や手の動かし方が身についてくると思うので、正直今までとは難易度が上がりますがここを頑張って乗り越えましょう。

模写するサイトはなんでもいいと思いますが、簡単すぎても意味がありません。

一つオススメをあげるとしたら、ポートフォリオ掲載OKと言われているバンコクのフリーランス養成講座「iSara」です。

内容量が非常に多く、根気が必要ですが汎用的なデザインも多いためとても勉強になります。

もう一つのサイトはiSaraには無いjQueryの動きがあるサイトがいいと思います。(スライドショー、ハンバーガーメニュー、タブメニューなど)

ここで、デザイン通りに1ページコーディングする、という基礎の難しさと楽しさを知りましょう。

仮にコーディングの仕事をするにしても、デザインデータを元にコードを書く事になるため、それの予行練習といった認識を持って臨むといいかと思います。

デザインカンプからのサイト作成(1〜2サイト)

一からサイトを作成する場合は自分でデザイン設計してからツールに書き起こし、それをクラインアントとすり合わせしたうえでコーディングにとりかかります。

制作会社から受託する場合は既に出来上がっているデザインカンプを元にコーディングをするケースが多いです。

なのでデザインツールは最低限使えた方がよく、ポートフォリオにも使用できるというアピールがあったほうがいいですね。

Web上には無料・有料ありますが、ポートフォリオ掲載可のデザインカンプを配布いただいているサイトもありますのでそちらを参考にコーディングをしてみましょう!

あわせて読みたい
【デザインカンプ配布サイトまとめ】ポートフォリオ掲載OK(無料有)
【デザインカンプ配布サイトまとめ】ポートフォリオ掲載OK(無料有)どうも、ダイチです。この記事ではデザインカンプを配布していただいているサイト(無料・有料)の中で、ポートフォリオ掲載可と明記いただいていることを条件に絞って...

架空のサイトを一から作成(1サイト)

必死にサイト模写が終わったところで振り返ると、1〜2ヶ月前と比べ格段にスキルが身についていると思います。

次は自分でサイトを設計し、コーディングをしてみます。

僕はポートフォリオ作成時に作れてなかったですが、実務をこなす上でとても勉強になるのでやっておいたほうがいいと思いました。

テーマ決めが難しいとは思いますが、僕がやるとしたらクラウドワークスなどを見ます。

応募内容を見て、実際に誰かが求めている需要に合わせて、自分なりに提案するつもりでサイトを設計してみるといいと思います。

もしくは、知人でお店などをやっている方がいれば、そこをイメージして作ってみるとか。

重要なのは、必要とされる誰かをイメージして作成することだと思います。

そこでお金が生まれなくても、お金がとれる位価値のあるサイトを作成するつもりでやってみましょう。

ポートフォリオ作成

ポートフォリオ作成方法はネットで調べればいくらでも出てくると思いますが、まずは色んなポートフォリオを見てみましょう。僕はたぶん当時100くらいのサイトは見たと思います。

その中で何を載せるべきか、どんなデザインにするか、イメージを固めていってポートフォリオサイト全体の設計をしましょう。

この時、掲載可能なコーディングサイトや、渾身の架空サイトを自分のスキルが伝わるように思いを込めてポートフォリオの実績に載せましょう。このためにやってきた訳ですからね。

コーディングまで仕上げたら、あとはサーバーやドメインの契約をしてアップするだけ。みんながあなたのポートフォリオを見れる状態になったら完成です。

ここまでやったら胸をはって、営業時や転職時にアピールしていきましょう!

まとめ

ここまでが、半年前の僕が僕自身に伝える勉強のロードマップです。

最後にこんな事を言うと元も子もないですが、勉強方法に最適解はないと思っているので、「この通りにやったら絶対こうなる!」みたいにネットの情報に妄信的な見方をするのはあまりよくないと思います。

ただ、成功者のやり方は一つの勝ちパターンであることも事実だとは思うので、最終的には今の自分の環境に合わせて、無理なく継続できそうなやり方から選ぶのが大事だと思います。

今回は大枠だけざっと書いてみましたが、各セクションで本当はもっと細かい知識が必要だったりします。

そのあたりはまた別記事にでもまとめられたらと思いますので、よかったら見てみてください!

道に立つ男性

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

コメント

コメントする

CAPTCHA


目次
閉じる