今回は自分自身がフロントの開発をする上で意識していることを書こうと思います。
なので前に書いた記事よりもゆるい内容になってると思います。
また今回の記事は、最近僕が担当した案件でDjangoを使ってフロント開発をしたのでDjangoでのフロント開発を例に書きますのであらかじめご了承ください。
まず、自分がフロントを開発するにあたって気をつけてることは
- 破綻しづらい構造やコードになっているか
- 誰が見てもわかりやすいディレクトリ構成になってるか
- コードが読みやすいか
- 一つのファイルのコード量が多くなっていないか
などを考えながら構築しています。
あくまで自分の中で意識したことなので、人それぞれだと思います。
少しでもフロントを始める人には参考になれば幸いです。
ページごとにディレクトリを作る
Nuxt.jsですと、pageディレクトリが存在して、その中で各ページのvueファイルが展開されます。
Djangoの場合だと、ルートディレクトリに各ページのディレクトリを作成しました。
.
├── hoge1
│ ├── __pycache__
│ ├── static
│ ├── templates
│ └── views
├── common
│ ├── __pycache__
│ ├── static
│ ├── templates
│ ├── templatetags
│ └── util
├── config
│ ├── __pycache__
│ ├── settings
│ └── static
├── hoge2
│ ├── __pycache__
│ ├── static
│ ├── templates
│ └── views
└── hoge3
├── __pycache__
├── static
├── templates
└── views
こんな感じです。
commonディレクトリには共通のテンプレートだったり、共通のテンプレートで使ってるimage画像や共通のjsなどが配置されています。
configディレクトリはsettingsファイルがあります。
settingsディレクトリ内では
.
├── __init__.py
├── base.py
├── development.py
├── production.py
└── staging.py
のように各環境ごとのsettingsファイルを作って配置してます。
hoge..は各ページごとのディレクトリになってます。
hoge..内にあるstaticディレクトリにはそのテンプレート内でしか使用しないscssファイルやimageファイル、jsファイルなどが配置されています。
.
├── images
│ ├── hoge.svg
│ └── hogehoge.svg
├── js
│ └── hoge.js
└── scss
└── hoge.scss
こんな感じになってます。
この構成だとこのページでどのscssやimageが使われているのかが明確に分かります。
scssの導入
こちらもフロントやってる方ならおなじみのscssです。
scssのメリットとしては
- 入れ子にできる
- 変数化ができる
- 継承が使える
- ファイルの分割管理が楽
他にもループができたり、css内で演算ができたりと色々なメリットがあります。
個人的には入れ子にできるので全体的なコード量の削減ができていいと思ってます。
ただネストを深く書きすぎると逆に読みにくくなるので注意です。
Djangoでのscssの導入は簡単です。
pip install libsass django-compressor django-sass-processor
で必要なモジュールをinstallします。
- libsass
- コンパイラー
- django-compressor
- js、cssファイルを圧縮できるモジュール
- django-sass-processor
- sassプロセッサー
次にsettings.pyの編集です。
INSTALLED_APPSにsass_processorを追記します。
INSTALLED_APPS = [
'sass_processor',
]
次に下記を追記します。
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')
SASS_PROCESSOR_INCLUDE_FILE_PATTERN = r'^.+\.scss$'
SASS_PRECISION = 8
SASS_OUTPUT_STYLE = 'compressed'
SASS_TEMPLATE_EXTS = ['.html', '.haml']
- SASS_PROCESSOR_ROOT
- 生成された* .cssファイルを配置するディレクトリを指定
- SASS_PROCESSOR_INCLUDE_FILE_PATTERN
- sass/scssファイルでは、アンダースコアなしでファイルをインポートする必要があるため、正規表現で設定
- SASS_PRECISION
- 出力されたcssの浮動小数点を設定
- SASS_OUTPUT_STYLE
- コンパイル結果のコーディングスタイルを設定
- SASS_TEMPLATE_EXTS
- 対象の拡張子からsass/scssを取得するための指定
最後にtemplate側で
{% load sass_tags %}
を追加するとscssをtemplate側で呼び出すことができます。
bem記法
フロントを開発する時に命名規則としてbem記法を使っています。
bem記法の説明に関してはこちらの記事がかなりわかりやすく書かれているので、ご覧ください。
共通パーツは全てcommonディレクトリ内に配置する
例えばheaderやfooterなど、どのページでも再利用する部分はcommon/templates内に作り、baseのtemplateにincludeさせる形にします。
また、baseのtemplate内で各ページのtemplateを出力しています。
こうすることでかなりシンプルなコード構造になります。
個人的には2箇所以上で使う部分はすべて共通のtemplateとして扱っていいと思っています。
まとめ
結構フロントを開発する上で基礎的な部分を書きましたが、意識しないで開発するとすぐ破綻するコードになってしまうのでちゃんと意識することが大事です。
そうすれば新規での開発や既存のコードの改修などがし易くなると思います。
明日は@you8さんが書きます。
お楽しみに〜。