未経験からプログラミングを勉強したいけど、どんなやり方がいいのかな?Progateをやってみたけど、その後にどんなステップを踏めばいいのか具体的に知りたいこんな質問に答えたいと思います。結論から言うと、しっかり基礎をこなして、手を動かしていけばスキルは身に付きます。完全未経験からプログラミング学習3ヶ月で、Web制作会社に転職することができました。この経験を元に、完全未経験からプログラミング(Web制作)を独学した方法についてご紹介します。ぶっちゃけ独学できるかどうかは、向き不向きがあるので、あくまでも僕が行ってきた経験談を元に解説してます。「参考に」していただき、自分のロードマップに落とし込んでいただければ幸いです。この記事の内容は下記の通り。手を動かして壁を乗り越えようプログラミングの基礎を学ぶWebサイトを作っていくには、やはり基礎を知っておく必要があります。料理を作るのに、塩と砂糖の使い方がわからないと、美味しい料理は作れませんよね?基礎編の具体的な手順は下記の方法です。プログラミングの仕組みをざっくり把握するProgateで大枠を掴むドットインストールでもう少し詳しく学ぶプログラミングの仕組み最低限、Webサービスやアプリが動いている仕組みを理解しておくことです。こちらの動画がわかりやすいので、おすすめしておきます。基本ですが、まずはこの辺りから抑えていきましょう。実際にサーバーを触らないにせよ、基本的なところは知っておいたほうがいいと思います。この動画だけだと不十分な部分もあるので、Web制作だけでなくプログラミング全体に必要な基礎のリテラシーを詰め込んでくれる本がこちらです。楽天ブックスAmazonKindleまず初めは、こんな感じなのか〜とざっくり把握しておくことが大事かなーと思います。Progateで一通りの言語を学ぶHTML.CSSJavascriptjQueryまずはココまで全コースこなしましょう。先に進めていくと有料な部分もありますが、ここは渋らずにサクッと課金した方が速いと感じてます。2020書籍1冊分と考えれば、圧倒的にコスパいいですので、よく考えてみてくださいね。【プログラミング】初学者の勉強で「完璧な理解」は無意味です【手を動かす】プログラミング学習で初心者がハマりがちなのが、「分からないところは全部理解したい」と思ってしまい、なかなか先に進めないことです。...後で必要になってくる知識として、下記のものがあります。この辺りもProgateで学べるのですが、一気にいろんな知識を入れると混乱するので、あとで紹介するWordPressと一緒に習得するといいです。基本に慣れてきたら、Sassを学んでみるのもいいかと思います。SassコマンドラインmysqlPHPここで学んだ知識を使えば、簡単なWebサイトを制作することが可能です。道場コースまでこなすです。わかるまで何周もするのはNGで、Progateは大枠を掴むためにこなしましょう。そのため、スライドや答えを見てもオッケーです。手を動かして「こうすればこう動く」と雰囲気を感じるのが大事です。理論は後からで大丈夫。プログラミ...ドットインストールでもう少し詳しく学ぶProgateだけだと、理解できなくて何周もしたり、わかった気になってしまうことも多いです。次はドットインストールでもう少し詳しく学習していきます。見るべきなのは下記の動画です。(全10回)ちょっと多くない?と思ったかもしれませんが、1つの動画が短いのでサクッと終わります。「どうしても多すぎて大変」という人は下記の動画だけでも見ておいてください、このあたりはかなり重要です。(全10回)Progateではブラウザ上で学習を進めてきましたが、実際に作業するのは自分のパソコンです。ドットインストールのメリットとしては、動画を見ながら自分のパソコンで作業することで「テキストエディタに慣れる」ことだと思ってます。おすすめは、VSCodeです。【プログラミング】VSCodeの便利なショートハンド【効率化】プログラミングに必要不可欠なのがテキストエディタ。僕がおすすめしているのが、VisualStudioCodeと言う無料の...紹介した動画は月額1,080円のプレミアム会員になる必要がありますが、動画を見終わって必要なければ退会すればOKですし、他にもたくさん動画があるので、見てみる価値はあるかと思います。ドットインストール作りながら学ぶコンテンツで深く学ぶここまで長かったですね、お疲れ様です。ここからは実際に「作って学ぶ」工程に入っていくので楽しくなってきます!この過程でのポイントはこんな感じかと思います。自信がつく手を動かして見てもわからない部分は、自分で調べて解消していきましょう。具体的な方法は下記の通りです。Udemyの講座を利用する無料の学習コンテンツを利用するWordPressを学んでスキルアップする2が一番おすすめですが、僕は全部やって来たので全て紹介しておきます。技術書も取り入れたいって人は下記の記事を参考に選んでみてください。こんな質問に答えたいと思います。この記事を書いている僕は、30代未経験からプログラミング学習を開...Udemyの講座を利用するUdemyは「作って学べる教材」がたくさんあり、プログラミング初学者からは好まれています。僕が実践した講座は下記の講座です。PhotoShopなどのデザインツールで作られた「デザインカンプ」を元にコーディングを行うのですが、こちらの講座ではデザインカンプのサンプルを使って、実際にサイトを作っていくことができます。実務に近い形で学習を進めることができるので、コーディングの流れを理解するのにおすすめの教材です。PhotoShopをダウンロードしておく必要がありますが、無料体験でもOKなのでダウンロードして試してみてください。Adobeの無料体験版のダウンロードはこちらから無料の学習コンテンツを利用するもっともおすすめなのが、東京フリーランスさんの30DAYSトライアルです。こちらもデザインカンプからのコーディングを進めていく学習コンテンツなのですが、無料で質が高いです。コーディングスキルを身につけるなら、ぜひやるべきでしょう。30DAYSトライアルは3つの工程に分かれており、ここまで学習を進めて来られた方であれば、途中から実践しても問題ないでしょう。下記の記事から順番に進めていきましょう。30DAYSトライアル1st【コーディング基礎学習〜環境設定編】30DAYSトライアル1st【Bootstrapの基礎〜LP制作編】30DAYSトライアル1st【ポートフォリオ〜LP制作実践編】30DAYSトライアル2nd【コーダーとして企業と仕事ができる実力をつけよう】30DAYSトライアル2nd【デザインデータからコーディング〜よく使うパターンを練習しよう】30DAYSトライアル2nd【実務に必須のアニメーションの付け方〜実践!最終課題】ここまでで、HTMLCSS、jQueryのスキルは身につくはずです。注意点としては、2のBootstrapです。こちらの課題は、YouTube動画を見ながらサイトを作っていくのですが、結構詰まる人が多いです。実は、BootstrapをWeb制作の現場で使うことは滅多にありません。こんなものもあるんだなーと知っているくらいでOKです。詳しくは、別の記事で解説していますので、読んでみてください。こんなお悩みをお持ちの方に、当記事を書いています。Bootstrapの学習を進めている方が多いなーと感じ...この段階で、「動きのあるHTMLサイトがコーディングできる」スキルが身についているはず。市場で求められているスキルはもう一段階上のスキルが必要です。※30DAYSトライアルがアプリになりました!学習状況の管理もしやすいので、おすすめです。デイトラWordPressを学んでスキルアップするWordPressとは、オープンソースのブログ投稿管理システム、CMS(コンテンツ管理システム)です。サイトやページ制作に必須となるHTML/CSSなどの技術が無い人でも簡単にサイトを管理したり、記事投稿ができるため、個人のブロガーから企業まで幅広く利用されています。世界中のサイトのおよそ4分の1はWordPressで構築されていると言われているので、Web制作の現場では必須のスキルと言えますね。こんな質問にお答えします。Web制作会社に務める現役のWebコ...WordPressのスキルを身につけるには2つの手順をオススメしています。30DAYSトライアル3rdWordPressの教科書30DAYSトライアル3rd30DAYSトライアル3rdは、WordPressを学びながらブログテーマを作ることができます。ブログテーマを作ることで、WordPressの基礎を知ることができるので、まずはやってみましょう。phpというプログラミング言語を使いますので、HTMLCSSと進んで来た人が直面するのは「PHP難しすぎ」問題です。してもわからないなら一旦飛ばしてもいいですし、コミュニティで質問してみましょう!悩んでいる時間は無駄ですよ。30DAYSトライアル3rdへはこちらからWordPressの教科書さて、ブログテーマの作り方は一通り学びました。実務となった時に、WordPressのブログテーマを作ることはあまり無いはずですので、今度は企業サイトを作る練習をしましょう。そこで、おすすめなのがWordPressの教科書です。30DAYSトライアルでは手が届かなかった部分まで細かく開設されているので、この本をこなせばWordPressの基本は問題ないでしょう。楽天ブックスAmazonKindle手を動かして成果物を作るここまで学習サイトや書籍を使って、作りながら学んで来ました。ここからは、実際に自分で成果物を作ってみましょう。手軽なのはサイト模写です。模写の方法については以下の記事で解説していますので、参考にしてみてください。ポイントは、「なるべく実務に近づける」です。【HTML・CSS】効果的な模写制作の方法について考えてみた「コーダーとしてスキルを上げたい」と思った時、効果的なアウトプットの方法が既存サイトの模写制作ですね。未経験からだと実績もありま...しかし、模写制作物は著作権の関係上「自分の作品」としてポートフォリオに載せることができません。練習でやるならいいですが、やり過ぎても時間が勿体無いなーと今更後悔してますwスキルを伸ばしつつ、成果物を作る最適な方法は、「自分の作品を作ること」だと思います。WordPressブログテーマを1から作ってみる架空のサイトを制作してみるといった感じです。「そんなこと言われてもデザインもできないし、どうすりゃいいの?」って思うかもしれませんが、簡単なアウトプットの方法をご紹介します。「デザインは参考にしつつ、コンテンツはオリジナル」であれば、成果物になります。良質なポートフォリオサイトを作るよりも、成果物の質の方が大事だと思っています。やって作っていくのか?例をあげて説明していきましょう。僕がアウトプットの為に作成したワードプレスブログテーマです。manablogです。30DAYSトライアルとはまた違ったレイアウトにして、シンプルにまとめました。全体画像はこちら架空レストランサイトです。参考にしたサイトはこちら。雰囲気も全く違いますが、なんとなくデザインは似てますよね。ヒーローイメージと、スティッキーヘッダーの練習の為に作成しました。大枠はいいとこ取りして、あとはテキストや全体的な色調を微調整すればOK。ゼロベースから作ることで、自分の頭で考えながらコードを書いていくのでめちゃくちゃ勉強になるのでおすすめです。手を動かして壁を乗り越えようかなり長くなってしまいました。自分の作品を作る→模写+架空サイト制作こんな感じで学習を進めていけば、間違いなくWeb制作会社でコーダーとして勤務しても問題ないレベルだと思います。転職活動時の面接でも、かなり高評価をいただいたので、この学習方法で進めていけば間違いなく内定はもらえるでしょう。【30歳でも可能】未経験からコーダー転職!応募から内定までの記録実務未経験からコーダーとして内定をもらうことに成功しました。2019完全未経験でも、スクールに入らずに独学でプログラミングスキルを習得することは可能です。独学できるはどうかは、ぶっちゃけ向き不向きがあるので、それを判断する意味でも「無料教材を活用して判断材料として使う」のはとっても大切なことです。まじで独学無理ってなれば、結局エンジニアになれば回収できる金額なので、スクールを検討した方が効率的です。こちらの記事も一緒にどうぞ。こんな質問にお答えします。結論から言うと、環境を変えることで人は変わることができます。こんな質問にお答えします。先日、下記のようなツイートをしてまして、コレが結論です。爆速で成長する...【注意】初心者がプログラミング独学するなら「他人との比較」は捨てようわりと「人との比較」をしてしまってる人が多いなーと感じてます。結論から言うと、無意味です。初心者がプログラミングを独学する上で大切な注意点について解説していきたいと思います。...さて、これを読み終わったら、あとは行動するのみです。Progateから始めましょう。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。