初心者でも5分でコーディングが分かる！プログラミングとの違いとは

2021.03.01

コーディング

デジタルハリウッドSTUDIO横浜のWebデザインのカリキュラムは、大きくグラフィックパートとコーディングパートに分かれています。
グラフィックはイメージできると思いますが、コーディングとはどんなことをするのか、プログラミングとの違いは何なのかがわからない人が多いでしょう。

コーディングとは文字通り「コンピューター言語でコードを書くこと」です。
コンピューターに指示や命令を出す場合、人の言葉では理解してくれません。
つまり、HTMLやCSS、PHPやJavaScriptコンピュータにわかる言葉で指示をや命令をすることをコーディングと呼ぶのです。

この意味では「プログラミング」も「コーディング」の一種となるのですが、実際はHTMLやCSSを書くコーディングとPHPやJavaScriptなどを書くプログラミングでは別物であると認識されています。

そこでこの記事では、コーディングとは何のことなのか、プログラミングとの違いを交えながら解説していきます。
記事の後半では、コーディングをするなら何から始めれば良いのかもご紹介しているので、コーディングを学ぶときの参考にしてください。

1.コーディングとは

コーディングはコンピューターに指示や命令を出す際に、「コンピューターが理解できる言語でコードを書くこと」です。
コンピューターは私たち人間の言葉はわからないので、コンピューター言語で指示してあげなければなりません。

その指示をする言葉がHTMLのようなマークアップ言語や、PHP、JavaScriptなどのプログラミング言語です。

※マークアップは目印をつけて文章を構造化することで、プログラミングはプログラミング言語を使ってプログラムを作ることを言います。

マークアップでもプログラミングでもコードを書くことを総称して、コーディングと呼んでいるのです。
しかし、コーディングとプログラミングは厳密には違うものと言えます。

その違いをざっくりすると、複雑な計算が絡むかどうかです。
複雑な計算があるのは「プログラミング」で、計算がなくて指示を出すだけのものが「コーディング」と呼ばれています。

次の章からは、コーディングとプログラミングの違いについて詳しく解説していきます。

2.コーディングとプログラミングの違い

一般によく使われるコーディングとは、マークアップ言語と呼ばれるHTMLと、CSSを使ってコードを書くことを意味します。
HTMLやCSSは定められた内容を伝達、表示するものですが、プログラミングでは複雑な計算や処理が行われます。
複雑な計算とは「もし○○だった場合××にする」のように、コンピューター側で処理を行うことです。

HTMLやCSSでマークアップされたものは、そのページを見た全ての人に同じ内容を表示させます。
そこにPHPやJavaScriptを使ってプログラミングされたものが加わると、同じページでも見る人によって異なるものを表示させることが可能です。
例えば訪問者のカウンターなどは、同じページでも表示される数字が変わります。
また、ある商品を購入した人がいた場合、在庫を自動で減らして表示されることも可能です。

このように、コンピューターが理解できるように「HTMLとCSSでマークアップする」ことがコーディング、PHPなどのプログラミング言語を使って「プログラムを作ること」をプログラミングと分けることが出来ます。

3.コーディングの具体例

ここからはHTMLコーディングを例にして、コーディングがどういうものなのかご紹介していきます。

HTMLコーディングは「HTML」と「CSS」を使って、文章をタグで囲んだり色を指定したりしていきます。
そうすることで文章を構造化し、装飾したものをブラウザに表示させることが可能です。

ここではWebページを作るまでの過程をご紹介していきます。

3-1.HTMLを書く

まずはWebページのデザインの完成図(デザインカンプ)を元に、HTMLをコーディングしていきます。

HTMLを書くときはHTMLのファイルを作り、そこにHTMLを書きます。
その際、HTMLエディタ(コーディング専用のソフト)を使って書くことがほとんどです。

※テキストエディタについて詳しく知りたい人はプロが見て優秀なHTMLエディタ6選！現在使っているプロの感想付きをタップしてください。

プロが見て優秀なHTMLエディタ6選！現在使っているプロの感想付き

HTMLは「タグ」と呼ばれる目印を使って文章を囲うことでコンピューターにわかる意味付けをしていきます。
タグで囲うことで「この文章は見出し」「ここにリンクを貼っている」といった意味をコンピューターに伝えられるのです。
例えばで文章を囲うことで、コンピューターは「ここの部分がブラウザで表示させる文章が書いてある」と理解出来ます。

しかし、HTMLだけでは文章の「構造」しか作ることが出来ません。
見出しをわかりやすくしたり、リンクをボタンにしたりする「装飾」は、次でご紹介するCSSの役割です。

※HTMLについて詳しく知りたい人はHTMLとは？HTMLの意味や絶対に知っておくべき基礎知識を大公開をタップしてください。/span>

HTMLとは？HTMLの意味や絶対に知っておくべき基礎知識を大公開

3-2.CSSを書く

HTMLのコーディングが終わったら、CSSをコーディングしていきます。
CSSはHTMLとは別にcssファイルを作成して、HTMLエディタを使ってコーディングをしていくのが一般的です。

HTMLが「構造」を作るのに対して、CSSは「装飾」をしていく言語です。
CSSは下記のようなコードを記述することで、HTMLで書いた文章に対して装飾が行えます。

HTMLとCSSを別ファイルにすることで、共通する装飾を同じ記載で処理をしたり、後で編集や修正を行いやすくなります。
現在のHTMLとCSSは明確に役割分担がされていて、それにより多様なデザインが出来るようになっています。

3-3.ブラウザで表示する

コーディングが終わったら、ブラウザ上でどのように表示されるのか最終チェックをします。
ブラウザに表示するときは、Google ChromeやsafariといったブラウザにHTMLのファイルをクリックしたまま移動させます。(ドラッグ&ドロップ)

※テキストエディタによっては特定のキー(ショートカットキー)を押すだけでブラウザ上に表示できます。

この手順を踏むことでHTMLとCSSでコーディングしたWebページがどのように表示されるのかブラウザ上で確認できるのです。
どの端末でも、どのブラウザでもデザインカンプで作ったデザイン通りに表示されるようにコーディングすることが大切です。

4.コーディングをしたいならHTMLから学ぶ

コーディングを学ぶなら、HTMLから学ぶことをおすすめします。
それはHTMLがコーディングをする上でもっともわかりやすい言語だからです。

コーディングとプログラミングの違いでもお話した通り、厳密にいうとコーディングとプログラミングは別物ですが、広い意味で考えると同じ「コーディング」です。
プログラミングはHTMLよりも複雑なコーディングをする必要があるので、これから初めてコーディングをする人にとっては難易度が高いと言えます。

その点、HTMLコーディングは取り組みやすく「コーディングが出来るようになっている」達成感を得やすいです。
まずはHTMLコーディングから学んで、より出来ることを増やしたいとなればプログラミング言語を使ったコーディングを勉強すると良いでしょう。

5.効率的にコーディングを学ぶ3つの方法

コーディングはここでご紹介する3つの方法で勉強すると、効率的に学ぶことが出来ます。
特にスクールに通うのは最も効率的です。

スクールではコーディングを体系的に順序よく学ぶことが出来るので、初心者ほどスクールに通うべきだと言えます。
まずはやってみたいとか、あまりお金をかけたくない人は学習サービスを利用したり、独学でコーディングを学ぶことも出来ます。

5-1.スクールに通う

コーディングを学ぶことが出来るのは、Webデザインスクールやプログラミングスクールです。

スクールではあらかじめ決められているカリキュラム通りに勉強を進めれば、コーディングのスキルを順序よく身につけられます。
それだけではなくスクールでは、専門のトレーナーにわからない部分を質問することができます。
実際に、デジタルハリウッドSTUDIO横浜では現場で活躍するWebデザイナーがスクールにいるので、わからないことはすぐに聞けます。

自分一人ではわからないことを調べるなど解決するまでに時間がかかってしまうところを、スクールであればすぐに解決できるのです。