Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
オレオレフロントエンド開発環境 ~際限なき修正を攻略せよ!~
448jp | OKI Yoshiya
November 19, 2015
Programming
1
170
オレオレフロントエンド開発環境 ~際限なき修正を攻略せよ!~
第19回 HTML5+JS勉強会発表資料
448jp | OKI Yoshiya
November 19, 2015
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
Figmaで神速ドキュメント作成術
448jp
2
190
今から始めるFigma超入門
448jp
0
680
零細Web制作会社のリモートワーク事情
448jp
0
110
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
440
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
100
Lottieで始めるWebアニメーション入門
448jp
1
260
Figmaが支えるVue Fes Japanのデザイン
448jp
3
4.6k
Vue Fes Japan 2018のデザインを支えたAdobe XD
448jp
2
1.4k
Dreamweaverで学ぶ、「いい感じ」にするための実践CSSテクニック
448jp
3
1.8k
Other Decks in Programming
See All in Programming
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
oniak3ibm
PRO
0
170
SRE NEXT 2022に学ぶこれからのSREキャリア
fukubaka0825
2
390
ちょっとつよい足トラ
logilabo
0
330
FullStack eXchange, July 2022
brucel
0
190
YATA: collaborative documents and how to make them fast
horusiath
1
140
プロダクトのタイプ別 GraphQL クライアントの選び方
shozawa
0
8.1k
読みやすいコード クラスメソッド 2022 年度新卒研修
januswel
0
2.9k
Register-based calling convention for Go functions
cjamhe01385
0
380
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
140
Lookerとdbtの共存
ttccddtoki
0
610
Enzyme から React Native Testing Library に移行した経緯 / 2022-07-20
tamago3keran
1
160
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
1901drama
0
180
Featured
See All Featured
The Language of Interfaces
destraynor
148
21k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Faster Mobile Websites
deanohume
294
28k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
Become a Pro
speakerdeck
PRO
3
900
Practical Orchestrator
shlominoach
178
8.7k
Unsuck your backbone
ammeep
659
55k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
Automating Front-end Workflow
addyosmani
1351
200k
Transcript
オレオレフロントエンド開発環境 ~際限なき修正を攻略せよ!~ 2015.11.19 (Thu) 沖 良矢(世路庵) 第19回 HTML5+JS 勉強会@ 代々木TechBuzzSpace
自己紹介 沖 良矢(OKI Yoshiya) • 世路庵(せろあん) • インタラクションデザイナー • フリーランス8年目
KAMABOKO ROAD TO 1000 (2015) lynda.com 日本語版 トレーナー (2015) Web Designing 連載 (2009~2015)
話すこと 1. フロントエンドを取り巻く状況と課題 2. 改善の手法
フロントエンドを取り巻く状況と課題 The situation & issues of frontend 1.
みなさんのことをお聞かせください Please tell me your context. 引用:eviloars CC BY-NC 2.0
https://www.flickr.com/photos/29513210@N00/4837529409//
私の活動領域 広告 コーポレート EC サイネージ アプリ 執筆・講演
フロントエンドに関する職能 • ビジュアルデザイン • グラフィックデザイン • Webデザイン • UIデザイン •
ユーザービリティ • アクセシビリティ • IA • マーケティング • SEO • SEM • セキュリティ • データベース • API • 写真 • 映像 • アニメーション • 3DCG • 音楽 • 効果音 • ライティング • 電子書籍 などなど ただし、実装技術(HTMLとか)を除く
職能と技術 • ビジュアルデザイン • Webデザイン • マーケティング • SEO •
SEM • API +実装技術 • 写真 • 映像 • アニメーション • 3DCG • 音楽 • ライティング
ここで思い出話をひとつ
Flashを使っていますか? 83.4 51.7 21.4 0 10 20 30 40 50
60 70 80 90 100 2009年 2012年 2014年 引用:Webデザイナー白書(マイナビ)
近いうちに習得したいものは? 2009年 • Flash • AIR 2012年 • HTML5 •
JavaScript • PHP • WordPress 2014年 • JavaScript • PHP • WordPress 引用:Webデザイナー白書(マイナビ) ※ベスト10から技術的なものを抜粋
現代で要求される実装技術(例)
単純に時間がかかる It's simple, very time consuming. 引用:tom_bennett CC BY-NC 2.0
https://www.flickr.com/photos/67721596@N00/2298433461/
None
度重なる修正や急な対応を際 限なく求められることが多く、 実はかなり被拘束力が高い。 裁量権があるようでない仕事 です 週刊SPA! 引用:https://instagram.com/p/8e- xaMJnMN/?taken-by=daishiro
主な原因 対象デバイスの増加(スマートフォン、タブレット) ファイルサイズ パフォーマンス デバッグ 工程上の問題 技術革新のスピード
改善の手法 Methods of improvement 2.
みなさんのことをお聞かせください Please tell me your context. 自分でコントロールできることを 改善していく Improve that
you can control yourself.
環境から見た改善 IDE:IntelliJ IDEA コーディング:Pixelapse、Extract デバッグ:Charles、Remote TestKit、BrowserStack API:API Blueprint
言語から見た改善 HTML:Emmet + Assemble (Handlebars) CSS:Sass JavaScript:CoffeeScript + Browserify ビルド:Grunt
整理整頓は、 人生の半分である ドイツのことわざ
オススメ書籍 『無印良品は、仕組みが9割』松井 忠三(角川書店)
マニュアル作りのポイント DRY(Don't repeat yourself) ググれば分かることも明文化 現場の自分たちで作るしかない 権威主義、属人主義を捨てる マニュアルをアップデートし続ける 「どのように行動するか」だけでなく、 「何のために作業をするか」も。
まとめ 知識を蓄積し、共有しよう 銀の弾丸はない 技術は目的を達成する手段
http://ceroan.jp/ 2015.11.19 (Thu)