Slide 1
Slide 1 text
̏େϑϨʔϜϫʔΫʢAngular, React, Vue.jsʣൺֱʹΑΔ
ΤϯλʔϓϥΠζ Web ΞϓϦέʔγϣϯ։ൃͷ࠷దԽ
ࠤ ඒ༤
Ξγϥεגࣜձࣾ
දऔక
AD16
Slide 2
Slide 2 text
ࣗݾհ
ࠤɹඒ༤
"TIJSBT
JOD
$IJFG&YFDVUJWF0⒏DFS8FC"QQMJDBUJPO&OHJOFFS
.JDSPTPGU.PTU7BMVBCMF1SPGFTTJPOBM .71
)5.-&YQFSUTKQ
"OHVMBS+BQBO6TFS(SPVQ
IUNMK
!BMCBUSPTBSZ
Slide 3
Slide 3 text
݄ʹઃཱͨ͠ਆށʹ͋Δ
ϑϩϯτΤϯυઐͷձࣾ
Slide 4
Slide 4 text
ΞδΣϯμ
Web Application
A Comparison of JavaScript Framework
Getting Started
DevOps for Front-end
Slide 5
Slide 5 text
Web Application
Slide 6
Slide 6 text
Web αΠτͱҧ͏ʁ
Slide 7
Slide 7 text
Application
Web Site
Slide 8
Slide 8 text
Web ΞϓϦέʔγϣϯͷʑجૅ
Slide 9
Slide 9 text
࠷ݶඞཁͳͷ
CSS
PRESENTATION
JS
BEHAVIOR
HTML
STRUCTURE
Slide 10
Slide 10 text
ඞཁʁ
Slide 11
Slide 11 text
ҋ
CSS
Slide 12
Slide 12 text
͖ʁ
Slide 13
Slide 13 text
ϓϩάϥϜΛॻ͘ͱ͖ؾʹ͢Δ͜ͱ
Մಡੑ
ϦϑΝΫλϦϯά
࠶ར༻ੑ
ςετ
etc.
Slide 14
Slide 14 text
Piece
Slide 15
Slide 15 text
Component
Slide 16
Slide 16 text
Atomic Design
Slide 17
Slide 17 text
Atomic Design
Slide 18
Slide 18 text
σβΠφʔͷࣄ
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Web Components
Slide 22
Slide 22 text
Web Components
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
ϐʔεʹ໊લΛ͚Δ
ϐʔεͷ༷
ϐʔεΛύζϧʹΊΔ
ϐʔεͰ͋Δ͜ͱΛओு
Slide 23
Slide 23 text
HTML Imports
HTML Templates
Custom Elements
Shadow DOM
Slide 24
Slide 24 text
Custom Elements
৽͍͠ཁૉΛొ͢Δ
var XFoo =
document.registerElement('x-component');
ΧελϜλάΛΠϯελϯεԽ
Slide 25
Slide 25 text
HTML Templates
Template used
hoge
div {
font-size: 20px;
}
console.log('x-component.html');
Slide 26
Slide 26 text
HTML Imports
Slide 27
Slide 27 text
Shadow DOM
var imports =
document.querySelector('link[rel="import"]').import;
var templates = imports.querySelector('template');
var contents = templates.content;
var xcomponents = document.querySelector('x-component');
xcomponents.createShadowRoot().appendChild(
contents.cloneNode(true)
);
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
OOCSS
BEM
SMACSS
Slide 30
Slide 30 text
OOCSS
BEM
SMACSS
Slide 31
Slide 31 text
Scoped CSS
Slide 32
Slide 32 text
JavaScript
Framework
Slide 33
Slide 33 text
JavaScript
Framework
Slide 34
Slide 34 text
Web Application
Framework
Slide 35
Slide 35 text
A Comparison of JavaScript Framework
Slide 36
Slide 36 text
ͲͷϑϨʔϜϫʔΫΛ͏͔ʁ
ֶशίετ
ཁһ֬อ
։ൃͷ༰қੑ
࣮ߦ
ӡ༻ίετ
Slide 37
Slide 37 text
ͲͷϑϨʔϜϫʔΫΛ͏͔ʁ
ֶशίετ
ཁһ֬อ
։ൃͷ༰қੑ
࣮ߦ
ӡ༻ίετ
Slide 38
Slide 38 text
Getting Started
Slide 39
Slide 39 text
γϯϓϧʹ࢝ΊΔ
- QuickStart
Slide 40
Slide 40 text
Angular
$ npm install -g @angular/cli
$ ng new hello-angular
$ cd hello-angular
$ ng serve
Slide 41
Slide 41 text
Angular
$ npm install -g @angular/cli
$ ng new hello-angular
$ cd hello-angular
$ ng serve
Slide 42
Slide 42 text
Angular
Slide 43
Slide 43 text
Vue.js
$ npm install -g @vue/cli
$ vue create hello-vue
$ cd hello-vue
$ yarn serve
…
<script>
Slide 44
Slide 44 text
Vue.js
Slide 45
Slide 45 text
React
$ npm install -g create-react-app
$ create-react-app hello-react
$ cd hello-react
$ yarn start
$ yarn eject
Slide 46
Slide 46 text
config/webpack.config.dev.js
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName:
‘[name]__[local]___[hash:base64:5]’
},
Slide 47
Slide 47 text
config/webpack.config.prod.js
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
minimize: true,
sourceMap: true
},
Slide 48
Slide 48 text
App.js
// import ‘./App.css’;
import styles from ‘./App.css’;
class App extends Component {
render() {
return (
Slide 49
Slide 49 text
App.css
/* .App-logo { */
.AppLogo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
/* .App-header { */
.AppHeader {
ackground-color: #222;
height: 150px;
Slide 50
Slide 50 text
App.js
Slide 51
Slide 51 text
Angular CLI
add Add support for a library to your project.
new Creates a new directory and a new Angular app.
generate Generates and/or modifies files based on a schematic.
update Updates your application and its dependencies.
build Builds your app and places it into the output path (dist/ by default).
serve Builds and serves your app, rebuilding on file changes.
test Run unit tests in existing project.
e2e Run e2e tests in existing project.
lint Lints code in existing project.
xi18n Extracts i18n messages from source code.
run Runs Architect targets.
eject Temporarily disabled. Ejects your app and output the proper webpack configuration and scripts.
config Get/set configuration values.
help Help. version Outputs Angular CLI version.
doc Opens the official Angular API documentation for a given keyword.
Slide 52
Slide 52 text
DevOps for Front-end
Slide 53
Slide 53 text
͍ͭࠒ
ݟΕ·͔͢ʁ
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Project Management
Slide 56
Slide 56 text
GitHub
ϓϩδΣΫτཧʢਐḿɺλεΫɺ୲ʣ
Ϟδϡʔϧཧ
ίʔυϨϏϡʔ
υΩϡϝϯτཧ
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
Cloud
Slide 59
Slide 59 text
Microsoft Azure
ϦϦʔεɾαʔό
ϞοΫɾαʔό
σϞɾαʔό
ͦͷଞ
Slide 60
Slide 60 text
Custom Vision Service
Slide 61
Slide 61 text
Step 1
Slide 62
Slide 62 text
Step 2
Slide 63
Slide 63 text
Step 3
Slide 64
Slide 64 text
OpenAPI
Slide 65
Slide 65 text
Swagger
Slide 66
Slide 66 text
Swagger Codegen
OpenAPI
Document
API
Doc
REST
Client
Module
REST
Server
Module
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
·ͱΊ
Slide 69
Slide 69 text
WebΞϓϦέʔγϣϯ։ൃίϯϙʔωϯτࢦ
։ൃޮΛͲΕ্͚ͩ͛ΒΕΔ͔
ϑϩϯτΤϯδχΞͦ͜ Azure ΛϚελʔͤΑ
https://github.com/albatrosary/decode18/
Slide 70
Slide 70 text
Special Thanks
גࣜձࣾࣛࣇౡ࢜௨ΠϯϑΥωοτ EMAT ϝϯόʔ
Slide 71
Slide 71 text
Ask the Speaker ͷ͝Ҋ
ϒϨΠΫΞτηογϣϯऴྃޙͷٳܜ࣌ؒʹɺ
ొஃͨ͠εϐʔΧʔʹ࣭͍͚ͨͩ͝Δ
ίʔφʔΛ ʮAsk The Speakersʯ Room ʹ
༻ҙ͓ͯ͠Γ·͢ɻηογϣϯ༰ͷΑΓਂ͍
ཧղͷͨΊɺͥͻཱ͓͍ͯͩ͘͞ɻ
■ ʮAsk The Speakersʯ Room
Slide 72
Slide 72 text
ηογϣϯΞϯέʔτʹ͝ڠྗ͍ͩ͘͞ɻ
ެࣜΠϕϯτΞϓϦͰɺʮde:code 2018 ࢀՃऀΞϯέʔτʢඞਢʣʯ ͱ ʮ֤ηογϣϯ
Ξϯέʔτʢ 4 ͭҎ্ʣʯɺ߹Θͤͯ 5 ͭҎ্ ͷΞϯέʔτʹ͝ճ͍ͩ͘͞ɻΕͳ͘
de:code 2018 ΦϦδφϧάοζΛଃఄ͍ͨ͠·͢ɻ
Twitter ͷ͝Ҋ
ຊηογϣϯʹؔ͢Δ࣭͝͝ײɺ#decode18 ͱ ηογϣϯ ID ͷ
ϋογϡλάͰɺ͝ߘΛ͓ئ͍͠·͢ɻ
#decode18 #AD16
Slide 73
Slide 73 text
© 2018 Microsoft Corporation. All rights reserved.
ຊใͷ༰ʢఴจॻɺϦϯΫઌͳͲΛؚΉʣɺ࡞࣌ͰͷͷͰ͋Γɺ༧ࠂͳ͘มߋ͞ΕΔ߹͕͋Γ·͢ɻ