見出し画像

初心者が絶対に覚えるべき「40」のコーディング知識

dadada

初心者が絶対に覚えるべき「40」のコーディング知識について解説しているnoteです。40のうちいくつかは無料で読めるようにしているので、無料部分だけでも是非読んでみてください！


はじめまして、だい（@dai_webp）と申します。

私について
都内でフリーランスとして、Webデザイン・コーディング・サーバーサイドなどの仕事をしています
Web業界歴は6年です（制作会社3年→フリーランス3年）

2冊目のnoteになります。他のnoteもおすすめなので是非チェックしてみてください！

＼ NEW（2022/12/5 公開） ／


・・・

150回購入頂けました！（2022年5月時点）

感想や反響をモーメントにまとめました。購入・ツイートして頂いた方ありがとうございました！

▼Twitterモーメント
https://twitter.com/i/moments/1506453336673103872

いくつかの解説は無料で読めます。その部分だけでも役立つ内容がいくつもあるので是非読んでみてください。



Web制作における「必要な力」とは何でしょうか？私は以下2つだと考えます。

・Web制作全般に関する「知識」
・コーディングに関する「スキル」

この2つの力を伸ばすために、Web制作における「スクールや教材では学べない、絶対に覚えておきたいこと」を40のパートに分けて解説するnoteを書きました。

前半は「Web制作全般に関する知識」を解説しています。コーディングやCSS設計の基礎、本来実務で得る知識、ツールを使いこなして開発効率をアップする手法などを解説しています。

後半は「コーディングに関するスキルやテクニック」の紹介です。コーディングのテクニック、NG例、便利なCSSなどをサンプルコードや図解と共に丁寧に解説しています。

前半：Web制作全般に関する知識
・Web制作に関する用語を覚える
・キレイなコードを書けるようになる
・良いCSSの4原則を理解する
・CSS設計の手法を理解する
・クラス名の考え方
・コアウェブバイタルを理解する
・サイトが重くなる原因を理解する
・フロントエンドとサーバーサイドの概念を理解する
・バリデーションを理解する
・お問い合わせフォームはどうやって実装する？
・キャッシュでCSSやJSが反映されない問題
・画像ファイルを適切に管理する
・Gitを理解する
・打ち合わせ時に確認するべきこと9選
・【ダウンロード可能】 Webサイトリリース時チェックシートのスプレッドシート
・【ダウンロード可能】 ガントチャートのスプレッドシート
・公開したサイトが「検索結果に表示されない」と言われた
・法律は守りましょう
・ポートフォリオを作る時に気をつけるポイント
・ポートフォリオに載せる実績がない問題
・キーボードでの操作をマスターする
・VSCodeを使いこなす（複数箇所の同時編集）
・VSCodeを使いこなす（拡張機能）
・【ダウンロード可能】 VSCodeを使いこなす（スニペット）
・適切な学習方法（HTML, CSS・JavaScript・WordPressの3つに分けて解説）
・学習に詰まったら…
・フリーランスになるためにやるべきこと

・・・

後半：コーディングに関するスキルやテクニック
・適切なレスポンシブ対応
・縦横比を維持したレスポンシブ対応
・display: contents で柔軟なレスポンシブ対応
・次世代のレスポンシブ対応手法 「コンテナクエリ」
・便利なイマドキのCSS
・様々なCSSセレクタ
・チェックボックス・ラジオボタンは display: none で非表示にしない
・transition: .2s のような書き方はしない
・z-indexの管理方法
・calc()とvwを使いこなす - 片側だけコンテンツ幅の外へ飛び出すレイアウト
・「要素」や「テキスト」が増えた時を考慮するしてコーディングをする
・画面からはみ出している要素を一瞬で見つける
・CSSプロパティの書く順番
・JavaScriptで要素の取得やスタイルを操作する時はidやカスタムデータ属性を使う
・JavaScriptを書くときに意識すること
・画面幅が小さいスマホのレスポンシブ対応
・【ダウンロード可能】 SassとES6（JS）をコンパイルできるwebpackテンプレート


特に、前半の内容は教材やスクールではなかなか学べない内容が多いので、これを機に様々な知識を得て頂きたいです。

前半の「Web制作全般に関する知識」をしっかりと理解できれば、実案件でトラブルが起きるのを防げます。また、トラブルが起きても適切に対応できるようになります。Web制作にはトラブルは付き物です。いざトラブルが起きた時にスムーズに対応できるかどうかも、Web制作のスキルのひとつです。

また、VSCodeのスニペットやwebpack、便利なスプレッドシートのデータのダウンロードもできるようにしています。


執筆に2ヶ月以上費やした結果、合計45,000文字を超えるボリュームになりました。

私が約6年間（会社員とフリーランス3年ずつ）、仕事をしてきて得た知見を詰め込んだnoteです。

今ならワンコインで読めるので、是非購入を検討してみてください。

いくつかの解説は無料で読めるようにしています



Web制作に関する用語を覚える

Web制作（Webデザイン・コーディングなど）には様々な「専門用語」が存在します。本noteをはじめ、実案件の打ち合わせやブログなどの解説記事にも多数の用語が出てきます。

これらの用語を理解していなければ、その会話や記事自体も当然理解できません。

なので、まずは基本的な用語の解説をしていきます。


## デザイン系

デザインに関する用語も最低限は知っておくべきです。会話の中で自然と出てきます。

UI（ユーザーインターフェイス）
Webサイト上のデザインや文字など、ユーザーが見えるモノのことを総称して「UI」と言います。

UX（ユーザーエクスペリエンス）
ユーザーがWebサイトやサービスを通して得られる体験のことを指します。
例えば、ECサイトで商品をカートに入れてから購入までの操作がシンプルで分かりやすいと「UXが良い」と言えます。UXの中にはUIも含まれます。

アクセシビリティ
ユーザーの属性（性別や年齢）に左右されず、使いやすい製品の場合「アクセシビリティが良い」と言います。

インタラクション
「動き・挙動」という意味です。
「インタラクションを付けたい」と言われたら、動き・アニメーションを付けたいということです。

パララックス
「視差効果」という意味です。
スクロール時にサイト上の要素を異なるスピードで動かすことで、奥行きや不思議なスピード感を演出する手法です。

RGB / CMYK
RGBはWeb上での発色方式で、CMYKは印刷物の発色方式です。
Webサイトのデザインデータを作るときは、RGBの形式でデータを作ります。
まれに支給データがCMYKの時があり、実装後にデザインと色が違うと言われたら、データのカラーモードを確認してみましょう。

MV（メインビジュアル）
サイトに訪れた時に一番最初に目にする部分のことです。
ファーストビューとも言います。

ヒーローイメージ
メインビジュアルと似ていますが、ヒーローイメージは画面いっぱいに写真を使ったメインビジュアルのことを指します。

レンポジ
AdobeStockなどの写真購入サービスの画像のことです。
制作会社でよく使われる用語です。

パーフェクトピクセル
「デザインデータ」と「コーディング後の見た目」を寸分違わずに実装すること。SNSでパーフェクトピクセルするべきか否かでよく議論になっています。
少なくとも今私が言えることは、打ち合わせの際に「デザインデータをどこまで忠実に再現するか」をちゃんと聞いてね。ということくらいです。


## コーディング系

解説記事などでよく使われる用語をまとめました。これらを理解すれば記事の内容もしっかりと理解できるようになります。

インラインスタイル
<div style="color: #f00;"> のように、タグの中に直接CSSを記述すること

属性名（属性）
<div style="color: #f00;"> の「style」のこと（classやidも属性名です）

属性値
<div class="hoge"> の「hoge」のこと

兄弟要素（隣接要素）
同じ階層に並んでいる要素のこと

祖先要素
自分の親にあたる全ての要素のこと

子孫要素（孫要素）
自分の子にあたる全ての要素のこと

セレクター
p { color: #f00; } の「p」のこと

プロパティ
p { color: #f00; } の「color」のこと

値（プロパティ値）
p { color: #f00; } の「#f00」のこと

マイナスマージン、ネガティブマージン
margin の値をマイナスにすること（例：margin-top: -20px）
要素を上や左にズラす時に使います

コンポーネント
要素のパーツのこと
ボタン・タイトルなど小さいものを指す場合が多い


## IT、ビジネス系

最後に、打ち合わせなどでよく出てくる用語です。これらを理解していないと、打ち合わせの内容自体も理解できないのでしっかりと覚えましょう。

デプロイ
別環境にソースコードを反映させること
「環境」とは、ローカル・テスト・本番などを指します

リリース・ローンチ
サイトを一般公開すること

キックオフ
プロジェクトを開始すること
プロジェクト開始時の初回打ち合わせを「キックオフミーティング」と呼ぶこともあります

工数
作業にかかる期間（時間）のこと
時間単位（1h, 2h…）で出すこともあれば、日単位で出すこともある

人日
1人の1日の作業量を1とした指標のこと
例）4人日
・1人作業の場合：4日かかる
・2人作業の場合：2日かかる

バッファ
余裕、ゆとりのこと
「バッファ込みのスケジュールを出して」と言われたら、想定工数ギリギリのスケジュールではなく、何か起きても対処できるくらい余白のあるスケジュールを出せばOKです

リスケ
スケジュールを見直す（延期する）こと

マイルストーン
スケジュールの中の「中間目標」のこと
Web制作でいうと、企画立案・デザイン確定・コーディング完了・リリースなどがマイルストーンになります

WBS
「Work Breakdown Structure」の略で、プロジェクトのタスクを細分化して表で可視化する手法のこと

ガントチャート
進捗を管理するスケジュール表のこと
左側にWBS、右側に日ごとのカレンダーのレイアウトが主流
エクセルやスプレッドシートで作られることが多い
WBSとガントチャートとは

アサイン
プロジェクトメンバーを追加すること

ワイヤー
「ワイヤーフレーム」の略

GA
「Google アナリティクス」の略

サチコ
「Google Search Console」の略

計測タグ
広告やASPなどを計測するために必要なHTMLタグ
主に、<head>タグの中に規定の<script>タグを埋め込みます

TDK
HTMLタグの「タイトル」「メタディスクリプション」「キーワード」の略
キーワードは最近は使われなくなりましたが、昔の名残でこの用語はよく使われます

GIP
「グローバルIPアドレス」の略
グローバルIPアドレスとは

IP制限
特定のIPアドレスでしかサイトを閲覧できないようにすること
basic認証より強固な閲覧制限方法

VPN
特定ユーザーのみが利用できる仮想ネットワークで、特定の拠点にアクセスする仕組みのこと

SSL証明書
SSL化するために必要な電子証明書のことで、サイトの運営者の実在性を証明して認証局から発行してもらいます
SSL化の手順は利用しているサーバーによって異なります
（SSL化したサイトのURLはhttpsでアクセスできます）

リダイレクト
特定のページにアクセスしたら、別のページに転送させること
リニューアルやドメイン変更時にリダイレクトすることが多いです
リダイレクトには2つの種類（301と302）があり、用途によって使い分けます
SEOにも影響を与えるのでしっかりと理解したうえで設定しましょう

API
アプリケーション・プログラミング・インタフェースの略
第三者が用意した機能やデータを使って、新たな機能を実装すること
iframeを使ったGoogleマップの表示もAPIに該当します

静的, 動的
・静的：機能を「持たない」ページやサイト
・動的：機能を「持つ」ページやサイト
機能とは、お問い合わせフォームやjsを使った処理などを指しますが、人によってこの解釈がズレることもあるので気をつけましょう

CMS
コンテンツ・マネジメント・システムの略
専門知識がなくてもサイトを更新できるシステムのこと
CMS機能付きサイトを作るには、既存サービスを用いる or 自作のどちらかになります
既存サービスの有名どころはWordPressやMovable Typeなどになります



キレイなコードを書けるようになる

最近とあるツイートを見かけました。「依頼した実装者のコードが汚かった」というものです。どのように汚かったのかは明記されていませんでしたが、私が思う「キレイなコード」を言語化してみました。

  • 「エンドユーザー」に対するキレイなコード
    デザインを忠実に再現する、画面幅やブラウザを変えても崩れない

  • 「実装者」に対するキレイなコード
    見やすい、正しい、運用しやすい

どちらも大事ですが、あえて優先順位を付けるなら「デザインを忠実に再現する」ほうが圧倒的に大事です。

なぜなら、サイトは実装者（内部の人間）のためではなく、エンドユーザー（外部の人間）のために存在するからです。

勉強中の方でよく、「どのタグを使えばいいか悩む…」「どうやったらCSS設計うまくできるかな…」などの声を見かけますが、なにより優先するべきことは「デザインを忠実に再現して、対象ブラウザや画面幅を変えても崩れないコードを書く力」です。

なので、まずは「エンドユーザー」に対するキレイなコードを書けるようになりましょう。


## デザインを忠実に再現して、対象ブラウザや画面幅を変えても崩れないコード

特にデザインを忠実に再現する力が一番大切です。

全ての案件でパーフェクトピクセルを求められるわけではないですが、最初のうちはパーフェクトピクセルを意識して練習しましょう。実案件では、どのくらいの粒度でデザインカンプを再現するかを打ち合わせの際に聞くといいでしょう。

画面幅（デバイス）が変わった時にレイアウトが崩れてしまうのも、初心者が躓くポイントのひとつだと思います。
コードを書く時は、常にレスポンシブ対応した時のことを考えながら作業しましょう。

また、最近は便利なCSSがたくさんありますが、IEなど一部のブラウザでは動かないことがよくあるので気をつけましょう。


## 見やすい、正しい、運用しやすいコード

見やすい・正しいコードとは以下を指します。

  • 適切なタグでマークアップしている

  • 適切な属性を正しく使っている

  • コアウェブバイタルを意識している（後ほど詳しく解説します）

  • 決められたルールに則ってコードを書いている

  • インデントが統一されている（スペース2つ分がおすすめ）

  • 適切なコメントアウトを残している

  • テキストの無駄な改行がない

// テキストの無駄な改行の例
// NG　→ タグとテキストを改行して書くと、無駄な余白が発生する可能性がある
<p>
text, text, text
</p>

// Good
<p>text, text, text</p>

運用しやすいコードとは、良いCSSと呼ばれる4原則を意識して、CSS設計が適切に導入されているコードです。

・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい

これらについては、次の項で解説します。



良いCSSの4原則を理解する

Googleのエンジニアの方が、良いCSSを以下のように唱えています。

・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい

https://philipwalton.com/articles/css-architecture/

## 予測しやすい

原文
Predictable CSS means your rules behave as you’d expect. When you add or update a rule, it shouldn’t affect parts of your site that you didn’t intend. On small sites that rarely change, this isn’t as important, but on large sites with tens or hundreds of pages, predictable CSS is a must.

上記を要約
あらかじめ決めたルールに則ってコーディングをする。予測できない書き方はしない。

ルールを決めたら、それに則ったコーディングを行います。ルールは決して破ってはいけません。

例えば、CSS設計のFLOCSSを導入するとしたら、クラス名のルールが細かく決まっているので、そのルールに則ってクラス名を命名しなければいけません。

// 例） 共通パーツのクラス名には、接頭辞として c- を付ける

// ルール通りの命名をしている
<button class="c-button">

// ルールに従っていない
<button class="button">

また、複雑すぎる書き方をすると、自分以外がコードを修正するときに理解する時間が必要以上に発生します。

「〇〇を修正したら××が変わる」を一瞬で直感的に理解できるのが理想形です。


## 再利用しやすい

原文
CSS rules should be abstract and decoupled enough that you can build new components quickly from existing parts without having to recode patterns and problems you’ve already solved.

上記を要約
サイト内で使い回せるパーツは、適切に使い回せる仕組みにする。

サイト内で使い回す共通パーツはできるだけ抽象化して作ります。ポイントは以下の通りです。

  • クラス名を具体的にしない
    具体的にすると、クラス名から連想される場所でしか使えなくなります。
    厳密にはどこでも使えるけど、.service-button というクラス名を持つボタンがフォームの送信ボタンだったら変ですよね。

  • 「見た目」と「レイアウト構造」に分けてスタイルを書く
    共通パーツには、「レイアウト構造」のスタイルは書かないようにします。「レイアウト構造」のスタイルとは、margin、width、position などが挙げられます。

共通化は大事ですが、無理に共通化しようとすると逆にコードが分かりにくくなることがあるので、共通化するorしないの適切な判断ができるようになりましょう。


## 保守しやすい

原文
When new components and features need to be added, updated or rearranged on your site, doing so shouldn’t require refactoring existing CSS. Adding component X to the page shouldn’t break component Y by its mere presence.

上記を要約
サイト運用時に既存のCSSの修正は必要最低限で済むようにする。修正による影響範囲は分かりやすいようにする。

サイト運用時には、既存のコードを修正します。

先程の「再利用しやすい」を意識していれば、既存のコードをベースに、新しいコンポーネント（ボタンなどの小さいパーツ）を作ることも容易です。

また、CSSを修正したことによる「予期せぬ表示崩れ」が起きることがあります。「A」のコンテンツの背景色を変えたつもりが「B」の背景色も変わってしまった。このようなことはわりと起きます。

これは、CSSが「どの要素まで影響を与えるか」を把握できていなかったのが原因です。

サイト全体の設計をしっかりと考えていれば、このようなことは起きません。なので、コーディングを始める前に、まずデザインを全体的に確認して、どのようにクラスを命名してスタイルを当てていくかをイメージしてから着手するようにしましょう。


## 拡張しやすい

原文
As your site grows in size and complexity it usually requires more developers to maintain. Scalable CSS means it can be easily managed by a single person or a large engineering team. It also means your site’s CSS architecture is easily approachable without requiring an enormous learning curve. Just because you’re the only developer touching the CSS today doesn’t mean that will always be the case.

上記を要約
他のメンバーが初めてコードを触っても、簡単に仕様を把握して修正や機能の追加ができるようにする。

自分だけが分かればいいや精神はNGです。自分以外の誰かがコードを触っても理解できるようなコードを書くようにしましょう。

複雑な仕様があるならコメントやドキュメントを残すのも重要です。実装中はどんな仕様だったか覚えていても、1ヶ月も経てばその仕様は覚えていないものです。未来の自分自身や他のメンバーのためにも、ドキュメントを残すのはとても大事なことです。



CSS設計の手法を理解する

CSS設計の手法はいくつもあります。有名どころをいくつか挙げておきます。

・OOCSS
・SMACSS
・FLOCSS
・ECSS
・MCSS
・（BEM）
・（TailwindCSS）

※BEMとTailwindCSSは他とは少し立ち位置が違うのでカッコを付けています

CSS設計を一言で表すとこのような感じでしょうか。

ここから先は

36,090字 / 32画像 / 3ファイル

¥ 500

この記事が気に入ったらサポートをしてみませんか？