---
# System prepended metadata

title: 静的コーディングの概論
tags: [training]

---

###### tags: `training`

# 静的コーディングの概論

## 大まかな制作フロー
通常のフローですと、Wpのテーマ制作前に静的状態のコーディングを完成させます。
大まかな全体フローは下記になります。

```
スタティックコーディング　    ←今ココ
    ↓
Wp開発(スタティックをもとにテーマを制作、処理の追加、データの登録など)
    ↓
社内アップ
    ↓
チェックバック対応
    ↓
テストアップ
    ↓
クライアントチェックバック対応
    ↓
リリース
```

## スタティックコーディングでの作業領域
実装する領域ですが、大まかに分けて`phpでの処理以外の部分` となります。
例を上げると
- マークアップ(html ←pug(旧jade)を編集)
- スタイリング(css　←scssを編集)
- jsの実装
    - ハンバーガーナビゲーション
    - アコーディオン
    - api利用の処理(google map,instagram,youtube等)
    - スクロールに合わせた演出処理
- デザインの再現（カンプ合わせ）
- 対応ブラウザでのチェック

などになります。

## スタティックでテストアップの場合もある
案件によりますが、wpテーマ制作前のこの状態で、一旦ディレクター、デザイナーに確認していただくフェーズを挟むことがあります。
これは下記の点において有効です。
- テーマ組み込み後にトータルの修正をするとボリュームが大きくてスケジュールを圧迫する
- 組込前段階でデザイン面でのチェックを済ませておくことで、組み込み後は入出力などのphp,wp由来の修正事項に切り分けることができる

スタティックでチェックを依頼する際は、テスト環境にアップし、関係各位にslackで通知してチェックを依頼します。課題管理シートに修正点が記入されますので、対応します。

## 基本的なフロー（マークアップ → スタイリング）
基本的な実装の順序としては、html(pug)のマークアップのあと、styleの調整をする流れとなります。
マークアップを最初に済ませることで、html側の構成を把握しやすいほか、セマンティックなマークアップを意識できるようになります。また、html,cssの両方を行き来するより効率的にコーディングできる利点があります。

### セマンティックとは
>セマンティックとは、「意味を持たせる」という意味です。
>つまり、HTMLタグ自体に意味を持たせて、内容を分かりやすく検索エンジンに伝える記述方法。

文書構造のアウトラインがつかめます。

>https://developer.mozilla.org/ja/docs/Glossary/Semantics
>https://bsj-k.com/html5-semantic-markup/

## pugとは
> https://and-ha.com/coding/what-is-pug/
> https://qiita.com/yun_bow/items/d21586b51f87d781a857
