🎉 お知らせ:サイト名が『webkore』から『模写修行 media』に変更になりました。6月以降にドメインも『moshashugyo.com/media/』へ変更する予定です。

プログラミング

コーダー・フロントエンドで食べていくためにProgateの次に勉強すべきこと

Author:Gaku(gaku92014091)

この記事の目次

フロントエンド、バックエンド問わず、プログラミングを勉強しよう!と思ったときにまずはProgateから始める方は多いのではないでしょうか?

まずはHTML・CSSを勉強する。その後、フロントエンドに興味がある方はJavaScriptを、バックエンドに興味がある方はRubyやPHPやPythonを、というのが王道な流れだと思います。

初学者の方にとってプログラミングに慣れる・知るという意味でこの流れは適切です。

ただ、Progateは基礎の基礎を勉強するサービスです。Progateだけではとても実務レベルのスキルや知識は身につきません。

この記事では、『Progateの次は何を勉強すれば良いのか』について、コーディング・フロントエンドに特化して解説します。

勉強をする上で知っておくべきこと

これからしっかり勉強して、コーダーやフロントエンドエンジニアになりたい方にとって、『遠回りしないための心得』を知っておくことが重要です。

Progateはどんな方に向いているサービスか

  • ITは全くの初心者だけどプログラミングに挑戦したい
  • プログラミングにちょっと触れてみたい

Progateはこんな方に向いているサービスです。

初心者向けに、かなり分かりやすく解説しているサービスなので、勉強の入りとしては良いと思いますし、多くの方がおすすめしています。

ただ、PC操作に慣れている方や、既にプログラミングに触れたことがある方、などにとってはProgateを使うことは非効率な学習方法だと感じます。

実際に現役エンジニアが、他の分野や言語を学ぼうと思った時に、Progateを使う方はほとんどいません。大体の方が書籍と公式ドキュメントで勉強すると思います。

ココ重要!

コーダー・フロントエンドエンジニア志望の方は、HTML・CSS / JavaScript / jQuery / Reactを少し触れてみる目的のため"のみ"にProgateを使用することをおすすめします。

幅広くよりも1つの分野を極めることが大事!

  • 何を作りたいか
  • どんな企業に就職したいか
  • どんな働き方をしたいか

などなど。目的によって勉強すべきことや、方針は変わります。

その方向性が定まっていないから、『色んな言語に触れてみる』のであれば、それは悪いことではありません。

しかし、目的が決まっているのであれば、あれこれ手を出すべきではありません。

実務レベルのスキルを身に付ける上で、広く浅く勉強することは遠回りです。

例えばHTML・CSS / JavaScript / jQuery / Reactがどれも少しだけ書ける人より、JavaScriptはまだほとんど書けないけどHTML・CSSはちゃんと書ける人の方が需要はあります。また、簡単と言われがちなコーディングも“ちゃんと”書ける人はそんなに多くいません。

“ちゃんと”書けることに加えて連絡のレスポンスが速かったり、コーディングのスピードが速ければ、コーディング案件はかなりありますし、初期の稼ぐ手段として特に悪いとも思いません。

まずはコーディングを!コーディングが出来ると言えるレベルとは?

フロントエンドを主戦場にするのであればコーディングがまともに出来ることは必須です。

では、コーディングが出来ると言えるレベルとは?

  • デザインを再現できる
  • 保守性や拡張性を考えたコードが書ける
  • 効率よく書ける

個人的には上記3点が『コーディングが出来る!』と言えるレベルかなと思います。この3点に関して詳しく解説します。

Point

Progateは良いサービスだと思いますが、到達できるレベルは『かなり簡単な見た目であればデザインを再現できる』くらいです。

デザインを再現できる

前述した通り、Progateをしっかりやっていれば、『かなり簡単な見た目であればデザインを再現できる』レベルになっていると思います。

ネクストステップとして、もっと複雑なデザインでも再現できるようになることを目指すべきです。

ここで言う複雑なデザインとは、ギャラリーサイトに載っているようなデザインのことではありません。それよりももっと簡単な、オーソドックスなwebサイトという意味です。

そのために必要なことはとにかく書くことです。2,30サイトくらい作ればデザインを見ただけで、おおよそHTMLがイメージ出来るようになると思います。

模写をしている方も多くいますが、模写したサイトのコードが参考になるとは限りません。良い書き方をしていないこともあるので、その点は注意が必要です。

お知らせ!

このフェーズの良質な教材が少ないと感じているので、限りなく実践に近い状況でコーディングの練習が出来るサービスを現在制作中です。

保守性や拡張性を考えたコードが書ける

保守性や拡張性を考えたコードを書けるようになるためには、CSS設計の勉強をしましょう。

学習サービスや書籍のほとんどは初心者の方をターゲットにしているので、分かりやすいかもしれないけど、SEO / 保守性 / 拡張性を考えると微妙な書き方をしているケースも多くあります。

プログラミングスクールも同じです。多くのスクールでCSS設計は教えていないと思います。(教えてないのではなく教えられない可能性も...)

CSSはただですら破綻しやすいので、CSS設計なしでは、将来的に痛い目をみます。

👇 CSS設計に関してざっくり概要が知りたい方は、こちらを参考にしてみてください。

しっかり学ぶには下記の2冊がおすすめです!

効率よく書けるようになる

フリーランスの方などは特に、効率よく書くことは自分の時給を上げることに繋がるので、とても重要です。

  • Scss
  • EJS/Pug
  • gulp/webpack
  • Git/GitHub←効率化ではないけど

効率化するためにはこれらを勉強しましょう。コーディングがある程度出来る人にとって、学習コストはそこまで高くないはずです。ただし、全くJavaScriptに触れていない状態だと、gulp / webpackは難しいかもしれません。

今後の方向性によっては使わないものもあるかもしれませんが、IT業界にいるのであれば学んでおいても損はないです。

Git / GitHubは効率化ではありませんが、チーム開発の時には必要なので、勉強しておくと良いと思います。

コーディングの次に勉強すべきこと

コーディングが出来るようになったら、その後どの道に進みたいかはおおよそ2パターンあります。

  • web制作を仕事にする
  • フロントエンドエンジニアになる

勉強が順調に進み、『コードを書くことを続けていきたい!』と思えば上記の2パターンに別れることが一般的です。もちろんいずれどっちも出来るようになることを目指しても良いです。

web制作を仕事にしたい方

web制作を仕事にしたい場合にやるべきことは、JavaScript(jQuery)とWordPressです。

web制作におけるJavaScript(jQuery)の役割は、サイトに動きを付けることがメインになってきます。ギャラリーサイトを見ると、CSSのアニメーションと絡めてかなり派手な演出のサイトも多くあります。

JavaScriptの基礎は書籍で、jQueryは公式ドキュメントを見て勉強するのがおすすめです。一通り勉強した後は、実装してみたい動きを作ってみると良いです。

また、web制作をする場合、WordPressも必須です。

WordPressはオワコンなんて声をたまに聞きますが、そんなことはありません。まだまだ使われますし、WordPressがわからないと対応できる仕事はかなり減ります。

WordPressも書籍で基礎を勉強してから、実際にサイトを作ってみるのが良いです。自分のブログを運用してみても良いと思います。

学習ステップ
  1. よし、web制作の勉強をするぞ!
  2. ProgateでHTML・CSS / JavaScript / jQueryをやってみる
  3. コーディング(HTML・CSS)を書籍でしっかり勉強する
  4. JavaScriptの基礎とjQueryを書籍や公式ドキュメントでしっかり勉強する
  5. WordPressの基礎を書籍でしっかり勉強する

勉強の過程で何か作ってみることも重要です!

フロントエンドエンジニアになりたい方

フロントエンジニアが扱うJavaScriptは、React / Vue / AngularなどのライブラリやフレームワークとTypeScriptになります。

フロントエンジニアもサイトに動きを付けることはありますが、web制作のように派手な動きを作ることはあまりありません。また、jQueryを使うこともほぼないでしょう。

React / Vue / Angularに関して、日本ではReactとVueが多い印象です。Reactは大規模向けで、Vueは取っつきやすいと言われたりします。まずはReactかVueを出来るようにするのが良いです。海外ではReactが1番使われています。

React / Vue / AngularのどれかとTypeScriptを勉強する場合も書籍を使うことがおすすめです。ただ、フレームワークはアップデートも多く、流れが速いので公式のドキュメントも見ながら学習することになると思います。

学習ステップ
  1. よし、フロントエンドエンジニアになるぞ!
  2. ProgateでHTML・CSS / JavaScript / (React)をやってみる
  3. コーディング(HTML・CSS)を書籍でしっかり勉強する
  4. JavaScriptを書籍でしっかり勉強する
  5. React / Vue / Angularのどれかを書籍でしっかり勉強する
  6. TypeScriptを書籍でしっかり勉強する

web制作と同じく、勉強の過程で何か作ってみると良いです。

何を作るかにもよりますが、Firebasなどを使えばバックエンドが出来なくても、サービスが作れるのでどんどんサービスを作って、サービスで生きていくなんてのも良いですね。

早めにコーディングの次のステップへ進むべき!!

お金を稼ぐことや将来性を考えると、やはりコーディングだけやっているのはあまり良い選択だとは思えません。最近はコーディングいらずでwebサイトが作れるNoCodeサービスも増えてきました。

  • web制作に必要なスキルを勉強する→デザインも勉強する
  • フロントエンドエンジニアを極める

このように仕事の幅を広げていくと良いでしょう。周辺スキルとしてwebマーケティングなんかも勉強すると役に立ちます。

なるべく早めに次のステップに進むと、新しい世界も見えて楽しいですよ!

駆け出しエンジニアのためのコーディング練習教材

Coming Soon
© 2021 模写修行 media.