【WEB制作】駆け出しエンジニアに必須な知識

WEB制作の世界に飛び込んで3年…。
そろそろ記憶の限界に達してきたのでアウトプットのためにこの記事を書きます。使うか使わないかは、自身の環境によりますし、所属している会社によります。

忘れる自身があるので備忘録として書きたいと思います！

一般的にフリーランスや個人事業主さんから会社に所属している方まで、不要なものもありますが、「聞いたことはある」ぐらいにとどめていただいた方が、他の会社さんでも通用するかと思います。

「知らないの？」と言われるより、知っていた方が良い印象です！主にWEB上で見つけた情報。また、知人に聞いた情報、またセミナーで出会った人に聞いた情報です。

この記事の対象の方は、駆け出しエンジニア（Web制作3年未満）、独学でhtmlを学んだ方、スクールに通ったけど実践がまだまだの方、Web業界から数年前に遠ざかった方、向けです。

ホームページを制作する上で一般的なツール

visual studio code

microsoft社が作った超軽量な無料コードエディターです。
拡張機能などたくさんあり、自分仕様にカスタマイズ可能。
gitやsassも簡単にできる！

超軽量！がとっても良いところ！
コードを書きまくっているエンジニアさんはほぼこちらをご使用です。

拡張機能で自動形成やベンダープレフィックスの自動付与、さらに定義も設定できるので本当に使いやすい！！

ベンダープレフィックスとは

cssで使用します。実はcssで使用するコードの中にはブラウザによってはまだ未対応のものがあります。その結果、ブラウザによって見え方の違いが発生してしまいます。
解決策としてさまざまなブラウザに実装するために付け加えられる接頭辞です。

例としては--webkit-、-moz-、-ms-、-o- など。
特にIE以外のブラウザというのは常に最新バージョンにアップデートされていくので、ベンダープレフィックスなしでどんどん対応していっています。

対応しているかどうかは下記のサイトで確認できます。

Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

この -o-* は元々はOpera用のベンダープレフィックスでした。
しかしそれはもう過去の事であり、今のOperaはBlink（WebKitから分岐したHTMLレンダリングエンジンで、Chromeもこれをベースにしている）を使用しているので -webkit-* を使用する事になります。
-o-* とかいうベンダープレフィックスを使用していたら、はっきり言ってヤバイです。

会社さんにもよりますが、よく聞くのが「IE 11以上、その他は最新2バージョンまで対応する」という定義で統一されているらしいです。

これより古いブラウザを使用している人って…笑
少数だと思うのでそこまでカバーするほうが会社としても非効率かなと思います。

ちなみにこのベンダープレフィックスはコピペで入れるものではありません。このようなものを手動で入れるのは人間の仕事ではありません。またコードの整形なども手動で行うことは人間の仕事ではありません！

信じられないことですが、初心者でなくても基本的な知識がないままやり過ごしている人も中にはいます。非効率なことは意味がないので、今すぐに自動でできるよう、エディタの設定を行ってください。

Adobe XD

adobe社のソフト。illustratorやPhotoshopと使い分けが可能。(illustratorやPhotoshopが使用できることが前提です。)
何が何でも時短で済ませたい方は、全てXDで済ませている感じ。

XDは、illustratorみたいに細かな図の作成はできないし、Photoshopみたいに細かに写真の加工もできないのですが、レイアウト作成などサクサクできるところが魅力です。デザインを複数で共有できたり、プロトタイプで実装を確認できるのもよいところ。

私自身もデザインをするときは、ほぼXD使用です！

長けたエンジニアさんの中には、figmaしか勝たん！と言っている人もいますが、私はまだ使用したことがないのでまた次の機会に研究してみます！

sass

Sassは「Syntactically Awesome StyleSheet」の略らしいです。

Syntactically ＝文法的に
Awesome ＝すごい
StyleSheet = スタイルシート

なんじゃそりぁ！って感じですよね。

sassで出来ること

cssは親セクレタを何回使いまわすのー！？てぐらいコピペしてますが、この親セクレタをコピぺする必要がなくなります。

セレクタやプロパティのネストで記述量が減る
一度定義したスタイルのセットを簡単に呼び出せる
複雑なコードも再利用できる
変数で値を使いまわすことができる
四則演算ができる
関数が使える

大規模なサイトを複数で取り掛かる場合は、効率的でメンテナンス性も優れています！
ただ制作会社さんによっては、「sassできないとか…え？？」って感じのところもあるかと思います。

委託業務の場合もsass納品もあるって聞いたことあります！。

会社によっては、テンプレートがあったり記述の仕方が決まっていて『sassを使う機会がない』という場合もあるのですが、部分的にsassを使用してる人も多くいます。ネストだけの使用でも、かなり手間が省けるので試しに使用してみることをお勧めします。

また、先ほどご紹介したvisual studio codeにはショートカットキーがあるので、組み合わせることでいちいちマウスを触ったりという作業が減ります。

gulp

フロントエンド開発に必要な処理を自動化できるツールで、「タスクランナー」と言います。
タスクランナーを使うことによって、作業の効率化や手作業によるミスの防止になります。
次のような処理を自動で行えます。

gulpで出来ること

Sassのコンパイル
HTML/CSS/JavaScript の圧縮・最適化
スプライト画像の生成
テンプレートエンジンの導入
HTMLコメントの削除

こちらも膨大な大規模サイトを作成するときに使用したほうが楽！！

ホームページ制作会社によってはピンからキリまであって、主婦のアルバイトをコーダーや更新の修正目的でたくさん雇っている会社さんなどは、gulpまでは使用してない場合があります。

私も実務ではgulpは使用していなかったのですが、慣れたら圧倒的に楽だなと感じたのでランディングページやトップページの時は使用することにしました。フリーランスにとっては時短命です！！

Gulpを利用するためにはNode.jsをインストール必要があります。Windowsの場合は最初からいろいろしなくてはなりませんので、少々面倒くさいです。その点、Macの場合はプログラミングの環境構築が標準らしいので楽だと聞いたことがあります。（Rubyとか標準らしいです。）

使用してみて…エンジニアらしくコードを打ちまくりたい。黒い画面が好きな人はいいのではないでしょうか笑
でもコードを自動で圧縮したり、画像の最適化を自動で出来るので本当にすごい！！

ただし、ランディングページ以外、ページ数がかなりある場合はセットでテンプレートエンジンを使用しないと意味がないんじゃないかなと思いました。

テンプレートエンジンとは・・・

静的HTMLの量産時は、同じHTMLを繰り返し記述・修正したり、最終的にはシステムで出力されて不要になるHTMLを書くといった場面が多く、とても効率が悪いのですが、JSテンプレートエンジンにはDreamWeaverと同様なテンプレート機能があるため、これらの二度手間や無駄を省くことが出来ます。

私はEJSしか使用したことありませんが、EJS以外にも色々あるみたいです。

会社によっては、DreamWeaverは使用してない場合が多いみたいです。
理由としては、費用が高い。重い。
イラレと併用するとしたらパソコンのメモリーは16GBじゃないとキツイんじゃないでしょうか。メモリー8GBでギリだと思います。しかもデザインビューとか使っている人いるの？？て感じです笑

DreamWeaverは現在はかなりいろんな機能が搭載されています。gitやsassもあります。
しかし、ありすぎてメモリを大量に消費し、重くなります。

なのでコードを爆速書きまくりたい！というプロの方はスマートなvisual studio codeみたいな軽量のエディタを皆さん選ぶということです。

Git

Gitとは、分散型バージョン管理システムです。といっても分かりにくいのですが、ざっくりいうとファイルのバージョン管理が簡単にできるツールといえます。

しかし、Gitで管理しているファイルであれば、コンピューター上でファイルの編集履歴を管理できるので、編集前のファイルを残したまま、新しく編集したファイルを保存することができます。なので古いバージョンから新しいバージョンまでの管理が簡単です。

プログラマーにとっては、多くのコードを編集した上で何か不具合が起きたときに、元のバージョンへ戻すことは日常茶飯事です。かといって、ひとつひとつコードの編集の度に古いバージョンの日付や時刻ををつけて保存して、また新しい作業をするようなことをしていては、時間はかかりますし、人的ミスも増えることは、いうまでもありません。そういった作業を無駄なく、効率的に行うためのツールがGitです。

膨大なサイトを複数で作成する場合に、使用されています。

Gitで出来ること

古いバージョンに簡単に戻せる
新旧のファイルを一元管理できる
編集した履歴を複数人で共有できる
複数人で修正した部分を一つに統合できる

これも一年前までは使用していたけど…もう忘れちゃいました…笑

複数人で作業を行わなくても、個人だけでもローカルに保存しておくなど使用の方法はいくらでもあります。

黒い画面でコードを書くのが苦手な方は、アプリで操作できるものもあります。エンジニアなので、黒い画面でコードを書くのが普通！って思ってる人もいると思いますが、システムエンジニアの方でも、アプリを使用している会社さんはあるみたいです。SourceTreeさんとか有名です。WindowsだとTortoiseGitさんがあります。

本はこちらで勉強しました！

CSS設計は重要！

CSSの打ち方については個人それぞれ…というイメージなのですが、大規模なサイトの作成になると、複数の人が手を加えるので、メンテナンス性を保つためにある程度ルールを決めましょう！という感じです。

参考記事

【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ | Web Design Trends

CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。ページ数が...

BEM

・Block
枠組みとなる要素のこと。セクションやコンテナをBlockとして扱うケースが多いです。

・Element
Blockの中に存在する子要素のこと

・Modifier
BlockやElementを修飾するもの。activeやlargeのように状態を管理する場合もModifierで指定するようにします

BEMは、細かくクラス名を指定するCSSの設計手法です。スタイルの使い回しが少なく、クラス名によってある程度使用されている範囲が絞られるため、CSSを修正した時の影響範囲が小さく、メンテナンスコストを少なく抑えることができます。

例えば、ある要素のスタイルを変更したいときに、CSSのコードが色々な場所に存在するとそれぞれの依存関係や影響を考えなければなりませんが、BEMの場合はHTMLの要素のスタイルを記述しているCSSのコードの箇所を見つけやすく、メンテナンスのしやすさが特徴的です。

コードを見れば、どこの場所かが明確！

ただし、これによってクラス名が長くなってしまうというデメリットもあります。

OOCSS

OOCSS（オーオーシーエスエス）は、「Object Oriented CSS（オブジェクト指向CSS）」の略語で、Yahoo!の開発者であるNicole Sullivanによって提唱されたCSSの設計手法です。

OOCSSは「構造と見た目を切り離す」という考え方をベースにルールが作られています。

レイアウトに関係するスタイルと、レイアウトに関係無いスタイルを分けて記述するという考え方が「構造と見た目の分離」です。

一度使用したコンポーネントを別の箇所で使用した時にスタイルが変わらないようにすることができるため、再利用性が向上します。

SMACSS

SMACSS（スマックス）とは、「Scalable and Modular Architecture for CSS」の頭文字を取った言葉で、よく使われるCSSの設計手法の1つです。

・ベース
bodyやinputなど、要素にスタイルを指定するものを指します。ベースルールの中にCSSリセットも含まれます。

・レイアウト
レイアウトは、その名の通りページのレイアウトを指定するものを指します。

・ステート
ボタンやタイポグラフィなど、コンポーネントのようなパーツのことを指します。ステート.is-errorや.is-activeなど、状態によって見た目が変化する場合のスタイルを指定するものを指します。

・テーマ
ベースカラーやメインカラーなど、デザイン全体で統一されるべきスタイルのことをテーマと呼びます。

例えば、class="button bg-red"のようにbuttonクラスとbg-redクラスにそれぞれスタイルを指定することで、ボタンを再利用するときや背景色に赤を使用する場面で上記のクラス名を指定するだけでスタイルを指定することができます。

BEM、OOCSS、SMACSSの3つのCSSの設計手法がありますが、いずれもメリットとデメリットがあり、最も優れたCSSの設計手法というものは存在していません。

今回の案件は、BEMでやります！とか会社によって案件ごとに決める場合があるみたいです。

本はこちらで勉強しました！

WordPress

職業訓練校やスクールに通っている人は、必ずといってもよいほど学ぶものですね。
ただ近年、クラシックエディタからブロックエディタ（Gutenberg）に変更されてから色々と変わってきています。

今までクラシックエディタで自社でhtmlからphpに変換して作成していたのものが、ブロックエディタで今までできなかったことが出来始めたので、やり方が少々違ってきているのかな…と個人的に感じました。

もしこれから面接を受けたりされる方は、会社によっては有料テーマを使用したり…と案件によっていろいろ変わってくるので最低限、管理画面の使い方や仕組みなどはわかっておけばよいのではないかと思います。クラシックエディタしかしらない…という方はいますぐやめてブロックエディタにしてください！

WordPressの公式サイトではClassic Editorのサポートは2021年12月31日までと告知されています。

あとはワードプレスのテンプレートタグ。これもアップデートされるたびに古いコード、非推奨のコードなど出てくるので注意が必要です。今から本を買おうと思っているかたはブロックエディタに対応したもの、なるべく最新なものを買うようにしてください。
なんとなくわかる方はリファレンスを一度読むといいかもしれません。使用方法も書いてあるし一番確実です。