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
86
モダンなフロントエンド開発環境について
2016年2月の社内勉強会にて
jaxx2104
February 01, 2016
Tweet
Share
More Decks by jaxx2104
See All by jaxx2104
Relative CI が気になっている話
jaxx2104
0
460
デザインファイルにおける継続的インテグレーション
jaxx2104
2
380
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
270
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
600
サイレントヒーローを作らない取り組み
jaxx2104
1
120
開発組織のメンバーからリーダーになって
jaxx2104
0
85
Nikuman
jaxx2104
0
300
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
300
Other Decks in Programming
See All in Programming
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
320
雑に思考を整理する技術と効能
konifar
50
21k
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
3k
OpenTelemetry のサービスという概念について
azukiazusa1
2
1k
ONE WEDGE_company_guide
1wedge_one
0
320
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
フロントエンドパフォーマンス 入門
shouta2
7
1.6k
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
230
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.6k
今、知っておきたい! 生成AIエージェントの世界
elith
3
330
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
400
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
31
21k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
224
17k
How GitHub (no longer) Works
holman
302
140k
Navigating Team Friction
lara
177
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Teambox: Starting and Learning
jrom
127
8.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Designing the Hi-DPI Web
ddemaree
275
33k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
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/
ありがとうございました