1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

ウェブ開発をする前に覚えておきたい技術5選!

Pocket

はじめに

普段どんなウェブサービスを使っていますか?
ウェブ技術の発展とともに、どんどん新しいウェブサービスが作られています。
たいていの方は、日常的になんらかのウェブサービスを使っているでしょう。
Gmailをはじめとするリッチなウェブアプリケーションは、ブラウザ上でスタンドアロンアプリ並の利便性を提供しています。
インストール不要でどこからでもアクセスできることが、ウェブアプリの利点です。

しかし、ウェブ開発には実にさまざまな技術スキルが必要とされます。
この記事では、ウェブ開発をする前に覚えておきたい技術について紹介していきます。

HTML

HTMLは、ウェブページを記述するマークアップ言語です。
HTML5で大幅な改定が行われ、よりモダンな記述ができるようになりました。
現在の最新規格はHTML 5.1。
基本的に、HTMLでは構造を記述するのみでデザインは含みません。
デザインはスタイルとして後述するCSSに分離して記述することが一般的です。

HTML5は、タグだけでなく、JavaScript(ECMAScript)APIも含む包括的な規格です。
ストレージやマルチメディア、グラフィックスなど、多彩なAPIをサポートしており、ブラウザ上でデスクトップアプリに勝るとも劣らないプログラミングが可能になっています。

CSS

CSSは、HTMLにスタイル(デザイン)を与える言語で、
HTMLから視覚的な要素を分離することができます。
スタイルがうまく分離されていることで、HTMLの変更なしにページデザインを修正することが可能です。また、JavaScriptによるスタイルの切り替えもよく行われます。

現在の最新規格はCSS3となっており、次世代規格のCSS4も策定中です。
ただし、CSS3以降では規格がいくつかのモジュールとして分割されており、一部モジュールは策定中だったり、勧告候補になっていたりします。
最新情報はW3Cのサイトで確認するとよいでしょう。

JavaScript

JavaScriptは、スクリプト言語のひとつです。
ウェブ開発では、フロントエンドをJavaScriptで開発することが多いでしょう。
バックエンドは、PHPやRuby、Javaなどの言語が使えますが、ブラウザでは基本的にJavaScriptしか動作しないからです。
近年では、JavaScriptの欠点を補うTypeScriptやDart、CoffeeScriptなどのAltJS言語も使われています。
これはJavaScriptとは別の言語ですが、最終的にJavaScriptに変換して実行します。

JavaScriptは、規格としてはECMAScriptという名称になっており、最新規格はECMAScript 2016です。
ひとつ前のECMAScript 2015で多くの機能追加が行われ、クラスやモジュール、イテレーターなど、需要の高い便利な機能が使えるようになりました。
以前のJavaScriptを知っている方は、新しい要素をチェックしておきましょう。

Sass/LESS

SassとLESSは、いずれもスタイルシート言語です。
簡単にいえば、CSSに便利な機能を追加した言語です。
スタイルのネスト(入れ子)や変数の定義、ミックスインなど、CSSでは冗長になりがちな記述をシンプルにできます。
最終的にはCSSにコンパイルしますので、通常通りブラウザに読み込ませて使えます。

CSSのスーパーセット(上位互換)のような構文になっていますので、初心者にも学習しやすく、いくつかの追加構文を覚えるだけで、すぐに使えるようになります。
SassとLESSは基本的な機能はほぼ同じですので、気に入ったほうを使ってみましょう。

jQuery

jQueryは、クロスブラウザ(ブラウザ互換)問題を解決するために開発されたJavaScriptライブラリで、非常に多くのウェブサイトで使われています。
シンプルなAPIで簡単にDOM(HTML)にアクセスすることができ、要素の追加・削除やスタイルの付替えなどを簡単に行なえます。
真っ先にマスターしたいJavaScriptライブラリといえるでしょう。

現在の最新バージョンは3.0系ですが、メジャーバージョンごとにサポートされているブラウザが異なるため、常に最新版を使えばいいというわけではありません。
場合によっては、2.0系や1.0系を使う必要があるでしょう。
ターゲットブラウザによって、バージョンを使い分けましょう。

まとめ

ウェブ開発は、簡単そうに見えて結構いろいろな知識を必要とします。
時代による移り変わりも早いため、流行に乗り遅れないように常に最新技術をキャッチアップし続ける必要があります。
HTMLやCSS、JavaScriptは今後も新しい規格が登場します。ウェブ技術の変化に目を光らせておきましょう。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

おすすめスクール

システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ システムアーキテクチュアナレッジでは、ITスクールとしては珍しく正規雇用かつ現役のエンジニアが講師を務めています。「責任を持ったIT教育」をテーマに、未経験者をプロフェッショナルに育てます。
ページ上部へ戻る