Download - エフスタ会津 - フロントエンドエンジニアの話 -
![Page 1: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/1.jpg)
Session 4
フロントエンドエンジニアの話
株式会社CCL 西本浩幸
![Page 2: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/2.jpg)
目次
l 最初に
l 自己紹介
l フロントエンドエンジニアとは
l サイト構築の流れ(私の場合)
l フロントエンドエンジニアとして生きていくということ
![Page 3: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/3.jpg)
最初に
![Page 4: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/4.jpg)
私はフロントエンドエンジニアとしての仕事はしていますが、
ウェブサイト制作者として生きているわけではありません。
最初に
![Page 5: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/5.jpg)
自己紹介
l 西本浩幸(34)
l 会津大学8期生(2000年入学)
会津若松市在住l 愛知県名古屋市出身
l 略歴l- 大学卒業後はPHSのSEとして就職 (2004)
l- 会社を退職後、ウェブ業界へ (2006)
l- HTML、JavaScript、Flash、Perlの仕事に従事l- 会津で個人事業を開業、CCLに入社。現在に至る。
![Page 6: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/6.jpg)
自己紹介
l株式会社CCLでの仕事
l - オープンデータに関する勉強会の開催l (オープンデータカフェ会津をよろしくお願いします)
- オープンデータに関する調査報告書の作成
- オープンデータに関するウェブサービスの開発
- オープンデータに関する開発イベントへの参加
![Page 7: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/7.jpg)
フロントエンドエンジニアとは?
![Page 8: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/8.jpg)
フロントエンドエンジニアとは?
lWebサイトの”見える部分”
lに関わるあらゆることを行う人
![Page 9: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/9.jpg)
フロントエンドエンジニアとは?
HTML CSS
扱うテーマの変遷
~2006年
javascript
~2011年XHTML CSS js 携帯
最近HTML5 CSS3 js mobile
performance
responsive
![Page 10: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/10.jpg)
フロントエンドエンジニアとは?
lやることが多すぎる!!
lどうすればいいの!?
lQuestion
![Page 11: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/11.jpg)
フロントエンドエンジニアとは?
lとにかく基本を身につけてl自分の作業スタイルを
l確立してください。
lAnswer
![Page 12: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/12.jpg)
フロントエンドエンジニアとは?
lPC対応のみのサイトを短時間でlかつ正確に制作できる。
lPC対応のみのサイトを短時間でl正確にスマホ対応化できる。
![Page 13: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/13.jpg)
サイト構築の流れ(私の場合)
![Page 14: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/14.jpg)
サイト構築の流れ
l初回内部打ち合わせ
lディレクターが持って返ってきた内容を、デザイナーやサーバーサイドエンジニアと共に仕様の打合わせ。
lラフデザイン作成~完成
lディレクターが先方で打合わせ
l自分コーディング不可能なデザイン要素の確認l※可能な範囲で修正をしてもらう。
lディレクターが先方で打合わせ
![Page 15: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/15.jpg)
サイト構築の流れ
l内部打ち合わせ
ディレクターが持って返ってきた内容を、デザイナーやサーバーサイドエンジニアと共に仕様の打合わせ。
l細かいギミック、サーバサイド連携の仕様の確認
l本デザイン作成~完成
l構築に必要な未修得の技術があれば調べるなどしてl準備をします。
![Page 16: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/16.jpg)
サイト構築の流れ
lサイトの設計図作成
lh1、h2などのタグの割り振り、div要素となる箇所のl横幅や高さ、余白の値を記入した図を作成。
lデザインを紙に印刷して、その中に書き込んでいきます。
![Page 17: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/17.jpg)
![Page 18: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/18.jpg)
サイト構築の流れ
lコーディング開始
l設計図を元に、まずはhtmlファイルを作成。
lCSSを適用しない状態で自然に情報が表示されるかをl確認します。
lCSSを作成。
l作成の都度、サーバに置いてブラウザの表示チェックlをしています。
![Page 19: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/19.jpg)
![Page 20: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/20.jpg)
![Page 21: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/21.jpg)
サイト構築の流れ
lコーディング開始
l設計図を元に、まずはhtmlファイルを作成。
lCSSを適用しない状態で自然に情報が表示されるかをl確認します。
lCSSを作成。
l作成の都度、サーバに置いてブラウザの表示チェックlをしています。
![Page 22: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/22.jpg)
サイト構築の流れ
l完成
lリンク切れや文字の打ち間違いがないかチェック。
lコーディング中に気になったことやエラーの対応でうまくl解決できたことなどをまとめて今後に活かしましょう。
lJavascript の組み込み開始
lスムーズにプログラミングに移行できるようl事前の準備が必要です。
![Page 23: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/23.jpg)
![Page 24: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/24.jpg)
「こういうサイトを作ってください」
と頼まれたものは作れるようになる。
![Page 25: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/25.jpg)
飽きてきます。※全ての人がそうなるわけではありません!
![Page 26: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/26.jpg)
フロントエンドエンジニアとして生きていくということ
![Page 27: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/27.jpg)
FEとして生きていくということ
技術は、あくまで道具。
この道具はあなたがやりたいこと、やるべきことを実現していくためのもの。
![Page 28: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/28.jpg)
FEとして生きていくということ
友人が開いたお店をPRしたい
サークル活動を支援したい
身の回りの課題を解決したい
社会問題を解決したい
![Page 29: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/29.jpg)
FEとして生きていくということ
自分自身で課題をみつけて解決するための1つの手段としてのWebサイト構築。
![Page 30: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/30.jpg)
自己紹介
l 西本浩幸
l 会津大学8期生
l 愛知県名古屋市出身
l 略歴l- 大学卒業後はPHSのSEとして就職 (2004)
l- 会社を退職後、ウェブ業界へ (2006)
l- HTML、JavaScript、Flash、Perlの仕事に従事(2013)
l- 会津で個人事業を開業、CCLに入社。現在に至る。
本当にやるべきことを見つけ独立
![Page 31: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/31.jpg)
FEとして生きていくということ
l人生の目標
l- 人と人が接する所から始まる仕事をする。l そして関わった人々が喜ぶような仕事をすること。
l仕事(個人事業)の目標
l- 会津の街なかに、会津らしい風情をつくるために、l 街で暮らす人たちが求める便利、満足、安心をl 作り出す「しくみ」や「しかけ」を創っていくこと。
![Page 32: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/32.jpg)
FEとして生きていくということ
l人生の目標
l- 人と人が接する所から始まる仕事をする。l そしてその人が喜ぶような仕事をすること。
l仕事(個人事業)の目標
l- 会津の街なかに、会津らしい風情をつくるために、l 街で暮らす人たちが求める便利、満足、安心をl 作り出す「しくみ」や「しかけ」を創っていくこと。
ウェブサイト制作など
![Page 33: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/33.jpg)
私はフロントエンドエンジニアとしての仕事はしていますが、
ウェブサイト制作者として生きているわけではありません。
FEとして生きていくということ
![Page 34: エフスタ会津 - フロントエンドエンジニアの話 -](https://reader034.vdocuments.net/reader034/viewer/2022052307/55982ce21a28abc6088b45cc/html5/thumbnails/34.jpg)
Webサイトを作れるって本当にすばらしい!
FEとして生きていくということ