Session 4

フロントエンドエンジニアの話

株式会社CCL 西本浩幸

目次

l 最初に

l 自己紹介

l フロントエンドエンジニアとは

l サイト構築の流れ（私の場合）

l フロントエンドエンジニアとして生きていくということ

最初に

私はフロントエンドエンジニアとしての仕事はしていますが、

ウェブサイト制作者として生きているわけではありません。

最初に

自己紹介

l 西本浩幸（34）

l 会津大学８期生（2000年入学）

会津若松市在住l 愛知県名古屋市出身

l 略歴l- 大学卒業後はPHSのSEとして就職 (2004)

l- 会社を退職後、ウェブ業界へ (2006)

l- HTML、JavaScript、Flash、Perlの仕事に従事l- 会津で個人事業を開業、CCLに入社。現在に至る。

自己紹介

l株式会社ＣＣＬでの仕事

l - オープンデータに関する勉強会の開催l （オープンデータカフェ会津をよろしくお願いします）

- オープンデータに関する調査報告書の作成

- オープンデータに関するウェブサービスの開発

- オープンデータに関する開発イベントへの参加

フロントエンドエンジニアとは？

フロントエンドエンジニアとは？

lWebサイトの”見える部分”

lに関わるあらゆることを行う人

フロントエンドエンジニアとは？

HTML CSS

扱うテーマの変遷

～2006年

javascript

～2011年XHTML CSS js 携帯

最近HTML5 CSS3 js mobile

performance

responsive

フロントエンドエンジニアとは？

lやることが多すぎる!!

lどうすればいいの!?

lQuestion

フロントエンドエンジニアとは？

lとにかく基本を身につけてl自分の作業スタイルを

l確立してください。

lAnswer

フロントエンドエンジニアとは？

lPC対応のみのサイトを短時間でlかつ正確に制作できる。

lＰＣ対応のみのサイトを短時間でl正確にスマホ対応化できる。

サイト構築の流れ（私の場合）

サイト構築の流れ

l初回内部打ち合わせ

lディレクターが持って返ってきた内容を、デザイナーやサーバーサイドエンジニアと共に仕様の打合わせ。

lラフデザイン作成～完成

lディレクターが先方で打合わせ

l自分コーディング不可能なデザイン要素の確認l※可能な範囲で修正をしてもらう。

lディレクターが先方で打合わせ

サイト構築の流れ

l内部打ち合わせ

ディレクターが持って返ってきた内容を、デザイナーやサーバーサイドエンジニアと共に仕様の打合わせ。

l細かいギミック、サーバサイド連携の仕様の確認

l本デザイン作成～完成

l構築に必要な未修得の技術があれば調べるなどしてl準備をします。

サイト構築の流れ

lサイトの設計図作成

lh1、h2などのタグの割り振り、div要素となる箇所のl横幅や高さ、余白の値を記入した図を作成。

lデザインを紙に印刷して、その中に書き込んでいきます。

サイト構築の流れ

lコーディング開始

l設計図を元に、まずはhtmlファイルを作成。

lCSSを適用しない状態で自然に情報が表示されるかをl確認します。

lＣＳＳを作成。

l作成の都度、サーバに置いてブラウザの表示チェックlをしています。

サイト構築の流れ

lコーディング開始

l設計図を元に、まずはhtmlファイルを作成。

lCSSを適用しない状態で自然に情報が表示されるかをl確認します。

lＣＳＳを作成。

l作成の都度、サーバに置いてブラウザの表示チェックlをしています。

サイト構築の流れ

l完成

lリンク切れや文字の打ち間違いがないかチェック。

lコーディング中に気になったことやエラーの対応でうまくl解決できたことなどをまとめて今後に活かしましょう。

lJavascript の組み込み開始

lスムーズにプログラミングに移行できるようl事前の準備が必要です。

「こういうサイトを作ってください」

と頼まれたものは作れるようになる。

飽きてきます。※全ての人がそうなるわけではありません！

フロントエンドエンジニアとして生きていくということ

FEとして生きていくということ

技術は、あくまで道具。

この道具はあなたがやりたいこと、やるべきことを実現していくためのもの。

FEとして生きていくということ

友人が開いたお店をPRしたい

サークル活動を支援したい

身の回りの課題を解決したい

社会問題を解決したい

FEとして生きていくということ

自分自身で課題をみつけて解決するための１つの手段としてのＷｅｂサイト構築。

自己紹介

l 西本浩幸

l 会津大学８期生

l 愛知県名古屋市出身

l 略歴l- 大学卒業後はPHSのSEとして就職 (2004)

l- 会社を退職後、ウェブ業界へ (2006)

l- HTML、JavaScript、Flash、Perlの仕事に従事(2013)

l- 会津で個人事業を開業、CCLに入社。現在に至る。

本当にやるべきことを見つけ独立

ＦＥとして生きていくということ

l人生の目標

l- 人と人が接する所から始まる仕事をする。l そして関わった人々が喜ぶような仕事をすること。

l仕事（個人事業）の目標

l- 会津の街なかに、会津らしい風情をつくるために、l 街で暮らす人たちが求める便利、満足、安心をl 作り出す「しくみ」や「しかけ」を創っていくこと。

ＦＥとして生きていくということ

l人生の目標

l- 人と人が接する所から始まる仕事をする。l そしてその人が喜ぶような仕事をすること。

l仕事（個人事業）の目標

l- 会津の街なかに、会津らしい風情をつくるために、l 街で暮らす人たちが求める便利、満足、安心をl 作り出す「しくみ」や「しかけ」を創っていくこと。

ウェブサイト制作など

私はフロントエンドエンジニアとしての仕事はしていますが、

ウェブサイト制作者として生きているわけではありません。

ＦＥとして生きていくということ

Webサイトを作れるって本当にすばらしい！

ＦＥとして生きていくということ