Soumettre la recherche
Mettre en ligne
フロントエンド開発環境
•
11 j'aime
•
1,692 vues
Masaki Kawaguchi
Suivre
フロントエンド開発環境について
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 33
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Modern frontend overview_r3
Modern frontend overview_r3
makotunes
はじめてのReleaseブランチ運用(svn編)
はじめてのReleaseブランチ運用(svn編)
将 高野
SVNのすすめ&Redmineでプロジェクト管理
SVNのすすめ&Redmineでプロジェクト管理
ina job
Development tools for WordPress
Development tools for WordPress
BREN
SVN入門
SVN入門
Francisco Dalla Rosa Soares
OSC 2010 Tokyo/Fall MSセッション
OSC 2010 Tokyo/Fall MSセッション
Masaki Takeda
Fundamental Java
Fundamental Java
Kenji HASUNUMA
Yamaguchi webgroup06 subversion
Yamaguchi webgroup06 subversion
Ohishi Mikage
Recommandé
Modern frontend overview_r3
Modern frontend overview_r3
makotunes
はじめてのReleaseブランチ運用(svn編)
はじめてのReleaseブランチ運用(svn編)
将 高野
SVNのすすめ&Redmineでプロジェクト管理
SVNのすすめ&Redmineでプロジェクト管理
ina job
Development tools for WordPress
Development tools for WordPress
BREN
SVN入門
SVN入門
Francisco Dalla Rosa Soares
OSC 2010 Tokyo/Fall MSセッション
OSC 2010 Tokyo/Fall MSセッション
Masaki Takeda
Fundamental Java
Fundamental Java
Kenji HASUNUMA
Yamaguchi webgroup06 subversion
Yamaguchi webgroup06 subversion
Ohishi Mikage
うわ…私のEmacs力、低すぎ...?
うわ…私のEmacs力、低すぎ...?
Masahiro Sano
SVG事始め
SVG事始め
Nemoto Yusuke
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
Akira Inoue
About Reauire.js
About Reauire.js
Kyohei Morimoto
MvvmCross 入門
MvvmCross 入門
jz5 MATSUE
WebAssembly text format で画像処理を書くぞ
WebAssembly text format で画像処理を書くぞ
Kohei Kawasaki
Getting Started .NET Core
Getting Started .NET Core
Yuta Matsumura
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
Akira Inoue
Edge と IE、来年からの Web 制作
Edge と IE、来年からの Web 制作
Osamu Monoe
Windows Server vNext、仮想化 (Hyper-V) の向上点
Windows Server vNext、仮想化 (Hyper-V) の向上点
Syuichi Murashima
20070310
20070310
小野 修司
120512 metro styleapp_javascript
120512 metro styleapp_javascript
Takayoshi Tanaka
Microsoft loves PHP WebMatrix + Windows Azure
Microsoft loves PHP WebMatrix + Windows Azure
Takeshi Shinmura
Java script samary
Java script samary
ssuser78615b
A 1-2 One ASP.NET - ASP.NET Web Stack
A 1-2 One ASP.NET - ASP.NET Web Stack
GoAzure
【CodeCamp】JavaScriptの教科書サンプル
【CodeCamp】JavaScriptの教科書サンプル
codecampJP
Ruby on Rails3 Tutorial Chapter1
Ruby on Rails3 Tutorial Chapter1
Sea Mountain
納品用ROS機の手癖
納品用ROS機の手癖
Kenta Yonekura
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
Ryo Iinuma
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
Contenu connexe
Tendances
うわ…私のEmacs力、低すぎ...?
うわ…私のEmacs力、低すぎ...?
Masahiro Sano
SVG事始め
SVG事始め
Nemoto Yusuke
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
Akira Inoue
About Reauire.js
About Reauire.js
Kyohei Morimoto
MvvmCross 入門
MvvmCross 入門
jz5 MATSUE
WebAssembly text format で画像処理を書くぞ
WebAssembly text format で画像処理を書くぞ
Kohei Kawasaki
Getting Started .NET Core
Getting Started .NET Core
Yuta Matsumura
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
Akira Inoue
Edge と IE、来年からの Web 制作
Edge と IE、来年からの Web 制作
Osamu Monoe
Windows Server vNext、仮想化 (Hyper-V) の向上点
Windows Server vNext、仮想化 (Hyper-V) の向上点
Syuichi Murashima
20070310
20070310
小野 修司
120512 metro styleapp_javascript
120512 metro styleapp_javascript
Takayoshi Tanaka
Microsoft loves PHP WebMatrix + Windows Azure
Microsoft loves PHP WebMatrix + Windows Azure
Takeshi Shinmura
Java script samary
Java script samary
ssuser78615b
A 1-2 One ASP.NET - ASP.NET Web Stack
A 1-2 One ASP.NET - ASP.NET Web Stack
GoAzure
【CodeCamp】JavaScriptの教科書サンプル
【CodeCamp】JavaScriptの教科書サンプル
codecampJP
Ruby on Rails3 Tutorial Chapter1
Ruby on Rails3 Tutorial Chapter1
Sea Mountain
納品用ROS機の手癖
納品用ROS機の手癖
Kenta Yonekura
Tendances
(19)
うわ…私のEmacs力、低すぎ...?
うわ…私のEmacs力、低すぎ...?
SVG事始め
SVG事始め
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
WebMatrix 2 と Azure Web Sites を使ったスマートフォンサイト構築のすすめ
About Reauire.js
About Reauire.js
MvvmCross 入門
MvvmCross 入門
WebAssembly text format で画像処理を書くぞ
WebAssembly text format で画像処理を書くぞ
Getting Started .NET Core
Getting Started .NET Core
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
.NET Core 5 ~ Windows, Linux, OS X そして Docker まで ~
Edge と IE、来年からの Web 制作
Edge と IE、来年からの Web 制作
Windows Server vNext、仮想化 (Hyper-V) の向上点
Windows Server vNext、仮想化 (Hyper-V) の向上点
20070310
20070310
120512 metro styleapp_javascript
120512 metro styleapp_javascript
Microsoft loves PHP WebMatrix + Windows Azure
Microsoft loves PHP WebMatrix + Windows Azure
Java script samary
Java script samary
A 1-2 One ASP.NET - ASP.NET Web Stack
A 1-2 One ASP.NET - ASP.NET Web Stack
【CodeCamp】JavaScriptの教科書サンプル
【CodeCamp】JavaScriptの教科書サンプル
Ruby on Rails3 Tutorial Chapter1
Ruby on Rails3 Tutorial Chapter1
納品用ROS機の手癖
納品用ROS機の手癖
En vedette
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
Ryo Iinuma
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ
将一 深見
エフスタ会津 - フロントエンドエンジニアの話 -
エフスタ会津 - フロントエンドエンジニアの話 -
thedesignium Inc.
とりあえず始めるAngular2
とりあえず始めるAngular2
Hayashi Yuichi
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
Hayashi Yuichi
実務導入に向けたAngularの始め方@Angular入門者の会
実務導入に向けたAngularの始め方@Angular入門者の会
Hayashi Yuichi
Dockerとフロントエンド
Dockerとフロントエンド
Hayashi Yuichi
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Yusuke Amano
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
ビルド職人の朝は早い
ビルド職人の朝は早い
Masashi MATSUI
プログラマとして仕事をするために勉強すること
プログラマとして仕事をするために勉強すること
なおき きしだ
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
Nobukazu Hanada
フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。
Yutaka Horikawa
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
En vedette
(20)
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
ゆるく学ぼう!現在のフロントエンドまとめ
ゆるく学ぼう!現在のフロントエンドまとめ
エフスタ会津 - フロントエンドエンジニアの話 -
エフスタ会津 - フロントエンドエンジニアの話 -
とりあえず始めるAngular2
とりあえず始めるAngular2
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
実務導入に向けたAngularの始め方@Angular入門者の会
実務導入に向けたAngularの始め方@Angular入門者の会
Dockerとフロントエンド
Dockerとフロントエンド
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Angularおじさんの1年
Angularおじさんの1年
ビルド職人の朝は早い
ビルド職人の朝は早い
プログラマとして仕事をするために勉強すること
プログラマとして仕事をするために勉強すること
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Similaire à フロントエンド開発環境
20090328
20090328
小野 修司
20060419
20060419
小野 修司
Firefoxの開発プロセス
Firefoxの開発プロセス
Makoto Kato
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
WebStormでできること
WebStormでできること
kamiyam .
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Makoto Kato
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
Jjug springセッション
Jjug springセッション
Yuichi Hasegawa
AWSマイスターシリーズReloaded(AWS Beanstalk)
AWSマイスターシリーズReloaded(AWS Beanstalk)
Akio Katayama
20120416 aws meister-reloaded-aws-elasticbeanstalk-public
20120416 aws meister-reloaded-aws-elasticbeanstalk-public
Amazon Web Services Japan
Internet Explorer 10 概要と変更点
Internet Explorer 10 概要と変更点
Microsoft
Selenium
Selenium
takeuchi-tk
ASP. NET Core 汎用ホスト概要
ASP. NET Core 汎用ホスト概要
TomomitsuKusaba
20080524
20080524
小野 修司
VM ロールで仮想デスクトップ環を作ってみよう
VM ロールで仮想デスクトップ環を作ってみよう
Masayuki Ozawa
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Yoshihisa Ozaki
Java on Microsoft Azure
Java on Microsoft Azure
Yoshio Terada
Chefで始めるWindows Server構築
Chefで始めるWindows Server構築
Takashi Kanai
Similaire à フロントエンド開発環境
(20)
20090328
20090328
20060419
20060419
Firefoxの開発プロセス
Firefoxの開発プロセス
Mvc conf session_5_isami
Mvc conf session_5_isami
WebStormでできること
WebStormでできること
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Jjug springセッション
Jjug springセッション
AWSマイスターシリーズReloaded(AWS Beanstalk)
AWSマイスターシリーズReloaded(AWS Beanstalk)
20120416 aws meister-reloaded-aws-elasticbeanstalk-public
20120416 aws meister-reloaded-aws-elasticbeanstalk-public
Internet Explorer 10 概要と変更点
Internet Explorer 10 概要と変更点
Selenium
Selenium
ASP. NET Core 汎用ホスト概要
ASP. NET Core 汎用ホスト概要
20080524
20080524
VM ロールで仮想デスクトップ環を作ってみよう
VM ロールで仮想デスクトップ環を作ってみよう
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Chrome DevTools.next
Chrome DevTools.next
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Java on Microsoft Azure
Java on Microsoft Azure
Chefで始めるWindows Server構築
Chefで始めるWindows Server構築
Dernier
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
sugiuralab
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
sugiuralab
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
Dernier
(8)
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
フロントエンド開発環境
1.
フロントエンド開発環境
masaki-k
2.
自己紹介 • 川口 真生(かわぐち
まさき) • 普段は PC向け/スマフォ向けのフロント エンド(HTML/CSS/JavaScript)の 開発をやっています
3.
Agenda • フロントエンドの開発で重宝している
ツールの紹介 – WsbStorm – LiveReload
4.
WebStorm
5.
WebStorm • http://www.jetbrains.com/
webstorm/ • JetBrains製のWeb開発に特化したIDE • クロスプラットフォーム対応 – Windows (7/Vista/2003/XP/2000) – Mac OS X (10.5 以上) – Linux (GNOME/KDE + JDK/Open JDK) • $49 / 年間
6.
WebStorm
7.
コード補完/リファクタ • 静的コード解析による補完機能 • ブラウザネイティブなAPIだけでなく
任意のライブラリの補完にも対応 • エディタ内に現れるバルブをクリックする とリファクタ補助機能が表示
8.
9.
10.
11.
コード品質管理 • JSLint /
JSHint が同梱されており、 編集しながらコードの品質管理が可能
12.
13.
Live Template • Live
Template + Zen Coding(HTML/CSS/XSL) – 普段よく使うスニペットをショートカットと ともに登録 – Zen Coding ははじめから登録されている
14.
15.
16.
デバッガー • Firefox /
Google Chrome に接続して JavaScript のデバッグが行える – Firefox には、専用アドオンから – Google Chrome には、Remote Shell 機能から
17.
18.
JSテストフレームワーク同梱 • Google 製
JS テストフレームワークの jsTestDriver が同梱 – http://code.google.com/p/js-test- driver/ – 一度に複数のブラウザのテストが行える • IDE 内の操作のみで jsTestDriver サーバを起動 • テスト時のコードカバレッジも測定可能
19.
jsTestDriver のイメージ 0. 各ブラウザ
jsTestDriver Server に接続 2. 各ブラウザにテストコード実行 Chrome 1. テスト実行 3. 各ブラウザから結果を回収 WebStorm jsTestDriver IE Server 4. 結果を表示 Mobile Safari
20.
21.
22.
その他にもいろいろ
23.
LiveReload
24.
LiveReload • http://livereload.com/ • ファイルの変更を監視 •
変更を検知したら WebSocket 経由でブ ラウザ自動リロード • 自動リロードを有効にするには LiveReload 用スニペットを追記が必要 • 各ブラウザ拡張をインストールすることで 既存コードへの変更不要
25.
LiveReload • iOS デバイスにも対応 •
対応OS – Mac OS X 10.6 以上 – Windows XP 以上(※ただしα版のみ) • $9.99 (Mac App Store) • ソースは Github 公開されている – https://github.com/livereload/ LiveReload2
26.
27.
JavaScriptメタ言語自動コンパイル
→ JavaScript
28.
CSSメタ言語自動コンパイル
→ CSS
29.
HTMLテンプレートを自動展開
→ HTML Eco
30.
31.
任意スクリプトも実行可能 • ファイルの変更検知が行われた時、
任意のスクリプトを実行可能 • 例えば – テストランナーの実行 – 自動コミット – Sphinx ドキュメントのビルド 等々
32.
まとめ • フロントエンドの開発で重宝している
ツールの紹介 – WsbStorm • クロスプラットフォームでフロントエンド開発で 必要となってくる機能がてんこ盛り • 今だけ半額 $29 !! – LiveReload • 編集→リロードの手間を省力化 • 各種メタ言語のコンパイルの手間を省力化
33.
参考 • HTML テンプレート
– http://haml.info – http://jade-lang.com – http://slim-lang.com/index.html – https://github.com/sstephenson/eco • Javascript メタ言語 – http://coffeescript.org – http://maxtaco.github.com/coffee-script • CSS メタ言語 – http://lesscss.org – http://sass-lang.com – http://compass-style.o – http://learnboost.github.com/stylus
Télécharger maintenant