Submit Search
Upload
Walking front end
•
Download as PPTX, PDF
•
1 like
•
2,299 views
Hirata Tomoko
Follow
20160726 GsNight登壇資料です。 https://atnd.org/events/78168
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 15
Download now
Recommended
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
Rails5クイックスタート
Rails5クイックスタート
Hirata Tomoko
Rails+Markdownでなにかつくる
Rails+Markdownでなにかつくる
Hirata Tomoko
WindowsユーザのためのRails環境構築
WindowsユーザのためのRails環境構築
Hirata Tomoko
Electronからはじめるnodejs
Electronからはじめるnodejs
Hirata Tomoko
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
Hirata Tomoko
Railsチュートリアル(second)を終えて
Railsチュートリアル(second)を終えて
Hirata Tomoko
Rubyを楽しくする第一歩!ブロックを理解する!
Rubyを楽しくする第一歩!ブロックを理解する!
Kanako Kobayashi
Recommended
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
Rails5クイックスタート
Rails5クイックスタート
Hirata Tomoko
Rails+Markdownでなにかつくる
Rails+Markdownでなにかつくる
Hirata Tomoko
WindowsユーザのためのRails環境構築
WindowsユーザのためのRails環境構築
Hirata Tomoko
Electronからはじめるnodejs
Electronからはじめるnodejs
Hirata Tomoko
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
Hirata Tomoko
Railsチュートリアル(second)を終えて
Railsチュートリアル(second)を終えて
Hirata Tomoko
Rubyを楽しくする第一歩!ブロックを理解する!
Rubyを楽しくする第一歩!ブロックを理解する!
Kanako Kobayashi
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
Yuhei Miyazato
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
Toshio Ehara
2013 08-19 jjug
2013 08-19 jjug
sk44_
Rubyをちょっと理解しよう
Rubyをちょっと理解しよう
Shun Hikita
無名関数のすすめ
無名関数のすすめ
Shoichi Kakizaki
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
Satoshi Takami
いわみくとMeetup第15回
いわみくとMeetup第15回
Satomi Tsujita
RubyとRailsのおいしい使い方
RubyとRailsのおいしい使い方
Satomi Tsujita
Ember コミュニティとわたし
Ember コミュニティとわたし
Ryunosuke SATO
RubyとRのおいしい関係
RubyとRのおいしい関係
sady_nitro
Sprocketsを捨てたい
Sprocketsを捨てたい
Masato Noguchi
Kids,Ruby,Fun! ぼくたち、 Rubyプログラミング少年団! 〜小学生からはじめる Ruby プログラミング〜
Kids,Ruby,Fun! ぼくたち、 Rubyプログラミング少年団! 〜小学生からはじめる Ruby プログラミング〜
宏治 高尾
TypeScript 入門してみる
TypeScript 入門してみる
Ken Fukuyama
簡単!Groovy入門
簡単!Groovy入門
Lee Choong Geun
Electron を知る
Electron を知る
Tomoya Shibata
「Microbit」で簡単プログラミング体験
「Microbit」で簡単プログラミング体験
はなずきん Hana
♡PHPが恋しい話♡
♡PHPが恋しい話♡
Shinichi Takahashi
Ruby with My Life
Ruby with My Life
Hiroshi SHIBATA
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
BeMarble
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
フロントエンド技術の変遷
フロントエンド技術の変遷
Ryo Higashigawa
More Related Content
What's hot
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
Yuhei Miyazato
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
Toshio Ehara
2013 08-19 jjug
2013 08-19 jjug
sk44_
Rubyをちょっと理解しよう
Rubyをちょっと理解しよう
Shun Hikita
無名関数のすすめ
無名関数のすすめ
Shoichi Kakizaki
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
Satoshi Takami
いわみくとMeetup第15回
いわみくとMeetup第15回
Satomi Tsujita
RubyとRailsのおいしい使い方
RubyとRailsのおいしい使い方
Satomi Tsujita
Ember コミュニティとわたし
Ember コミュニティとわたし
Ryunosuke SATO
RubyとRのおいしい関係
RubyとRのおいしい関係
sady_nitro
Sprocketsを捨てたい
Sprocketsを捨てたい
Masato Noguchi
Kids,Ruby,Fun! ぼくたち、 Rubyプログラミング少年団! 〜小学生からはじめる Ruby プログラミング〜
Kids,Ruby,Fun! ぼくたち、 Rubyプログラミング少年団! 〜小学生からはじめる Ruby プログラミング〜
宏治 高尾
TypeScript 入門してみる
TypeScript 入門してみる
Ken Fukuyama
簡単!Groovy入門
簡単!Groovy入門
Lee Choong Geun
Electron を知る
Electron を知る
Tomoya Shibata
「Microbit」で簡単プログラミング体験
「Microbit」で簡単プログラミング体験
はなずきん Hana
♡PHPが恋しい話♡
♡PHPが恋しい話♡
Shinichi Takahashi
Ruby with My Life
Ruby with My Life
Hiroshi SHIBATA
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
BeMarble
What's hot
(20)
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
webSocket通信を知らないiOSエンジニアが知っておいて損はしない(経験談的な)軽い話
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
2013 08-19 jjug
2013 08-19 jjug
Rubyをちょっと理解しよう
Rubyをちょっと理解しよう
無名関数のすすめ
無名関数のすすめ
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
JavaFXとRoboVMを使ってiOS上で動くアプリを試してみた
いわみくとMeetup第15回
いわみくとMeetup第15回
RubyとRailsのおいしい使い方
RubyとRailsのおいしい使い方
Ember コミュニティとわたし
Ember コミュニティとわたし
RubyとRのおいしい関係
RubyとRのおいしい関係
Sprocketsを捨てたい
Sprocketsを捨てたい
Kids,Ruby,Fun! ぼくたち、 Rubyプログラミング少年団! 〜小学生からはじめる Ruby プログラミング〜
Kids,Ruby,Fun! ぼくたち、 Rubyプログラミング少年団! 〜小学生からはじめる Ruby プログラミング〜
TypeScript 入門してみる
TypeScript 入門してみる
簡単!Groovy入門
簡単!Groovy入門
Electron を知る
Electron を知る
「Microbit」で簡単プログラミング体験
「Microbit」で簡単プログラミング体験
♡PHPが恋しい話♡
♡PHPが恋しい話♡
Ruby with My Life
Ruby with My Life
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
Similar to Walking front end
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
フロントエンド技術の変遷
フロントエンド技術の変遷
Ryo Higashigawa
Web開発の 今までとこれから
Web開発の 今までとこれから
Shinichi Takahashi
Goji とレイヤ化アーキテクチャ
Goji とレイヤ化アーキテクチャ
Shiroyagi Corporation
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
Masahito Zembutsu
My portfolio
My portfolio
ssuserc2210b
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Kouji Matsui
フロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリ
Tomotaka Kusaka
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Saki Homma
ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03
Daiki Maekawa
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
Docker meetup tokyo_public_r001
Docker meetup tokyo_public_r001
cyberblack28 Ichikawa
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
Keisuke Nishitani
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
DIVE INTO CODE Corp.
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Saki Homma
ぼくのNode.jsのだいいっぽ
ぼくのNode.jsのだいいっぽ
拓弥 遠藤
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
Megumi Otani(Czenhe)
Similar to Walking front end
(20)
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
フロントエンド技術の変遷
フロントエンド技術の変遷
Web開発の 今までとこれから
Web開発の 今までとこれから
Goji とレイヤ化アーキテクチャ
Goji とレイヤ化アーキテクチャ
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
My portfolio
My portfolio
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
フロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリ
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
Docker meetup tokyo_public_r001
Docker meetup tokyo_public_r001
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
ぼくのNode.jsのだいいっぽ
ぼくのNode.jsのだいいっぽ
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
Walking front end
1.
Front-endの歩き方 20160726_G'sNight Session Hirata
Tomoko
2.
About Me Frontend jQuery,ES6
AngularJS,TypeScript Backend ASP.NET(VB.NET/C#) Ruby on Rails Node.js PHP Github https://github.com/tomoko523 blog http://tomoko-tsubasa.hateblo.jp/ Qiita http://qiita.com/tomoko523 vb.net開発経験後webアプリケーション開発を学ぶ。 JavaScriptとサーバサイド寄りでごりごりロジックを作 るのが好き。 最近は関数型プログラミングに手を出し始めた。 一番好きなJSライブラリはKnockout.js 中小SIer5年目 SE G'sAcademy 4thDEV 平田智子 (hirata tomoko)
3.
What's WEB Engineer? front-end
Engineer? back-end Engineer? mark-up Engineer? full-stack Engineer?
4.
フロントエンドとは、(略)、ユーザや他のシステム、ソフトウェアなどと直接デ ータなどのやり取りを行う要素のこと。 ユーザからの操作の受付や画面表示などを担当するGUI(グラフィカルユーザイン タフェース)プログラムなどがこれに当たる。 フロントエンドからのデータ入力や指示などを受けて、ユーザから直接見えない ところでデータの処理や保存、処理結果の出力などを行う要素は「バックエンド 」(back-end)という。 http://e-words.jp/w/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89.html フロントエンド 【 front-end
】
5.
HTML CSS Client-Side programming ≒ JavaScript Server-Side programming インフラ 構築 full-stack Engineer front-end
Engineermark-up Engineer back-end Engineer
6.
How to walk from
Front-end to Back-end ?
7.
Step.1 静的サイト開発 • HTML/CSS -
HTML5 - CSS3
8.
Step.2 動的サイト開発 • HTML5/CSS3/JavaScript •
css/jsライブラリの活用 - bootstrap - jQuery • レスポンシブデザイン,UI/UX
9.
Step.3 中規模のWebアプリケーション開発 • 複数ページのサイト作成 •
Webプリケーションアーキテクチャ - MV* - JSON - 通信 Ajax • JSフレームワークの活用 - Knockout.js,Backbone.js,AngularJS,Vue.js - ReactJS,Riot.js
10.
• HTML/CSS/JS +
サーバサイド • WebAPI(REST API) • データベース - MySQL,PostgreSQL,NoSQL Step.4 フロントエンド+サーバサイド開発
11.
• altjs - TypeScript,coffeeScript,Babel •
CSSプリプロセッサ - Sass/LESS • 各種ツール活用 - Package Manager : nuget,npm,bower - Task runnner : grunt,gulp - scaffolding : Yeoman - Test framework : Mocha Jasmin QUnit Step.5 効率化を考えた開発
12.
• Webアプリケーションフレームワーク - CakePHP,Larabel(PHP) -
Ruby on Rails(Ruby) - Express(Node.js) …etc • SPA(Single Page Application) - Meteor(Node.js) - Bakcbone.js,AngularJS,React.js - WebSocket Step.6 大規模な開発
13.
What Engineer do you
want to be ?
14.
組み合わせいろいろ WEB Engineer × セキュリティ
SEO ECサイト × リアルタイム通信 Chat SNS 広告配信 × ゲーム WEBGL/VR Unity × ハードウェア IoT ドローン × 統計分析 機械学習 Deep learning × …etc
15.
WEB Engineer ×
Your Interest = ∞ なりたいエンジニアになろう! Icon提供:http://raindropmemory.deviantart.com/art/Legendora-Icon-Set-118999011
Download now