かんたんに言うと、コーディングとは、コンピューターにしてほしいことを、決められた書き方で記す作業です。
この指示を「コード」と呼びます。Webページに文字や画像を表示したり、ボタンを動かしたりするときにも、コーディングが行われています。
この記事では、コーディングの意味や作業内容、プログラミングとの違いを解説します。HTMLを使った簡単な例も見ていきましょう。
関連するIT用語・ビジネス用語をまとめて確認したい方は、IT用語・ビジネス用語一覧もあわせてご覧ください。
コーディングとは、コードを書く作業のこと
コーディングとは、コンピューターへの指示を、決められた書き方でコードにする作業です。英語では「coding」と書きます。
コードとは、コンピューターに処理の内容を伝える文字や記号です。人が読んだり直したりできる形で書かれたコードを「ソースコード」と呼びます。
たとえば、画面に文字を表示する、数字を計算する、ボタンを押したら別のページを開くといった指示を書きます。
コーディングを身近な例で考える
コーディングは、組み立て説明書を見ながら、部品を一つずつ組み立てる作業に似ています。
説明書の順番や決まりを守らなければ、思ったとおりの形にならないことがあります。コーディングも同じように、決められた書き方に沿ってコードを組み立てます。
ITの仕事では、設計書や完成イメージをもとにコードを書きます。設計書とは、作る機能や画面の動きをまとめた資料です。
コーディングとプログラミングの違い
コーディングとプログラミングは、同じ意味で使われることもあります。ただし、一般的には作業の範囲が異なります。
コーディングは、コードを書く作業を指します。プログラミングは、プログラムを作る作業全体を指す言葉です。
プログラムとは、コンピューターに決められた処理をさせる仕組みです。
| 言葉 | おもな意味 | 作業の例 |
|---|---|---|
| コーディング | コンピューターへの指示をコードで書くこと | 設計書をもとに画面や処理を作る |
| プログラミング | プログラムを作る作業全体 | 内容を考え、設計し、コードを書いて動きを確かめる |
つまり、コーディングはプログラミングの中に含まれる作業の一つです。
ただし、会社や仕事の場面によっては、コードを書く作業をプログラミングと呼ぶこともあります。二つの言葉が、いつでも明確に分けられているわけではありません。
Web制作におけるコーディングとは
Web制作におけるコーディングとは、デザインや文章を、ブラウザーで表示できるWebページにする作業です。
ブラウザーとは、Webサイトを見るためのソフトです。Microsoft EdgeやGoogle Chromeなどがあります。
Webデザイナーが作った完成イメージを見ながら、文字、画像、色、ボタンなどをコードで配置します。
Webサイトのコーディングでは、主にHTMLとCSSが使われます。必要に応じてJavaScriptも使います。
- HTML：見出し、文章、画像など、Webページの内容と組み立てを決める
- CSS：文字の色、大きさ、余白、並び方など、見た目を整える
- JavaScript：ボタンやメニューなどに動きを付ける
HTMLとCSSは、Webページを作るための書き方です。JavaScriptは、Webページに動きを付けるときなどに使われるプログラミング言語です。
コーディングでは何をするのか
コーディングの内容は、作るものによって変わります。Webページを作る場合は、次のような作業を行います。
- 文章や見出しを配置する
- 画像やリンクを表示する
- 文字の色や大きさを整える
- パソコンやスマートフォンに合う表示にする
- ボタンやメニューに動きを付ける
- 正しく表示されるか確かめる
- 見つかった間違いを直す
コードを書くだけで作業が終わるわけではありません。意図したとおりに表示され、正しく動くかを確かめることも大切です。
コーディングの簡単な例
次のHTMLは、Webページに見出しと文章を表示する簡単な例です。
<h1>はじめてのWebページ</h1>
<p>コーディングを勉強しています。</p>「h1」で囲んだ部分は、大きな見出しになります。「p」で囲んだ部分は、一つの文章として表示されます。
「h1」や「p」のように、表示する内容の役割を示す記号を「タグ」と呼びます。
このように、決められたタグや文字を組み合わせて、コンピューターに表示内容を伝えます。これがWebページにおけるコーディングの基本です。
コーディングが使われる場面
コーディングは、Webサイトだけでなく、さまざまなものを作る場面で使われます。
- Webサイトやネットショップの制作
- スマートフォンアプリの開発
- 会社や役所などで仕事に使うシステムの開発
- ゲームの開発
- 決まった作業を自動で行う仕組みの作成
使う言語や書き方は、作るものによって異なります。しかし、決められたルールでコードを書き、コンピューターに指示を出す点は共通しています。
コーディングで使われる主な言語
コーディングに使う言語は、作るものや目的によって変わります。代表的なものは次のとおりです。
| 名前 | おもな使い道 |
|---|---|
| HTML | Webページの見出しや文章、画像などを配置する |
| CSS | Webページの色や大きさ、並び方を整える |
| JavaScript | Webページに動きや変化を付ける |
| Java | 会社のシステムやスマートフォンアプリなどを作る |
| Python | データの処理や作業の自動化などに使う |
JavaとJavaScriptは名前が似ていますが、別の言語です。JavaScriptを短くしてJavaと呼ぶわけではありません。
コーディングとWebデザインの違い
Webデザインは、Webページの見た目や使いやすさを考える作業です。色、文字の大きさ、画像の位置、ページ全体の並び方などを決めます。
コーディングは、そのデザインをブラウザーに表示できる形にする作業です。
| 作業 | 役割 |
|---|---|
| Webデザイン | ページの完成イメージを考える |
| コーディング | 完成イメージをコードでWebページにする |
Webデザインが完成予想図だとすれば、コーディングは、その完成予想図をもとに実際のページを作る作業です。
コーディングをする人をコーダーと呼ぶ
コーディングをおもな仕事にする人は「コーダー」または「Webコーダー」と呼ばれます。
Webコーダーは、デザインをもとにHTMLやCSSを書き、Webページとして表示できる形にします。会社によっては、Webデザイナーやエンジニアがコーディングも担当します。
エンジニアとは、コンピューターを使ったシステムやサービスを設計したり、作ったりする人です。
コーディングについて初心者が間違えやすい点
コーディングはWeb制作だけの言葉ではない
コーディングは、Webページを作る場面でよく使われる言葉です。しかし、本来はソースコードを書く作業全体を指します。
システムやアプリ、ゲームを作るためにコードを書くこともコーディングです。
HTMLとCSSだけがコーディングではない
HTMLとCSSを使ったWeb制作は、コーディングの代表的な例です。しかし、JavaやPythonなどを使ってコードを書く作業もコーディングに含まれます。
作るものによって、使われる言語や書き方が変わります。
コードを書くだけで完成とは限らない
コードを書いた後は、正しく表示されるか、予定どおりに動くかを確かめます。間違いがあれば、原因を調べて直します。
自分だけでなく、ほかの人にも読みやすいコードを書くことが大切です。読みやすいコードであれば、後から変更するときにも内容を確認しやすくなります。
コーディングについてよくある質問
コーディングとは簡単に言うと何ですか？
コンピューターへの指示を、決められた書き方で記す作業です。Webページでは、文字や画像を表示し、見た目や動きを整えるために行います。
コーディングとプログラミングは同じですか？
同じ意味で使われることもありますが、一般的には範囲が異なります。コーディングはコードを書く作業、プログラミングは設計や動作確認などを含む作業全体です。
コーディングでは何の言語を使いますか？
Web制作では、HTML、CSS、JavaScriptなどを使います。システムやアプリの開発では、Java、Python、C#なども使われます。
初心者でもコーディングできますか？
初心者でも始められます。まずは、Webページに文字や見出しを表示する簡単なHTMLから始めると、コードと画面表示の関係を理解しやすくなります。
コーディングとは何かをまとめると
コーディングとは、コンピューターへの指示を、決められた書き方でコードにする作業です。Web制作では、HTMLやCSSなどを使い、デザインをWebページとして表示できる形にします。
プログラミングは、内容を考えるところから、設計、コーディング、動作確認、修正までを含む広い作業です。コーディングは、その中で実際にコードを書く部分に当たります。
まずは「コーディングは、コンピューターへの指示を書く作業」と覚えておくと、意味をつかみやすいでしょう。