スキル

【よくわかる!】コーディングの基礎と失敗しない学習方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

オンライン化が加速する昨今で「Webサイトを作りたい!」と思ったとき、必須になるのはコーディングの知識です。「専門用語がたくさん出てきてわかりにくい…」という印象のWeb製作ですが、コーディングを簡単に習得できる方法があります。この記事を読めば、「HTML」や「CSS」といった用語がわからないプログラミング初心者でも、コーディングの基礎と習得に近道な勉強方法がわかり、ホームページを作るための一歩を踏み出すことができます。

よくわかる【プログラミング】と【コーディング】の違い

Webサイトを作りたいと思ったとき最初に触れるのが「プログラミング」や「コーディング」という用語です。プログラミングは、Webサイトの基礎の構築する工程そのものを設計することを指します。コーディングは、プログラムに含まれる手順の一つです。

プログラミングを習得する過程では、普段聞きなれない用語がたくさん出てくるため、難しい印象を持たれる人も多いですが、用語の持っている意味を知れば内容を理解することは簡単です。ちなみに「Web」とは、「World Wide Web」のことで、インターネット上で文書や画像などを公開・閲覧するシステムのことです。

「ホームページ」は、会社概要や商品の情報などを掲載しているネット上の「Webページ」のことで、検索したとき最初に閲覧されるという意図を持って作られるページのことを言い、「Webサイト」は、複数のWebページをまとめたものを指しています。

【プログラミング】とはコンピューターに指示を出すこと

Webページを作る工程を設計(プログラム)することを「コンピュータープログラミング」といいます。プログラムと聞くと、発表会や入学式などでやることを順番に書き出したものが想像できますが、本質はそれと同じです。

コンピューターの動きをコンピーターが理解できる言葉で順番に指示することをプログラミングといいます。それは、会社で外国人の部下に仕事の指示を順番に書き出すようなものです。

外国人の部下は外国語しか通じないので、指示を出したい上司は外国語を覚える必要があります。コンピューターが理解できる言葉を「プログラミング言語」といいます。

プログラミングの手順は、①プログラムの設計→②プログラミング言語を記述→③テスト実行→④デバッグ(不具合の修正)→完成です。

プログラミング言語を駆使してシステムを作ることを職業にしている「プログラマー」は幅広い分野で活躍していて、その中でも、「Web系プログラマー」は、Webページの見た目や操作性や機能性を考えて、ユーザーの満足度の高いWebサイト制作することが仕事です。

【コーディング】とは指示する内容を記述すること

コンピューターに指示する内容をプログラミング手順①で設計した後は、その指示を実行するために具体的な言語で記さなければコンピューターは動けません。

コンピューターの動作の元となる指示(アルゴリズム)が記された文章は「ソースコード」と呼ばれ、そのコードを記述する作業を「コーディング」といいます。プログラミング手順②にあたる「コーディング」ができれば、Webページに、文字や画像・音声などのデータを実装することができます。

コーディングを行う「コーダー」は、プログラミングが設計し、考え出したアルゴリズムをプログラム言語に置き換えてコード化し記述します。アルゴリズムを視覚化したフローチャートで図解してあり、それに沿ってコードを記述していきます。

プログラミング言語には、「HTML」や「CSS」、「JavaScript」などがあり、それらを駆使してWebページのデザインを構築します。

プログラミングとコーディングの資質が求められる「Webプログラマー」

Webサイトのプログラム全体を設計する「プログラミング」に対して、Webサイトを実際にインターネット上で閲覧し、動作できる状態にするためにコード記述する「コーディング」はでは作るものに違いがあることがわかりました。

従来は別の職種である「プログラマー」と「コーダー」ですが、企業によれば「コーダー」と「プログラマー」を合わせて「Webプログラマー」というくくりになっていることも多く、小さなサイトであれば全てのコンテンツ(サイトの中身)を1人でつくることもあり、仕事の範囲は広がってきています。

これだけは知っておきたい【コーディングの基礎】

コーディングに使う基本の言語は「HTML(エイチティーエムエル)」「CSS(シーエスエス)」「JavaScript(ジャバスクリプト)」の3つです。

文字を記述する【HTML】

「HTML」は、ハイパーテキストマークアップランゲージといって、テキスト(文字)を記述するためのマークアップ言語です。「ハイパーテキスト」は複数の文章を結び付ける仕組みのことで、文章に見出しや段落などの意味を持たせる目的で文字をタグと呼ばれる印<></>で囲んでマークします。

【タグの例】
<h1>HTMLを知ろう!</h1>…「HTMLを知ろう!」という文字に<h1>=見出しという意味付けがされた。
<strong>終了タグは必ず「/」が入ります</strong>…「終了タグは必ず「/」が入ります」という文字に<strong>=太字で強調するという意味付けがされた。

文章をマークアップすることで、Webページの情報収集を行う「Googleのクローラー」というロボットに、コンテンツを整理して伝えることができるのでSEO対策にも繋がります。

スタイルを指定する【CSS】

「CSS」は、カスケーディング・スタイル・シートといって、HTMLの要素(テキスト)に装飾を施すことができます。Webページのレイアウトを整えたり、サイズの調整・色の表示スタイルやアニメーションを加えることが可能です。

CSSは、基本後に書いたものが優先されます。セレクタ(どこの)に対して、プロパティ(何を)と値(どうするのか)を記述することで、スタイルを指定できます。

【CSSの記述例】
h1{color: #ff0000;}…見出しの文字を赤色にする。
img{border: 3px dotted #00ff00;}…画像の枠線を緑で付ける。

「CSS」は、HTMLとは別のファイルで記述して読み込ませる方法がありますが、同じ階層のファイルでないと反映されないので注意が必要です。文書とスタイルを別々に管理できることは、SEOやアクセシビリティの向上やメディアごとの表示ができることからもメリットがあります。ファイルの後ろに「.css」を付ければ、コンピューターがCSSファイルとして認識します。

【JavaScript】(jQuery)

「JavaScript(ジャバスクリプト)」は、Webページを構成するために必要なすべてのオブジェクトを操作できるプログラミング言語です。
ユーザーの動作に対するレスポンスを行うことができ、ユーザーが適切な形式メールアドレスをフォームに入力したかをチェックしたり、Webページを一部のみ読み込むことも可能です。

多様な動作が可能な「JavaScript」は、ゲームやモバイルアプリなど私たちの生活に浸透しています。Webページも例外ではなく、「JavaScript」の需要が広がっています。

【JavaScriptのコード記入例】
<script>alert(‘Hello!!’);</script>…ポップアップで「Hello」とアラートを表示します。

「JavaScript」の記述場所には、HTMLに書き込む直接定義と別のファイルで記述してからHTMLに読み込むという間接定義があります。
「jQuery(ジェイクエリー)」は、JavaScriptコードを簡単に記述できるよう設計されたライブラリのことです。

【Google HTML/CSS Style Guide】とは?

Googleが推奨している「HTML/CSS・スタイル・ガイド」は、コーディングを行う際に従うべきルールを集めたものです。Googleによると、HTMLおよびCSSのフォーマットとスタイルのルールを定義します。コラボレーション、コード品質の向上、サポートインフラストラクチャの有効化を目的としていますと書かれています。

スタイルガイドを導入するメリットは、大規模なWebサイトを複数の人で作るときに、コードが統一しやすいことや共通認識を持って制作できるところです。一方、デメリットはスタイルガイドの規約に縛られるところです。すべてを覚える必要はありませんが、HTML・CSSの習得が進む過程で確認すると良いでしょう。

参考:Google HTML/CSS Style Guide

英文ですが、Chromeの和訳機能で内容を確認できます。

やってみよう!コーディング5つの手順

「コーディングをするには、何から始めればいい?」という悩みを解決するために、実際にWebページを作るときのコーディングの流れを追って紹介します。コーディングは、Webサイトの企画・設計が終わったあとの制作工程での作業で、コーディングの手順は全部で5つです。

手順1:ファイルとフォルダを作る
手順2:デザインのレイアウトを確認する
手順3:HTMLを記述して構造化する
手順4:CSSで見た目を整える
(JavaScriptや画像などのデータをフォルダに格納する場合はここのタイミングです)
手順5:レスポンシブに対応する

完成するまでの基礎のステップをわかりやすく解説していきます。

1.HTMLのファイルとフォルダ作成

はじめに、HTMLやCSSなどのコーディングデータや画像をしまうためのフォルダを作ります。パソコン内のどこでも大丈夫ですので、フォルダ名を「coding」としてわかるようにしておきます。画像データは「images」フォルダを作りましょう。

次に、フォルダ「coding」の中にファイルを作ります。ファイルは、テキストエディタから新規制作してファイル名を入れておきます。HTMLは「index.html」、CSSは「style.css」,JavaScriptは「script.js」と名付けておきます。

テキストエディタとは、文字のみを作成・編集・保存できるソフトウェアで、macなら「テキストエディット」、Windowsなら「メモ帳」が使えますが、無料できるエディタもあるので準備しておきましょう。

無料で使えるテキストエディターは、「Sublime Text」や「Atom」がおすすめです。

2.デザインのレイアウトを確認する

Webページのデザインの完成図を確認します。Webページは、様々なパーツの組み合わせで成り立っています。あてもなく制作に取り掛かると構造を見失う場合があるので、初めのうちはデザインを紙に書きだしておくなどしてパーツごとに仕上げることをオススメします。

Webページのパーツには、ヘッダー(ページ最上部)・グローバルナビゲーション(メニュー)・アイキャッチ(最初に目につく部分)・コンテンツ(テキストや画像)・RSS(ニュースやブログ記事)・バナー(リンクが貼ってある画像)・サイドバナー(ページの側部のバナー)・フッター(ページの最下部)などがあります。

それぞれのパーツが持つ役割を知っておくことで、情報が整理され印象の良いWebページを作ることができるようになります。

3.HTMLを記述して構造化する

コーディングの言語を書き込むための道具である「エディタ」の開きましょう。

その他、書き込んだコードがどのように見えるかを確認するため「ブラウザ」が必要です。ブラウザは「Chrome」や「インターネットエクスプローラー」などがあります。

いよいよ、エディタでHTMLタグを書いていきます。基礎的なタグを紹介します。

<!DOCTYPE html>…「このファイルはHTMLです」という宣言
<html></html>…「ここからここまでがHTMLコードです」
<head></head>…基本的に画面に表示されない設定や情報
<title>○○</title>…ブラウザのタブに「○○」と表示されます。<head>タグの中に挟んで書きます。
<body></body>…この中に書くのはページに表示される内容です。見出し<h1></h1>や段落<p></p>を挟みます。
<img>…JPG・PNG・GIF形式の画像です。終了タグは使いません。

この他にもたくさんのタグが存在しますが、最初からすべてを覚える必要はありません。こんな感じのコードを書くということが想像できれば大丈夫です。

4.CSSで見た目を整える

HTMLの次にCSSで、デザインやスタイルを指定していきます。CSSの書き方は、「セレクタ{プロパティ:値}」と決まっているので簡単です。「どこの{何を:どのように変えるか}」を言語で書きます。
複数プロパティを指定する場合はセミコロン「;」で区切ります。CSSは、コードの間に半角スペースや改行、Tabを入れても指定した内容は変化しません。

body{color : gray}…bodyタグ内の文字の色をグレーにする。

5.レスポンシブ・ウェブ・デザインに対応する

「レスポンシブ・ウェブ・デザイン」とは、ユーザーのブラウザに応じてWebページを閲覧できるようにする手法です。パソコンだけでなくスマホ、アイパッドなどの端末で違和感のない閲覧ができるようにCSSに追加で書いていきます。

@media screen and (max-width: 768px) セレクタ { プロパティ:値 }…アイパッドに対応する
@media screen and (max-width: 375px) セレクタ { プロパティ:値 }…スマホに対応する

HTMLとCSS、JavaScriptをそれぞれのファイルでの記述が完了したら、CSSとJavaScriptをHTMLに適応させる指示を書くことを忘れてはなりません。

HTMLファイルの<head></head>タグ内に<link rel =stylesheethref=ファイル名.css>と書きましょう。HTMLとCSSのファイルが同じ階層にあって、手順1で作ったCSSファイルの拡張子が.cssになっていれば適応可能です。

失敗から学ぶNGな学習方法

独学で挫折した人が多いことから「難しい」と思われがちなコーディングですが、失敗した人に共通する学習方法を紹介します。

テストでは有効な丸暗記

学校のテストで有効な「丸暗記」ですが、だたコードを覚えているというだけでは、コーディングを習得するのは難しいです。

コーディングに使うプログラミング言語は、英語と似ています。暗記すれば単語の点数は稼げますが、応用で使うには意味を理解している必要があります。コーディングでは、ベースの形があるものの、Webサイトを組み立てるには応用の力が試されることの方が多いのです。

コピペすればWebページを作ることも可能ですが、言語が示す意味を理解してからにしましょう。

ひたすらノートに書く

これは筆者も経験がある勉強法ですが、ひたすら黒板を写してノートに書き込む姿はとても学習が進んでいる気になりますが、実際はそれほどでもありません。びっしり書き込んだノートを見て満足していませんか?

コーディングは、コードを書くことが目的ではなく、Webページに正しく反映されることが大事です。コードを間違えたまま覚えてしまわないように、同じ書くならテキストエディタに書込み、コードが正しく実装されていることを確認しながら進めましょう。

言語を全て覚えようとするのは無謀

プログラミング言語はHTMLとCSS、JavaScriptその他にもたくさんあります。その言語を全て覚えるのは、よっぽど記憶力に自信がある人だけに向いている学習法です。

言語と意味を頭に叩き込んでも、要素の種類によってタブ内で使えないタブもあったりするので確認しながら確実に身に着けていく方が効率が良いでしょう。繰り返しコードを書いているうちに、何度も頻繁に出てくる言語から覚えるようになります。

コーディング学習におすすめの無料サービス4つ

Webプログラマーが担う仕事の範囲が、プログラミングとコーディングを兼ねたものになりつつある昨今では、Webデザイナーも職業の範囲を超えた技術を求められるようになっています。さらに、2020年からはプログラミングが教育必修科目になるなど、コーディング技術の需要が高まっている中で、コーディングを無料で練習できるサービスが増えています。

【Progate】

プロゲートは、ゲーム感覚で基礎を学ぶことができる学習ツールです。解説とスライド演習が一緒になっているのでわかりやすい仕様になっています。学習の進み具合が視覚化されているなど初心者が楽しくプログラミングを学べる工夫がされています。

無料会員でHTMLやJavaScriptの基礎を学ぶ18レッスンを学習できます。コーディングを試しにやってみるには十分なコースになっていて、さらに学びたい人は月額980円の有料会員となり79レッスンを学べます。

法人向けに企業のプログラミング研修を支援していたり、運営会社Progateの信頼性も高いです。

参考:Progate

【ドットインストール】

ドットインストールは業界で名の知れたサービスで、1回3分の動画で気軽に学べる無料学習サービスです。

レッスン数が423という多さで、コーディングだけでなくアプリ開発まで幅広い分野を学ぶことができます。コースではなく、分野とレベルが細分化されているので、初心者も経験者も自分に合ったレベルからレッスンを受けることができます。

また、月額1,080円のプレミアム会員は、わからないところを現役エンジニアの先生に質問できます。

参考:ドットインストール

【Codeprep】

コードプレップは、100冊以上のブックと呼ばれる学習コンテンツがある実践型学習サービスで、穴埋め方式でコードを埋めていきます。ヒントとなる記述は少ないですので、初心者というよりある程度の知識がある人に向いています。

コーディングに必要な言語もたくさん用意されていて、レッスンできる分野が広いです。1日10分の成功体験を積むことでプログラミングの楽しさを知ってもらうというスタイルです。ディスカッションボードといって、ユーザー同士が質問したり、教えあうことができるボードが設置されています。

参考:Codeprep

【Schoo】

スクーは、大人の学びの場を提供している参加型生放送コミュニティーで、会員数は26万人です。無料会員登録をするだけで授業が受けられるというもので、プログラミング学習は動画を視聴するのみで、演習とかはありません。

Web制作といった一部分の学習だけでなくデザインやマーケティング、ビジネスまで様々な学びを得ることができます。Web制作の技術を持ってビジネスを立ち上げたいと考えている人におすすめのサービスです。

有料プランでは、月額980円で5000本以上の動画授業が見放題になります。

参考:Schoo

まとめ

一昔前までは独学で習得するしかなかったコーディングも、無料サイトやWeb情報のも多くなり学びやすい環境になっています。細かなコードの入力と専門用語の理解が必要なコーディングは、勉強するというよりも実践で慣れた方が習得できます。

この記事では、プログラミングの概要とコーディングの基礎を紹介しました。今後は、Web制作で何から始めるべきかを迷うことは無くなり、Webサイトを制作するために辿るべき道順を設計していただけます。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
などアクシグ代表の吉田が、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。




  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る