前回の記事で「WEB業界とは」「WEBデザイナーとは」みたいな話をしました。
その中で「WEBはデザイナー以外にも職業があんのか！」となった方向けに記事を書きたい思います！
この記事を読めばコーダーの役割、仕事内容などが大まかに理解できると思いますので、
ぜひ最後まで読んでみてください。
コーダーとは
そもそもコーディングとはなんぞやから入りたいと思います
コーディングとは をChatGPT先生に問いかけました
HTMLやCSSといった言語を使ってデザインを実際のウェブページに反映させる行為が「コーディング」と呼ばれます。
Chat GPT
簡単に言えば、「コーディング」はデザイナーが作成したデザインを、ブラウザが理解できる言語に変換する作業を指し、その成果物が実際のWEBページとして表示されるようになります。
前回の記事でも少し触れていますが、コーディングがなければデザインがあってもだめということです。
なぜダメなのか、詳しくはこちらから前回の記事をご覧ください！
コーディングというWEBページとして表示させるように構築をする人のことを「コーダー」と呼びます。
コーダーの仕事内容
デザイナー編ではデザイナーがする仕事内容にHTML/CSS部分も含まれており、かなり範囲が広く感じたと思いますが、コーダーはどうなのでしょう？
- HTMLコーディング
- CSSスタイリング
- JavaScriptプログラミング
- フロントエンドフレームワークの利用
- ウェブアクセシビリティの確保
- バージョン管理
- テスト
といったところでしょうか？
端的に書いてるのでまだ作業的には少なそう(?)な感じがしますね！
ただ掘り下げるとかなりの作業量になります、、。（小声）
そもそもコーダーにも種類がある
前回プログラミングとコーディングが違うと話したように、コーダーと一言で言っても種類があります。その種類についてご紹介します
マークアップエンジニア
HTMLやCSSを用いて、WEBサイトの構築をメインで行う人のことを、「マークアップエンジニア」と呼びます。
HTMLやCSSはプログラミング言語ではなく、マークアップ言語という全くの別物なので
プログラマーとは呼ばれません。
基本的には静的サイトの構築が主でデザイン通り組むことが求められます。
フロントエンドエンジニア
急にエンジニアチックな強そうな名前ですが、雰囲気の通り少しレベルの高い人になります。
先ほどのマークアップの時とは異なり、静的サイトから動的サイトまで幅広く構築を行います。
静的サイトとは
「誰が」「いつ」「どこで」見ても同じ情報が表示されるホームページのことです。
たとえば、東京に住む20歳のAさんと、大阪に住む60歳のBさんが同じサイトにアクセスしても、同じ情報が表示されます。動的サイトとは、
Xserver 参照
アクセスした「ユーザー」「時間」「場所」といった特定の条件に応じて、異なる情報を自動で表示するホームページのことです。
先ほどの例で言えば、AさんとBさんがアクセスしたとき、それぞれ異なる情報が表示されます。
言語はHTML/CSS/JavaScript/PHPなどがあります。
先ほど紹介した仕事内容はマークアップ・フロントエンドにかかわらずリストアップしてましたが、
実際には役職（？）によって作業内容が違います
具体的には上2つがマークアップ側、上から下まではフロントエンド側といったイメージですかね。
現状の割合
マークアップとフロントエンドっていうのがあるのはわかったと、
市場的に割合が大きいのはどちらで、どちらの方が需要があるかという話をすると、、、
体感的にマークアップエンジニアの需要はそこまでないです。
というのもHTML/CSSだけできても得がないからです。
今の時代ノーコードといってHTML/CSSを書かなくてもサイト制作ができてしまうサービスやツールが出ていきていますし、AIにコードを聞けばある程度実装してくれる世の中で、HTML/CSSだけしかできないのは正直かなりしんどいです。。
一方フロントエンドエンジニアはCMSを使用したコーディングやサイトの動きを実装したりなど
かなり専門的な知識、技術を要するためかなり需要はあります。
ですがその分敷居だ高いですし、かなり勉強が必要になってきます。
上記を踏まえた上で仕事内容を深掘りしていきます
HTML/CSS/JavaScriptを使用したコーディング
こちらは前述したないようになりますが、HTML/CSSはマークアップ、JavaScriptはサイトに動きをつけたりなどの調整が可能です。
HTMLで組んだclassやidなどを用いて、JavaScriptで上書きや変更をすることも可能です。
JavaScriptを用いてコーディングする際にはjQueryというライブラリを使用して記述するとより楽に」記述することが可能です。
（近年ではjQueryより良いものがあるそうですが…）
フロントエンドフレームワークの利用
コーディングにおいて大事なことの1つとして、「いかに楽に記述し、いかに汎用性が高いか」が挙げられると思います。
そこで必要となってくるのが「フレームワーク」なるものです！
詳しくは省きますが、便利なものと思ってもらえたら問題ないです。
その便利なものにも色々種類があり、ReactやVueなどが最近流行っていますが、そういうものを用いて効率的で拡張可能なフロントエンドを構築することができます。
もちろん用途や案件によってフレームワークを変えることになるので、幅広い知識が必要になります。
ウェブアクセシビリティの確保
アクセシビリティと聞いてもはてなが浮かぶと思いますが、
簡単に説明するとどのユーザーでも問題なく情報が得られるように構築しようねということです。
「目が見えない方が使用する音声読み上げソフトで正しい情報が読み上げられるように」や、
高齢者にとって見やすいフォントサイズを設定したりなど、全ユーザーに考慮した作りにしていくのもコーダーの役割です。
バージョン管理・テスト
コーダーは常にソースを変更して行くため、ゲームでいう途中セーブのようなものを取り続けないといけません。
それは何かトラブルがあった際、セーブしたところからやり直せるようにするためでもあります。
膨大な記述量を保存するサービスなどもあるため、興味がある方は調べてみてもいいかも知れません
また、バージョン管理をしながらテスト作業はエンジニアには欠かせない作業になります。
WEBアプリやシステムの構築時、機能テストを行なっていないシステムを世にリリースするとどうなるか…考えたくもないですね…笑
そうならないために、テストとバージョン管理は必須作業になります。
レスポンシブデザイン
これは上記に記載していなかったのですが、
制作会社によってはPCデザインのみ渡され、スマホのデザインはコーダーに任せた！なんてこともしばしば。
デザイナー編でもコーダーの知識が必要だと謳ったように、
コーダーもデザインの知識を持っていた方が作業としてやりやすいと思います。
またコーダーはサイト制作の最終関門でもあります。
それすなわち100点のデザインを120点にでも150点にでも上げることができるのはコーダーの特権と言えるでしょう。
これがデザインを理解していないコーダーで、スマホのデザインを任せられた場合、
100点のデザインを下げてしまいかねません。
そうならないためにも、コーダーはデザインを、デザイナーはコーディングの知識をつけておくと良いでしょう。
まとめ
コーダーという職業の中にも、マークアップとフロントエンドのエンジニアがあり
市場的にはフロントエンドの方が需要があることがわかっていただけたかと思います。
もしこの記事が、web業界のことを知るきっかけや、就職活動の役に立てれば幸いです！
最後に
私は現在制作会社に勤めながら、個人でもサイト制作を行なっております。
制作会社だからできること、個人だからできることを活かし様々なお客様に満足していただけるWEBサイト制作を今後も行なっていきたいと考えております。
サイト制作でお困りであればお気軽にご相談ください。
