Submit Search
Upload
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
•
28 likes
•
17,713 views
Mitsuru Ogawa
Follow
2013/11/09 JJUG CCCでの発表資料です。
Read less
Read more
Report
Share
Report
Share
1 of 27
Download now
Download to read offline
Recommended
2014/2/28 Enterprise x HTML5 Application Conference 2014での講演資料です。 SAPジャパンの井口さんとのコラボレーションです。
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
Mitsuru Ogawa
デブサミ2014 Yet Another Your Story (Enterprise TED 3)での発表資料です。 振り返りBLOG書きました。 http://blog.mitsuruog.info/2014/02/20143535.html
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
Mitsuru Ogawa
2014/05/19 HTML5funでの発表内容です。 http://html5fun-1.peatix.com/ エンタープライズでフロントエンドエンジニア目指す人が増えればいいなと思いを込めて。
エンタープライズとHTML5〜エンタープライズでHTML5って本当に必要なのか?〜
エンタープライズとHTML5〜エンタープライズでHTML5って本当に必要なのか?〜
Mitsuru Ogawa
2013/9/9 業務システムエンジニアのためのHTML5勉強会#04 Web✕Java - HTML5で進化したWeb標準を、Java技術でどう扱うのか? - オープニングトーク資料です。
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
DevLOVE関西 事業会社の現場を知ろう~クックビズ編~ http://devlove-kansai.doorkeeper.jp/events/18724 2015/01/19 発表スライド
事業会社で働くエンジニアのマインドセット - DevLOVE関西
事業会社で働くエンジニアのマインドセット - DevLOVE関西
Tomoyuki Sugita
DevLOVE甲子園2014 西日本大会 2014-08-23 Sat #DevKan隊 発表資料
はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)
はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)
Tomoyuki Sugita
【第一回 Meet Up】 React Native Tech Blogで登壇した資料です。 SnapmartにおけるCameraRollから写真の複数枚アップロードの実装について、話しました。
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
PIXTA Inc.
2011/08/01のJSUGでプレゼンテーションした資料です。
Roo
Roo
terahide
Recommended
2014/2/28 Enterprise x HTML5 Application Conference 2014での講演資料です。 SAPジャパンの井口さんとのコラボレーションです。
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
Mitsuru Ogawa
デブサミ2014 Yet Another Your Story (Enterprise TED 3)での発表資料です。 振り返りBLOG書きました。 http://blog.mitsuruog.info/2014/02/20143535.html
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
Mitsuru Ogawa
2014/05/19 HTML5funでの発表内容です。 http://html5fun-1.peatix.com/ エンタープライズでフロントエンドエンジニア目指す人が増えればいいなと思いを込めて。
エンタープライズとHTML5〜エンタープライズでHTML5って本当に必要なのか?〜
エンタープライズとHTML5〜エンタープライズでHTML5って本当に必要なのか?〜
Mitsuru Ogawa
2013/9/9 業務システムエンジニアのためのHTML5勉強会#04 Web✕Java - HTML5で進化したWeb標準を、Java技術でどう扱うのか? - オープニングトーク資料です。
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
DevLOVE関西 事業会社の現場を知ろう~クックビズ編~ http://devlove-kansai.doorkeeper.jp/events/18724 2015/01/19 発表スライド
事業会社で働くエンジニアのマインドセット - DevLOVE関西
事業会社で働くエンジニアのマインドセット - DevLOVE関西
Tomoyuki Sugita
DevLOVE甲子園2014 西日本大会 2014-08-23 Sat #DevKan隊 発表資料
はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)
はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)
Tomoyuki Sugita
【第一回 Meet Up】 React Native Tech Blogで登壇した資料です。 SnapmartにおけるCameraRollから写真の複数枚アップロードの実装について、話しました。
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
PIXTA Inc.
2011/08/01のJSUGでプレゼンテーションした資料です。
Roo
Roo
terahide
UiPath Friends Festival 2021 テック三昧 EXCELアプリケーションスコープが無くなる日 (2021/10/31)
UiPath Friends Festival 2021 テック三昧 EXCELアプリケーションスコープが無くなる日
UiPath Friends Festival 2021 テック三昧 EXCELアプリケーションスコープが無くなる日
Yoichi Suetake
UiPath Friends Festibal 2021 テック三昧講演資料
実践!RPA のテクノロジーを活用した自動テスト
実践!RPA のテクノロジーを活用した自動テスト
JunShiomi
「せっかく作った物が喜んでもらえない」 「仕様だ、バグだ、の不毛な争い」 「振り回されて疲弊するエンジニア」 など、受託開発でうまくいかない局面は多くあるが、ある一つのことを意識的に行うようにしたら、自分たちの受託開発が180°変わった、という話。
○○したら受託開発が180°変わった
○○したら受託開発が180°変わった
Atsushi Harada
【第3回】ReactNativeにゆかりのあるスタートアップが集う会のLTの登壇資料です。
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
PIXTA Inc.
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
Masakazu Muraoka
UiPath Friends Festival(2021年10月30日開催)
昨日Ucp advanced受験してみた!
昨日Ucp advanced受験してみた!
Hideaki Manaka
Basic test pattern for newbie engineer.
信頼されるエンジニアへの貴重な一歩! テストのお勉強はどうやるの?
信頼されるエンジニアへの貴重な一歩! テストのお勉強はどうやるの?
Egawa Saori
kintone devCamp 2015 こだわりのkintone http://www.kintonedevcamp.com/ 2015 (C) Cybozu, Inc.
こだわりのkintone
こだわりのkintone
Yusuke Amano
@XP祭り2014 LT
俺の事業部
俺の事業部
Fumihiko Kinoshita
Osashimi Model is a modeling method on software testing for state change with options and time change. (Sorry for Japanese)
Osashimi
Osashimi
Egawa Saori
開発者ギルドカンファレンス2015 https://guildworks.doorkeeper.jp/events/26156
老舗大企業からスタートアップへの挑戦
老舗大企業からスタートアップへの挑戦
GuildWorks
プロダクト開発におけるプロダクトマネージャーの役割とは #devsumi
プロダクト開発におけるプロダクトマネージャーの役割とは #devsumi
プロダクト開発におけるプロダクトマネージャーの役割とは #devsumi
Mizuki Tanno
JSUG勉強会 2016年その4 Spring I/O報告会 Spring starterによるSpring Boot Starter
Spring starterによるSpring Boot Starter
Spring starterによるSpring Boot Starter
Ryosuke Uchitate
Developers Summit 2016 ( http://event.shoeisha.jp/devsumi/20160218/ ) の一日目ランチセッションにて発表した資料です。
How to develop a huge Single Page Application
How to develop a huge Single Page Application
Naoki Yamada
JustTechTalk#08 Webフロントエンドでやってみた2017の資料2本目です。
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
JustSystems Corporation
みんなのPython勉強会#22の講演資料です。
アジャイルってなにが美味しいの
アジャイルってなにが美味しいの
Yasui Tsutomu
GREE Tech Conference 2021 で発表された資料です。 https://techcon.gree.jp/2021/session/Session-10
長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化
gree_tech
VSハッカソン倶楽部 CI勉強会: https://vshtc.doorkeeper.jp/events/26853 での発表資料です。 ( http://www.slideshare.net/Posaune/jenkinsci-50411288 と内容は同じです )
ポストJenkins時代のCI戦略
ポストJenkins時代のCI戦略
GuildWorks
JJUG CCC 2014 keynote slide
20141116 jjug ccc_2014_keynote1_public
20141116 jjug ccc_2014_keynote1_public
Yoshiharu Hashimoto
Agile Shimane のイベント(https://agileshimane.doorkeeper.jp/events/25816)での発表資料です。
ギルドワークスの現場コーチ
ギルドワークスの現場コーチ
GuildWorks
2013/7/3 社内勉強会で発表した資料です。
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
2013/9/9に発表した内容です。 #html5biz #jjug
Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎
Satoshi Kubo
More Related Content
What's hot
UiPath Friends Festival 2021 テック三昧 EXCELアプリケーションスコープが無くなる日 (2021/10/31)
UiPath Friends Festival 2021 テック三昧 EXCELアプリケーションスコープが無くなる日
UiPath Friends Festival 2021 テック三昧 EXCELアプリケーションスコープが無くなる日
Yoichi Suetake
UiPath Friends Festibal 2021 テック三昧講演資料
実践!RPA のテクノロジーを活用した自動テスト
実践!RPA のテクノロジーを活用した自動テスト
JunShiomi
「せっかく作った物が喜んでもらえない」 「仕様だ、バグだ、の不毛な争い」 「振り回されて疲弊するエンジニア」 など、受託開発でうまくいかない局面は多くあるが、ある一つのことを意識的に行うようにしたら、自分たちの受託開発が180°変わった、という話。
○○したら受託開発が180°変わった
○○したら受託開発が180°変わった
Atsushi Harada
【第3回】ReactNativeにゆかりのあるスタートアップが集う会のLTの登壇資料です。
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
PIXTA Inc.
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
Masakazu Muraoka
UiPath Friends Festival(2021年10月30日開催)
昨日Ucp advanced受験してみた!
昨日Ucp advanced受験してみた!
Hideaki Manaka
Basic test pattern for newbie engineer.
信頼されるエンジニアへの貴重な一歩! テストのお勉強はどうやるの?
信頼されるエンジニアへの貴重な一歩! テストのお勉強はどうやるの?
Egawa Saori
kintone devCamp 2015 こだわりのkintone http://www.kintonedevcamp.com/ 2015 (C) Cybozu, Inc.
こだわりのkintone
こだわりのkintone
Yusuke Amano
@XP祭り2014 LT
俺の事業部
俺の事業部
Fumihiko Kinoshita
Osashimi Model is a modeling method on software testing for state change with options and time change. (Sorry for Japanese)
Osashimi
Osashimi
Egawa Saori
開発者ギルドカンファレンス2015 https://guildworks.doorkeeper.jp/events/26156
老舗大企業からスタートアップへの挑戦
老舗大企業からスタートアップへの挑戦
GuildWorks
プロダクト開発におけるプロダクトマネージャーの役割とは #devsumi
プロダクト開発におけるプロダクトマネージャーの役割とは #devsumi
プロダクト開発におけるプロダクトマネージャーの役割とは #devsumi
Mizuki Tanno
JSUG勉強会 2016年その4 Spring I/O報告会 Spring starterによるSpring Boot Starter
Spring starterによるSpring Boot Starter
Spring starterによるSpring Boot Starter
Ryosuke Uchitate
Developers Summit 2016 ( http://event.shoeisha.jp/devsumi/20160218/ ) の一日目ランチセッションにて発表した資料です。
How to develop a huge Single Page Application
How to develop a huge Single Page Application
Naoki Yamada
JustTechTalk#08 Webフロントエンドでやってみた2017の資料2本目です。
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
JustSystems Corporation
みんなのPython勉強会#22の講演資料です。
アジャイルってなにが美味しいの
アジャイルってなにが美味しいの
Yasui Tsutomu
GREE Tech Conference 2021 で発表された資料です。 https://techcon.gree.jp/2021/session/Session-10
長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化
gree_tech
VSハッカソン倶楽部 CI勉強会: https://vshtc.doorkeeper.jp/events/26853 での発表資料です。 ( http://www.slideshare.net/Posaune/jenkinsci-50411288 と内容は同じです )
ポストJenkins時代のCI戦略
ポストJenkins時代のCI戦略
GuildWorks
JJUG CCC 2014 keynote slide
20141116 jjug ccc_2014_keynote1_public
20141116 jjug ccc_2014_keynote1_public
Yoshiharu Hashimoto
Agile Shimane のイベント(https://agileshimane.doorkeeper.jp/events/25816)での発表資料です。
ギルドワークスの現場コーチ
ギルドワークスの現場コーチ
GuildWorks
What's hot
(20)
UiPath Friends Festival 2021 テック三昧 EXCELアプリケーションスコープが無くなる日
UiPath Friends Festival 2021 テック三昧 EXCELアプリケーションスコープが無くなる日
実践!RPA のテクノロジーを活用した自動テスト
実践!RPA のテクノロジーを活用した自動テスト
○○したら受託開発が180°変わった
○○したら受託開発が180°変わった
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
昨日Ucp advanced受験してみた!
昨日Ucp advanced受験してみた!
信頼されるエンジニアへの貴重な一歩! テストのお勉強はどうやるの?
信頼されるエンジニアへの貴重な一歩! テストのお勉強はどうやるの?
こだわりのkintone
こだわりのkintone
俺の事業部
俺の事業部
Osashimi
Osashimi
老舗大企業からスタートアップへの挑戦
老舗大企業からスタートアップへの挑戦
プロダクト開発におけるプロダクトマネージャーの役割とは #devsumi
プロダクト開発におけるプロダクトマネージャーの役割とは #devsumi
Spring starterによるSpring Boot Starter
Spring starterによるSpring Boot Starter
How to develop a huge Single Page Application
How to develop a huge Single Page Application
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
アジャイルってなにが美味しいの
アジャイルってなにが美味しいの
長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化
ポストJenkins時代のCI戦略
ポストJenkins時代のCI戦略
20141116 jjug ccc_2014_keynote1_public
20141116 jjug ccc_2014_keynote1_public
ギルドワークスの現場コーチ
ギルドワークスの現場コーチ
Viewers also liked
2013/7/3 社内勉強会で発表した資料です。
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
2013/9/9に発表した内容です。 #html5biz #jjug
Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎
Satoshi Kubo
JavaEE7徹底入門 プレゼンテーション層の開発 JSF
JavaEE7徹底入門 プレゼンテーション層の開発 JSF
JavaEE7徹底入門 プレゼンテーション層の開発 JSF
Masuji Katoda
統計学レクチャー資料です。 全くの初心者が統計学の概要を理解できることをターゲットとした内容となっています。
統計学の基礎の基礎
統計学の基礎の基礎
Ken'ichi Matsui
Eclipseで文字化けする。一撃で文字化けを直す方法 ■WEBシステム開発 ■WEBデザイン ■WordPressカスタマイズ できます。 http://www.century-four.com/
Eclipse文字化けする。一撃で文字化けを直す方法
Eclipse文字化けする。一撃で文字化けを直す方法
H S
Eclipseプラグイン勉強会200711でのLTのスライド
Eclipse Plugin Dev 200711
Eclipse Plugin Dev 200711
Kenichi Takahashi
EMF勉強会
EMF勉強会
Norihito Ohshima
jscafeのBackboneの1回目。Parse(クラウドサービス)を使って、簡単なtodoアプリを作って、BackboneのMV*がどんな物か?見て行くという内容。
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
Ryuma Tsukano
2014/09/09に開催した「エンタープライヤーのためのWeb Componentsハンズオン〜Web ComponentsでWeb名刺を作ろう!〜」の資料です。 イベントサイト https://atnd.org/events/55761 ハンズオン資料 https://github.com/html5bizj/x-business-card
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Mitsuru Ogawa
前に作った簡易資料
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
2014/1/22 gooラボopen tech talkで話したBackbone.jsとMarionette.jsの話です。
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
Node.js 大阪勉強会 2014-06-14
Nodeを稼働させる
Nodeを稼働させる
kumatch kumatch
ここが変わった!Eclipse 3.6の新機能
ここが変わった!Eclipse 3.6の新機能
takezoe
2016/11/28 dots. フロントエンドエンジニア部 創立ビアバッシュ<会!https://eventdots.jp/event/605542
React+TypeScriptもいいぞ
React+TypeScriptもいいぞ
Mitsuru Ogawa
- Why Backbone - Architecture - Real World - Tips & Tricks - Extras
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
iloveigloo
eclipse利用したデバッグのコツをご紹介 開発の効率化、問題の素早い解決に役立ちます。
EclipseでのデバッグTips
EclipseでのデバッグTips
stylefreeslide
2014/02/12の楽天Tech Talkに登壇させてもらったときの発表スライドです。 2013年に発表したいくつかの内容をまとめました。 基本的に、ソフトウェアテストの絶望を聞きたい人向けです。
自動テストの誤解とアンチパターン in 楽天 Tech Talk
自動テストの誤解とアンチパターン in 楽天 Tech Talk
kyon mm
Ajax基礎講座 Ajaxの基本およびプログラミングをjQuery等のライブラリを使用しない生のコードで解説しています。
Ajax basic
Ajax basic
Katsuyuki Seino
私が取った資格、知っている資格についてわかる範囲で難易度その他諸々を独断と偏見で並べます。
資格四方山話
資格四方山話
Kazuro Fukuhara
Coffeescriptを初めて使う方へ
Coffeescriptを初めて使う方へ
Koya Fukuda
Viewers also liked
(20)
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎
JavaEE7徹底入門 プレゼンテーション層の開発 JSF
JavaEE7徹底入門 プレゼンテーション層の開発 JSF
統計学の基礎の基礎
統計学の基礎の基礎
Eclipse文字化けする。一撃で文字化けを直す方法
Eclipse文字化けする。一撃で文字化けを直す方法
Eclipse Plugin Dev 200711
Eclipse Plugin Dev 200711
EMF勉強会
EMF勉強会
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Nodeを稼働させる
Nodeを稼働させる
ここが変わった!Eclipse 3.6の新機能
ここが変わった!Eclipse 3.6の新機能
React+TypeScriptもいいぞ
React+TypeScriptもいいぞ
Client-side MVC with Backbone.js
Client-side MVC with Backbone.js
EclipseでのデバッグTips
EclipseでのデバッグTips
自動テストの誤解とアンチパターン in 楽天 Tech Talk
自動テストの誤解とアンチパターン in 楽天 Tech Talk
Ajax basic
Ajax basic
資格四方山話
資格四方山話
Coffeescriptを初めて使う方へ
Coffeescriptを初めて使う方へ
Similar to メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
社内で話した内容です。テストもっと楽したいな〜^^
賢くツールを使って脱人海戦術駆動テスト
賢くツールを使って脱人海戦術駆動テスト
Mitsuru Ogawa
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
Html5 and Graphics
Html5 and Graphics
Masakazu Muraoka
http://www.spath.jp/ こちらのエンタープライズ向けの資料(暫定)です。 検討はしていますよーという程度のものですが、だからこそ、今お声がけ頂けましたら、カスタマイズして提供なども可能です。もしご興味があればお問い合わせください。
Spath for enterprise
Spath for enterprise
Koichiro Sumi
JavaQne(じゃばきゅん) 2015 Fukuokaで発表したスライドです https://atnd.org/events/61398
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
学 松崎
AMD basic and practice
AMD basic and practice
Masakazu Muraoka
2013/10/31 HTML5jえんぷら部主催 HALLOWEEN WEB NIGHT発表スライド
HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識
Mitsuru Ogawa
こちらの資料の拡大版です。 http://www.slideshare.net/mitsuruogawa33/webangularjs
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
2015/01/24 13:00 JavaQne(じゃばきゅん) 2015 Fukuoka
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
https://pages.soracom.jp/SORACOMUGExplorer-2018_LP1.html 【画像出典】 ITmedia様 ギア部品の検品をAIで自動化、武蔵精密工業が自社内で試験運用へ http://image.itmedia.co.jp/l/im/mn/articles/1804/09/l_sp_180409musashi_01.jpg
SORACOM UG Explorer 2018 - IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウ
SORACOM UG Explorer 2018 - IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウ
紘之 大田黒
It is to introduce the development process using the yeoman, in particular, angular. I am writing at the discretion of its own relationship of angular and Web components in the second half.
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
2020/6/21 沖縄のフロントエンドカンファレンスで登壇したReact・Atomic Design・Styled Componentなどを活用したstorybook駆動開発についての発表資料です。 https://charity-conf.okinawa.jp/
Next.js Storybook Driven Development
Next.js Storybook Driven Development
Takuya Tejima
Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら? という内容です。
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
Masakazu Muraoka
2016年9月16日に開催された「Developers Summit 2016 KANSAI 関西ITエンジニアの祭典」で、技術本部 江草 陽太が登壇した際の資料です。 ■イベント詳細 http://event.shoeisha.jp/devsumi/20160916/
さくらとエンジニアの幸せな未来を実現するための組織づくり(Developers Summit 2016 KANSAI)
さくらとエンジニアの幸せな未来を実現するための組織づくり(Developers Summit 2016 KANSAI)
さくらインターネット株式会社
オンプレエンジニアがクラウドエンジニアを夢見て。じっと手を見る。
オンプレエンジニアがクラウドエンジニアを夢見て。じっと手を見る。
Akihiro Kuwano
従来のWebアプリケーションとSPAの違いに着目し、Spring Boot × Vue.jsでSPAを作る際のポイントやハマりどころを紹介します。
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
JJUG CCC 2015 Fall 2015-11-28T15:00-15:50 の発表資料です。 話せなかった分は切りましたが、言いたいことは言い切っています。
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
irof N
Enterprise Agile・DevOps と XR テクノロジーの金融 IT 適用への取り組み (wankuma勉強会東京3/24)
Enterprise agile dev ops-and-xr-techonology-adoption-for-fintech-20180324
Enterprise agile dev ops-and-xr-techonology-adoption-for-fintech-20180324
Shotaro Suzuki
Similar to メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
(20)
賢くツールを使って脱人海戦術駆動テスト
賢くツールを使って脱人海戦術駆動テスト
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Html5 and Graphics
Html5 and Graphics
Spath for enterprise
Spath for enterprise
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
AMD basic and practice
AMD basic and practice
HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
SORACOM UG Explorer 2018 - IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウ
SORACOM UG Explorer 2018 - IoTxAIを活用した小売業向け店舗解析サービスの仕組みとノウハウ
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Next.js Storybook Driven Development
Next.js Storybook Driven Development
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
さくらとエンジニアの幸せな未来を実現するための組織づくり(Developers Summit 2016 KANSAI)
さくらとエンジニアの幸せな未来を実現するための組織づくり(Developers Summit 2016 KANSAI)
オンプレエンジニアがクラウドエンジニアを夢見て。じっと手を見る。
オンプレエンジニアがクラウドエンジニアを夢見て。じっと手を見る。
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
Enterprise agile dev ops-and-xr-techonology-adoption-for-fintech-20180324
Enterprise agile dev ops-and-xr-techonology-adoption-for-fintech-20180324
More from Mitsuru Ogawa
ng-mtg#7 Angular勉強会 2016-05-17(火) https://angularjs-jp.doorkeeper.jp/events/42684
Angular2 rc.1 unit testing overview
Angular2 rc.1 unit testing overview
Mitsuru Ogawa
2015/09/03 株式会社フレクトにて行われた社内勉強会資料
Webアプリケーションセキュリティ ディスカッション資料
Webアプリケーションセキュリティ ディスカッション資料
Mitsuru Ogawa
2015/7/30 フレクト社内勉強会資料
Lightningコンポーネント事始め
Lightningコンポーネント事始め
Mitsuru Ogawa
『5』月『5』日はHTML『5』 での発表内容です。 https://atnd.org/events/65547
ゆるふわWoT&firefoxOS体験記
ゆるふわWoT&firefoxOS体験記
Mitsuru Ogawa
今後のWeb開発の未来を考えて AngularJSにしました ~とあるSIerの場合~ いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念イベント発表資料 http://angularjs-jp.doorkeeper.jp/events/14893
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
2013/7/3の社内
ゆるふわCSS3
ゆるふわCSS3
Mitsuru Ogawa
2013/06/11 Webオフライン技術研究会#01のLT資料。2013年春の時点では、IndexedDBではなくWebStorageがデータ永続化での現実解だと思う。
オフラインWeb 今どきのデータ永続化事情
オフラインWeb 今どきのデータ永続化事情
Mitsuru Ogawa
社内3分LTで発表した資料です
Enja OSSやってます
Enja OSSやってます
Mitsuru Ogawa
More from Mitsuru Ogawa
(8)
Angular2 rc.1 unit testing overview
Angular2 rc.1 unit testing overview
Webアプリケーションセキュリティ ディスカッション資料
Webアプリケーションセキュリティ ディスカッション資料
Lightningコンポーネント事始め
Lightningコンポーネント事始め
ゆるふわWoT&firefoxOS体験記
ゆるふわWoT&firefoxOS体験記
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
ゆるふわCSS3
ゆるふわCSS3
オフラインWeb 今どきのデータ永続化事情
オフラインWeb 今どきのデータ永続化事情
Enja OSSやってます
Enja OSSやってます
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
1.
メンテナンス性の良い Webシステムを構築するために Javaとフロントエンドでやるべきこと 2013/11/09 JJUG CCC HTML5jエンタープライズ部 小川充(@mitsuruog) photo
credit http://www.ashinari.com/2013/09/06-381684.php
2.
自己紹介 小川充(おがわみつる) 株式会社クレスコ 技術研究所 フロントエンジニア 進化し続けるフロントエンド技術と システム開発の現場をいかに融合させるか! 業務システムエンジニア目線で活動しています。 ・HTML5jエンタープライズ部 運営メンバー ・OSSドキュメント翻訳コミュニティ enja-ossメンバー ・Github:https://github.com/mitsuruog ・Twitter:https://twitter.com/mitsuruog
3.
はじめに サーバサイドにはうるさい業務系フロントエンジニアです。 2013/09/09にHTML5jエンタープライズ部とJJUGと共催で 「Web×Java」をテーマに勉強会を企画、開催しました。 業務系WebアプリケーションがStrutsから旅立つ日 http://www.slideshare.net/mitsuruogawa33/webstruts 「業務系システムは今すぐ脱Strutsを!」業務システムエンジニアのためのHTML5勉強会#04 活動報告 http://gihyo.jp/news/report/2013/09/1901
4.
はじめに 昨今、UIがリッチになるに従い、サーバ側で実装されていたものがフロント側でも 実装されるようになってきました。 その際にWebシステムのメンテナンス性の上で大切なことは、フロント側とサーバ側 の役割分担を明確にし、影響しあう部分を局所化すること。 これからのJavaでのWeb開発において、フロント側とサーバ側の役割をどのように 考えれば良いかお話します。 話さないこと ・クライアントMV*系フレームワークの詳細 ・Javaサーバ側実装の詳細 ・CSS(←Webのメンテナンス性を語る上では重要な要素 ) ・JSF1.X ・Richfaces、Primefaces ・Scala、Groovy
5.
1.画面構築方式とアンチパターン
6.
なぜ画面構築方式なのか? ・フロント側のロジックのほとんどは画面構築に関するもの。 ・Ajaxの登場以来、画面の部分更新が多く行われるようになり、画面構築方法が複雑 化し、フロント側の実装量が増えてきた。 ・画面構築の部分が、最もサーバ側との機能重複が発生しやすい箇所。
7.
画面構築方式(従来型・画面遷移方式) サーバサイド フロントエンド Model Contoller HTML テンプレート View ロジック HTML ・画面はサーバ側で生成。 ・レスポンスはHTMLベース Ajaxで画面を部分更新し始めると危険なパターン (よくある)
8.
画面構築方式(次世代型・REST API方式) サーバサイド フロントエンド VM*系フレームワーク Contoller (View) Model Contoller JSON HTML View テンプレート ロジック ・レスポンスはJSONベース ・画面はフロント側で生成(データバインディング) サーバ側で画面を部分構築し始めると危険なパターン (あまりない、要員スキルなど途中で妥協した場合などに起こる。) Model
9.
画面構築方式(まとめ) ・2つの方式も混ざり合わない間は問題ない。 ・2つの方式が混ざり合う部分で機能的な重複が起こる。 ・混ざり合う部分での方針やルールが定まっていない場合に混乱が起こり、機能重複 が起こる。
10.
2.フロントエンドの役割とは何か? ~Javascriptの場合~
11.
フロントエンドの役割(従来型) DOM操作 (アニメーション) Ajax フロントエンド役割があまりなかった時代
12.
フロントエンドの役割(次世代型) DOM操作 (アニメーション) Ajax テンプレートエンジン テンプレート リソース同期 MV*系フレームワーク 構造化 JAX-RSの場合はこの構成
13.
フロントエンドの役割(JSFの場合) DOM操作 (アニメーション) Ajax テンプレート リソース同期 JSF 構造化 サーバサイドに大きく依存しており フロントとの役割分担の見極めが難しい (アンチパターン)
14.
フロントエンドの役割(まとめ) ・フロントエンドが求められる役割は主に5つ。 (DOM操作、Ajax、テンプレート、データ同期、構造化) ・JSFの場合は、フロントエンドとの役割分担の見極めが難しくアンチパターンに陥りや すい。
15.
3. JAX-RS、JSF(2.0+) それぞれとの組み合わせ方 ~フロントエンド組み合わせの留意事項~
16.
JAX-RSの場合 ・画面構築方式は次世代型。画面はフロント側で生成。 ・JAX-RSはREST仕様に則ったWebAPIが容易に作成可能。 例)サーバ側REST実装例 ルーティング、JSONシリアライズが直感的 @RequestScoped @Path("hoge") public class HogeResource
{ @GET @Path("product") @Produces(MediaType.APPLICATION_JSON) public Product getProduct() { Product product = new Product(); product.setId(1); product.setName("Mattress"); product.setDescription("Queen size mattress"); product.setPrice(500); return product; } } 呼び出すURL http://localhost:8080/web_root/webresources/hoge/product
17.
JAX-RSの場合 ・サーバとのREST API呼び出しを隠蔽するようなJavascriptMV*系F/Wと相性がよい。 (個人的にはBackbone.js、Anguler.js推奨) フロント側実装 (Backbone.js) Java側の実装(URLは「hoge/product」) @RequestScoped var
Model = Backbone.Model.extend({ @Path("hoge") url: 'webresources/hoge/product' public class HogeResource { }); @GET var View = Backbone.View.extend({ @Path("product") @Produces(MediaType.APPLICATION_JSON) initialize: function() { public Product getProduct() { this.model = new Model(); Product product = new Product(); this.model.fetch(); this.render(); //画面の再構築 //省略 }, render: function(){ return product; } //省略 } } }); fetch()呼び出し時にGETリクエストを投げる //Viewの初期化 受信後、F/W側で勝手にModelのデータを更新する new View(); (Backbone.sync)
18.
JAX-RSの場合(その他留意事項) ・フロント側に実装量が増えるため、JavascriptMV*系F/Wでの構造化が必須。 ・フロント側にテンプレートエンジンが必要。 ・初期表示時に表示データ取得用の余計なリクエストが1回飛ぶ。 (これをどう捕らえるか次第…) ・本格的にフロントエンジニアの参画が必要。
19.
JSF(2.0+)の場合 ・画面構築方式は基本的に従来型。 ・画面構築はサーバ側。Ajax通信時もサーバ側で画面構築する。 ・Ajaxでの画面部分構築は<f:ajax>を使用すること。 例)Ajax入力チェック「 JSF側」 <h:form id="form"> <h:inputText
id="name" value="#{user.name}" validator="#{user.validateName}"> <f:ajax execute="name" render="nameError" event="blur" /> </h:inputText> <h:message for="name" id="nameError" style="color: red"/> </h:form> サーバ側のロジック <f:ajax>でJavascriptを記述することなくAjax呼び出しが可能
20.
JSF(2.0+)の場合 ・jQueryなどから画面部分更新したいケースは、JSFライブラリのAjax通信機能を使用 すること。 ⇒画面構築部分はJSFの影響力が強すぎるため、テンプレートとAjax部分は割り 切って任せたほうが良い。(後述) jQueryからフックする例) $(document).on('click', '#form:validate', function(e)
{ jsf.ajax.request(e.target, e, { execute: 'form:name', render: 'form:nameError' 正直、書き方が気持ち悪いw }); e.preventDefault(); そもそも、無理にフックする必要ない。 }); そうなるようであれば設計を見直した方がいいかも。
21.
JSF(2.0+)の場合 ・JSFが持つ、テンプレートとUIコンポーネント化の仕組みが優秀。 ⇒UIのコンポーネント化にTaglibのように面倒な手続きが不要。 ・<f:metadata>の登場により、GETパラメータの扱いが容易になった。 UIテンプレート化 <ui:insert>と<ui:define> UIコンポーネント化 <composite:interface>と<composite:implementation> GETリクエストとの親和性向上 <f:metadata>と<f:viewParam>
22.
JSF(2.0+)の場合(その他留意事項) ・(注意)JSFのAjax通信のレスポンスはXML形式で、かつ独自色が強い。 例)先ほどの入力チェック時に返ってきたレスポンス <?xml version='1.0' encoding='UTF-8'?> <partial-response
id="j_id1"> <changes> 部分的なHTMLが返ってくる。 <update id="form:nameError"> <![CDATA[<span id="form:nameError" style="color: red">必須入力です </span>]]> </update> <update id="j_id1:javax.faces.ViewState:0"> <![CDATA[8183146577291182963:-4484956516055255891]]> </update> </changes> </partial-response> レスポンスを受けて、自前で何かしようとか思わないほうがいい。
23.
JSF(2.0+)の場合(その他留意事項) ・サーバ側の依存度が高いため、Javascriptとの役割分担が難しい。 ⇒むしろ、フロントエンドの出番はあまりない(ようにするべき)。 ・JavascriptMV*系F/Wとの組み合わせるべきではない。 ・Javascriptライブラリ選定はJSFと機能の包含関係を考慮して行うべき。
24.
4.まとめ
25.
まとめ(JAX-RS) ・サーバ側の役割はREST APIに徹する。 ・フロント側の役割はテンプレートと画面構築を担う。 ・別途、JavascriptMV*系F/Wなどで構造化が必須。 長所 ・基本的にどんな UIにも対応可能。 ・フロントエンドの分業が可能。 ・様々なJavascriptMV*系F/Wやライブラリが選択可能。 ・JSONベースの小さいデータのやり取りが主流であるため、通信環境の悪いモバイルに適してい る。 短所 ・フロントエンジニア的にはないw。 ・気をつけないと、
Javascriptがメモリリークしやすい。 ・規模や難易度に見合うフロントエンジニアの調達・教育が課題。
26.
まとめ(JSF2.0+) ・フロントエンドとの役割分担を見極めれば、非常に優秀はWebフレームワーク。 ・JSFのテンプレートとAjax通信機能をフルで使う前提で設計するべき。 ・むしろフロント側の役割は多く持たせるべきではない。 ・JavascriptMV*系F/Wとの組み合わせるべきではない。 長所 ・Javaエンジニアのみで、ある程度リッチな Webシステムを安全に構築可能。 ・JSFの<f:ajax>タグを使っている範囲であれば、 Javascriptを意識する必要はない。 ・テンプレート、
UIコンポーネント化機能が優秀で、 UIの再利用性が高くなる。 短所 ・リッチなUIには向かない。 ・HTML/XMLベースのやり取りが主流であるため、モバイル環境には適していない場合がある。 ・安易にAjaxの部分更新ができるため、更新する範囲のコントロールに注意が必要。 ・フロントエンジニアにアンチファンが多い。
27.
ご静聴ありがとうございました! 2013/11/09 JJUG CCC HTML5jエンタープライズ部 小川充(@mitsuruog) photo
credit http://www.ashinari.com/2007/05/07-002031.php
Download now