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
jaxx2104
February 01, 2016
Programming
0
110
モダンなフロントエンド開発環境について
2016年2月の社内勉強会にて
jaxx2104
February 01, 2016
Tweet
Share
More Decks by jaxx2104
See All by jaxx2104
Relative CI が気になっている話
jaxx2104
0
500
デザインファイルにおける継続的インテグレーション
jaxx2104
2
430
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.2k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
400
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
740
サイレントヒーローを作らない取り組み
jaxx2104
1
170
開発組織のメンバーからリーダーになって
jaxx2104
0
120
Nikuman
jaxx2104
0
410
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
340
Other Decks in Programming
See All in Programming
Hack Claude Code with Claude Code
choplin
4
2k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
VS Code Update for GitHub Copilot
74th
2
640
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.6k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
840
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
4 Signs Your Business is Dying
shpigford
184
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Making Projects Easy
brettharned
116
6.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
How GitHub (no longer) Works
holman
314
140k
The Language of Interfaces
destraynor
158
25k
Transcript
ϞμϯͳϑϩϯτΤϯυ։ൃ ڥʹ͍ͭͯ Ϗϧυπʔϧߏஙͱͦͷ׆༻ࣄྫʹ͍ͭͯ
フロントエンドの課題 • レスポンシブ • 表示速度 • ブラウザ問題 • ライブラリ管理 •
複数人開発 • SPA これらの課題を解決しなければ!
CSS JS ES2015 SCSS コーディングの変化 機能追加などでブラウザの制約を受けないようコンパイルするようになった。
SCSS とは • CSSをよりプログラミングに近い形で書ける言語 • ブラウザでそのまま使うことは出来ない • compass などを使ってコンパイルする CSSを拡張したメタ言語
http://sass-lang.com/guide 出来ること • 変数宣言 • 演算子 • セレクタのネスト • ミックスイン • セレクタの継承
ES2015 とは • 他言語の構文を多く採用して5年ぶりのアップデート • 最新ブラウザで対応が始まっている • 標準コンパイラのBabelを使うことを推奨 https://babeljs.io/docs/learn-es2015/ JavaScript
の標準化言語 出来ること • let・constキーワードによる変数宣言 • class構文 • テンプレート文字列 • importとexportによるモジュール構文 http://www.slideshare.net/dynamis/java-scripttrendspec
開発ツールの変化 言語の変化やライブラリやパッケージの増加に伴い、他言語にあった管理や実行ツールが充実
サーバーサイドJS パッケージ管理 パッケージ タスクランナー トランスコンパイラ フレームワーク ライブラリ 開発ツールの説明 autoscript 的な
yum や composer, cpan的な PHPやPerlやRuby的な
環境を作るのが面倒
なので作りました
node-sample • ライブコンパイル • ファイル圧縮 • ウェブサーバー • ライブリロード •
エラー通知 • ドキュメント生成 フロントエンド開発に必要な環境を構築してくれるツール できること https://github.com/jaxx2104/node-sample/
実際に使ってみます
環境構築は3行 $ yum install node $ git clone
[email protected]
:jaxx2104/node-sample.git $
npm install 1. node.js をインストール 2. node-sample をダウンロードして展開 3. sublime-textからnpm install 実行はコマンドかエディタで可能! Mac の場合(コマンド不要) Linux の場合
ディレクトリはこんな感じ www ├──index.html ├──package.json npm のライブラリ一覧 ├──node_modules npm のライブラリ ├──gulpfile.js
gulp のタスク └──assets ├── css ├── js ├── scss ├── babel └── img
最後にLINE BOT フレンド登録したユーザーからのメッセージや ビーコン検知でプログラムを実行できる。 ですが・・・。
line-beacon いい活用法あれば https://github.com/jaxx2104/line-beacon/
ありがとうございました