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
PicoRuby on Rails
makicamel
2
130
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Hack Claude Code with Claude Code
choplin
4
2k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
120
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
430
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Rails Girls Zürich Keynote
gr2m
95
14k
The Cult of Friendly URLs
andyhume
79
6.5k
It's Worth the Effort
3n
185
28k
Unsuck your backbone
ammeep
671
58k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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/
ありがとうございました