2000年代になり、インターネットはパソコンとともに急速に普及してきました。今日ではインターネットを使わない生活は考えられないでしょう。人によってはライフラインのひとつだと思っている方もいるかもしれません。インターネットの歴史はHTMLの歴史でもあります。HTMLはウェブページを構成する最も基本的な要素です。黎明期は単純なHTMLだけでしたが、何度も改定が繰り返され、関連する技術も多数生み出されています。
この記事では、HTMLコーディング案件を受けようと考えているフリーランスの方のために、案件を受ける前に知っておくべき技術を紹介していきます。どれも実際の案件で求められている技術です。昔ながらのHTMLだけではもはや仕事になりません。案件をスムーズにこなすためにも、しっかりと新しい技術を学んでおきましょう。
HTML
どんなもの？
HTML（Hyper Text Markup Language）は、ウェブページを記述するためのマークアップ言語です。以前はスタイル（テキスト色やフォントサイズなど）も一緒に記述されていましたが、今ではスタイルはHTMLに直接記述せず、後述するCSSに記述するようになりました。そのため、現在のHTMLはウェブページそのもの内容や構造を表すのみになることが多いです。しかし、スタイルを直接埋め込む必要がある場合にはCSSを使わない（使えない）こともあります。最新の規格としてHTML5が策定されています。
なにに使われる？
HTMLはそのほとんどがブラウザによって解釈されて表示されることになります。ブラウザというと、多くの方がウェブページを思い浮かべるでしょう。しかし、ブラウザはいたるところに存在しており、HTMLが使われる場面も増えてきています。たとえば、スマホアプリでもネイティブアプリのように見えて実際にはHTMLでUIが記述されている場合があります。また、デスクトップアプリフレームワークであるElectronも同様にUI表示にHTMLを使います。このようにHTMLが活用できる場所はとても広いのです。
参考になるサイト
CSS
どんなもの？
CSS（Cascading Style Sheets）は、以前はHTMLに直接記述されていたスタイル情報を記述するための仕様です。テキスト色や背景色、フォントサイズなど、内容や構造と直接関係のない情報をスタイルとしてCSSに記述します。通常は外部CSSとしてHTMLファイルとは別のCSSファイルに記述しますが、状況によっては使えない場合もあるため、インラインスタイルとして直接HTMLファイルに記述することもあります。現在はCSS4の策定が進行中です。
なにに使われる？
CSSはHTMLを装飾するためのものなので、上述したHTMLが使われる場面でいっしょに使われることになります。ウェブページの体裁を整えるためにはCSSが欠かせません。また、ウェブアプリケーションやスマホアプリのUIの見栄えをよくするためにも活用されています。今日のCSSは非常に表現力豊かで、デスクトップアプリと遜色ない見た目にできるようになっています。HTMLとともに活用の幅が広がっていくことでしょう。
参考になるサイト
CSS | MDN – Mozilla Developer Network
JavaScript
どんなもの？
JavaScriptは、オブジェクト指向のプログラミング言語です。オブジェクト指向といっても一般的なクラスベースの継承スタイルではなく、プロトタイプベースの継承が採用されているため、継承についてちょっと戸惑うかもしれません。C言語系の構文なので、C系の言語が使える方ならそれほど苦労せずに取得できるのではないでしょうか。最新の規格はECMA Script 2015（ES6）となっており、次期ECMA Script 2016（ES7）の策定が進行中です。
なにに使われる？
最も一般的な使い道は、ウェブサイトでの動的な処理でしょう。たとえば、TwitterなどのSNS共有ボタンやページトップへのスクロールボタンなどです。他にも、GmailやYouTubeでは、JavaScriptを利用してウェブページをひとつのアプリケーションとして提供しています。ページの遷移や読み込みがないためデスクトップアプリのように利用できるのもJavaScriptのおかげです。また、Node.jsによって、サーバーサイドやデスクトップにも普及が進んでいます。
参考になるサイト
Sass
どんなもの？
Sass（サース）は、CSSでは冗長になりがちなスタイルの記述を簡素化するためのスタイルシート言語です。CSSで普通にスタイルを書いていると、同じことを何度も書かなくてはいけなかったり、似たようなスタイルがいたるところに存在したりすることがあります。Sassでは、CSSに似た構文を使うことにより、重複するスタイルをまとめたり、変数を使ってスタイルを再利用したりできるようになります。
なにに使われる？
案件によってはCSSを直接使うのではなく、Sassなどのスタイルシート言語を使ってコーディングをしている場合があります。最終的にはCSSにコンパイル（変換）されてウェブサイトに使われることになります。単体で使われることは少なく、たいていはCompassなどのCSSフレームワークと併用します。ちなみに、Rubyで作られているため使うためにはRubyをインストールする必要があります。
参考になるサイト
Sass: Syntactically Awesome Style Sheets
LESS
どんなもの？
LESSも、冗長なCSSを簡素化するためのスタイルシート言語です。上述のSassに触発されて作られたということもあり、似たような機能性を持っています。Sassとは違い、CSSにコンパイルする前のLESSファイルを動的にコンパイルできるようになっています。このため、いちいちCSSにコンパイルしなくても元のLESSファイルのままサーバーに配置することができます。
なにに使われる？
こちらもSass同様、最終的にはCSSにコンパイルされてウェブサイトに使われることになります。とはいえ、上述の通り動的なコンパイルにも対応しているため、コンパイルがサーバーサイドやクライアントサイドで行われる場合もあります。多くの場合、性能上の問題から事前コンパイルかサーバーサイドでのコンパイルが採用されています。なお、LESSはJavaScriptで記述されており、Node.js上で動作します。
参考になるサイト
Git
どんなもの？
Git（ギット）は、Linuxの父リーナス・トーバルズが開発した分散バージョン管理ソフトウェアです。ファイルに対して行われた変更を履歴として保存しておくことができ、いつでも以前のバージョンに戻すことが可能です。また、「いつ」「だれが」「どんな変更をしたか」がすぐにわかるので問題の解決にも役立ちます。
なにに使われる？
もともとLinuxのソースコードを管理するために作られたため、主にプログラマーに使われていました。しかし、最近ではデザイナーやコーダーにも使われています。HTMLやCSSもテキストファイルなので変更の追跡ができるためです。また、複数人で作業する場合には、意図しないファイルの上書きを防ぐことができます。どれが最新版か混乱するようなこともなくなります。もし現場で使われていなければ、個人的に利用するのもいいですよ。
参考になるサイト
WordPress
どんなもの？
WordPressは、オープンソースのブログソフトウェアです。CMS（コンテンツ管理システム）としての側面も持っており、ブログだけでなくコーポレートサイトやECサイトなど多様なサイトを構築できます。世界の4分の1のサイトがWordPressを使って作られていることからも人気の高さがうかがえます。テーマやプラグインなどを使って柔軟に対応できることが特徴です。
なにに使われる？
ウェブサイトをWordPressで構築する案件は非常に多く、それを専門とする企業も多数あります。まったく0からサイトを作るよりもWordPressを使ったほうが圧倒的にコストを下げられるためです。WordPressでのコーディングは少し”くせ”があるため、一般的なウェブサイトと同じようにはいきません。仕様を理解して正しい方法でコーディングする必要があります。案件が多いので勉強しておいて損はないでしょう。
参考になるサイト
まとめ
HTMLコーディングは、単純なようでいて意外と多くの知識が求められます。取得した知識は他の仕事にも活かせますので、決してムダにはならないでしょう。まだ取得していない技術があったら、参考サイトや入門書を頼りに学習をはじめてみましょう。なにも一気にする必要はありません。日々の積み重ねが大切です。少しずつでもはじめていきましょう。あなたはどの技術を取得したいですか？
実際のフリーランスの案件を見てみよう
最近では「クラウドワークス テック」などのフリーランス専門のエージェントサービスもありますので、まずは実際に募集のあるお仕事の事例をチェックしてみると良いでしょう。
登録をすると、Web上では非公開の案件もご紹介を受けることができます。まずは色々なエージェントサービスへ無料登録するところからスタートしてみましょう。
フリーランスになるために必要な知識やスキルアップの方法等、様々なお役立ち情報を発信していきます。
(リモートワーク案件に強いフリーランスエージェント「クラウドワークス テック」を運営)
