株式会社セラクさんの「SERAKU_みんなの情熱大学、Webサイトを作るエンジニアになりたい方の入門講座に参加してきました。
参加意図としては、webデザインサイドの人間からすると「フロントエンドエンジニア」という職種の領域が分からなかったので、そのあたりを明確にするためです。
https://serakumedia.connpass.com/event/102111/
Contents
フロントエンドエンジニアとは？
webサイトの利用者が直接、見聞き・操作する部分を担当する技術者
webページの記述など手がけるエンジニア
マークアップエンジニア（コーダー）との違いは？
マークアップエンジニア（コーダー）は、デザイナーが作ったデザイン（PSDデータなど）を元に、形にする職。
技術的には、HTML CSS Javascriptが書ける（実装）。
フロントエンドエンジニアは、さらに上位職種。
HTML CSS Javascriptの『設計』と実装ができる。
web準拠や、アクセスビリティに準拠したコーディングを行い、保守性・可読性に優れた設計が求められる。
Javascriptでは、プラグインのカスタマイズや、１から自分で設計・実装できる。
フロントエンドエンジニアの業務内容
HTML CSS JavaScriptの『設計』と実装
業務の流れ
原稿 ワイヤーフレーム デザイン コーディング 本番アップ
↓レビュー↑ ↓レビュー↑ ↓レビュー↑
使用するソフトやファイル形式など
デザインカンプ：psd
バージョン管理：Gitなどのバージョン管理で、ソースコードをプッシュ（変更履歴をアップロード）する
共有リポジトリから取得、コミット
ローカルで編集・更新作業
フロントエンドエンジニアの技術領域
HTML CSS SEO
CMS JavaScript
API（webサービス） HTML5 CSS3
スマホ、タブレットのブラウザ インターフェイスに関する知識
レスポンシブWEBデザイン
サイト表示高速化の知識と手法
HTML
HTML4 ３つのDTD（文書型定義）を規定
HTML5 構造的にスッキリ書ける 動画や音声、グラフィック描画が可能
HTML5.1cture>とsrcset属性 レスポンシブ
HTML5API
CSS
CSS2
CSS3 角丸やドロップシャドウなど加えた規格
CSSハック ブラウザ間の違いを吸収するテクニック
jQuery
JavaScriptライブラリ ブラウザの差異も軽減 作業負担の軽減にも
パフォーマンスは低下
Ajax
ページを遷移せずデータだけ非同期でとり、サイトに描画する仕組み
（非同期とは、データを転送する際に、送信側と受信側のタイミングの一致（同期）を気にせずにデータをやり取りすることである。）
JavaScriptフレームワーク
骨組み 大まかな雛形を用意することで、特定の機能をもたせる
React
AngularJS
Vue.js
フロントエンドエンジニアの勉強方法
学習サービス
Progate
https://prog-8.com
書きながら覚えられる
解説スライド ＋ 演習
ドットインストール
https://dotinstall.com
３分動画
一回一回が短い
実際に動かす
codepen.io
ブラウザ上でコーディングできるサービス
書いたページがその場で反映
また、他の人が書いたコードが見れる
jsdo.it
こちらは日本語対応
jibin.com
表示が軽い
資格を取得
Webクリエイター能力認定試験
エキスパート勉強
HTML５プロフェッショナル認定試験
レベル１ マルチデバイスに対応したサイト HTML5を使って企画・制作できる
レベル２ 最新のAPIを駆使したサイトを企画・制作できる
勉強会への参加
みんなの情熱大陸
CONNPASS
ATND
TECH PLAY
最新情報の収集
RSSフィードの利用
feedly
twitter
リスト機能 情報をカテゴライズして拾っていく
Github
言語別で、いまGithub内でトレンドになってるリポジトリを見ることができる
おすすめサイト
コリス
Photoshop VIP
NxWorld
ICS MEDIA
コムテブログ
HTML5 EXPERT.jp
WPJ
イベント概要
https://serakumedia.connpass.com/event/102111/
IT業界未経験者を対象に、フロントエンドエンジニアの基本的な業務を紹介していきます。 フロントエンドエンジニアとは、コーディングとプログラミングのスキルを持ち、 ユーザーにとって使いやすいWebサイトを構築する職種になります。
フロントエンドエンジニアになりたい人のためのキャリア相談も行っております。
他業種からのキャリアチェンジを希望される第二新卒や社会人歴の長い方も歓迎！
未経験からでもしっかり学んで仕事にすることも可能です。
何を持って帰れるのか
フロントエンドエンジニアとは？
フロントエンドエンジニアの業務内容
フロントエンドエンジニアの技術領域
フロントエンドエンジニアの勉強方法