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
420
漸進的な変更を支えるフロントエンド設計
jaxx2104
5
2.2k
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
390
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
740
サイレントヒーローを作らない取り組み
jaxx2104
1
170
開発組織のメンバーからリーダーになって
jaxx2104
0
120
Nikuman
jaxx2104
0
400
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
340
Other Decks in Programming
See All in Programming
イベントストーミングから始めるドメイン駆動設計
jgeem
4
870
Create a website using Spatial Web
akkeylab
0
290
C++20 射影変換
faithandbrave
0
500
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
240
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
290
從零到一:搭建你的第一個 Observability 平台
blueswen
1
960
Java on Azure で LangGraph!
kohei3110
0
160
Gleamという選択肢
comamoca
6
740
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
380
ReadMoreTextView
fornewid
1
450
KotlinConf 2025 現地参加の土産話
n_takehata
0
100
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Producing Creativity
orderedlist
PRO
346
40k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Done Done
chrislema
184
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Six Lessons from altMBA
skipperchong
28
3.8k
Become a Pro
speakerdeck
PRO
28
5.4k
Docker and Python
trallard
44
3.4k
How GitHub (no longer) Works
holman
314
140k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.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/
ありがとうございました