コーダーとして必要なスキルセット

こんにちは、Yukiです。

今回はコーダーとして仕事をこなしていくために必要なスキルセットを紹介していきたいと思います。

過去の自分も含め、未経験でこれからコーダーやエンジニアを目指したいという方は、イマイチ何ができればコーダーとして仕事がちゃんとできると言えるのか分からないという方が多いのかなと思ったので、今回の記事がこれからコーダーやエンジニアを目指す方の勉強の指標になれば良いなと思います。

コーダーに必要なスキルセットを紹介する前に、まずは多くの未経験の方が勘違いしやすい、「コーダー」と「マークアップエンジニア」と「フロントエンドエンジニア」という言葉の定義の違いについて簡単に解説します。

スポンサードサーチ

コーダーとマークアップエンジニアとフロントエンドエンジニアの違い

人によって言葉の定義は少し変わるのですが、大まかには以下の感じかと思います。

  • コーダー:文章構造を意識し適切にHTMLタグを使用し、マルチブラウザの対応ができ、デザイナーが作ったデザインを、HTML/CSS/JavaScript(jQuery)/CMS(WordPressなど)を用いてブラウザ上に再現できる人。
  • マークアップエンジニア:コーダーのスキルに加え、アクセシビリティの高さや、W3Cの規約に準拠、SEO対策、CSS設計といったところまでを考慮したコーディングができる人。つまり、コーダーの上位職に当たる。
  • フロントエンドエンジニア :サーバーサイド言語(PHPなど)の知識もある程度持ち、vueやreactなどのJavaScriptのフレームワークを使いこなし、UI・UXの知識を持ち、APIの利用やオブジェクト指向の理解、コンポーネント設計、その他HTML,CSS,JavaScriptの関連知識を持った人。

人によっては、マークアップエンジニアのことをコーダーと言う人もいますし、もしくは、マークアップエンジニアをフロントエンドエンジニアと表現する人もおり、マークアップエンジニアの線引きは結構曖昧なのですが、大まかにこうゆう違いがあるんだなくらいに思っておきましょう。

ただ、HTML/CSS/jQueryしかできない人が「フロントエンドエンジニアです」と名乗って「フロントエンドエンジニア 」で求人を探すと全然就職先が見つからない、もしくは採用側の人から「わかってないなコイツ」と思われる可能性があるのでその点は注意しましょう。

コーダーとして働くために最低限なスキルセット

コーダーとして必要なスキルセットとして、「最低限必要なスキル」と「これができればなお良い」という2つの段階に分けて解説していきたいと思います。

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

最低限必要なスキルは以下です。

  • デザインをHTML/CSS/jQueryでブラウザ上に再現できる
  • Photoshop、Illustrator、XDを使って画像の書き出し、要素の大きさや余白など必要なデータが取り出せる
  • サーバー、ドメイン、FTPクライアントの基本的な知識と経験がある
  • MAMPを使ってローカル環境の構築ができる
  • Bootstrapを使ったサイト制作の経験
  • レスポンシブ対応
  • マルチブラウザの対応
  • 文章構造を意識してHTMLタグを適切に使える
  • jQueryで基本的なアニメーションの実装ができる
  • 画像の圧縮

では、詳しく見ていきましょう。

デザインをHTML/CSS/jQueryでブラウザ上に再現できる

ここでいう「デザインをHTML/CSS/jQueryでブラウザ上に再現できる」というのは、ピクセルパーフェクトといって基本的にはデザインから1pxもずらさずにコーディングするという事です。

「なんとなくそれっぽく作ればいい」ではダメで、デザインと全く同じに再現できるレベルのスキルが実際の仕事では求められます。

Photoshop、Illustrator、XDを使って画像の書き出し…

コーダーの仕事は基本的に、デザイナーがフォトショップなどで作成したデザインデータから必要な素材を書き出したり、余白の大きさなどの必要なデータを取得する作業が必要となります。

なので最低限仕事をするならPhotoshop、Illustrator、XDを使って適切なファイル形式での画像の書き出しや、要素の大きさ、余白など必要なデータを取り出せるようになる必要あります。

XDさえあれば一応Photoshop、Illustrator、XD、Skecthの画像データを開くことは可能なのですが、何かしらのイレギラーが発生した場合対応できなくなる可能性があるので、Photoshop、Illustrator、XDのこの3つは最低限買い揃えて、基本的な操作を覚えておく必要があります。

サーバー、ドメイン、FTPクライアントの基本的な知識と経験がある

これらは、コーディング後にコードを世の中に公開(サーバーにあげる)する際に必要になる知識です。

フリーランスであれば納品の形式で、サーバーにアップロードする形で納品ということがあるので、サーバー、ドメイン、FTPクライアントの知識は必須です。

そこまで学習コストはかかりませんが、経験がないと案件を受注した際に苦労することになるので、ドメイン取得、FTPクライアントを利用してサーバーにアップロードするという一連の流れを一度経験しておきましょう。

MAMPを使ってローカル環境の構築ができる

WordPressやPHPコーディングの案件をやる際にはローカルで開発環境を構築する必要があるので、ローカル環境での開発をできるようにしておきましょう。

MAMPでの開発環境の構築の仕方は下記の記事がわかりやすいです。

MAMPを使ってローカル環境にWordPressをインストールする方法

Bootstrapを使ったサイト制作の経験

BootstrapはCSSフレームワークです。LPやコーポレイトサイトのコーディングではそこまで頻繁に使われるものではありませんが、既存サイトの改修などで必要になることがあるので、ドットインストールなどで勉強して、その後Bootstrapを使用して何かサイトを作ってみる程度の経験は積んで、仕組みや基本的な使い方は覚えておく必要があります。

レスポンシブ対応

コーディングでは、基本的にどの画面幅(320px~1900px)でも表示を崩さないようなレスポンシブコーディングをできるようにする必要があります。

レスポンシブ対応に関しては、コーディングの数をこなさないとなかなか身につかないので、案件に入る前に最低でもサイト模写5〜10件、デザインデータからのコーディングを2〜3件くらいをこなすことを目安にすると良いでしょう。

マルチブラウザの対応

多くのコーダーの方は、Chromeで表示の確認をしながらコーディングしているかと思いますが、Chromeでの表示だけでなく、IEやEdge、FireFox、Safariなどの主要なブラウザでも表示や挙動が崩れないようにコーディングできるようにする必要があります。

これには、各ブラウザの対応状況を把握し、自身でも各ブラウザでの表示をチェックできる環境を整える必要があります、MacユーザーであればIE,Edgeを確認する環境が必要ですし、WindowsユーザーであればSafariでの表示を確認する環境を用意する必要があります。

このマルチブラウザの対応は、多くの駆け出しのコーダーが見落としがちの部分なのですが、品質に大きく関わる部分なので、しっかり対応できるようにしましょう。

文章構造を意識して適切にHTMLのタグを使用できる

特に見出しタグ(h1,h2など)を適切に使えることと、「nav,section,article,aside,figure,header,footer」などのタグは最低限適切に使用できるようにしておきましょう。

HTMLのタグにはそれぞれ意味があり、divばかり使ってるのは文章として成立していないので、見た目がデザイン通り実装できていてもdivばかりのコードはコーダーとして仕事をするのであれば、あまり好ましくないです。

jQueryで基本的なアニメーションの実装ができる

ここでいう基本的なアニメーションとは

  • スムーススクロール
  • アコーディオン
  • スライダー
  • ハンバーガーメニュー

などのことです。

これらのアニメーションはコーディングの案件の際に非常によく使うので、jQueryを使ってこれらは実装できるようにしておきましょう。(その他のアニメーションに関しては案件ごとに調べながらやるで十分です。)

画像の圧縮

サイトを表示させる際のページ速度や画質などを考え、画像は適切なファイル形式で書き出し、圧縮する必要があります。

なのでPNG-8、PNG-24、PNG-34、JPEG、GIFの違いと、画像を圧縮するツールなどは知っておきましょう。とにかくなんでも「png」で書き出すのというのはコーダーとしてはあまり好ましくないですし、チェックの厳しい制作会社であれば修正するよう指摘されます。

 

コーダーとして最低限仕事をこなす上で知っておきたい知識は以上です。人によっては「デザインの再現ができればコーダーとして仕事できます!」と言ってる方もいますが、それだけだと高確率で事故るので、私はコーダーとして大きな事故などがなく仕事をこなせるのは上記のものがこなせるレベルだと考えています。

加えて、スキルが不十分の状態で見切り発車で仕事を受けてしまうと、高確率でクライアントに迷惑をかけることになるので私はあまりオススメしません。

コーダーとして「これができればなお良いスキル」

続いて、コーダーとして「これができればなお良いスキル」を紹介していきたいと思います。

「これができればなお良いスキル」は以下。

  • jQueryを使わず、JavaScriptだけでアニメーションの実装ができる
  • Git/Githubが使える
  • Sassが使える
  • Gulpなどのタスクランナーが使える
  • CSS設計の知識を持ち、保守性の高いコーディングができる
  • WordPressの実装ができる
  • SEO内部対策の知識がある
  • アクセシビリティやユーザビリティを考慮した実装ができる

では詳しく見ていきましょう。

jQueryを使わず、JavaScriptだけでアニメーションの実装ができる

細かい実装が必要となる案件だと、jQueryだと対応できないといったこともありますし、今後フロントエンドエンジニアとしてのキャリアを考えるなら、jQueryを使わず、JavaScriptだけでアニメーションの実装ができるようになっておくことは重要です。

JavaScriptのみでアニメーションを作るには、JavaScriptの基本文法、DOM、イベント処理の知識が必要となります。

Git/Github

フリーランスで単純なコーディング案件を受けるだけであればGit/Githubは必要になることはあまりないですが、制作会社によってはGithubでソースを管理する会社もありますし、今後エンジニアとしてのキャリアを積んでいきたいのであれば必須となる知識なので覚えておくと良いでしょう。

Sassが使える

SassはWeb制作でもほぼ必須と言える知識なので、必ず習得しておきたい知識の1つです。Sassは「最低限必要なスキル」に入れるか迷ったのですが、Sassは使えなくても最低限コーディングの仕事をこなすことは可能なので、「これができればなお良いスキル」の方に入れました。

ただ、制作会社の外注案件だとほとんどがSassでのコーディングを指定されますし、Sassを使いこなせるとかなり開発の効率も上がるので早めに習得することをお勧めします。

Gulpなどのタスクランナーが使える

Gulpなどのタスクランナーはブラウザの自動リロードや画像の圧縮、Sassのコンパイル、ベンダープレフィクスの付与などのタスクを自動化してくれるツールです。

これが使えなくてもコーディングの仕事をこなすことは可能ですが、単価の高い制作会社の案件では必須のスキルとされることが多く、またGulpなどのタスクランナーを使いこなせると開発の効率がかなり上がるので、余裕があったら使えるようにしておきましょう。

CSS設計の知識を持ち、保守性の高いコーディングができる

CSS設計とは、CSSを記述する際に再利用のしやすさ、保守のしやすさなどを考えたCSSのルールのようなものです。

LPなどの1ページのコーディングくらいなら、特別ルールなどなくても問題ないのですが、下層ページが何ページもあるようなサイトのコーディングなどになると、しっかりルールを決めないと、コードが破綻してしまいます。

なので、コーダーとしてレベルアップするには確実に必要となる知識です。簡単なLPのコーディングなどに慣れてきたくらいの頃に勉強するのが良いかと思います。

WordPressの実装ができる

WordPressはCMSと呼ばれるもので、コーポレイトサイトやブログサイトなどによく使われている技術です。

WordPressまでできると、仕事の幅も広がってきますし、フリーランスであれば単純なコーティング案件と比べ単価も高いです。簡単なカスタマイズや実装であれば、比較的学習コストは低いので、ある程度コーディングに慣れてきたら勉強することをお勧めします。

SEO内部対策の知識がある

SEOとは検索エンジンにおいて上位に表示するためのもので、コーダーなどの求人でも歓迎スキルとして記載されていることが多いです。

SEOは情報の移り変わりが早く、突き詰めるとかなり奥が深いので、コーダーは最低限簡単な書籍を数冊読んで、基本的な知識を身につける程度のことをしておくのが良いかと思います。

アクセシビリティやユーザビリティを考慮した実装ができる

アクセシビリティとは「インターネットへのアクセスのしやすさ」のことで、ページの表示速度などのことで、ユーザービリティは「使い勝手の良さ」や「分かりやすさ」のことで、例えば、ボタンの押しやすさや、横スクロールしないとかのことです。(突き詰めるともっとたくさんありますが…)

これに関しても、突き詰めるとかなり奥が深いので、まずは「こうすればより良くなる」というものより「これはアクセシビリティやユーザービリティの観点で絶対にNG」というものを学んでいくのが良いかと思います。

スポンサードサーチ

まとめ

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

  • デザインをHTML/CSS/jQueryでブラウザ上に再現できる
  • Photoshop、Illustrator、XDを使って画像の書き出し、要素の大きさや余白など必要なデータが取り出せる
  • サーバー、ドメイン、FTPクライアントの基本的な知識と経験がある
  • MAMPを使ってローカル環境の構築ができる
  • Bootstrapを使ったサイト制作の経験
  • レスポンシブ対応
  • マルチブラウザの対応
  • 文章構造を意識してHTMLタグを適切に使える
  • jQueryで基本的なアニメーションの実装ができる
  • 画像の圧縮

 

コーダーとしてこれができればなお良いスキル

  • jQueryを使わず、JavaScriptだけでアニメーションの実装ができる
  • Git/Githubが使える
  • Sassが使える
  • Gulpなどのタスクランナーが使える
  • CSS設計の知識を持ち、保守性の高いコーディングができる
  • WordPressの実装ができる
  • SEO内部対策の知識がある
  • アクセシビリティやユーザビリティを考慮した実装ができる

こんな感じになってます。

コーダーやエンジニアを目指してる方の参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

慶應の通信課程に通う大学生。現在はフリーランスとしてコーディングなどの仕事を受けながら、受託開発してる会社でインターンしてます。