知識が0の状態からコーダーになるなら、どういう風に勉強していくか

知識が0の状態からコーダーになるなら、どういう風に勉強していくかコーダー

この記事では「コーダーとして働くために必要な技術やスキル、勉強方法」について書いています。

 

この記事を書いている僕自身は、現在(2020/01/17)、Web制作会社でコーダーとしてアルバイトしており、2020年4月からはWebエンジニアとして働く予定です。

 

コーダーとはそもそも何か?

コーダーとは、設計書やデザインをもとにソースコードを書く人のことです。この記事では、コーダー=HTMLコーダーとして取り扱っていきます。

 

HTMLコーダーは、HTML、CSSを用いてWebページを作成する人のことです

 

求人数

コーダーの求人数はというと、Indeedでコーダーと調べたところ70件ヒットしました。

indeedでコーダーと検索した際の画像

 

ただほとんどの求人が東京です。僕自身、関西の方でアルバイトをしているのですが、求人を探すのにも一苦労しました。

 

年収

コーダーの平均年収は約300万ほどになっています。(転職会議より:https://jobtalk.jp/salary_matome/jobs/107)

 

決して高い年収とは言えませんが、新しいスキルや持っているスキルを伸ばしていくことで年収を上げていけると思います。

 

コーダーの仕事内容は?

会社によって担当する範囲や業務内容が違うのであくまで一意見として参考にしてください

 

コーダーの仕事内容としては、「Webデザイナーが作成したデザインカンプをもとにコーディング」することが主です。

 

クライアントから修正が入れば修正しますし、モール(楽天、Yahoo、Makeshop等)によってコーディングに制約があったりします。

 

コーダーとして働くために必要なスキル

コーダーとしてアルバイトをしていて、コーダーとして働くために最低限必要なスキルは以下だと感じました。

  • HTML、CSS、JavaScript(jQuery)
  • Photoshop

 

HTML、CSS、JavaScript(jQuery)

ほとんどのWebページでは、HTML、CSS、JavaScript(jQuery)が使われています。なのでHTML&CSS→JavaScriptの順番に学習することをおすすめします。

 

具体的な学習方法については、後で説明します。

 

Photoshop

僕自身コーダーとしてアルバイトをするまではPhotoshopを一度も触ったことがありませんでした。

 

上司の方に、最初に基本的な使い方を教えてもらい、実際の案件を経験していく中で調べながら使い方を学んでいきました。

 

この経験からコーダーがPhotoshopを使うにあたって出来るようになっておくと良いこととして、

  • デザインカンプから値を取得(文字の大きさ、文字間隔、余白など)
  • 画像の書き出し(.psdから.jpgや.pngに)

 

が挙げられます。最低限上記2つが出来ればOKです。

 

【初心者脱却】Photoshopでよく使う「スライスからの書き出し」「画像アセットの生成」とは?
この記事では、Photoshopでよく使っている「スライスからの書き出し」「画像アセットの生成」についての操作について説明しています。「コーダーのアルバイトをしたいと考えているけど、その際によく使うPhotoshopの機能について知りたい。「スライス」「書き出し」「画像アセット」って何のこと?」という方は是非読んでみてください。

 

コーダーになるための勉強手順

もし自分の知識が0の状態からコーダーになるなら、どういう風に勉強していくかについて書いていきます!

 

①まずはHTMLとCSSを勉強

具体的には、以下の順番での学習をお勧めします。

  1. ProgateでHTML&CSSコースを全てやる。コラムに書いてあるチュートリアルもやる
  2. ドットインストールでHTMLコースCSSコース全てやる
  3. Udemyの「実践Webサイトコーディング講座」取り組む

 

 

②HTML&CSS勉強後にJavaScript(jQuery)の勉強

具体的には…

  1. ProgateでJavaScriptコース全てやる
  2. ProgateでjQueryコース全てやる
  3. ドットインストールではじめてのJavaScript全てやる
  4. ドットインストールでjQuery入門全てやる
  5. こちらのサイトに書いてある動きを実際に実装する

 

最後に紹介してあるサイトに関して、Webサイトを作る中でよく出くわすパターンが書いてあるので、こちらの動きを実装することが出来れば、OKです!

 

③ポートフォリオを作成する

具体的には…

  1. ポートフォリオのワイヤーを書く(手書きでOK)
  2. ポートフォリオに書く項目を決めて、実際にコーディングしていく
  3. サイト作成が完了したあと、サーバーにアップ( ドメインとか自分で取得しなくても公開できるnetlifyがおすすめ)

 

ポートフォリオを公開したあとは、それを面接等でアピールしましょう!

 

【Webエンジニア就活】ポートフォリオの作り方と実際に作成したものを公開
この記事では、Webエンジニアとして就職するためには欠かせない存在であるポートフォリオの作り方や実際にどのようなものを作成すれば良いのかについて体験談を交えながら解説しています。この記事を書いている僕は、2020年1月現在大学4回生でWeb製作会社でコーダーとしてアルバイトしており、今年の4月からWebエンジニアとして働き始めます。

 

コーダーになったあとの道一覧

 

コーダーになった後の道としては、以下が考えられます。

  • フロントエンドエンジニア
  • バックエンドエンジニア
  • そのままコーダーを続ける
  • Webデザイナー
  • Webディレクター
  • スクール講師

 

まとめ

今回は、コーダーとして働く(アルバイトする)ために必要なスキルや技術、勉強方法について書いてきました。

 

0から勉強を始めてコーダーになるという方には、パッと見学習する量が多いと感じるかもしれません。

 

ただ、ここで紹介したことを一度やってみて、自分に向いているのか判断できると思います。もし「楽しい」「面白い」と思ったのであれば、ぜひ学習を続けてみてください!

 

コメント