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
150
適当に教える最近のフロントエンド開発第一歩
最近のフロントエンド開発の第一歩をめちゃくち
ゃ雑に紹介します
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
110
Web IDEの進化とそれを支える技術
pvcresin
0
77
ステップアップOSSコントリビュート
pvcresin
0
460
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
390
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
170
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
pvcresin
0
380
React はじめの一歩
pvcresin
1
250
Other Decks in Programming
See All in Programming
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
540
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
GraphRAGの仕組みまるわかり
tosuri13
8
490
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
120
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
450
Create a website using Spatial Web
akkeylab
0
310
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
What's in a price? How to price your products and services
michaelherold
246
12k
GraphQLとの向き合い方2022年版
quramy
48
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building an army of robots
kneath
306
45k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Applications with DynamoDB
mza
95
6.5k
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