Submit Search
Upload
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
•
178 likes
•
50,968 views
takehiko yoshida
Follow
フロントエンドエンジニアで活動しようと思った経緯 半年程度の実務経験を経て感じたこととか
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 50
Download Now
Download to read offline
Recommended
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
Noriaki Kadota
How to develop a huge Single Page Application
How to develop a huge Single Page Application
Naoki Yamada
最近誰かに「やったほうがいいよ」と伝えた7のこと
最近誰かに「やったほうがいいよ」と伝えた7のこと
Noriaki Kadota
ベストエンジニアな働き方
ベストエンジニアな働き方
Keiichi Endo
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
「自分でやる」という快感を追い続ける - あるプログラマーの成長戦略 -
「自分でやる」という快感を追い続ける - あるプログラマーの成長戦略 -
Isao Takahashi
More Related Content
What's hot
「速」を落とさないコードレビュー
「速」を落とさないコードレビュー
Takafumi ONAKA
スタイルガイドを活用した運用に強いCMSサイト制作
スタイルガイドを活用した運用に強いCMSサイト制作
Keisuke Imura
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
これからはフリーランスのエンジニアがもっと増える
これからはフリーランスのエンジニアがもっと増える
Atsushi Harada
最速で価値を提供する
最速で価値を提供する
LIFULL Co., Ltd.
「◯◯さんだから仕事をお願いしたい」と頼まれるエンジニアになろう
「◯◯さんだから仕事をお願いしたい」と頼まれるエンジニアになろう
Atsushi Harada
エンジニア採用ヤバイ! PHPカンファレンス関西 懇親会LT
エンジニア採用ヤバイ! PHPカンファレンス関西 懇親会LT
Tomoyuki Sugita
20150531 phpcon kansai
20150531 phpcon kansai
kumamidori
Yii Framework 2.0 いま求められるRAD標準とは #phpkansai
Yii Framework 2.0 いま求められるRAD標準とは #phpkansai
Hisateru Tanaka
デザイナーにもできる再構築の高速化/負荷分散
デザイナーにもできる再構築の高速化/負荷分散
Hajime Fujimoto
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
Osamu Nagatani
[社内勉強会]SPAのすすめ
[社内勉強会]SPAのすすめ
hirooooo
“MT on AWS”でWebサイト構築! 作り手が気をつけておきたいポイント
“MT on AWS”でWebサイト構築! 作り手が気をつけておきたいポイント
Monster Dive, Inc.
ぼくたちのじゅたくかいはつ
ぼくたちのじゅたくかいはつ
Atsushi Harada
ドメイン駆動設計と サーバサイドと私
ドメイン駆動設計と サーバサイドと私
Noriaki Kadota
ぼくたちのじゅたくかいはつ(と品質の話)
ぼくたちのじゅたくかいはつ(と品質の話)
Atsushi Harada
「フレームワークを使っていれば 脆弱性は出ない」って本当?
「フレームワークを使っていれば 脆弱性は出ない」って本当?
thatblue
Cssアニメーションとその制御
Cssアニメーションとその制御
Muyuu Fujita
Hatena::Letの式年遷宮
Hatena::Letの式年遷宮
Takafumi ONAKA
社内SEはVBAを投げ捨ててPHPの夢を見るか?
社内SEはVBAを投げ捨ててPHPの夢を見るか?
naoto teshima
What's hot
(20)
「速」を落とさないコードレビュー
「速」を落とさないコードレビュー
スタイルガイドを活用した運用に強いCMSサイト制作
スタイルガイドを活用した運用に強いCMSサイト制作
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
これからはフリーランスのエンジニアがもっと増える
これからはフリーランスのエンジニアがもっと増える
最速で価値を提供する
最速で価値を提供する
「◯◯さんだから仕事をお願いしたい」と頼まれるエンジニアになろう
「◯◯さんだから仕事をお願いしたい」と頼まれるエンジニアになろう
エンジニア採用ヤバイ! PHPカンファレンス関西 懇親会LT
エンジニア採用ヤバイ! PHPカンファレンス関西 懇親会LT
20150531 phpcon kansai
20150531 phpcon kansai
Yii Framework 2.0 いま求められるRAD標準とは #phpkansai
Yii Framework 2.0 いま求められるRAD標準とは #phpkansai
デザイナーにもできる再構築の高速化/負荷分散
デザイナーにもできる再構築の高速化/負荷分散
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
[社内勉強会]SPAのすすめ
[社内勉強会]SPAのすすめ
“MT on AWS”でWebサイト構築! 作り手が気をつけておきたいポイント
“MT on AWS”でWebサイト構築! 作り手が気をつけておきたいポイント
ぼくたちのじゅたくかいはつ
ぼくたちのじゅたくかいはつ
ドメイン駆動設計と サーバサイドと私
ドメイン駆動設計と サーバサイドと私
ぼくたちのじゅたくかいはつ(と品質の話)
ぼくたちのじゅたくかいはつ(と品質の話)
「フレームワークを使っていれば 脆弱性は出ない」って本当?
「フレームワークを使っていれば 脆弱性は出ない」って本当?
Cssアニメーションとその制御
Cssアニメーションとその制御
Hatena::Letの式年遷宮
Hatena::Letの式年遷宮
社内SEはVBAを投げ捨ててPHPの夢を見るか?
社内SEはVBAを投げ捨ててPHPの夢を見るか?
Viewers also liked
Node canvas
Node canvas
KinkumaDesign
SIerからWebエンジニアへの失敗しない転職方法
SIerからWebエンジニアへの失敗しない転職方法
Yusuke Kon
凡庸なSEが、大規模SIerの集団でできること - DevLOVE甲子園 2013
凡庸なSEが、大規模SIerの集団でできること - DevLOVE甲子園 2013
Minoru Yokomichi
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
Mitsuru Ogawa
RubyエンジニアがPythonをdisるためにPythonを勉強してみた
RubyエンジニアがPythonをdisるためにPythonを勉強してみた
Yusuke Kon
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
Viewers also liked
(6)
Node canvas
Node canvas
SIerからWebエンジニアへの失敗しない転職方法
SIerからWebエンジニアへの失敗しない転職方法
凡庸なSEが、大規模SIerの集団でできること - DevLOVE甲子園 2013
凡庸なSEが、大規模SIerの集団でできること - DevLOVE甲子園 2013
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
RubyエンジニアがPythonをdisるためにPythonを勉強してみた
RubyエンジニアがPythonをdisるためにPythonを勉強してみた
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Similar to 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
PHPerがJava屋になるために乗り越えたこと
PHPerがJava屋になるために乗り越えたこと
Kazuhiro Serizawa
師弟登壇2015 GMOペパボ @orzup
師弟登壇2015 GMOペパボ @orzup
Asami Nakano
Angularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととか
Katsumi Honda
Spring Boot Introduction
Spring Boot Introduction
chibochibo
爆速フレームワークでREST APIを作った話
爆速フレームワークでREST APIを作った話
Shohei Tai
from_beginner_to_engineer
from_beginner_to_engineer
Yuka Tokuyama
インフラエンジニアが プログラミングで業務改善していく話
インフラエンジニアが プログラミングで業務改善していく話
Keisuke Matsuda
【Dev love2014】120%文系の私がエンジニアと働く理由_限界集落のジジババとエンジニアとの共通点
【Dev love2014】120%文系の私がエンジニアと働く理由_限界集落のジジババとエンジニアとの共通点
Yuki Nishikawa
歴史あるWebサービスに携わって2年半の間に起きた事やった事
歴史あるWebサービスに携わって2年半の間に起きた事やった事
Masataka Kono
フリーランスエンジニアを半年間やってみた
フリーランスエンジニアを半年間やってみた
Ohira Yukito
○○したら受託開発が180°変わった(10分版)
○○したら受託開発が180°変わった(10分版)
Atsushi Harada
目黒スタートアップ勉強会
目黒スタートアップ勉強会
gaooh
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
学 松崎
高卒でIT企業に就職してみて
高卒でIT企業に就職してみて
tomomi yuzuriha
Java web application testing
Java web application testing
Tokuhiro Matsuno
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
DIVE INTO CODE Corp.
Java5
Java5
ImayoshiYusuke
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
C#とaop
C#とaop
Hiroshi Maekawa
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
Juri Minamiyama
Similar to 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
(20)
PHPerがJava屋になるために乗り越えたこと
PHPerがJava屋になるために乗り越えたこと
師弟登壇2015 GMOペパボ @orzup
師弟登壇2015 GMOペパボ @orzup
Angularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととか
Spring Boot Introduction
Spring Boot Introduction
爆速フレームワークでREST APIを作った話
爆速フレームワークでREST APIを作った話
from_beginner_to_engineer
from_beginner_to_engineer
インフラエンジニアが プログラミングで業務改善していく話
インフラエンジニアが プログラミングで業務改善していく話
【Dev love2014】120%文系の私がエンジニアと働く理由_限界集落のジジババとエンジニアとの共通点
【Dev love2014】120%文系の私がエンジニアと働く理由_限界集落のジジババとエンジニアとの共通点
歴史あるWebサービスに携わって2年半の間に起きた事やった事
歴史あるWebサービスに携わって2年半の間に起きた事やった事
フリーランスエンジニアを半年間やってみた
フリーランスエンジニアを半年間やってみた
○○したら受託開発が180°変わった(10分版)
○○したら受託開発が180°変わった(10分版)
目黒スタートアップ勉強会
目黒スタートアップ勉強会
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
高卒でIT企業に就職してみて
高卒でIT企業に就職してみて
Java web application testing
Java web application testing
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
Java5
Java5
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
C#とaop
C#とaop
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
1.
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
2.
よしだたけひこ • フリーランスエンジニア歴10年ほど
• 去年までJavaエンジニアとして10年以上活動 • レベルは下の上〜中の下 • 今年からフロントエンドエンドエンジニア
3.
今日話すこと • フロントエンドエンジニアで活動しようと思った経緯
• 半年程度の実務経験を経て感じたこととか
4.
注意事項 • フロントエンドエンジニアとしての実務経験は半
年ちょいと薄っぺらい • そこらへんを差し引いて暖かい目で見てくれると ありがたいです
5.
去年前半までのよしだ • swing、struts、seasar、組込みjava、android..
. • 業務系システム多め
6.
去年前半までのよしだ フロントエンド周りのレベル感 •
HTML/CSS、Javascriptはちゃんと学んだことな し • 見よう見まねの片手間でなんとか乗り切ってきて これた感じ • jQueryにかなり救われた
7.
きっかけ • 去年サーバーサイドエンジニアとしてとあるプロ
ジェクトに参画 • 一般向けのWebサービスで比較的なリッチなUIと Javascriptを使ったインタラクションが多い
8.
きっかけ • フロントエンドデザインは外部のWebデザイン系
の会社に委託 • インタラクションのJavascriptはある程度デザイン 会社が実装
9.
きっかけ • デザイン会社から上がってきたフロントエンドコ
ードをサーバーサイドエンジニアがサーバーサイ ドで動くように組み込む • といった開発フロー。中を覗いてみると。。
10.
きっかけ かつて経験したことないくらい のアレな感じ
11.
きっかけ • まともなルールが殆どないため一貫性が欠如
• なんだか良くわからないが一応動いている
12.
きっかけ 自衛のために真面目にJavascriptを勉強し始める
13.
きっかけ モダンなフロントエンド開発の世界観を知る •
フロントエンド開発における定型的な作業の自動 化→ タスクランナー(Grunt、Gulp) • 依存関係管理→ Bower • より良いCSS → CSSプリプロセッサ(sass, LESS, Stylus)
14.
きっかけ モダンなフロントエンド開発の世界観 •
よりよいJavascript → AltJS(CoffeeScript、 TypeScript) • クライアントサイトMVC → (Backbone.js、 Angular.js)
15.
きっかけ モダンなフロントエンド開発の世界観 •
従来型のWebアプリと比べ、よりリッチなユーザ ー体験→ SPA(Single Page Application) • CSS設計→ OOCSS、SMACSS、BEM
16.
きっかけ • 調べている内に問題解決の方法やアイデアに感動
• やってみたいというワクワク感とWebエンジニア として取り残されているという焦りが日々高まっ ていった • 仕事に区切りをつけてフロントエンドエンジニア 職で仕事を探すことに
17.
仕事を探す モダンなフロントエンド開発に取り組んでいたり、モ チベーションの高そうな会社の案件を探した
18.
仕事を探す • 希望条件に合致していた会社にエントリーしよう
と思ったが、ポートフォリオの提出が前提条件 • 2週間くらいで休暇も兼ねてポートフォリオをサク ッと作ってみようと考えた
19.
ポートフォリオ作り 自分のやりたいことをアピールしたものを作ろうと考 えた
自分のやりたいことは • モダンなフロントエンドWeb開発 なので、grunt、bower、sass、compassで、html5、 css3、Javascriptを適度に使ったレスポンシブレイアウ トなWebページを作ることにした
20.
ポートフォリオ作り 気をつけたこと •
ウィジェット(ダイアログとかの画面部品)には jQueryプラグインなどのライブラリをなるべく使 わない • 意図、コンセプト、使用したアーキテクチャなど を説明する
21.
ポートフォリオ作り • 簡単なデザインラフを考えてコーディングしてみ
る • ラフ通りにマークアップできない。。 • マークアップ力弱いことや他に色々気になること が頻発
22.
ポートフォリオ作り 2週間じゃたりない。 仕切り直そう。。。
23.
勉強したこと • 書籍でHTML、CSSの基礎的なことを学ぶ
• ネットでベストプラクティス的な情報を漁る •YEOMANのgenerator-webappとかで作ったscafold で使われてるものを漁って見るのがいいと思う • HTML5Boilerplate、normlize.css、Eric Meyer's CSS resetとか
24.
勉強したこと HTML •
HTML5で新たに増えたタグでより意味的にマーク アップできることを知った • SEO的に有利うんぬんよりHTMLの可読性の向上 に寄与していることが重要かと思った
25.
勉強したこと CSS •
最初はオレオレルールで書いていたが迷いが頻発 • SMACSS(和訳されてるよ)買って読んですっき り • 結果SMACSS + BEMの命名規約をベースにして 書き直したり
26.
勉強したこと Grunt •
プラグインを漁る → フロントエンド開発で発生する面倒なことや問 題を知ることできる
27.
ポートフォリオ完成 • 結果的に2ヶ月ほどダラダラ勉強しながらポートフ
ォリを作った • 今見るとしょっぱい出来
28.
ポートフォリオ完成 • Javaで仕事探してたときにはほとんどなかったけ
ど、ポートフォリオあれば見せてっていう会社結 構ある • フロントエンドエンジニア職探そうと考えてる人 はあらかじめ作っといたほうがいいと思う
29.
改めて仕事を探す AngularJSで新規開発案件にエントリー 面談の場でポートフォリオをプレゼン
先方もモダンなフロントエンドWeb開発に対してモチ ベーションが高かった
30.
改めて仕事を探す 晴れて契約。 AngularJSを使ったSPA開発。サーバーサイドはAPIを
提供するのみ マークアップの規約作りやGruntを使った自動化周り も任せて貰えて、大変だったがいい経験に 今年の5月一杯までお世話になった
31.
次の仕事探し。苦戦。。 • それなりの自信をつけて次の仕事を探してはみた
のものの苦戦。。 • 5月前半から次のフロントエンドエンジニア案件 を探したが決まったのは6月前半 • 大体は面談までは行くがミスマッチが多かった
32.
次の仕事探し。苦戦。。 • 規模的に大きくない会社でエンハンス系の案件だ
とフロントエンドタスクだけではなく、サーバー サイドタスクもこなして欲しいという要望。理解 はできる。 • サーバーサイド絶対やりたくないってわけじゃな いのでフロントエンドが6、サーバーサイド4ぐ らいの割合ならというスタンス
33.
次の仕事探し。苦戦。。 しかし、、Webサービス系企業はPHP、Rubyが多い Java屋な俺にはミスマッチ
選択肢広げるためにPHP勉強しだす
34.
次の仕事探し。苦戦。。 • 次が駄目ならまた1ヶ月くらい休暇とってPHPやろ
うと思ってたが、、 • 最後にしようと思ってエントリーした純粋なフロ ントエンド案件取れた •PHPの勉強やめた。(一旦) • 現在に至る
35.
思ったこと ですが、うまくまとまっていませんのでさらっと。。
36.
思ったこと • フロントエンド(Javascript、HTML/CSS)は壊れ
やすい • だからこそ規約やテストやレビューが重要 • フロントエンドが中〜大規模になる場合ノープラ ンは危険
37.
思ったこと クロスブラウザ対策大変 •
IE対応、Androidの標準ブラウザ対応とか • OSSとか使う場合はレガシーブラウザで動くかどうか事前確認大事 • JSのAPI、HTML5の要素、CSSプロパティはCan I use..で確認 設計が大切 • 機能や画面を構成するものをどう分類するか • HTML、CSS、Javascript、三位一体で考えたほうがよい • ガイドラインの作成
38.
思ったこと • Javascript
• 敷居は低いが難しい言語だということを実感 • 敷居が低いというのがたちが悪い • Javascriptを書ける人はたくさんいるが、書ける人 の中での理解レベルのギャップが激しい言語だと 思った
39.
思ったこと • Javascript
• 非同期処理がネストしがち。コールバック関数た らい回ししがち。 • → jQuery Deferredとかq.jsとかでスマートに書け る。重要。
40.
思ったこと • Javascript
• とりあえず入れるでいいんじゃ?というOSSライ ブラリ • underscorejs(lodash.js)、momentjs • ある程度のコーディング規約はJSHintに任せられ る
41.
思ったこと • クライアントサイドMVC
• Backbone.js入れても品質上がらない • あれはレールを用意してくれるだけで組み立てて走らせるのは 自分 • 素のBackboneで設計するのはそれ相応の設計能力が必要 • Marionetteとか使うと良いと思う(使ったことないです) • ただし、レール引いても乗らない奴もいるのでレビュー重要
42.
思ったこと •HTML/CSS •
最初にCSS設計方法の方針を固めるべき •OOCSS、SMACSS、BEMなど参考に • サイズの単位、色指定の方法、ベーススタイルどう するかなど規約化する • とにかく最初の決めが重要
43.
思ったこと HTML/CSS •SASS便利
• ただし、出力結果イメージできないで使うとCSS肥大化を招くので注意 する • ネストはほどほどに • BEM的な命名規則採用しているならネスト使わずフラットに書くべきだ と思う • mixin、include、extend、placeholder selctorを理解して使う。
44.
思ったこと • 開発の助けとなるツール
• デバッグはChrome CanaryのDevToolsが便利。こ れをうまく使いこなせるかで生産性に結構差がで ると思うレベル • デバッグプロキシも便利。macだとcharles、 widowsだとfiddler
45.
思ったこと • ブラウザの気持ちを考えるのは難しい
• なにが正解かはコンテキストによって異なってくる • サービスの特性、画面の特性、サーバーサイドへの 負荷、セキュリティへの考慮などなど • そこらへん踏まえてバランスいい判断できるひとが 優秀なフロントエンドエンジニアなのかなと
46.
今後 Webサービス開発でこういう流れがある 1.
最初にSPAでスマホ用Webアプリ作る 2. 次にコンテンツはWebアプリを流用したガワネイ ティヴ(ハイブリッドアプリ)作る 3. サービスが軌道に乗ってきた 4. ガワネイティヴをフルネイティヴ化する
47.
今後 つまりHTML/CSS、Javascriptを使ったフロントエン ドはフルネイティヴのつなぎ的な位置付け
48.
今後 • Android、iOSネイティヴもフロントエンド
• やってみたい。知らないことを学ぶのは楽しい • ただ、今年はHTML/CSS、Javascriptに集中する
49.
最後に 混沌としている世界ほど面白いと感じれる 人はフロントエンドエンジニアに向いてい
ると思うので是非。 飽きないです。
50.
最後に ご清聴ありがとうございました 。
Editor's Notes
>つまりHTML/CSS、Javascriptを使ったフロントエンドはフルネイティヴのつなぎ的な位置付け ということになって先細りそうな
Download Now