20160726 GsNight登壇資料です。  https://atnd.org/events/78168

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