KRBの提案__2_.pdf

Transcript

1. 黒子の提案
2. 仕様書、技術概要 • フォルダー再構成 • コーディングスタイル：BEM標準化 • ビルドツール：Gulp 4.0 • 軽くLintの自動的な修正機能を使う • SCSSをもっと生かす • JS：ES6標準 • もっと役に立つHelperを書き直す • BEと関係するところは弄ってない • 他：Prettier使う（SCSS、JS、HTML） * 納品守りながら、改善するのでまだまだ触ってないところがある！
3. フォルダー構成 • Assets : 端末用のファイル、ビルドされたファイル • Config : lint周りの設定（ Optional ） • Src : 元のファイル、ビルドされてないソース
4. SCSSの中身の構成 基本的に、各ページのスタイルは二つのファイルだけから呼び出す Indexの中に、Index特用のソースだけ入ってる、共通部分は common.scssから呼び出す
5. SCSSの中身の構成 Common.scss • 共通部分が入ってる • 不要なところが入ってないようにパーツに分けます ローカルナビゲーション ネガキ用：sale_list.scss タグ集用 : tag_list.scss 使わない時はただコメントアウトで OK！ • Header , footer 含む
6. 新しいHelperの紹介 SCSSの変数、関数を使う ! SCSSのmixinを徹底的に生かす ! 、Importしても、Includeしないと読まない！ SCSSのループを使う CSSのセレクターを徹底的に生かす！ 実用的が良い！
7. 新しいHelperの紹介 カードレイアウトはいつもより簡単！
8. 新しいHelperの紹介 　　カードレイアウトはいつもより簡単！ 　　　Media-queryも分かりやすい！ これだけでできるとは！
9. 新しいHelperの紹介 やっとフォントヘルパー！
10. 新しいHelperの紹介 元のHelperはループで書き直す！
11. JSの改善 • ES6標準で書き直した！、common.jsを見てください！具体は下記！ Arrow function使う Thisってやつをもうやめた！ • 変数名改善：jqueryの変数は “$” を必ずつける • 関数化 • 不要なエベントを削除（window.onload） • スクロールトップのエラーを解決！ この前、body id = top　付けないと、エラーが出てスクロールできない
12. コーディングスタイル（クラス名） BEMの理念をちゃんと理解して、書き直す！ JS系のところは “js”要素を必ずつける！ 全部Prettierで書き直す！ →　静的の中身を流し込む時にHTMLファイルがぐちゃぐちゃにならない！
13. 他 タイプミスを修正！（ pege ） 変数名を略した（ title → ttl ….） Negaki_code 追加！
14. 他 - モーダルのやり方紹介 良いところ： 修正のところを見つけやすい！ Modalの構成をよく見れる !