もう一歩上へ！コーダーとしてレベルアップするために習得したい技術

増田

6年 ago

こんにちは。ジーニアスウェブの増田です。
年の瀬も押し迫って来ているこの頃ですが、この時期は仕事もプライベートも、様々なことを「整理」し信念を迎える準備をするような印象があります。
年末に向けて、少しづつ慌ただしくなってきたという方もいらっしゃるのではないでしょうか。

そんな「整理」の時期に、私が改めて疑問に思った「良いコーダーとはなんなのか」を、今回の記事としてお届けしたいと思います。
内容として、初心者の方向けとなっておりますのでご了承ください。

目次／このページでわかること

コーダーとは

まず最初に、そもそもコーダーとはどういった存在かを振り返りたいと思います。
コーダーとは、Webデザイナーがデザインしたサイト、もしくはアプリケーションなどを、ブラウザ上で閲覧・動作させることができるよう、作り上げる職種のことです。
基本的にはHTMLとCSS、Javascriptを使用してサイトを意図した形に仕上げる職種です。
しかし、それ＋αで他の技術（CMS、PHPなど）も習得する必要があり、最新の技術などの情報を仕入れることも必要になりそうです。

必要な技術

上記を含めた上で、必要な技術をまとめていこうと思います。
基本的なことも書いてしまいますが、ご了承いただけますと幸いです。

HTML

これはおなじみかと思います。
あまり説明も必要ないかと存じますが、下記のようなコードのものです。
これだけだとサイトとして見た目が装飾されないので、装飾はCSSを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
  <title>ページタイトル</title>
</head>
<body>
コンテンツ
</body>
</html>

CSS

これも基本の技術ですよね。
CSSは、HTMLで作った骨組みの肉付け（装飾）していくような役割を持っています。
他にもリセットCSSといって、ブラウザ(chrome等)が自動的に付与してしまうcssを無効化してくれるものもあるので、サイトを作るときは、自分で作ったCSSとあわせて読み込むのがおすすめです。
下記にはclassとid指定の例を掲載しております。

@charset "UTF-8";
/*class名に指定*/
.hogehoge {
}

/*id名に指定*/
#hogehoge {
}

↓　リセットCSSはこちら
https://necolas.github.io/normalize.css/

JavaScript

JavaScript（ジャバスクリプト）とは、プログラミング言語のひとつです。Javaと名前が似ていますが、別のものになりますので間違えないように注意してください。
JavaScript（以降JSと略）では主にサイトの動きをつけていくものになります。
ボタンをクリックした時の動作を自由に変更できたり、ドロワー（ハンバーガー）メニューやプルダウンといった動きが実装できるようになります。
JSファイルは下記のように記述します。
例で書かれている.hoverは、マウスが上に来た時の動作を指しており、今回の例では
class名がhogeのボタンにカーソルを当てた時、ボタンの透明度とフォントサイズを変更できるものです。

@charset "UTF-8";
$(function(){
	$('.hoge').hover(function(){
		$(this).stop().animate({opacity:'0.5', fontSize: '22px'}, 300);
	}, function() {
		$(this).stop().animate({opacity:'1', fontSize: '18px'}, 300);
	});
});

他に必要な技術

前項で紹介したのは、あくまで基本的な作業に必要になる技術です。
HTMLだけでのコーディングというのは現在はもうあまりいないのではないでしょうか。
現時点で必要な技術や、覚えておきたい技術を書き出しておこうと思います。

CMS

CMSも、現在ではほとんど必須の技術と言ってもいいでしょう。
CMSとは、コンテンツ管理システム（Content Management System）の略称です。Webページの記述言語であるHTMLやCSSを知らなくても、ホームページを構築して運用管理できるものになります。
現在、CMSと一言でいっても、本当にたくさんのCMSが転がっています。
いくつか例を挙げておきます。もし知らない、使ったことがないものがあればぜひ使用してみてください。

WordPress
Movable Type（MTと略称されることも）
a-blog cms
PowerCMS
Drupal

PHP

PHPはサーバーサイドでコードを実行するプログラミング言語です。
PHPを使うとMySqlやPostgerSQLなどさまざまなデータベースと連携したWebサイトを簡単に作成することができます。
先程紹介したCMSの多くも、PHPを使用することで、サイトやCMS上で登録された情報をデータベースに記録することができます。
例えばWordPressでは、サイトをPHPファイルで作成します。
サイト上で登録された顧客の情報や、フォーム空のお問い合わせ内容等もデータベース上に保存することができます。

SEO対策

上記の技術を駆使して作成したサイトを、WEB上に公開したときに必要になってくる対策があります。
SEOとは、Search Engine Optimizationの略で、検索エンジン最適化を意味します。
検索結果で制作したWebサイトがより多くブラウザ上で露出されるために行う一連の取り組みのことをSEO対策と言います。

難しい言い回しになってしまいましたが、普段のインターネットでの検索を思い出して見てください。
ブラウザの検索ボックスで知りたいキーワードを入力すると、該当する検索結果が表示されると思います。
検索結果はだいたい上から3つ目くらいまでのサイトを見に行くことが多いと思います。
もしサイトを公開しても、検索結果で上の方でなければ、サイトのアクセス数が少なくなり、顧客獲得の機会も減ってしまうため、SEO対策について知っておくと、より良いサイトを作ることができると思います。
コーディングするときに記述する下記の内容も、SEOに関わっています。キーワードは、検索ボックスで入力されたときに表示されるように設定しておくものです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
  <title>ページタイトル</title>
<meta name="description" content="サイトの説明が入ります。検索結果でページ名のしたに出てくる説明文です。" />
<meta name="keywords" content="キーワード１,キーワード２,キーワード３" />
</head>
<body>
コンテンツ
</body>
</html>

この他にも、サイトを訪れた人の傾向を分析できるGoogle Analytics等があります。
これらはサイトで広告を運用する際にも使用します。

まとめ

今回は、技術的な話ではないので、どちらかというと初心者の方向けの記事になっています。
私自身、コーダーとしてどんな技術があったほうが良いのかを改めて整理する意味も込めて、今回の記事をお届けしました。
スキル的な部分は上記の通りなのですが、前提としてWEBデザインと差がでないようにコーディングしていかなくてはいけないので、観察力であったり、デザインの理解度も重要な要素になって来ると思います。
記事内の技術＋いろんなデザインを見る
ことが、ワンランク上のコーダーになる方法ではないかと思います。
雑多な記事担ってしまいましたが、今回はこれで失礼いたします。