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
440
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.3k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
400
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
750
サイレントヒーローを作らない取り組み
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
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
440
20250708_JAWS_opscdk
takuyay0ne
2
150
MCPで実現できる、Webサービス利用体験について
syumai
7
1.9k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
PHPカンファレンス関西2025 基調講演
sugimotokei
5
940
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
slogパッケージの深掘り
integral0515
0
130
What's new in AppKit on macOS 26
1024jp
0
170
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
120
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
2
440
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
Featured
See All Featured
Side Projects
sachag
455
43k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
Thoughts on Productivity
jonyablonski
69
4.7k
Building an army of robots
kneath
306
45k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Visualization
eitanlees
146
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Applications with DynamoDB
mza
95
6.5k
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/
ありがとうございました