未経験からチーム開発を経験して感じた、事前に身につけておくべきチーム開発スキル

Written by EVOWORX
last 2 versions
not ie <= 11
firefox ESR
not Android < 8
Recommended width breakpoints to support different screen sizes
案件ごとにターゲットとする端末を定め設定してください。
以下に例を挙げます。
(max-width: 414px)
(min-width: 415px) and (max-width: 767px)
(min-width: 768px) and (max-width: 1023px)
(min-width: 1024px) and (max-width: 1279px)
(min-width: 1280px) and (max-width: 1439px)
(min-width: 1440px)
(max-width: 479px)
(min-width: 480px) and (max-width: 719px)
(min-width: 720px) and (max-width: 959px)
(min-width: 960px) and (max-width: 1279px)
(min-width: 1280px) and (max-width: 1439px)
(min-width: 1440px)
small: The minimum layout size for a small screen is approximately 320x426 dp units.
normal: The minimum layout size for a normal screen is approximately 320x470 dp units.
large: The minimum layout size for a large screen is approximately 480x640 dp units.
xlarge: The minimum layout size for an xlarge screen is approximately 720x960 dp units.
Here's how other smallest width values correspond to typical screen sizes:
320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).
480dp: a large phone screen ~5" (480x800 mdpi).
600dp: a 7” tablet (600x1024 mdpi).
720dp: a 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc).
① 1920×1080:27.09%
② 1366×768:12.58%
③ 1536×864:10.37%
① 768×1024:48.94%(iPad)
② 834×1112:7.52% (iPad Air)
③ 1024×1366:4.2% (iPad Pro)
① 375×667:19.36% (iPhone 6/7/8)
② 360×640:14.18%(Android)
③ 375×812:13.19%(iPhone X)
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
indent_style = space
indent_size = 4
trim_trailing_whitespace = false
[*.js]
indent_style = space
indent_size = 2
[{package.json,postcss.json}]
indent_style = space
indent_size = 2
指定がない限りHTML5とする。(UTF-8/LF)
仕様は WHATWG Living Standard (日本語訳)に準拠する。
全て小文字で記載する。 id、class名も全て小文字、単語間はハイフンでつなぐ。
button
main
nav
のような、タグ自体に意味があるものは role
属性は付加しない。基本的にh1は1ファイルに1つ。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header></header>
<main>
<h1></h1>
<section>
<h2></h2>
<section>
<h3></h3>
</section>
<section>
<h3></h3>
</section>
</section>
</main>
<footer></footer>
</body>
</html>
基本的にタグの省略はしない。
基本的には Google HTML StyleGuide と同様にHTMLで使用される<
や&
、&nbsp
などの空白文字以外には使わない方針とするが、¥ © ® ™ は実体参照を使用する。
The only exceptions apply to characters with special meaning in HTML (like < and &) as well as control or “invisible” characters (like no-break spaces).
※hrefのパラメータとしての&
も&
とする。
※Windowsでの「〜」に関してはXPがサポート終了したため対応しない。波ダッシュ、全角チルダ問題まとめ
※空白文字はノーブレークスペース&nbsp;
や単語結合子&#8288;
、ソフトハイフン&shy;
などに相当
デザイン上のマークアップとは別に、ld+jsonで記載
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/books",
"name": "Books"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/books/authors",
"name": "Authors"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.com/books/authors/annleckie",
"name": "Ann Leckie"
}
},{
"@type": "ListItem",
"position": 4,
"item": {
"@id": "https://example.com/books/authors/ancillaryjustice",
"name": "Ancillary Justice"
}
}]
}
</script>
<ol>
<li>
<a href="http://www.example.com/books">Books</a>
</li>
<li>
<a href="http://www.example.com/sciencefiction">Science Fiction</a>
</li>
<li>
<a href="http://www.example.com/books/sciencefiction/awardwinners">Award Winners</a>
</li>
<ol>
LAN/Wi-Fi環境で3秒以内にファーストビューが表示されるようにする。
Javascript Standard Style(日本語訳)に準拠する。
※セミコロン必須の JavaScript Semi-Standard Style も有。
インストール
$ npm install standard --global
$ npm install standard --save-dev
※ .eslinrc
や .jshintrc
のような設定ファイルは不要
プロジェクトのjsフォルダに移動
$ cd (プロジェクトのjsフォルダ)
下記のコマンドを実行
$ standard
※デフォルトでは /*.js
,/*.jsx
が対象
もしくはファイルを指定して実行
$ standard "src/util/**/*.js" "test/**/*.js"
--fix
オプションをつけて実行することで自動的にフォーマット。
$ standard --fix
lint:SublimeLinter+SublimeLinter-contrib-standard
自動フォーマット:StandardFormat
main
とし、このブランチでは作業しない。stage
test
などのブランチを作成し各環境に合わせる。update
{作業内容}
{作業者名}
等、別のブランチに分岐させて作業し、作業完了後は責任者にプル(マージ)リクエストを作成する。1行目に簡単な説明
2行目は空行
3行目以降に詳しい説明(任意)
[10/25更新] ABOUT文言修正
「エヴォワークスとは」→「EVOWORXとは」に修正