私がWEB制作の現場で使っている言語と技術のまとめ

はじめに

こんにちは、daimaです。
本日は、WEB制作とECサイトの運営を行う
小さな会社で、ただ一人の常勤コーダーとして、
日々孤軍奮闘している私が、
WEB制作社なら必ずに身につけておきたい
必須知識についてお話しさせていただきます。

各技術の重要度や
効率的な勉強法についてもご説明します。
WEB制作会社への就職を目指す方や、
同じくコーダー、エンジニアとして頑張っている方の
お役に立てれば幸いです。

HTML5

HTMLとは、WEBページの文章構造を表す
マークアップ言語にして、WEBで仕事をするなら
一番最初に覚えるべきものです。

HTMLの基本はタグであり、
適切なタグに適切な要素を内包することで
クローラーが正しくサイトを解析し、
SEO評価を高める手助けになります。

とはいえ実際のWEB制作で
意識するタグの種類はそれほど多くなく、
bodyやheader、footerなどの基本や
sectionとarticleの使い分けを
理解できていればほぼほぼ大丈夫です。

CSS(SCSS)

CSSは、HTML要素でマークアップしたコンテンツに対し、
独自のスタイル(見た目)を指定するための言語です。

このCSS、仕組みとしては単純なのですが、
その単純さが問題ゆえに、
サイトの規模が大きくなるにつれ、
優先度の管理が指数的に複雑になり、
俗に言うCSSの崩壊を招く危険をはらんでいます。

その危険を回避する工夫のひとつが、
BEMやSMACSSなどの、
CSS命名規則を導入することです。
これには、cssの名付け方に
明確なルールを設けることで、
優先度による混乱を避け、
複数人のプロジェクトにおいても
一定の秩序を保ったコーディングができるメリットがあります。

ただ私の場合、引き受けているのが
小規模なコーポレートサイト案件が主であり
毎回ほぼ一人でコーディングしている
ということもあり、厳格なルールは採用せず、
1.なるべく入れ子構造にしない
2.名前からすぐ役割がわかるようにする
3.個々の要素をなるべく再利用可能にする
という3点にだけ注意して、
スピード重視のコーディングを行なっています。

CSSプリプロセッサについて

CSSプリプロセッサを使うと、
CSSで変数やループ、
継承といった機能が扱えるようになります。
このデファクトスタンダードがSCSSで、
私も業務の際は必ずSCSSを導入しています。

ただし、プリプロセッサで書いたCSSは、
アップロード前に、コンパイラを通して
素のCSSに変換する必要があります。

コンパイルは、コマンドから
PCにSCSSコンパイラをインストールして行う方法と
パッケージ版のソフトウェアをダウンロードして
デスクトップから行う方法のふた通りがあります。

初心者にもとっつきやすいのは後者で、
中でも私のおすすめは、
無料で使えてなおかつ高機能な「prepros」。

頻繁に出ててる有償版購入の呼びかけが難ですが、
UIも非常に洗練されていて、
無料のツールとしては文句のないクオリティです。

javascript(jQuery)

WEB開発専門のプログラミング言語。
登場後しばらくは日の目が当たりませんでしたが、
使いやすさを劇的に改善したjQueryや、
jsの領野をサーバーサイドまで広げたnode.js、
SPAに強いAnguler.jsに
コンポーネント指向のreact.js、
さらに最近ではWEBアプリケーション開発に
特化したvue.jsなどの登場により、
今一番熱いプログラミング言語との呼び声もあります。

ただし、巣のjavascriptは扱いが難しく、
小規模サイト制作の現場では、
次に紹介するjQueryがよく使われます。

jQueryについて

jQueryとは、記述が長ったらしくて
とにかくわかりづらいjavascriptを
デザイナーでも簡単に扱えるようにしてくれる
素敵なライブラリです。

javascriptを勉強するなら

まずは、ドットインストールやProgateなどの
無料学習サイトで基本の文法を学びましょう。
最初は、関数の作り方や変数の使い方、
型といった基本の部分だけ押さえておけばOKです。

書き方が分かったら、とにかく実践あるのみ。
いろんなサイトを見て回って、
スティッキーヘッダーとか
ハンバーガーメニューとか
気になるものはかたっぱしから
自分の手で実装してみましょう。

javascriptはプログラミング言語なので
HTMLやCSSより習得難易度が高めです。
私も最初のうちは酷く苦労しましたが、
そんな時は、次のような意識を持って
コーディングすると習得が早まりました。

  • 「なぜそうなるか」を徹底的に考える
  • 自分で仕組みを理解していないコードをコピペして使わない
  • 複雑なプログラムは、簡単な要素の集まりに分解して攻略する
  • エラーがあった時は、タイポなどの単純ミスを第一に疑う
  • エラーメッセージをよく読む
  • 困ったらググる。日本語のサイトで解決策が見つからなければ英語のページにも目を通す。
  • 楽しんでやる

特に、最後の楽しんでやるというのは
一番大事な心構えだと思います。
javascript界隈は進歩が早く
勉強することも多いですが、
そのぶん刺激的で面白い世界でもあります。

WordPress

ブログサイト開発に必要な機能が詰まった、
C無料のオープンソースソフトウェア(CMS)です。
その用途はブログ開発にとどまらず、
コーポレートサイト開発はもちろん、
WEBアプリケーション開発での利用例もあるほど。
そんなWordpressの凄さを、
3つのポイントに分けてご説明します。

豊富なプラグインがすごい

WordPressを語る上で外せないのが、 有志によって開発された、 あらゆるニーズに応えてくれる プラグインの数々です。

そのバリエーションは幅広く、
パンくずリストやフォームの実装はもちろん、
英会話教室の予約システムを
まるごと実装してくれるプラグインまで存在します。
(そしてその多くが無償!)

ただし、プラグインは個人開発のものも多く、
セキュリティホールや急な更新停止など、
使用の際は、潜在的リスクを考慮して
取捨選択しなけばなりません。
簡単な機能ならば、プラグインなしで、
自力で実装できるに越したことはないのです。
(責任のあるクライアント案件ならなおさら)

カスタマイズの自由度がすごい

wordpressは完全オープンソースであり、
PHPの知識があればダッシュボードのレイアウトから、
(普通はやらないけれど)コアファイルまで
好きなように書き変えて利用することができます。

特に、リテラシーの低いクライアントが
自ら更新を行うことが想定される場合、
ダッシュボードのカスタマイズは必須です。

クライアントのアカウントでは
システムファイルに触れないようにして、
なおかつサイトの更新は簡便にして、
あエディタはビジュアルエディタオンリーにして…
みたいなことが全て自由に出来ちゃいます。

コミュニティの活発さがすごい

WordPressは、日々ネット上で
機能改善について言えkんの交換が行われ、
現実においても定期的にユーザー同士の
交流会(Wordcamp)が行われるなど、
コミュニティとしての活性度が非常に高いです。

そのため、バグやセキュリティホールが見つかっても
非常に素早い対応がなされ、無料のCMSでありながら、
ビジネス利用にも耐えうる高い信頼性を実現しています。

クライアントに納品したサイトのCMSが、
次の日に更新停止した…なんてことになったら
冗談にもなりませんので、
このCMS最大手=安心という部分は
非常に重要なポイントです。

おわりに

以上、私がWEB制作の業務で
日々の案件で活用している技術のまとめでした。

WEBの世界は非常に移り気で、
トレンドの変化も早いですが、
今回ご紹介したような基本中の基本については
少なくとも10年間は無くならないものと思いますので、
WEB制作の世界に入りたいと考える方は
ぜひ、これらの技術を勉強してみてください。