コーディングとはどういう意味か？

今回はWeb制作を始めようとする方向けにコーディングとはどういう意味か、またプログラミングとの違いやコーディングに必要なスキル、さらに注意点について解説していきます。

コーディングとはどういう意味か？

コーディングというのは、そのままですがコードを書くという意味です。
そしてコーディングを行う人をコーダー（またはWebコーダーやHTMLコーダー）と呼びます。

例えばWeb制作の場合、コーディングとはデザインを元にサイトを構築していく作業になります。
建築で言えば設計士＝デザイナー、大工＝コーダーというイメージです。

後ほど出てきますが、HTMLで骨組みを作り、CSSでデザインや色などを装飾していく形になります。
なので順番としては「HTMLを書いてからCSS」となります。

あとはサイトにアニメーションなどの動きをつける為に、JavaScriptやjQueryを書くこともあります。

コーディングとプログラミングの違いについて

コーディングとプログラミングはどちらもコードを書きますが、違いは以下になります。

【コーディング】
主な使用言語：HTML（マークアップ言語）CSS（スタイルシート言語）

【プログラミング】
主な使用言語：JavaScript／jQuery、PHP（プログラミング言語）

上記のようにプログラミング言語を使ってプログラムを作ることをプログラミングと言います。
一方コーディングの方はHTMLとCSSを使ってWebサイトをブラウザに表示させる作業となり、プログラムは作りません。
つまりプログラムを作るかどうかの違いとなります。

コーディングに必要なスキル

コーディングの仕事をする上で最低限必要なスキル、またあった方がいいスキルがあります。

最低限必要なスキル

最低限必要なスキルは以下になります。

そして上記コードを書くにはテキストエディタ（VS Code、Sublime Text、Atomなど）を使用します。
テキストエディタはどれを使っても構いませんが、周りではほぼVS Code一択かと思います。

これだけで出来る仕事もありますが、仕事の数としては非常に少ないです（非常に高いスキルがあれば仕事はあると思います）

HTMLに関してはプログラミング言語と違って多少間違っていたり推奨された書き方でなくても表示されますが、『Google HTML/CSS Style Guide』というGoogleがW3Cの仕様書をもとに公開しているガイドラインに則って書いたり、 SEOやアクセシビリティを意識した書き方をしようとすると難しくなります。

プログラミング言語の場合は間違っていればエラーが出て表示されなかったり動作しないので間違っているのが明白ですが、HTMLの場合は推奨された書き方でなくても見た目上は変わらない事もあるのが難しい所です。

またCSSもデザイン通りにするだけの場合と、様々なケースを想定したり見やすく書こうとすると難易度は上がりますし、スキルが低いと出来る事も当然少なくなります。

この最低限必要なHTMLとCSSは一般的に簡単と思われていますが、ベテランの方ほど難しいというほど奥が深いものです。

プログラミング言語

Web制作では以下のスキルもほぼ必須になります。

・JavaScript／jQuery
これはプログラミング言語で、jQueryはJavaScriptで実装できる物を簡単に書けるようにしたライブラリです。
ライブラリとは直訳すると図書館という意味ですが、よく使うコードだけをまとめて再利用しやすくしたものです。

JavaScriptには他にもライブラリがありますが、その中でも一番有名なライブラリがjQueryです。
JavaScriptとjQueryはコードの書き方は違いますが、jQueryはJavaScriptのプログラムの1つという意味で一緒に書いています。

このJavaScript／jQueryはサイト上にアニメーションなどの動きを付けたり、条件分岐（このボタンをクリックした時にこの画像を表示させる）などを実装することが可能です。

CSSでもアニメーションは実装できますが、JavaScript／jQueryの方が複雑なアニメーションが実装可能です。

またお問い合わせフォームを自作する場合や、この後解説するWordPressではPHPというプログラミング言語が使われています。
ただコーディングの仕事でPHPを1から書く事はまずないので、学習方法としては必要になった時に勉強する「遅延評価勉強法」という勉強法がおすすめです。

CMS（WordPressなど）

あとはコーディングしたサイトをCMSに組み込む作業も主にコーダーの仕事になります。

CMSとはContents Management System（コンテンツ・マネジメント・システム）の略で、一番有名なものは世界のCMSのシェア65.2%を占めるWordPressになります。
参考サイト：【2022年最新】WordPressのシェアは何%？CMSシェア一覧/過去の推移

制作会社によっては独自のCMSを扱うところや、ショッピングサイトではShopifyなどが有名です。

WordPressはコードを書く事もありますが、どちらかと言えばコードを組み込むという表現の方が近いと思います。
またWordPressにはテーマという物があり、テーマを使用した場合はノーコード（コードを書かない）で制作する事も出来ます。
なのでコーディングに必要なスキルというより、コーダーが持っておきたいスキルと言えます。

なぜならコーダーとして仕事をする場合、WordPressが出来なければコーディングまでの仕事しか受けられません。

しかしWordPressなどのCMSも自分で実装出来ればより高い単価でのお仕事が出来ますし、実際に案件の数は非常に多いです。

WordPressで出来る事

CMSを使わないサイトと比較して、WordPressで出来ることは主に以下になります。

これらをCMSを使わずにやろうとするとコーディングの知識が必要になりますが、WordPressであればコーディングの知識がなくても比較的簡単に編集することが出来ます。

その他コーディング案件で使うスキル(h3) その他コーディング案件で使用するスキルは以下になります。

案件によってはなくても大丈夫ですが、これらは実質使えないと困るスキルです。

コーディングをする時の注意点

コーディングの仕事をする上で注意したい点を3つ解説します。

デザイン通りに再現する

デザイン通りに再現するのは当たり前というよりそれがコーディングの仕事なのですが、初心者コーダーの場合デザインと大体合っていればOKという感じで提出する人がいます。

例えばデザインと20pxズレていたり、テキストの行間や字間を指定していなかったり。
しかしデザイナーからすればデザインは1px単位でこだわって作成した物だと捉え、1pxもズレないようにコーディングするのが理想です。

実際には数px程度であれば特に指摘されない事もありますが、1pxでもズレていたら指摘される事もあります。
なのでなるべく1pxもズレていない状態、ピクセルパーフェクトと呼ばれる状態にしましょう。

もちろん色やフォントの種類などもデザイン通りにします。
間違っても勝手にデザインを変更しないようにしましょう。

違和感を感じたらディレクターやデザイナーに確認する

先ほど書いたように、基本的にはデザイン通りに忠実に再現するのがコーダーの仕事です。
しかし、デザインにも間違いや誤字脱字があることもあります。

デザインはデザイナーとクライアントが綿密に打ち合わせをして決定した物なので、基本的にはデザインに対して異を唱えることはしませんが、明らかに変な箇所があれば確認をしましょう。
またアニメーションなどは細かい指示や参考サイトがないとどう実装していいか分からない箇所も良くあるので、そういった箇所はなるべく早く確認しましょう。

テストをする

納品前には必ずテストをしましょう。
ここのチェックをしっかりしないと何度も修正することになり、クライアントとのやり取りが増えるだけでなく信用もどんどん下がってしまいます。

主なテスト項目は以下になります。

各端末やブラウザで確認する為には、それぞれを表示できる端末を持つ必要があります。

例えばEdgeはWindowsでしか確認出来ず、SafariはMacでしか確認出来ません。
またAndroidを持っていない場合、Android Studioというソフトを使えばPCで仮想環境を構築する事が出来ます。
しかし仮想環境では問題なくても実機では問題ありということもあるので、やはり全ての実機を所持する事が理想です（全ての機種という意味ではありません）

※長年コーダーを苦しめてきたデザインが崩れやすいブラウザ、IE（Internet Explorer）ですが、2022年6月15日にサポートが終了する事が発表されてからは対応をやめた制作会社も多いようです。
その情報が発表される前から対応していない制作会社もあったと思いますが、IE対応にすると使えるコードが少なくなり対応に時間がかかる為、IE対応は別料金にする制作会社もいます。
なので特に指示がない限りコーダーはIE対応しなくて大丈夫だと思います。

以上になります。
今回の記事でコーディングとはどういうものか、どういう仕事なのかが少しでも分かって頂ければ幸いです。

ビー・コーディングでは、セマンティックコーディングや構造化データを使用したコーディング代行でSEOに強いサイトを制作いたします。
簡単お見積りシステムでおおよその金額をライブでご確認いただくことも可能です。
コーディング代行なら弊社にお任せください。