Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
適当に教える最近のフロントエンド開発第一歩
Search
pvcresin
October 20, 2017
Programming
0
120
適当に教える最近のフロントエンド開発第一歩
最近のフロントエンド開発の第一歩をめちゃくち
ゃ雑に紹介します
https://github.com/pvcresin/testMarp
pvcresin
October 20, 2017
Tweet
Share
More Decks by pvcresin
See All by pvcresin
text-box-trim について 1 分で
pvcresin
0
44
Web IDEの進化とそれを支える技術
pvcresin
0
29
ステップアップOSSコントリビュート
pvcresin
0
440
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
340
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
120
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
350
React はじめの一歩
pvcresin
1
230
Other Decks in Programming
See All in Programming
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
CSC509 Lecture 11
javiergs
PRO
0
180
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.7k
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
Remix on Hono on Cloudflare Workers
yusukebe
1
280
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Ethereum_.pdf
nekomatu
0
460
役立つログに取り組もう
irof
28
9.6k
RubyLSPのマルチバイト文字対応
notfounds
0
120
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
初めてDefinitelyTypedにPRを出した話
syumai
0
400
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
136
6.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
860
Facilitating Awesome Meetings
lara
50
6.1k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Building Adaptive Systems
keathley
38
2.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
For a Future-Friendly Web
brad_frost
175
9.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Transcript
適当に教える 最近のフロントエンド開発 第一歩
自己紹介 @pvcresin 明治大学 宮下研究室 M1(修士1年) 想隆社でWEBのフロントエンドを担当 本職はKotlinでAndroid書くマン 2
はじめに 最近のフロントエンド開発の第一歩をめちゃくち ゃ雑に紹介します (2017/10 現在) 目標は 「へぇ~こういうのもあるんだ~」 フロントエンドの開発環境は,毎年のように移り 変わっていくので,このスライドも 2018/10
には ほぼ使いものにならないでしょう(泣 3
今回使うもの Visual Studio Code https://code.visualstudio.com/ Node.js https://nodejs.org/ja/ Yarn https://yarnpkg.com/en/docs/install 最新版をインストールしておきましょう
あとブラウザはChrome使います 4
ちなみに このスライドは Marp というMarkdownから スライドを生成するツールで作成しました 今回,最終的にできるファイルはここ⬇ https://github.com/pvcresin/testMarp 5
Menu Visual Studio Code Node.js npm / Yarn live reload
Pug PostCSS JavaScript (es6) webpack + Babel 6
エディタの有名どころ Sublime Text 「恋に落ちるエディタ」として名高い 有料だが,無料でもフル機能を使える Atom (by Github) 拡張が多く公開されている Electron製(JSでデスクトップアプリ作る君)
Brackets(by Adobe) ライブプレビューが標準搭載でElectron製 7
Visual Studio Code Microsoftが作ったWeb開発に特価したエディタ OSSで無料 Win / Mac / Linux
対応 Git連携機能やターミナルが標準搭載 Electron製 Ctrl + @ でターミナルが開き,コマンドが使える! 自分の場合: Sublime ➜ Atom ➜ VSCode Bracketsは使ったこと無い 8
Node.js サーバサイドで動くJavaScript Chrome に搭載されている V8 エンジンで動作 フロントエンド開発に無くてはならない 偶数バージョンが長期サポート(LTS)になる node -v
で動くか確認 9
npm Node の Package の Manager 的なやつ 要はライブラリなどを入れるためのツール Node入れたら,だいたいデフォルトで入ってる YarnというFacebookが作った上位互換に押されつ
つある(適当) npmより速い(ときもある) npm -v で動くか確認 10
npmの使い方 npm init で package.json (大事なやつ)を作成 npm init -y でとりあえず空のを作ることも可
npm run xxx で package.json の scripts に定義した コマンドを起動可能( = npm script ) { "name": "testMarp", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "test": "echo hello" } } 11
npmの使い方 npm install --save xxx = npm i -S xxx
package.json の dependencies に依存しているモジ ュールを追記し, node_modules にダウンロード npm install --dev xxx = npm i -D xxx 上の devDependencies バージョン npm install = npm i package.json の依存モジュールを一気に入れる 例: git clone してきたNodeのプロジェクトなど 12
Yarnの使い方 yarn init = npm init yarn = yarn install
= npm i yarn add = npm i -S xxx yarn add -D xxx = npm i -D xxx yarn xxx = yarn run xxx = npm run xxx yarn -v で動くか確認 13
今回使うモジュールの準備 package.json の依存モジュールを写し yarn する "devDependencies": { "babel-core": "^6.26.0", "babel-loader":
"^7.1.2", "babel-preset-es2015": "^6.24.1", "live-server": "^1.2.0", "npm-run-all": "^4.1.1", "postcss-cli": "^4.1.1", "postcss-cssnext": "^3.0.2", "postcss-simple-vars": "^4.1.0", "pug-cli": "^1.0.0-alpha6", "webpack": "^3.7.1" } 14
live reload ファイルを変更して保存したら,ブラウザを自動 でリロードする技術 これを実現する色々なパッケージが存在 live-server , browser-sync など ブラウザをリロードせずに変更した要素だけを入
れ替える Hot Module Replacement という技術もある が今回は難しいので割愛 15
live-serverを使ってみる 1. dist フォルダを作成し,その中に index.html を作成 2. scripts に "watch:browser":
"live-server dist --browser=chrome --watch=/" を追加 3. yarn watch:browser したら, dist/index.html を編集 して保存するとブラウザがリロードする 出力フォルダ名をよく dist にするけど,distribution(配布 物) や district(特定の場所) という説がある 16
Pug(旧Jade) HTMLを楽に書くための定番プリプロセッサ インデントで記述 doctype html html(lang="ja") head meta(charset="UTF-8") title Pug
body h1 Hello HTML2Jadeってサイトが便利 17
pug-cliを使ってみる 1. pug-cli を使用 2. src/pug/index.pug を作成 3. scripts はこんなの
"build:pug": "pug src/pug/index.pug -o dist/ -P", "watch:pug": "npm run build:pug -- -w", yarn build:pug で1度だけビルド yarn watch:pug でファイルの変更を監視( watch ) src/pug/index.pug の更新する度に, dist/index.html に出力 18
npm-run-allを使って並列化 npm scriptを複数指定し,順番または並列に処理で きる 例 run-p build:* build:* にマッチするnpm scriptを
parallel に run するという意味 19
npm-run-allを使って並列化 watch:browser とさっきの watch:pug を組み合わせると "build": "run-p build:*", "build:pug": "pug
src/pug/index.pug -o dist/ -P", "watch": "run-p watch:*", "watch:pug": "npm run build:pug -- -w", "watch:browser": "live-server dist --browser=chrome --watch=/" yarn build ➜ build:* ➜ build:pug yarn watch ➜ watch:* ➜ watch:browser ➜ watch:pug ➜ build:pug 20
休憩 これでnpm scriptの基礎は完成 あとは build:xxx と watch:xxx を同じように増やして いくことで並列処理を増やしていくことが出来る 21
PostCSS CSSを楽に書くための新しめのプリプロセッサ 他にもStylus, LESS, SASS(SCSS)などがある SASSがよく用いられていたが,高機能のため, 変換に時間がかかるのが難点だった 欲しい機能をプラグインとして個別に導入が可能 変数が使いたい, ネストしたい...などなど
PostCSS.partsでプラグインの検索が可能(便利) 22
個人的によく使うプラグイン postcss-cssnext まだ導入が進んでいない次世代のCSS記法を 先取りして使える 様々なプラグインの集合体でもある autopre xer: ブラウザでの表示差を埋める postcss-nesting: ネストしてCSSをかける
postcss-simple-vars SASSのスタイルでCSS内に変数を宣言できる 23
postcss-cliを使ってみる 1. postcss-cli postcss-cssnext postcss-simple-vars を使 用 2. src/postcss/style.css を作成
3. scripts に "build:postcss": "postcss src/postcss/*.css -d dist/css/ --no-map -u postcss-simple-vars postcss- cssnext", と "watch:postcss": "npm run build:postcss -- -w", を追記 24
PostCSSを触ってみる yarn build すると, dist/css/style.css が出力される src/pug/index.pug の head タグの最後に
link(rel="stylesheet", href="css/style.css") を追記 yarn watch し, src/postcss/style.css を編集すると 自動でCSSに変換し,ブラウザをリロード! 25
PostCSSのコード例 body { // 変換前のpostcss $baseColor: cyan; background: $baseColor; &
h1 { color: $baseColor; background: red; } } body { /* 変換後のcss */ background: cyan; } body h1 { color: cyan; background: red; } 26
JavaScript(es6) JSの新しい記法 es6 ( = es2015) 正式名称: ECMA Script6 イメージ
レガシー: es5, モダン: es6, 次世代: es7 es6で書いて,es5に変換するのが主流 Babelというツールが有名 ブラウザ間の差を埋める機能もついている 類似品:Bubble 27
es6 で変わったところ 変数宣言 const , let の導入 const (再代入不可), let
(再代入可) アロー関数 // 従来の関数 var plus = function(x, y) { return x + y; }; // アロー関数 const plus = (x, y) => { return x + y; }; 28
es6 で変わったところ クラス構文 class Person { constructor(name) { this.name =
name; }; hello() { console.log(`My name is ${this.name}.`); }; } const p = new Person('es6'); p.hello(); //=> "My name is es6." 29
es6 で変わったところ import / export の導入 他のJSファイルの関数やクラスを読み込める 例 person.js export
default class Person { } index.js import Person from './person'; 機能を モジュール ごとに分割し,自由に組み合 せることが可能に 30
webpack 複数のモジュールを1つのファイルにする バンドラ HTMLにおけるJSの読み込み順の悩みから開放 CSSや画像もJSファイルにバンドルすることがで き,リクエスト数の削減につながる 代替品:Rollup, Browserify, Fuseboxなど Grunt,
Gulpといったツールは タスクランナー と呼ば れ,先程 npm script で行ったようなことを中心にサ ポートするツール(最近使わない) 31
webpack と Babel を使ってみる Babel でes6のJSをes5にし, webpack でバンドル! モジュールの説明 babel-core:
Babel 本体 babel-preset-es2015: 変換に使うプリセット babel-loader: Babel を webpack 上で扱う君 webpack: webpack 本体 32
webpack.config.js を作成 module.exports = { entry: __dirname + '/src/js/index.js', output:
{ path: __dirname + '/dist/js/', filename: 'index.js' }, module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } }] } } 33
JSファイル src/js/ に person.js と index.js を作成 person.js export default
class Person { constructor(name) { this.name = name; }; hello() { console.log(`My name is ${this.name}.`); }; } 34
JSファイル index.js import Person from './person'; const p = new
Person('es6'); p.hello(); src/pug/index.pug の body タグの最後に script(src="js/index.js") を追加 35
JSを変換してみる scripts に下記2つを追加 "build:js": "webpack", "watch:js": "npm run build:js --
-w", yarn watch すると,ブラウザのデベロッパーツール のコンソールに My name is es6. が表示される webpackのせいで,生成されたJSファイルは読め たもんじゃないが,よく見るとちゃんと2ファイル が1つにバンドルされているのが確認できる 36
完成 これでメタな言語や新しい記法のファイルを, HTMLとCSSとJSのファイルに変換し,ライブリロ ードする環境が整いました あとはそれぞれをいじって学ぶだけです node_modules の中身はgit ignoreしましょう ( package.json
さえあれば環境構築はできるので) 37
お疲れ様でした! ここまで来てなんなんですが,HTML5 や CSS3, JS の Promise や fetch ら辺がちゃんと出来たほう
が良いと思います! Next Step Hot Module Replacement 機能 Viewフレームワーク: React , Vue , Riot ルーター: React Router , vue-router , Riot Router アーキテクチャ: Flux , Redux , Vuex , Riot Control CSS: CSS modules JSのメタ言語: TypeScript おわり! 38