プログラミング PR

【完全初心者】プログラミングの学習の順番を解説!(おすすめの参考サイトや良書についても解説)

記事内に商品プロモーションを含む場合があります
プログラミング学習の順番がわからない!初学者はどこから手をつければいいんだ!?

ちまたでは、HTMLとCSSからやれ!だの、HTMLはプログラミング言語じゃないからJavascriptからやれだの、何でもいいから1個決めてからやれだのと、これから学習しようとしているのに結構無茶苦茶じゃね!?って常に思っている私です。。。

そんな私もどれやればいいんだ!?という気持ちのままダラダラ学習した期間もあったので、どっちのルート(キャリア)に進むかによって選択すればOKかと思います!(後述するWEB系エンジニアか、WEB制作か)

ただ、個人的には現時点でもどっちのキャリアがいいのかわからないかと思いますので、ざっくりどっちのキャリアがどういう技術を使っていているのかを解説しつつ、それを踏まえてプログラミング学習の順番について解説をしていきます!!

 

ではレッツゴー!

 

WEBエンジニアとは

現在、自分がキャリアとしてスタートしたのが、こちらのWEBエンジニアです

ざっくり言うと、WEB上で動くアプリケーション全般を指すようです

 

今自分が使用する技術としては

  • HTML
  • CSS
  • SASS
  • Javascript
  • jQuery
  • Vue.js
  • React.js
  • Ruby
  • Ruby on Rails
  • MySQL
  • Linux
  • Docker
  • TCP/IP
  • オブジェクト指向
  • API周り
  • (ReactNative)
  • (iOS関連少々)

かなりやることが増えました。。。

最近では、iOS開発としてReactNativeも触る機会が多いんですが、基本的にはRubyを触っているような感じです

 

こちらの記事でプログラミング学習や転職活動について解説をしていますのでぜひ!

【Ruby on Railsチュートリアル完走】プログラミング初学者が独学でやりきったので、学習方法のロードマップを紹介プログラミングを独学で学習している方、もしくはプログラミングスクール等に通っていて現在学習を続けている方に向けて、どのように学習したら良いかについて解説しております...
完全独学で未経験からWEB系自社開発企業に転職成功!!プログラミング初学者が学ぶべきことと転職までにすべきこと!未経験から完全独学でプログラミング学習をし、自社開発企業に転職したので報告します! どのようにして転職活動をしたのか等解説します!...

 

WEB制作とは

もうご存知の方が多いと思いますが、基本的にはWEBサイト作成するものになります

WordPressLPなんかはこちらになります

割と参入障壁としては低めで、学習時間が取れる人なら1ヶ月程度でコーディング案件くらいは取れるかも?というものになります

自分も最近Wordpressの学習を始めてて、環境構築で少し詰まった部分もあるので、こちらの記事も参考にしてもらえればと思います!

FileZillaの練習にも!docker-composeを使ってWordpress開発環境構築(初心者からでもOK!)ローカル開発環境でDockerを使うことで、より楽により負担が無く開発をしていくことができます。 この記事でDocker開発を始めてみましょう!...

 

使用技術としては

  • HTML
  • CSS
  • SASS
  • Javascript
  • jQuery
  • PHP
  • WordPress
  • MySQL
  • FTPサーバー関連
  • AdobeXDやIllustratorなどのソフト(WEBデザイン領域)

このあたり

PHPについては、多少構文に慣れていないと苦しいものがあると思います

自分も今学習していて、魔法のような関数をHTMLに仕込むだけで割とカンタンに投稿機能なんかを仕込めるのですが、いかんせん、<?phpというハテナが付くとプログラム感がすごいするので、最初は鳥肌が立ちましたが、やっていくうちに慣れていきますよ!

ただ、WordPressを学習するにあたりFileZilla等を使ってFTPサーバーに接続して作業をするということもしないといけないので、割とこの辺まで来ると学習しきれていない人も多いのではないでしょうか?

特に設定ミスをした場合には必ずサーバー作業は発生するので、トラブル時の対応としてサーバー作業の練習はやっておくべきかと思います

また、最近の案件ではサイトを1から、要するにデザインから依頼するパターンが圧倒的に増えました

HTML、CSSだけのコーディング案件はグッと減った印象です

ということで、デザインもある程度できないと案件として受けられる数が減ってしまうので、こちらも学習しておいた方が吉だと思います

 

どちらのキャリアを考えましたか!?

ということで、つらつら述べてきましたが、どちらのキャリアが良いですか?

WEBエンジニアはとにかくやる分野が広いので、学習量としてはかなり多めです

自分の例で行くと半年ほどかけて学習&ポートフォリオ作成を独学で進めていきました

ポートフォリオも大したものじゃないのですが、今の環境ならば「React.jsくらい使えるよね」ぐらいのレベル感なので、自分が転職した時よりポートフォリオのレベルはもっと上がっているように思えます

また、WEB制作は使用する技術としてはそれほど多くなく、メインはやはりHTML、CSSで装飾としてjQueryを使うというレベル感になります

そのため難しいことをやるというより、より良いデザインを表現できるか?という部分にフォーカスを当てているように思えます

 

個人的には、今キャリアが決まっていないのなら、WEBエンジニアがおすすめしています!

なぜなら、Wordpressもこんな自分でもすぐに理解できるレベルに到達できた上に、WordpressでMySQLをいじることになってもSQL文はすぐにかけるし、ターミナルからSSHでログインしてサーバー作業するのも、億劫にならずにスムーズにいけますからね!

本題、学習手順について

ということで、初学者からしたらもうわけわからんという状態だと思います

ただ、ここにきて共通点ってお分かりいただけたでしょうか?

この5つですね

  1. HTML
  2. CSS
  3. SASS
  4. JavaScript
  5. jQuery

WEBエンジニアではjQueryはほぼ使うことが無いですが、一応さらっと学習しておくと良いかと思います

つまり、どちらのキャリアをスタートさせるにしてもまずはこの5つを学習することがスタートなのでは無いかと私は結論付けております!!

学習の順番は記載の通りですが、どこで学習した方がよいかおさえておきましょう

 

HTML・CSS

最近はYouTubeでも良質な動画が増えましたが、一回プロゲートで無料の範囲で学習してみた方が良いです

https://prog-8.com/

というのも、いきなりエディターをインストールして、htmlファイルを用意して、、、というのは最初の最初では敷居が高すぎますからね

まずは無料の範囲でプロゲートで学習してみて、ざっくりこういうことをやるのがHTML、CSSからなんだという雰囲気を感じましょう

できれば、YouTubeでもどこでも良いので一回プロゲートはすぐ終えて、WEBサイトを作ってみたいところです

以下の本は入門としては、本当に良かったです

2017、18年くらいの出版だとfloatというcssの技術が使われているのですが、もう古い技術なので注意が必要です

その点、こちらは最近の技術を取り入れた上で、WEBサイトの構造やデザインについても触れらているのでHTML・CSSの学習にもってこいです

おそらく1周間もあれば一通り終わるのではないでしょうか?

 

その後は私もよく使っていたのですが、こちらのサイト模写を進めます

まずは入門編の自転車サイトのコーディングからスタート初級編まで取り組んでみます

途中からJavaScriptの知識が必要になってくるので、そのタイミングでJavaScriptを学習します

 

SASS

少し番外編に近いところではありますが、ここまでCSSのをやったのであれば、SASSもささっとできると思います

難しいことは無く、基本的には「入れ子で記述」、「変数で色やフォントなど共通のデザイン管理」、「Mixinでメディアクエリの管理」の3つだけできればいいのかなと

特に「入れ子で記述」がめちゃ便利なので、抑えておくと良いです

↓の動画でさらっと抑えておくとOK!

 

このあたりはBEMという命名規則に従って書いていくと理解が深まるかもです!

一個注意なのは、SASSはそのままでは動きません!

なので、コンパイルというものをしなくてはならないのですが、Visual Studio Codeであれば楽ちんにコンパイル可能です

それがLive Sass Compilerというもので、拡張機能なのですが、これを導入し、コンパイルを実行するとcssファイルが自動で生成させるというものになります!

JavaScript・jQuery

こちらセットで学習しちゃいましょう!!

この動画でさくっと構文をやるだけでOKかと思います

その後はhttps://code-step.com/store2-menu/ ←この中級編でハンバーガーメニューと呼ばれるナビゲーションのON・OFFをする練習をすると良いと思います

このハンバーガーメニューではjQueryを使っているので、「jQuery ハンバーガーメニュー」と検索してみてまずはコピペで試すだけでもOK!

個人的にはこの本がかなり参考になりましたので、一応共有です!!

この本は、基礎構文から実践的な使い方まで教えてくれるので、かなり良書になります

ハンバーガーメニューができたら、アコーディオンメニューふわっとした動きを出したり、もっと他にもやれることができると思いますので、これまで作成したサイトに自分なりに追加してみて動きを確かめる意味でもやってみても良きです!

 

ここまでで

ここまでで、プログラミングの学習の手順について解説しました

おそらく、ここまで来たらだいぶエディターと仲良しになったと思いますので、あとはWEB制作としてWordpressを学習するか、WEBエンジニアとしてアプリケーションを作っていくかという道になります

初心者のうちはHTMLでつまづくことかと思いますが、ここを乗り越えてしまえばかなり楽になるかと思います!

難しいことはなく、まずはここまでこれたのであればどちらのキャリアへの第一歩になりますので、ぜひチャレンジしてみください!

まとめておくと

  1. HTMLとCSSの学習
  2. SASSの学習
  3. JavaScriptの基本をおさえて、jQueryの学習

ではでは!!

関連記事