1. Session 4
フロントエンドエンジニアの話
株式会社CCL 西本浩幸

2. 目次
l
最初に
l
自己紹介
l
フロントエンドエンジニアとは
l
サイト構築の流れ（私の場合）
l
フロントエンドエンジニアとして生きていくということ

3. 最初に

4. 最初に
私はフロントエンドエンジニアとしての
仕事はしていますが、
ウェブサイト制作者として
生きているわけではありません。

5. 自己紹介
l
西本浩幸（34）
l
会津大学８期生（2000年入学）
l
会津若松市在住
愛知県名古屋市出身
l
略歴
- 大学卒業後はPHSのSEとして就職 (2004)
- 会社を退職後、ウェブ業界へ (2006)
- HTML、JavaScript、Flash、Perlの仕事に従事
- 会津で個人事業を開業、CCLに入社。現在に至る。
l
l
l
l

6. 自己紹介
l
l
l
株式会社ＣＣＬでの仕事
- オープンデータに関する勉強会の開催
（オープンデータカフェ会津をよろしくお願いします）
- オープンデータに関する調査報告書の作成
- オープンデータに関するウェブサービスの開発
- オープンデータに関する開発イベントへの参加

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

8. フロントエンドエンジニアとは？
Webサイトの”見える部分”
に関わるあらゆることを行う人
l
l

9. フロントエンドエンジニアとは？
扱うテーマの変遷
～2006年
javascript
HTML
CSS
performance
～2011年
XHTML
CSS
js
携帯
responsive
最近
HTML5
CSS3
js
mobile

10. フロントエンドエンジニアとは？
l
l
Question
やることが多すぎる!!
どうすればいいの!?
l

11. フロントエンドエンジニアとは？
l
l
Answer
とにかく基本を身につけて
自分の作業スタイルを
確立してください。
l
l

12. フロントエンドエンジニアとは？
l
PC対応のみのサイトを短時間で
かつ正確に制作できる。
l
l
ＰＣ対応のみのサイトを短時間で
正確にスマホ対応化できる。
l

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

14. サイト構築の流れ
l
l
ディレクターが先方で打合わせ
初回内部打ち合わせ
ディレクターが持って返ってきた内容を、デザイナー
やサーバーサイドエンジニアと共に仕様の打合わせ。
l
l
ラフデザイン作成～完成
自分コーディング不可能なデザイン要素の確認
※可能な範囲で修正をしてもらう。
l
l
l
ディレクターが先方で打合わせ

15. サイト構築の流れ
l
内部打ち合わせ
ディレクターが持って返ってきた内容を、デザイナー
やサーバーサイドエンジニアと共に仕様の打合わせ。
細かいギミック、サーバサイド連携の仕様の確認
l
l
本デザイン作成～完成
構築に必要な未修得の技術があれば調べるなどして
準備をします。
l
l

16. サイト構築の流れ
l
サイトの設計図作成
l
l
h1、h2などのタグの割り振り、div要素となる箇所の
横幅や高さ、余白の値を記入した図を作成。
デザインを紙に印刷して、その中に書き込んでいきます。
l

18. サイト構築の流れ
l
コーディング開始
l
設計図を元に、まずはhtmlファイルを作成。
CSSを適用しない状態で自然に情報が表示されるかを
確認します。
l
l
l
ＣＳＳを作成。
作成の都度、サーバに置いてブラウザの表示チェック
をしています。
l
l

21. サイト構築の流れ
l
コーディング開始
l
設計図を元に、まずはhtmlファイルを作成。
CSSを適用しない状態で自然に情報が表示されるかを
確認します。
l
l
l
ＣＳＳを作成。
作成の都度、サーバに置いてブラウザの表示チェック
をしています。
l
l

22. サイト構築の流れ
l
Javascript の組み込み開始
スムーズにプログラミングに移行できるよう
事前の準備が必要です。
l
l
l
完成
l
リンク切れや文字の打ち間違いがないかチェック。
コーディング中に気になったことやエラーの対応でうまく
解決できたことなどをまとめて今後に活かしましょう。
l
l

24. 「こういうサイトを作ってください」
と頼まれたものは
作れるようになる。

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

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

27. FEとして生きていくということ
技術は、あくまで道具。
この道具はあなたが
やりたいこと、やるべきこと
を実現していくためのもの。

28. FEとして生きていくということ
友人が開いたお店をPRしたい
サークル活動を支援したい
身の回りの課題を解決したい
社会問題を解決したい

29. FEとして生きていくということ
自分自身で課題をみつけて
解決するための１つの手段
としてのＷｅｂサイト構築。

30. 自己紹介
l
西本浩幸
l
会津大学８期生
l
本当にやるべきことを見つけ独立
愛知県名古屋市出身
l
略歴
- 大学卒業後はPHSのSEとして就職 (2004)
- 会社を退職後、ウェブ業界へ (2006)
- HTML、JavaScript、Flash、Perlの仕事に従事(2013)
- 会津で個人事業を開業、CCLに入社。現在に至る。
l
l
l
l

31. ＦＥとして生きていくということ
l
人生の目標
l
l
l
- 人と人が接する所から始まる仕事をする。
そして関わった人々が喜ぶような仕事をすること。
仕事（個人事業）の目標
l
l
l
- 会津の街なかに、会津らしい風情をつくるために、
街で暮らす人たちが求める便利、満足、安心を
作り出す「しくみ」や「しかけ」を創っていくこと。

32. ＦＥとして生きていくということ
l
人生の目標
l
l
l
- 人と人が接する所から始まる仕事をする。
そしてその人が喜ぶような仕事をすること。
仕事（個人事業）の目標
l
l
l
- 会津の街なかに、会津らしい風情をつくるために、
街で暮らす人たちが求める便利、満足、安心を
作り出す「しくみ」や「しかけ」を創っていくこと。
ウェブサイト制作など

33. ＦＥとして生きていくということ
私はフロントエンドエンジニアとしての
仕事はしていますが、
ウェブサイト制作者として
生きているわけではありません。

34. ＦＥとして生きていくということ
Webサイトを作れるって
本当にすばらしい！