【未経験から】プログラミングの独学方法の手順まとめ【実践済み】

【未経験から】プログラミングの独学方法の手順まとめ【実践済み】

未経験からプログラミング(Web制作)を始める手順をまとめました。

「3か月でWebサイトが作れるようになること」を目標にしています。Webエンジニアを目指す方向けです。

 

見につくスキルとしては、「HTML/CSS/Javascriptの基礎/jQuery/PHPの基礎/Bootstrap/Wordpress」です。

具体的には、「HTML/CSSで構築したサイトをWordpressのテーマにできて、jQueryで動きがつけられる」程度。

※スキルレベルのイメージ⇒ブログテーマ『Anemone』

今の段階ではイメージしづらいかもしれませんが、時期にできるようになりますのでがんばりましょう。

 

なお、内容としてはmanablogの【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】を大いに参考にさせていただきました。ありがとうございますm(_ _)m

僕自身が実践しており、未経験からWeb制作の会社への転職に成功しましたので、内容の確かさは保証しますd(^_^o)

 

では見ていきましょう。

※目次が長いので、早く内容を見始めたい方はこちら

なお、プログラミングの概要をざっと掴むために、スクールの無料体験を受けてみるのもアリかなと思います。

TechAcademyなら1週間の無料レッスンが受けられるので、ホームページを覗いてみるといいかもです。

-スポンサードサーチ

プログラミングを独学して身につけるべきスキル・言語

プログラミングを独学して身につけるべきスキル・言語

何もわからない状態から急に勉強を始めてもいいのですが、「何をすればいいかわからない…(-_-;)」と思うはずなので、まずはゴール(目標)を決めましょう。

ゴール(目標)から逆算して、何を勉強するのかイメージします。

 

この記事の目標としては、「自分でWebサイトをゼロから作れるようになること」です。

それだけのスキルがあれば転職できますし、がんばればフリーランスにもなれるかなと思います。

 

身につけるべきスキルは以下のとおり。

独学で身につけるべきスキル

  • Web制作で使う言語:HTML/CSS/JavaScript/jQuery/Bootstrap/PHP/Wordpress
  • テキストエディタ・FTPソフトの扱い方

言葉だけ見てもわかりにくいと思いますので、詳しく説明していきますm(_ _)m

Web制作で使う言語

Web制作=Webサイトを作ることです。

Webサイトを作るためには、以下のスキルが必要になります。

Web制作に使うプログラミング言語/ツール

  • HTML/CSS:Webサイトの形と見た目を作る言語
  • Javascript/jQuery:HTML/CSSで作ったWebサイトに動きをつける
  • Bootstrap:HTML/CSS/jQueryを扱いやすくしたもの(フレームワーク)
  • PHP:Webサイトのデータを扱う言語
  • WordPress:Webサイトの管理や更新をしやすくするためのツール(CMS)

これらの言語やツールについては、学習前に覚えるより、学習しつつ「ふむふむ」と納得しながら進めるのがいいかなと思います。

 

頭だけで理解するより、実際に手を動かした方が覚えるのが早いです。

なお、【初心者向け】Web製作をする上で学ぶべきプログラミング言語【図解あり】で詳しく解説していますので、一読していただければと思いますm(_ _)m

テキストエディタ・FTPソフトの扱い方

プログラミングをするためには、テキストエディタとFTPソフトの扱い方を覚える必要があります。

プログラミングをするためのツール

テキストエディタ:コードを書くためのツール

FTPソフト:コードを書いたファイルの場所を動かすためのツール

かなりざっくりしてますが、こんな感じです。

 

なお、僕はテキストエディタはSublime Text、FTPソフトはFFFTPというソフトを使っています。

種類が違っても基本的な使い方は同じなので、とりあえず何かひとつ使えればOKです。

プログラミングの独学方法【手順と教材を紹介】

学ぶプログラミング言語/ツール

  1. HTML/CSS
  2. JavaScriptの基礎/jQuery
  3. Bootstrap
  4. PHPの基礎
  5. WordPress

HTML/CSSからWordpressまで、順番に学んでいきます。

 

プログラミング学習サイト・本・動画など、実際に僕が使った教材をまとめました。

「これ」という正解があるわけではないですが、割と効率的かなと思ったものをまとめているので、参考になるかなと思いますm(_ _)m

-スポンサードサーチ

1.HTML/CSS:Webサイトの見た目を作る

1.HTML/CSS:Webサイトの見た目を作る

まずはWebサイトの見た目を作るHTML/CSSから。

HTML/CSSは見た目に現れるのでわかりやすいし、プログラミング言語の中では簡単な方です。

 

プログラミングになれるためにも、まずはHTML/CSSから学ぶのがおすすめです。

①Progate

Progateのレッスン

Progate

HTML/CSSの基本は、プログラミング学習サイトの『Progate』で学びます。

Progateのメリットとしては、「難易度が低い」「説明が丁寧」「キャラがかわいい」と、学習のハードルがとにかく低いことですね。

スライド形式でポンポン進めることができるのもポイント高いです。

 

まずは、ProgateのHTML/CSSコースを3週ほどしましょう。

月額で980円かかるのですが、1度払ってしまえばあとは全部学び放題なので、課金しない手はないです。

最初は難しく感じると思いますが、根気強くやりましょう。

②作りながら学ぶHTML/CSSデザインの教科書

Progateが終わったら、市販の本を1冊買います。

僕が使ったのは、『作りながら学ぶHTML/CSSデザインの教科書』です。

 

本を1冊やりきることで、Webサイト全体の構成やリンクの関係など、Web制作の基礎知識が身に尽きます。

 

HTML/CSSデザインの教科書は内容が少し古いとこもあるので、『HTML/CSSモダンコーディング』の方がいいかもですね。

ただ、このあたりは好みなので、好きな本を買ってみてください。

③ランディングページの模写コーディング

Progateと本を1冊やりきったら基礎的な知識は身につくので、さっそく自分で考えてコーディングをしてみましょう。

とはいえ、いきなりデザインを考えてからコーディングするのは難しいと思います。

そこで、おすすめな学習方法は「模写コーディング」という方法です。

 

「これなら作れそうだな」というランディングページ(LP)やWebサイトを見つけてきて、そのデザインを見つつ、コーディングしていきます。

なお、練習なのでソースコードを見ても大丈夫です。とにかくゼロからコードを書く練習を積みましょう。

 

なお、模写コーディングについては、過去に僕が書いた記事がありますので、そちらが参考になるかなと思います。

【画像あり】はじめてのランディングページ模写【プログラミング学習記録④】

2.Javascript/jQuery:Webサイトに動きを付ける

2.Javascript/jQuery:Webサイトに動きを付ける

HTML/CSSの基礎知識が身についたら、Webサイトに動きをつけるための言語であるJavascript/jQueryを学習しましょう。

 

jQueryはJavascriptを書きやすくしたライブラリと呼ばれるものです。

JavaScriptをそのまま書くと結構難しいのですが、jQueryは初心者にもわかりやすくできているので、jQueryを中心に学ぶのがおすすめですね。

①Progate

HTML/CSSに引き続き、JavascriptもProgateを使って学習していきます。

HTML/CSSと比べて少し難しくなりますが、最初は深いところまで理解する必要はないです。

「まあ、なんとなくわかったかな」というくらいでOK。

 

目安として、Javascript・jQueryともに2週くらいすれば十分だと思います。

②Web制作の現場で使うjQueryデザイン入門

この本は基礎からわかりやすく解説されていて、初心者でも挫折しにくい本です。

基礎から実務に使える技術まで、jQueryを使ってできることがひととおり解説されています。

 

jQueryは自分で書くというよりは、プラグインを導入して使うことが多いので1冊やっておけば十分ですね。

もし、仕事で必要になったらその時に覚えたらいいかなと思います。

-スポンサードサーチ

3.Bootstrap:Web制作に便利なフレームワーク

3.Bootstrap:Web制作に便利なフレームワーク

HTML/CSS,JavaScript/jQueryの次はBootstrapを学びます。

BootstrapはTwitter社が開発したフレームワークというもので、少しの記述だけで簡単に今っぽいデザインを作ることが可能です。

 

Bootstrapを実際の仕事で使うことはあまりないかもですが、フレームワークを使うのは楽しいですし、Web制作全体の理解に繋がるかなと思います。

①ドットインストール

ドットインストールの動画

ドットインストール

Bootstrapを日本語で学ぶなら、ドットインストールの動画が一番わかりやすいかなと思います。

 

ドットインストールは日本の学習サイトの中ではトップクラスの情報量があり、基礎から応用まで学ぶことができます。

月額980円かかりますが、技術書が3,000円とかすることを考えると安いですね。技術への投資は惜しまないようにしましょう。

②Udemy「Bootstrap 4 From Scratch With 5 Projects」

Bootstrap 4 From Scratch With 5 Projects

Udemy「Bootstrap 4 From Scratch With 5 Projects」

Bootstrapは日本語の教材があまりないので、海外の教材に頼るのがいいですね。

Udemyは世界最大級の動画学習サイトで、英語の教材が多いですが、質の高いものが揃っています。

 

使い方や教材を安く買う方法などは、動画学習サイト『Udemy』でWeb製作のスキルを磨こう!【次のステップ】にまとめていますので、見てみてくださいm(_ _)m

Udemyの動画をひととおり見れば、Bootstrapはほぼマスターしたといっても過言ではないかなと思います。

4.PHP:Webサイトを動的に扱えるようにする

4.PHP:Webサイトを動的に扱えるようにする

HTML/CSSからBootstrapまで学習して、ひととおりWebサイトの作り方がわかったら、Wordpressを扱うための学習をします。

WordPressはPHPという言語で動いており、HTML/CSSとは少し勝手が違うイメージ。

 

とはいえ、HTML/CSSとJavascriptを勉強すれば、ある程度は理解できるはず。

基礎であればそこまで難しくないので、諦めずにがんばりましょうd(^_^o)

①Progate

まずはお馴染みのProgateで学習します。

例によって、2週くらいすればなんとなく基礎は身につくはず。

深いところまで理解する必要はなくて、「HTMLの中に埋め込んで使うんだな」という程度でOK。

②いきなりはじめるPHP

PHPはオフラインで動かすために、ローカル環境の構築という作業が必要になります。

俗に「環境構築」と言いますが、この環境構築は割と挫折しやすいポイントです。

 

WindowsだとXampp・MacだとMAMPというソフトがあるのですが、そのソフトを使うと、オフラインでPHPを動かすことができます。

「いきなりはじめるPHP」は環境構築と、PHPの基礎をかなり詳しく解説してくれるので、とてもおすすめ。

-スポンサードサーチ

5.Wordpress:Webサイトを更新・管理しやすくする

5.Wordpress:Webサイトを更新・管理しやすくする

Webサイトの作り方とPHPの基礎を勉強して、やっとWordpressを扱えるようになります。

WordPressの学習は、「HTML/CSSで作ったページをWordpressで使えるように変換する」というイメージ。

 

初心者にとってはかなりハードルが高く感じるはずですが、基礎はそこまで難しくないです。いい教材が見つけにくいだけですね。

WordPressを学ぶ上でおすすめなのは、ドットインストールと『Wordpressレッスンブック』です。

①ドットインストール

ProgateにはWordpressのレッスンがないので、ドットインストールを使います。

ドットインストールでは、本当にシンプルなWordpressサイトを作っていくイメージです。

たぶん、何やってるかよくわからないと思いますが、最初はそれでOK。

 

「なんとなくファイルを分割してくっつけるんだな」というレベルの理解ができれば、上出来かなと思います。

②Wordpressレッスンブック

created by Rinker
¥3,024 (2018/12/11 23:46:35時点 Amazon調べ-詳細)

WordPressはわかりやすい教材がとにかく少ないのですが、このWordpressレッスンブックはとてもわかりやすいです。

内容は簡単すぎるくらいですが、基礎の知識はこれで十分身につくはずです。

WordPressの基礎理解としてはとても良書なので、詳しくは『WordPressレッスンブック』の内容を紹介!【初心者向け】を見てみてくださいm(_ _)m

③Wordpressの教科書

WordPressはいろいろカスタマイズできる要素が多く、とても奥が深いです。

『Wordpressの教科書』は、そんなWordpressの奥深さを教えてくれる内容になっています。

ただ、解説は全然わかりやすくないし、初心者向けの本ではないです。

(例:急に専門用語が出てくるけど、解説がないまま話が進む)

 

正直に言うと、「初心者がやる必要はないかな」という印象ですが、将来のことを考えるとやっておいてもいいですね。

1冊持っておくとどこかで役立つかもしれないので、買っておいてもいいかなという感じ。

6.ひととおりスキルを身につけたら就職する

HTML/CSS/Bootstrap/jQuery/Wordpressを身につけたら、あとは思い切って就職しましょう。いつまでも独学するより、実務の中で学んでいく方が圧倒的に効率的です。

僕自身はWeb制作会社に就職しており、特に知識が不足することもなく、実務をこなせています。

具体的な手順については、【難しくない】公務員からIT企業に転職する方法【実践可能】に書きましたので、ご覧ください。

プログラミングの独学方法まとめ

プログラミングの独学方法まとめ

長くなりましたが、最後まで読んでいただきありがとうございますm(_ _)m

独学は辛いですが、続ければ続けるほどスキルアップを実感できて楽しくなりますね。

 

プログラミング学習は基礎の理解が一番大変で、挫折しやすい部分です。

僕はお金がなかったので独学しましたが、ある程度お金があったらプログラミングスクールに行くのは、選択肢としてはアリかなと思います。

>>【現役エンジニアが勧める】おすすめのプログラミングスクール3つ【厳選】

【現役エンジニアが勧める】おすすめのプログラミングスクール3つ【厳選】

2018.09.18

 

とはいえ、独学でも時間をかければ身につきますので、自分の時間や財布と相談しつつ学習してみてくださいd(^_^o)

なお、学習方法に困っていたらTwitterでDMいただければ相談に乗りますので、詳しい現状と共にご連絡くださいm(_ _)m

Twitter:@icedog_410

スポンサーリンク
スポンサーリンク