Front-end の歩き方20160726_G'sNight Session Hirata Tomoko

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 年目 SEG'sAcademy 4thDEV

平田智子 (hirata tomoko)

What's WEB Engineer ？front-end Engineer?

back-end Engineer?

mark-up Engineer?

full-stack Engineer?

フロントエンドとは、 ( 略 ) 、ユーザや他のシステム、ソフトウェアなどと直接データなどのやり取りを行う要素のこと。ユーザからの操作の受付や画面表示などを担当する 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 】

HTML

CSS

Client-Sideprogramming≒ JavaScript

Server-Sideprogramming

インフラ構築

full-stack Engineer

front-end Engineermark-up Engineer back-end Engineer

How to walkfrom Front-end to Back-end ?

Step.1 静的サイト開発• HTML/CSS

- HTML5- CSS3

Step.2 動的サイト開発• HTML5/CSS3/JavaScript• css/js ライブラリの活用

- bootstrap- jQuery

• レスポンシブデザイン ,UI/UX

Step.3 中規模の Web アプリケーション開発• 複数ページのサイト作成 • Web プリケーションアーキテクチャ

- MV*- JSON- 通信 Ajax

• JS フレームワークの活用- Knockout.js,Backbone.js,AngularJS,Vue.js- ReactJS,Riot.js

• HTML/CSS/JS + サーバサイド• WebAPI(REST API)• データベース

- MySQL,PostgreSQL,NoSQL

Step.4 フロントエンド＋サーバサイド開発

• 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 効率化を考えた開発

• 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 大規模な開発

What Engineer do you want to be ?

組み合わせいろいろWEB Engineer 　 × 　セキュリティ SEO 　 EC サイト

× 　リアルタイム通信 　 Chat SNS 広告配信

× 　ゲーム　 WEBGL/VR 　 Unity 　

× 　ハードウェア IoT ドローン

× 　統計分析　機械学習　 Deep learning × 　… etc

WEB Engineer 　 × 　 Your Interest = ∞なりたいエンジニアになろう！

Icon 提供： http://raindropmemory.deviantart.com/art/Legendora-Icon-Set-118999011