Slide 1
Slide 1 text
ICS
30 12 8 @ Frontend Conference Fukuoka 2018
#fec_fukuoka
2019
CSS JavaScript
Slide 2
Slide 2 text
( )
@tonkotsuboy_com
Slide 3
Slide 3 text
ICS MEDIA - Web /
https://ics.media/
Slide 4
Slide 4 text
CSS JavaScript
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
1. CSS
2. JavaScript
3.
2019 CSS JavaScript
Slide 7
Slide 7 text
2019 CSS JavaScript
1. CSS
Flexbox
CSS Grid
CSS
2. JavaScript
3.
Slide 8
Slide 8 text
oat
Flexbox CSS Grid
Slide 9
Slide 9 text
justify-content
align-items
Slide 10
Slide 10 text
ex-grow
ex-shrink
Slide 11
Slide 11 text
CSS Flexbox 3
.container {
display: flex;
justify-content: center;
align-items: center;
}
Slide 12
Slide 12 text
justify-content: space-around
Flexbox
ex-start calc()
Slide 13
Slide 13 text
Flexbox
header
aside
main
nav
footer
Slide 14
Slide 14 text
2019 CSS JavaScript
1. CSS
Flexbox
CSS Grid
CSS
2. JavaScript
3.
Slide 15
Slide 15 text
Flexbox
CSS Grid
Slide 16
Slide 16 text
CSS Grid
(row)
(column)
(row)
(column) (column)
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
HTML
![]()
今⽇のうに
header
aside
main
nav
footer
Slide 19
Slide 19 text
Edge
Chrome Firefox Safari Edge
Internet
Explorer
Safari
(iOS )
Chrome
(Android )
71 63 12 18 11 12 71
Grid
は
Slide 20
Slide 20 text
CSS Grid
Slide 21
Slide 21 text
CSS Grid
1. display: grid
2.
grid-template
3.
grid-area
Slide 22
Slide 22 text
HTML
ʢϝΠϯϏδϡΞϧʣ
ʢࣈʣ
ʢςΩετʣ
ʢ̏ຕͷࣸਅʣ
Slide 23
Slide 23 text
1.
Slide 24
Slide 24 text
.container {
display: grid;
}
1.
Slide 25
Slide 25 text
2.
(row)
(column)
(row)
(column) (column)
Slide 26
Slide 26 text
2-1.
40% 1fr
120px
1fr
220px
Slide 27
Slide 27 text
2-2.
visual
visual
number expression
other other
Slide 28
Slide 28 text
2-3. grid-template
.container {
grid-template:
"visual number expression" 1fr
"visual other other" 220px /
40% 120px 1fr;
}
Slide 29
Slide 29 text
2-3. grid-template
.container {
grid-template:
"visual number expression" 1fr
"visual other other" 220px /
40% 120px 1fr;
}
Slide 30
Slide 30 text
3.
Slide 31
Slide 31 text
3-1. grid-area
visual
visual
number
other
.visual {
grid-area: visual;
}
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
3-2.
.visual {
grid-area: visual;
}
.number {
grid-area: number;
}
.expression {
grid-area: expression;
}
.other {
grid-area: other;
}
visual
visual
number expression
other other
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
800px 3 2
4.
@media (max-width: 800px) {
.container {
grid-template:
"visual visual" 100vw
"number expression" 1fr
"other other" auto /
120px 1fr
}
}
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
oat
1 Flexbox
Grid
Slide 39
Slide 39 text
2019 CSS JavaScript
1. CSS
Flexbox
CSS Grid
CSS
2. JavaScript
3.
Slide 40
Slide 40 text
Microsoft Edge
CSS
Slide 41
Slide 41 text
img
HTMLίʔυ
HTMLίʔυ
Slide 42
Slide 42 text
object- t
2017 10 Edge v16
img
object- t for Edge (tonkotsuboy.github.io)
img {
object-fit: cover;
}
.image1 {
object-position: 30% 50%;
}
.image2 {
object-position: 0 0;
}
Slide 43
Slide 43 text
SVG CSS Transform
Slide 44
Slide 44 text
SVG transform
(2018 4 Edge v17 )
SVG CSS Transform
UI SVG - ICS MEDIA
/* SVGͷϋʔτਤܗͷΞχϝʔγϣϯʢൈਮʣ */
@keyframes heartAnime {
0% {
transform: scale(0);
}
60% {
transform: scale(1.2, 1.2);
}
80% {
transform: scale(0.95, 1.05) translate(0%, -3%);
}
100% {
transform: scale(1.0, 1.0) translate(0%, 0%);
}
}
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
mask
2018 10 Edge v18
.mask {
mask-image: url("../images/mymask.png");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
# -Codepen
Slide 47
Slide 47 text
CSS
Can I use CSS
ରԠࡁ
ະରԠ
Ұ෦ରԠ
Slide 48
Slide 48 text
CSS
Edge Chromium
Windows Experience Blog 2018 12
Slide 49
Slide 49 text
Microsoft Edge Chromium
- Togetter
Slide 50
Slide 50 text
2019 CSS JavaScript
1. CSS
Flexbox
CSS Grid
CSS
2. JavaScript
3.
Slide 51
Slide 51 text
CSS
Slide 52
Slide 52 text
Chromium Blog
Chrome Releases
WebKit
The Mozilla Blog
Microsoft Edge Blog
Slide 53
Slide 53 text
Can I use Compare browsers
Can I use...
Slide 54
Slide 54 text
1. CSS
2. JavaScript
3.
2019 CSS JavaScript
Slide 55
Slide 55 text
ES2015 3
ES2015 = ECMAScript2015
ECMAScript = JavaScript
Slide 56
Slide 56 text
let const
String Number Array
Object API
Map Set
Promise
for of
ES2015
Slide 57
Slide 57 text
ES2015 JavaScript
ES2015 2015 6
ES2016 2016 6
ES2017 2017 6
ES2018 2018 6
http://www.ecma-international.org/ecma-262/
Slide 58
Slide 58 text
2019 CSS JavaScript
1. CSS
2. JavaScript
1. ES2016 ES2018
2. 2019
3.
Slide 59
Slide 59 text
Promise
ES2016 ES2018
Slide 60
Slide 60 text
" "
const targetArray = ["ླ", "ాத", "ߴڮ"];
Slide 61
Slide 61 text
indexOf() 0
if (targetArray.indexOf("ాத") >= 0) {
console.log("ాதؚ͕·Ε͍ͯ·͢");
} else {
console.log("ాதଘࡏ͠·ͤΜ");
}
Slide 62
Slide 62 text
includes()
2016 6 ES2016
// ాத͕ଘࡏ͢Δ͔Ͳ͏͔
if (targetArray.includes("ాத")) {
console.log("ాதؚ͕·Ε͍ͯ·͢");
} else {
console.log("ాதଘࡏ͠·ͤΜ");
}
Slide 63
Slide 63 text
Promise
ES2016 ES2018
Slide 64
Slide 64 text
: 00, 01, 02, ..., 12, 13
JS
const second = new Date().getSeconds();
Slide 65
Slide 65 text
10 "0"
let paddedSecond = String(second);
// 10ඵະຬͳΒɺ಄ʹ0Λ༩͢Δ
if (second < 10) {
paddedSecond = "0" + paddedSecond;
}
Slide 66
Slide 66 text
padStart()
(2017 10 ES2017 )
const paddedSecond = String(second).padStart(2, "0");
Slide 67
Slide 67 text
Promise
ES2016 ES2018
Slide 68
Slide 68 text
JSON
Promise
Slide 69
Slide 69 text
then()
Promise
fetch("./myjson.json")
.then(response => {
return response.json()
})
.then(
json => {
const myText = json.myText;
console.log(myText);
},
error => {
console.error(`error : ${error}`)
}
);
Slide 70
Slide 70 text
async/await
2017 6 ES2017
Promise async/await
async function main() {
try {
const json = await (await fetch("./myjson.json")).json();
console.log(Reflect.get(json, "mytext"));
} catch (error) {
console.log(`error : ${error}`);
}
}
main();
Slide 71
Slide 71 text
Promise
ES2016 ES2018
Slide 72
Slide 72 text
const myObject = {
result: true,
members: [
{ id: 1, name: "ླ" },
{ id: 2, name: "ాத" },
{ id: 3, name: "ߴڮ" }
]
};
Slide 73
Slide 73 text
Object.assign()
(ES2015)
const copiedObject = Object.assign({}, myObject);
Slide 74
Slide 74 text
2018 6 ES2018
const copiedObject = {...myObject};
Slide 75
Slide 75 text
2019
JavaScript
Slide 76
Slide 76 text
2019 CSS JavaScript
1. CSS
2. JavaScript
1. ES2016 ES2018
2. 2019
3.
Slide 77
Slide 77 text
null
import
2019 JavaScript
Slide 78
Slide 78 text
" "
user address null
null
const data = {
user: {
address: {
area: "Ԭݝ"
}
}
};
Slide 79
Slide 79 text
null
let areaName;
if (data.user && data.user.address) {
areaName = data.user.address.area;
}
// ·ͨ
let areaName2 =
data.user
&& data.user.address
&& data.user.address.area;
Slide 80
Slide 80 text
Optional Chaining(? )
null
const areaName = data.user?.address?.area;
tc39/proposal-optional-chaining
Slide 81
Slide 81 text
null
import
2019 JavaScript
Slide 82
Slide 82 text
10% " "
: 100 110
function myFunction1(price) {
return Math.floor(price * 1.1);
}
function myFunction2(price) {
return `${price}ԁ`;
}
Slide 83
Slide 83 text
let result = myFunction1(100);
result = myFunction2(result);
// ·ͨ
const result2 =
myFunction2(myFunction1(100));
Slide 84
Slide 84 text
Pipeline Operator |>
const result =
100
|> myFunction1
|> myFunction2;
tc39/proposal-pipeline-operator
Slide 85
Slide 85 text
null
import
2019 JavaScript
Slide 86
Slide 86 text
SPA JS
1 module1.js
import
(main.js)
1 (module1.js)
2 (module2.js)
3 (module3.js)
Slide 87
Slide 87 text
import
export class Module1 {
myMethod() {
alert("Ϟδϡʔϧ1ͷϝιου");
}
}
module1.js
Slide 88
Slide 88 text
import()
import
function onPage1Loaded() {
import('./module1.js');
}
※ onPage1Loaded()ϖʔδ1͕ಡΈࠐ·Εͨͱ͖
࣮ߦ͞ΕΔఆͷՍۭͷίʔυ
Slide 89
Slide 89 text
Promise
import
async function onPage1Loaded() {
const { Module1 } = await import('./module1.js');
const module = new Module1();
module.myMethod();
}
Chrome Safari JavaScript dynamic import - Qiita
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
JS
BigInt 2**53 3
at(), atMap() 3
,
3
Numeric separators
123_456
2
tc39/proposals: Tracking ECMAScript Proposals
Slide 92
Slide 92 text
Optional Chaining Pipeline Operator Babel 7
(2018 8 )
TypeScript
AltJS
Babel 7 Released
Slide 93
Slide 93 text
JavaScript
Slide 94
Slide 94 text
GitHub tc39/proposals
GitHub - tc39/proposals
Slide 95
Slide 95 text
ECMAScript 6 compatibility table
ECMAScript 6 compatibility table
Slide 96
Slide 96 text
Chromium Blog
Chrome Releases
WebKit
The Mozilla Blog
Microsoft Edge Blog
Slide 97
Slide 97 text
1. CSS
2. JavaScript
3.
2019 CSS JavaScript
Slide 98
Slide 98 text
2019 CSS JavaScript
1. CSS
2. JavaScript
3.
1. Autopre xer
2. Prettier
3. Yarn
4.
Slide 99
Slide 99 text
IE 11 CSS Grid
Slide 100
Slide 100 text
IE 11
IE
Windows 10 / IE 11 / 2025 10
Windows 8.1 / IE 11 / 2023 1
Windows 7 / IE 11 / 2020 1
2018 IE 11 statcounter
9%
3%
Slide 101
Slide 101 text
Autopre xer
.container {
display: -ms-grid;
display: grid;
-ms-grid-rows: 1fr 220px;
-ms-grid-columns: 40% 120px 1fr;
grid-template:
"visual number expression" 1fr
"visual other other" 220px /
40% 120px 1fr;
}
.visual {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
grid-area: visual;
}
.number {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: number;
}
.expression {
-ms-grid-row: 1;
-ms-grid-column: 3;
grid-area: expression;
}
.other {
-ms-grid-row: 2;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-area: other;
}
.container {
display: grid;
grid-template:
"visual number expression" 1fr
"visual other other" 220px /
40% 120px 1fr;
}
.visual {
grid-area: visual;
}
.number {
grid-area: number;
}
.expression {
grid-area: expression;
}
.other {
grid-area: other;
}
Slide 102
Slide 102 text
gap
2017 -2018 Autopre xer
Slide 103
Slide 103 text
IE 11
CSS Grid
.main-visual {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
-ms-grid-row-span: 2;
}
.container {
grid-template-rows: 1fr 220px;
grid-template-columns: 40% 120px 1fr;
}
Slide 104
Slide 104 text
Autopre xer IE 11
before .container {
display: grid;
grid-template:
"visual number expression" 1fr
"visual other other" 220px /
40% 120px 1fr;
}
.visual {
grid-area: visual;
}
Slide 105
Slide 105 text
.container {
display: -ms-grid;
display: grid;
-ms-grid-rows: 1fr 220px;
-ms-grid-columns: 40% 120px 1fr;
grid-template:
"visual number expression" 1fr
"visual other other" 220px /
40% 120px 1fr;
}
.visual {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
grid-area: visual;
}
Autopre xer IE 11
after
Slide 106
Slide 106 text
gap
2017 -2018 Autopre xer
Slide 107
Slide 107 text
IE 11 gap grid-gap
margin padding
CSS Grid
.number,
.expression,
.other {
padding: 10px;
}
Slide 108
Slide 108 text
Autopre xer gap IE 11
before .container {
display: grid;
grid-template:
"visual number expression" 1fr
"visual other other" 220px /
40% 120px 1fr;
}
.visual {
grid-area: visual;
}
Slide 109
Slide 109 text
.container {
/* தུ */
gap: 10px;
-ms-grid-rows: 1fr 10px 220px;
-ms-grid-columns: 40% 10px 120px 10px 1fr;
grid-template:
"visual number expression" 1fr
"visual other other" 220px /
40% 120px 1fr;
}
.visual {
-ms-grid-row: 1;
-ms-grid-row-span: 3;
-ms-grid-column: 1;
grid-area: visual;
}
Autopre xer gap IE 11
after
Slide 110
Slide 110 text
gap
2017 -2018 Autopre xer
Slide 111
Slide 111 text
IE 11
IE 11 CSS Grid
1 2 3
4 5 6
7 8 9
1
2
3
4
5
6
7
8
9
IE 11
※ ΞΠςϜશͯಉ͡ҐஔʹॏͳΔ
ࢹ֮తʹΘ͔Γ͘͢͢ΔͨΊʹͣΒͯ͠දࣔͨ͠
Slide 112
Slide 112 text
Autopre xer IE 11
before /* autoprefixer grid: autoplace */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-gap: 20px;
}
Slide 113
Slide 113 text
Autopre xer IE 11
after /* autoprefixer grid: autoplace */
.container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 20px 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: auto 20px auto;
grid-template-rows: auto auto;
grid-gap: 20px;
}
.container > *:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.container > *:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
/* লུ */
※ ࣗಈมͱrepeat()ͷΈ߹ΘͤʹະରԠ
ͳ͓ɺrepeat()ࣗମͷมʹରԠࡁ
Slide 114
Slide 114 text
2019 CSS JavaScript
1. CSS
2. JavaScript
3.
1. Autopre xer
2. Prettier
3. Yarn
4.
Slide 115
Slide 115 text
Prettier
Slide 116
Slide 116 text
Prettier
Prettier · Opinionated Code Formatter
Slide 117
Slide 117 text
Prettier
Prettier · Opinionated Code Formatter
Slide 118
Slide 118 text
Lint Prettier
Lint
Google JavaScript Style Guide
JavaScript Standard Style
Airbnb
Prettier JavaScript
Slide 119
Slide 119 text
Prettier v1.5 HTML
Angular, Vue
Prettier HTML
{
"htmlWhitespaceSensitivity": "strict"
}
.prettierrc
Slide 120
Slide 120 text
2019 CSS JavaScript
1. CSS
2. JavaScript
3.
1. Autopre xer
2. Prettier
3. Yarn
4.
Slide 121
Slide 121 text
Yarn
Slide 122
Slide 122 text
npm
npm
Facebook Yarn
npm Yarn 4 - ICS MEDIA
Slide 123
Slide 123 text
webpack
Yarn
npm 8.2
Yarn 3.5
npm v6.4.1ɺYarn v1.10.1Ͱݕূ
Slide 124
Slide 124 text
node_modules
node_modules
Slide 125
Slide 125 text
Yarn Yarn
Slide 126
Slide 126 text
project/package.json
{
"private": true,
"workspaces": ["workspace-a", "workspace-b"]
}
Slide 127
Slide 127 text
project/workspace-a/package.json
{
"name": "workspace-a",
"dependencies": {
"express": "^4.16.4",
"node-sass": "^4.10.0",
"typescript": "^3.2.2"
}
}
{
"name": "workspace-b",
"dependencies": {
"node-sass": "^4.10.0",
"typescript": "^3.2.2"
}
}
project/workspace-b/package.json
Slide 128
Slide 128 text
yarn install
Slide 129
Slide 129 text
2019 CSS JavaScript
1. CSS
2. JavaScript
3.
1. Autopre xer
2. Prettier
3. Yarn
4.
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
React: Create React App
vue: Vue CLI
Angular: Angular CLI
CLI
Slide 132
Slide 132 text
webpack
CLI webpack
CLI
Slide 133
Slide 133 text
Sass Babel TypeScript Alt
TreeShaking
2018 1 v1.9
Babel 7 TypeScript 3
2018 9 v1.10
Parcel
Parcel TypeScript - Qiita
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
CSS JavaScript
Slide 136
Slide 136 text
Copyright 2018 ICS INC. All rights reserved.
@tonkotsuboy_com
ICS MEDIA Twitter
ics.media