学習

【Web制作で使う言語】学習方法や順序を解説｜実務で使う情報もあり

  /
悩んでいる人

Web制作って何のプログラミング言語を使うんだろう？

悩んでいる人

効率よくWeb制作の言語を学習する方法はないかな

この記事では、このようなお悩みを解決します。

Web制作で使う言語や学習方法を知っておくと、下のようなメリットがあります。

知っておくメリット
  • 学習すべき言語がわかるので、案件獲得までの時間短縮につながる
  • 効率のよい学習方法がわかるので、いち早くWeb制作技術が身につき、サイトを作れるようになる

では早速本題に入っていきましょう。

Contents
  1. Web制作でよく使われる4つの言語
  2. HTMLに関して知っておいて欲しい4つのこと
  3. CSSに関して知っておいて欲しい3つのこと
  4. Sassに関して知っておいて欲しい5つのこと
  5. JavaScriptに関して知っておいて欲しい3つのこと
  6. jQueryに関して知っておいて欲しい3つのこと
  7. PHPに関して知っておいて欲しい1つのこと
  8. WordPressに関して知っておいて欲しい2つのこと
  9. Web制作者の言語学習ステップ
  10. Web制作の言語を学習する4つの方法
  11. RubyやPythonとかも聞くけどWeb制作では使わない？
  12. まとめ

Web制作でよく使われる4つの言語

Web制作でよく使われる言語は下の4つです。

  1. HTML
  2. CSS
  3. JavaScript
  4. PHP

しかし、これらの言語が頻出かつ便利なので、拡張した言語や利用したソフトウェアなどが誕生しています。そこもあわせて紹介します。

そのため、ただの言語紹介ではなく、実践性をもった言語紹介になります。

言語①：HTML

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページの構造を指定する言語です。

HTMLは厳密にいうと、プログラミング言語ではなく、マークアップ言語に分類されます。

言語②：CSS

CSSは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、Webページのスタイルを指定する言語です。

CSSもHTML同様、厳密にはプログラミング言語ではありません。CSSは、スタイルシート言語に分類されます。

言語②-2：Sass

Sassは、Syntactically Awesome StyleSheet（シンタクティカリー・おーサム・スタイルシート）の略で、スタイルシート言語の一種です。

メンテナンス性や効率性が高いため、Web制作会社でも多く用いられているようです。僕も使っていますが、コーディングの素早さやメンテナンス性の高さには驚きます。

ちなみに使い方は下のような感じです。簡単ですね。

Sassを使う流れ
  1. Sassを記述
  2. CSSへコンパイル
    ↑エディタによっては上書き保存するだけで自動的にコンパイルしてくれます。
  3. CSS完成

※コンパイルとはプログラミン言語の翻訳みたいなものです。英語→日本語みたいに、Sass→CSSで翻訳します。

Web制作会社によってはSassを用いた記述がマストな場合もあるようです。Web制作会社からの業務委託を検討している場合には覚えておきましょう。

もし、Web制作会社から業務委託を受けなくても、とても便利なので使用することを僕はおすすめします。

まれにSass（サス）とSaas（サース）をごちゃごちゃにしてしまっている人がいます。両方ともIT業界に存在する用語なので、きちんと識別して使いましょう。

ちなみに、SaasはSoftware as a Serviceの略で、これまでパッケージで提供されていたソフトウェアを、インターネット経由でサービスとして提供する形態のことをいいます。

WordなどのOffice製品やIllustratorなどのAdobe製品がSaasですね。

言語③：JavaScript

JavaScriptは、私たちの見ているWebサイトに動きを出すプログラミング言語です。

JavaScriptはすべてと言ってもよいほどのWebサイトに用いられています。主な使用例には下のものがあります。

  • フォームが未入力の場合のアラート
  • HPでよくみるカウントダウン
  • 自動計算　など

言語③-2：jQuery

jQueryはプログラミング言語ではなく、JavaScriptのライブラリです。簡単にJavaScriptを使えるパッケージのようなものです。

ライブラリといってもわかりにくいので例え話を出しましょう。ミートソースパスタを作る時には2パターンの作り方がありますよね。

  1. オーダーメイドパターン：
    トマトやひき肉などからオーダーメイドにソースを作って、パスタにかけて完成させる
  2. レトルトソースパターン：
    ミートソースのレトルトソースを買ってきて、パスタにかけて完成させる

②の方が簡単かつ素早くできます。一方、①は難しいですが自分好みの味にできます。

この話はJavaScriptとjQueryの関係とよく似ています。つまり、下の通りなんです。

  1. JavaScript＝素材からオーダーメイド
  2. jQuery＝レトルトソース

多くのWeb制作者は、素早く確実に動くjQueryに魅力を感じて、jQueryを用いています。

言語④：PHP

PHPは主にサーバー側を操作するプログラミング言語です。PHPを使わず、HTML・CSSだけでサイトを構築すると、サーバー側を操作できないので、ユーザーとサイトの対話があまり成り立ちません。

対話といっても難しいですが、要するに「これをくださいな」に対して、「はいよ〜」というやりとりができないんですよね。

例えば、検索機能です。

サイト内で「花見」に関する記事をみたいので、「花見」と検索したとしましょう。PHPがあれば、サーバー側を操作できるので、検索された「花見」という文字を含む記事をサーバー内にあるのデータベースからピックアップして表示することができます。

一方、HTML・CSSだけの場合には、サーバー側の操作はできないので、前もってアップロードした記事一覧をそのまま見せるしかないんです。

言語④-2：WordPress

WordPress（ワードプレス）もプログラミング言語ではありません。しかし、言語と同じくらいよく聞く言葉なので、混同しないためにも紹介します。

WordPressとは、オープンソースのプログラムソフトウェアです。言語ではなく、言語を用いて作られたソフトウェアなので、WordやExcelとかと一緒ですね。

ちなみに、WordPress自体は、PHPとMySQLを用いて作られています。

WordPressを多少いじるくらいならば、HTML・CSSの知識で十分ですが、テーマ制作をするならば、PHPは多少押さえておきたいです。

HTMLに関して知っておいて欲しい4つのこと

HTMLに関して知っておいて欲しいことをまとめました。

①：セクショニング・コンテンツを示すタグ使う

セクショニング・コンテンツを示すタグを使いましょう。該当するタグは下のものです。

セクショニング・コンテンツを示すタグ
  • <article>
  • <aside>
  • <nav>
  • <section>

Googleは、コードからページの構造を読み取るため、ページの構造をタグで教えてあげることは重要です。

他にもさまざまな種類のタグがあります。

コンテンツの種類を示すタグの例
  1. メタデータコンテンツ
    <title>,<style>,<script>,<meta>,…
  2. フローコンテンツ
    <a>,<area>,<article>,<aside>,<b>,<main>,…
  3. ヘディングコンテンツ
    <h1>,<h2>,<h3>,<h4>,<h5>,<h6>,…

もっと詳しいことを知りたい方は、W3Cの記事をご覧ください。下のボタンよりご覧いただけます。

W3Cのサイトへ

②：target=”blank”の脆弱性

別タブを開く際には、aタグに「 target=”blank”」をいれますよね。しかし、「 target=”blank”」には脆弱性がありますので、必ず対策を行いましょう。

結論、「 target=”blank”」ではなく、「 target=”blank” rel=”noopener noreferrer”」にすればOKです。

簡単にいうと、「 target=”blank”」だけだと、遷移を不正操作されてしまう可能性があるためです。

詳しいことは上記のサイトをご覧ください。

余談ですが、WordPressで「新しいタブで開く」を選択すると、自動的に「 target=”blank” rel=”noopener noreferrer”」が入力されますよ。

③：レスポンシブ対応のためにはviewport設定が必要

レスポンシブ対応させるためには、HTMLファイルので<head>内に下のコードを入れる必要があります。vierport設定画面の表示領域をデバイスに応じて調整する設定です。

meta name="viewport" content="width=device-width,initial-scale=1"

基礎的すぎて入れ忘れることが多いので、念の為、紹介しました。

④：設計思想

設計思想を知っておくとよいでしょう。BEM（ベム）もその一種です。

設計思想を用いる理由
  • 他者と共通認識を取れるので、チーム制作しやすい
  • メンテナンスしやすい
  • 拡張しやすい

設計思想とは、1つの考えをもとに、コーディングをすることです。例えば、設計思想の一つである《BEM》をもとにクラスをネーミングしてみると下のようなものです。

form__button--disabled

ちなみに、BEMはWeb制作において主要な設計思想なので、使えるようになっておくことを推奨します。もっとBEMのことを知ってみたいという方は、下の動画がおすすめです。全体像と使い方がざっとわかります。

ただし、ざっとわかる程度なので、詳細まではわかりません。

もし、詳細まで知りたい方は「CSS設計完全ガイド」という本がおすすめです。

CSS設計完全ガイド

CSSに関して知っておいて欲しい3つのこと

次にCSSに関して知っておいて欲しいことです。CSSは奥が深すぎて調べると調べるだけ新しい情報が出てきてしまいます。

そこで、「最低限ここだけ知っておいて欲しい」というポイントに厳選しました。

①：正式名称（お話しするときに重要）

CSSについてお話しする時のために、正式名称をいえるようにしておきましょう。

  1. セレクタ
  2. プロパティ
  3. 値

この3点セットを覚えましょう。

②：よくあるブレークポイントを知る

レスポンシブ・コーディングを行う際、画面幅ごとにスタイルを設定しますよね。

@media screen and(max-width:767px)

↑これのことです。このデザインが変更する幅のことを「ブレークポイント」といいます。

このブレークポイントは人によって、設定がまちまちなので、正しいブレークポイントの値は存在しません。ただし、慣習的に決まっているポイントはいくつか存在します。

僕がよく使うブレークポイントは、はにわまんさん（@haniwa008）と同じで、下の通りです。

ブレークポイント例
  • PC：インナー幅〜
  • タブレット：768px〜インナー幅
  • スマホ：320px〜767px

③：優先順位

スタイルには優先順位があるので、押さえておきましょう。押さえておくと、スタイルが反映されない時に、その理由をすぐに導けます。要するに時間短縮ですね！

  1. !important
  2. インライン記述（htmlファイル内への記述）
  3. IDセレクタ
  4. クラスセレクタ
  5. 要素セレクタ
  6. ユニバーサルセレクタ

上のものほど（数字が小さいものほど）、優先順位が高いです。詳しいことは下の記事にまとめられているので、よければご覧ください。

【参考】最低限知っておくべきCSSの基礎

Sassに関して知っておいて欲しい5つのこと

SassはなくてもWeb制作ができてしまうため、知らないままWeb制作を進めている方は少なくないはずです。僕も最初は全然知りませんでした。

ただ、Sassはめちゃくちゃ便利です。

そのため、ちょっと手厚めにSassについての情報をお伝えします。

①Sassを使う流れ（コンパイル）

前章でお伝えしましたが、Sassを使う流れは下の通りです。

Sassを使う流れ
  1. Sassを記述
  2. SassからCSSへコンパイル
  3. CSS完成

僕はVisual Studio Code（VSCode）というエディタを使用していますが、そのエディタでの使用感をお伝えします。

VSCodeでは、拡張機能をインストールすれば、もうあとは手間要らずです。

Sassで記述して上書き保存すれば、勝手にCSSファイルも更新されていきます。簡単すぎです。

②Sassのメリット

メリット①：素早くコーディングできる

1つ目のメリットは、素早くコーディングできることです。

Sassは「＆」記号などを使用して記述量を減らしたり、よく使うCSSをパッケージにして、一行でよく使うスタイルを反映できたりします。

そのため、記述量が圧倒的に減り、素早いコーディングが可能になります。

メリット②：メンテナンス性が高い

2つ目のメリットは、メンテナンスしやすいことです。

のちほどご紹介しますが、Sassはネストにできるので、セクションごとにスタイルをわけることができます。

すると、直感的にスタイルを掴むことができるので、メンテナンスがしやすいです。

③Sassのデメリット

次にデメリットを紹介します。結論、僕はSassにデメリットはないと思っています。しかし、メリットだけ紹介するのも怪しいので、粗探ししたものをお伝えします。笑

デメリット①：準備が必要

HTMLやCSSと違って、Sassを使うためには準備が必要です。

ただ、先ほどお伝えしたようにVSCodeを使用していれば、拡張機能をインストールして、コーディングのたびに「Watch Sass」を押せばよいだけなので、簡単です。

デメリット②：すべての人がSassを使用しているわけではない

すべての人がSassを使用している訳ではないので、案件次第ではCSSを記述する必要があります。

Sassに慣れていると面倒に感じるかもしれないです。

④Sassでよく使う4つの機能

Sassでよく使う機能についてお伝えします。

機能①：変数管理

まず変数管理ができます。よく使う色や幅などを変数登録しておけば、素早く頻出のスタイルを反映させることができます。

使用例▼

$box-width:500px;

.box{
　width:$box-width;
}

機能②：四則演算

四則演算も可能です。画面幅を等分して、きれいに配置したいときなどに使えますね。

使用例▼

.box{
　width:1000px/3;
}

機能③：ミックスイン

ミックスインとは、よく使うスタイルをセットで登録して、使いたい時にセットで使う便利機能です。

具体例をお伝えした方がわかりやすいので、早速具体例をみていきましょう。

//Sassでの記述
@mixin wide-box{
  border:1px solid #ccc;
  width:100%;
}
.main-box{
  @include wide-box;
  background-color:#eee;
}

上記のように記述します。@mixinでwide-boxを定義して、.main-boxの中で、wide-boxを使用しているのがわかります。

上のSassをコンパイルしたCSSが下記のものです。

//CSS
.main-box {
  border: 1px solid #ccc;
  width: 100%;
  background-color: #eee;
}

繰り返し使うスタイルとミックスインで登録しておけば、大幅な時間短縮につながります。

ミックスインは引数（ひきすう）を使うこともできるので、ご興味があれば、下記の記事をご覧ください。

【参考】Sassの「@mixin（ミックスイン）」の使い方と「引数」の解説

機能④：ネスト

ネスト機能もSassのメイン機能の一つです。個人的にはSassで一番好きな機能です。ネストとは《入れ子》という意味ですが、SassはCSSを入れ子常に記述することが可能です。

具体例をみてみましょう。下はCSSで記述したものです。

//CSS

.about{width:100%;}
.about-txt{margin:10px 30px;}
.about-txt a{padding:10px 5px;}
.about-txt a:hover{color:white;}

よくみるスタイルの指定だと思います。これをSassを用いてネストで書いてみると下の通りになります。

//Sass

.about{
　width:100%;
　&-txt{
　　margin:10px 30px;}
　　a{
　　padding:10px 5px;
　　&:hover{color:white;}
　　}
　}
}

aboutや-txtなどの重複部分を削れたのがおわかりでしょうか？

しかも、aboutのなかのtxt、その中のa要素など、直感的にスタイルを見ることができます。

“重複部分の削減”と“直感的な見やすさ”によって、時間削減につながります。

⑤SASS記法とSCSS記法について

SassにはSASS記法とSCSS記法があります。一般的に使われているのはSCSS記法です。

この情報は特に実務に関係ないですが、耳にすることもあるかと思い、お伝えしました。

ちなみに、SCSS記法の方がCSSの記述に近く、使いやすかったために選ばれているという情報を僕は目にしたことがあります。

JavaScriptに関して知っておいて欲しい3つのこと

JavaScriptに関して知っておいて欲しいことをお伝えします。

①：「動きを出す」と「動的サイト」は違う

JavaScriptの説明でよく聞く「動きを出す」と、一般にいわれる「動的サイト」は、共通した《動》という字を使いますが、意味は違いますので、ご注意ください。

「JavaScriptで動きを出す」の《動》は「画面に表示されるデザインの動き」を指します。つまり、見たままの《動》のことですね。

一方、動的サイトの《動》は、ユーザー条件によって異なる「動き」をするという意味で、《動》という字が使われます。サーバー側で違う処理がおこなわれるんです。具体例は、ユーザーによって買い物カートの中身を変えたり、おすすめの商品を変えたりです。

もちろん、一概に上のように言い切ることはできませんが、多くは上のような意味で使われます。

②：JavaとJavaScriptはまったく別の言語

JavaScriptのことをJavaと略す人が稀にいますが、まったく別の言語なので気をつけましょう。

「メロンパンとメロンくらい違う」と表現する人もいるくらいです。メロンパンを作る人とメロンを作る人は全く別の人ですよね。そんな感じです。

なぜこんなにも違うのか調べたところ、原因はJavaScript側にありそうです。調べたところ流れは下のような感じ。

  1. 《LiveScript》が生まれる
  2. 《Java》が生まれる
  3. 《Java》の人気が高まる
  4. 《Java》人気に乗じるように、LiveScriptの名称を《JavaScript》に変更

【参考】JavaScriptはJavaとは全く違うのに、こんな似ている名前になったのはなぜですか？

本当なのかはわかりませんが、こんな感じの説もあるらしいです。特に覚える必要はない話です。

③：難しいので、まずはjQueryが使えればOK

JavaScriptには深く踏み込まず、ひとまずjQueryが使えればOKです。理由は下の通りです。

理由
  • 主要な機能はjQueryで実装できる
  • JavaScriptは難易度が高いので、初期時点ではコスパが悪い

のちにお伝えしますが、 jQuery禁止の案件もあるので、そういった場合にはJavaScriptを使用することが推奨されます。

しかし、特に駆け出しのころに関しては、学習コスパが悪いので、jQueryまでできればよいでしょう。

jQueryに関して知っておいて欲しい3つのこと

jQueryに関して知っておいて欲しいことをお伝えします。

①：プラグインが便利

jQueryはプラグインが便利です。しかし、人によってはプラグインを知らずに学習が進んでいってしまう人もいます。そのよい例がProgate利用者です。

Progateで学習していると、jQuery公式が配布しているファイルを読み込み、jsファイルでコーティングするパターンしか学習しません。

しかし、jQueryにはプラグインというものが存在します。プラグインを利用すると、頻出の機能をあっという間に実装することができます。

プラグインで有用なものは下記のものなどでしょう。

jQueryの有用プラグイン

これらはWeb制作者のゆーすけさん（@U_suke313）が紹介してくださったものをお伝えしています。ゆーすけさんは有益情報をめちゃくちゃ教えてくれる方なので、ぜひフォローしてみてください。

②：ブラウザごとの挙動を吸収してくれる

jQueryはブラウザごとの挙動を吸収してくれるので、時間短縮につながります。

HTML・CSSやJavaScriptでは、ブラウザごとに挙動が代わり、対応に追われることがしばしばあります。

しかし、jQueryはそんなブラウザごとの挙動を吸収してくれるので、コーディングに集中することができます。

③：多少重くなる可能性がある

jQueryを使うためには、ライブラリを読み込む必要があるため、多少重くなる可能性があります。

簡単な処理の場合には、JavaScriptの方が処理が断然早いというケースもよくあるでしょう。

PHPに関して知っておいて欲しい1つのこと

Web制作者がPHPについて知っておくべきことは、「PHPをすべて理解しようとしなくてOK」ということです。

Web制作者がPHPを使うのはWordPressのテーマ制作くらいです。しかも、PHPへの深い理解は必要ありません。

にもかかわらず、PHPをすべて勉強しようとすると、ものすごいコストがかかってしまいます。

WordPressのテーマ制作を行う前に、Progateで1〜2周程度だけPHPを触る程度でOKだと僕は考えています。

WordPressに関して知っておいて欲しい2つのこと

WordPressに関して知っておいて欲しいことについてお伝えします。

①：WordPressのカスタマイズだけならPHPを扱えなくてもOK

SnowMonkeyなどのWordPressテーマを用いて、Web制作をする場合には、PHPを扱えなくても問題ありません。HTML・CSSができれば十分です。

②：WordPressテーマ制作は多少PHPを知る必要がある

WordPressのテーマ制作をする場合にはPHPを多少知る必要があります。

下の概念くらいを知っておけば、問題なくテーマ制作ができるでしょう。

WordPressに使うPHP概念
  • 関数の定義・利用
  • 配列
  • 引数

そのためには、ProgateのPHP学習コースとWordPress用の参考書を1〜2冊おこなせば十分理解できます。

WordPressのテーマ制作に関してのおすすめの本は、下の記事で紹介しています。

https://kaki-lab.org/webproduction-recommend-books/

Web制作者の言語学習ステップ

Web制作者の言語学習ステップをお伝えします。詳しいことは下記の記事に記載しているので、ご興味があればご覧ください。

https://kaki-lab.org/beginer-loadmap/

言語学習ステップは大きく分けると下の通り、3ステップです。

STEP1：HTML・CSS

まず、HTML・CSSで動きのないWebページを作れるようになりましょう。

  • Progate HTML・CSS
  • デザインカンプからのコーディング

をこなせばOKです。このステップでのデザインカンプは《だんさんカンプ》をおすすめしています。

STEP2：jQuery（JavaScript）

次に、jQueryを学習して、動きを出せるようにしましょう。

  • Progate jQuery
  • （Progate JavaScript）
  • デザインカンプからのコーディング

をこなせばOKです。このステップでのデザインカンプは《ねこポンさんカンプ》です。実戦レベルで難しいですが、ここまでできたら実案件に取り掛かれるレベルなので、がんばりましょう！

JavaScriptに関しては手をつけてもつけなくてもOKです。僕は一応やりましたが、正直あまりやらなくてもよかったかな…と思っています。

STEP3：WordPress（PHP）

最後にWordPressの勉強をしましょう。

  • Progate PHP
  • WordPressレッスンブック
  • WordPressの教科書

上記の順序でやれば、実案件レベルの実力が身に付きます。WordPressについての2冊はハンズオン形式なので、情報量は多くないですが、二冊こなせばググりながら制作できるレベルまで到達します。

また、PHPをProgateで止めたのは無駄な勉強を防ぐためです。引数や関数の概念を知れれば、OKなので、Progateまでやったら、さっさとWordPressの勉強に入っちゃいましょう。

Web制作の言語を学習する4つの方法

Web制作の言語を学習する方法をお伝えします。どれがよいというわけではなく、組み合わせて学習をすすめるのがよいでしょう。

方法①：書籍

まず学習方法の1つ目が書籍です。

Web制作に関する書籍のタイプは大きく2つに分かれます。

書籍の2タイプ
  1. 辞書タイプ：情報の一覧になっている
  2. ハンズオンタイプ：手を動かして制作しながら学ぶ

上級者になると①辞書タイプの方がよいですが、初心者のうちは②ハンズオンタイプの方がよいでしょう。

実際に手を動かさないと学べないからです。初心者の時に①辞書タイプを買っても、使い所がわからないことが多いです。

初心者の時は②ハンズオンタイプを購入し学習するようにしましょう。

僕がおすすめしている本をまとめた記事を作成しましたので、よければご覧ください。

https://kaki-lab.org/webproduction-recommend-books/

方法②：学習サイト

学習サイトもおすすめです。僕も学習サイト《Progate》を利用して学習を進めました。

Progateの魅力は下の通りです。

Progateの魅力
  • AIによる自動判定で正誤が明快にわかる
  • 多くの段階を用意してくれていてスムーズにステップアップできる
  • ゲーム感覚で楽しく学習できる
  • 月額980円とは思えないほどのコンテンツ量でコスパ最強

方法③：動画教材

動画教材もおすすめです。有名どころだと《ドットインストール》や《Udemy》でしょう。

書籍や学習サイトだと、細かく見本の動きを辿ることができないため、つまづいてしまう人が少なくないです。

一方、動画教材ならば、見本の動きを細かく終えるため、挫折しにくいでしょう。

方法④：プログラミングスクール

プログラミングスクールも学習方法の1つです。僕自身は独学ですが、「プログラミングスクール」っていいなと思うこともしばしばあります。

というのも「わからないことがあった時に聞く相手」は非常に大きいからです。

有名どころでいうと、テックアカデミーさんやデジハリさんなどがありますね。

RubyやPythonとかも聞くけどWeb制作では使わない？

結論、RubyやPythonはWeb制作では使わないです。探せばあるのかもしれませんが、僕は一度も聞いたことがありません。

また、RubyやPythonはWebアプリなどに使われる言語です。Web制作で稼いでいきたいと考えている方は、これらの言語には手をつけず、上で紹介した言語の技術を高めていくのよいでしょう。

まとめ

この記事では、Web制作で使う言語についてお伝えしました。

この記事の内容
  • Web制作で使われる言語
  • それぞれの言語において知っておいて欲しいこと
  • 学習ステップ
  • 学習方法
  • RubyやPythonなどは使わないのか

学習する言語がわかれば、あとは学習するのみです。僕が案件獲得までに行った行動をまとめた記事がありますので、よければご覧ください。

https://kaki-lab.org/beginer-loadmap/

最後までご覧いただきありがとうございました！

RELATED POST