10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
-
Upload
takehiko-yoshida -
Category
Engineering
-
view
22.598 -
download
5
description
Transcript of 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
![Page 1: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/1.jpg)
1 0年以上 Java 屋してたおっさんが今年からフロントエンジニアやっている話
![Page 2: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/2.jpg)
よしだ たけひこ
•フリーランスエンジニア歴 10 年ほど
•去年まで Java エンジニアとして 10 年以上活動
•レベルは下の上〜中の下
•今年からフロントエンドエンドエンジニア
![Page 3: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/3.jpg)
今日話すこと
•フロントエンドエンジニアで活動しようと思った経緯
•半年程度の実務経験を経て感じたこととか
![Page 4: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/4.jpg)
注意事項
•フロントエンドエンジニアとしての実務経験は半年ちょいと薄っぺらい
•そこらへんを差し引いて暖かい目で見てくれるとありがたいです
![Page 5: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/5.jpg)
去年前半までのよしだ
•swing 、 struts 、 seasar 、組込みjava 、 android ...
•業務系システム多め
![Page 6: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/6.jpg)
去年前半までのよしだフロントエンド周りのレベル感
• HTML/CSS 、 Javascript はちゃんと学んだことなし
• 見よう見まねの片手間でなんとか乗り切ってきてこれた感じ
• jQuery にかなり救われた
![Page 7: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/7.jpg)
きっかけ
•去年サーバーサイドエンジニアとしてとあるプロジェクトに参画
•一般向けの Web サービスで比較的なリッチな UIと Javascript を使ったインタラクションが多い
![Page 8: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/8.jpg)
きっかけ
•フロントエンドデザインは外部の Web デザイン系の会社に委託
•インタラクションの Javascript はある程度デザイン会社が実装
![Page 9: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/9.jpg)
きっかけ
•デザイン会社から上がってきたフロントエンドコードをサーバーサイドエンジニアがサーバーサイドで動くように組み込む
•といった開発フロー。中を覗いてみると。。
![Page 10: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/10.jpg)
きっかけ
かつて経験したことないくらいのアレな感じ
![Page 11: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/11.jpg)
きっかけ
•まともなルールが殆どないため一貫性が欠如
•なんだか良くわからないが一応動いている
![Page 12: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/12.jpg)
きっかけ
自衛のために真面目に Javascript を勉強し始める
![Page 13: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/13.jpg)
きっかけモダンなフロントエンド開発の世界観を知る
• フロントエンド開発における定型的な作業の自動化 → タスクランナー (Grunt 、 Gulp)
• 依存関係管理 → Bower
• より良い CSS → CSS プリプロセッサ( sass, LESS, Stylus )
![Page 14: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/14.jpg)
きっかけ
モダンなフロントエンド開発の世界観
• よりよい Javascript → AltJS(CoffeeScript 、 TypeScript)
• クライアントサイト MVC → (Backbone.js 、 Angular.js )
![Page 15: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/15.jpg)
きっかけ
モダンなフロントエンド開発の世界観
• 従来型の Web アプリと比べ、よりリッチなユーザー体験 → SPA(Single Page Application)
• CSS 設計 → OOCSS 、 SMACSS 、 BEM
![Page 16: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/16.jpg)
きっかけ•調べている内に問題解決の方法やアイデアに感動
•やってみたいというワクワク感と Web エンジニアとして取り残されているという焦りが日々高まっていった
•仕事に区切りをつけてフロントエンドエンジニア職で仕事を探すことに
![Page 17: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/17.jpg)
仕事を探す
モダンなフロントエンド開発に取り組んでいたり、モチベーションの高そうな会社の案件を探した
![Page 18: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/18.jpg)
仕事を探す
•希望条件に合致していた会社にエントリーしようと思ったが、ポートフォリオの提出が前提条件
•2 週間くらいで休暇も兼ねてポートフォリオをサクッと作ってみようと考えた
![Page 19: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/19.jpg)
ポートフォリオ作り自分のやりたいことをアピールしたものを作ろうと考えた
自分のやりたいことは
• モダンなフロントエンド Web 開発
なので、 grunt 、 bower 、 sass 、 compassで、 html5 、 css3 、 Javascript を適度に使ったレスポンシブレイアウトな Web ページを作ることにした
![Page 20: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/20.jpg)
ポートフォリオ作り気をつけたこと
• ウィジェット(ダイアログとかの画面部品)には jQuery プラグインなどのライブラリをなるべく使わない
• 意図、コンセプト、使用したアーキテクチャなどを説明する
![Page 21: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/21.jpg)
ポートフォリオ作り
•簡単なデザインラフを考えてコーディングしてみる
•ラフ通りにマークアップできない。。
•マークアップ力弱いことや他に色々気になることが頻発
![Page 22: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/22.jpg)
ポートフォリオ作り
2 週間じゃたりない。
仕切り直そう。。。
![Page 23: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/23.jpg)
勉強したこと•書籍で HTML 、 CSS の基礎的なことを学ぶ
•ネットでベストプラクティス的な情報を漁る
•YEOMAN の generator-webapp とかで作ったscafold で使われてるものを漁って見るのがいいと思う
•HTML5Boilerplate 、 normlize.css 、 Eric Meyer's CSS reset とか
![Page 24: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/24.jpg)
勉強したこと
HTML
• HTML5 で新たに増えたタグでより意味的にマークアップできることを知った
• SEO 的に有利うんぬんより HTML の可読性の向上に寄与していることが重要かと思った
![Page 25: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/25.jpg)
勉強したことCSS
• 最初はオレオレルールで書いていたが迷いが頻発
• SMACSS (和訳されてるよ)買って読んですっきり
• 結果 SMACSS + BEM の命名規約をベースにして書き直したり
![Page 26: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/26.jpg)
勉強したこと
Grunt
• プラグインを漁る
→ フロントエンド開発で発生する面倒なことや問題を知ることできる
![Page 27: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/27.jpg)
ポートフォリオ完成
•結果的に 2ヶ月ほどダラダラ勉強しながらポートフォリを作った
•今見るとしょっぱい出来
![Page 28: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/28.jpg)
ポートフォリオ完成
• Java で仕事探してたときにはほとんどなかったけど、ポートフォリオあれば見せてっていう会社結構ある
•フロントエンドエンジニア職探そうと考えてる人はあらかじめ作っといたほうがいいと思う
![Page 29: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/29.jpg)
改めて仕事を探す
AngularJS で新規開発案件にエントリー
面談の場でポートフォリオをプレゼン
先方もモダンなフロントエンド Web 開発に対してモチベーションが高かった
![Page 30: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/30.jpg)
改めて仕事を探す晴れて契約。
AngularJS を使った SPA 開発。サーバーサイドは APIを提供するのみ
マークアップの規約作りや Grunt を使った自動化周りも任せて貰えて、大変だったがいい経験に
今年の 5月一杯までお世話になった
![Page 31: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/31.jpg)
次の仕事探し。苦戦。。
•それなりの自信をつけて次の仕事を探してはみたのものの苦戦。。
•5月前半から次のフロントエンドエンジニア案件を探したが決まったのは6月前半
•大体は面談までは行くがミスマッチが多かった
![Page 32: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/32.jpg)
次の仕事探し。苦戦。。
•規模的に大きくない会社でエンハンス系の案件だとフロントエンドタスクだけではなく、サーバーサイドタスクもこなして欲しいという要望。理解はできる。
•サーバーサイド絶対やりたくないってわけじゃないのでフロントエンドが6、サーバーサイド4ぐらいの割合ならというスタンス
![Page 33: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/33.jpg)
次の仕事探し。苦戦。。
しかし、、 Web サービス系企業は PHP 、 Ruby が多い
Java 屋な俺にはミスマッチ
選択肢広げるために PHP 勉強しだす
![Page 34: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/34.jpg)
次の仕事探し。苦戦。。•次が駄目ならまた 1ヶ月くらい休暇とって PHP や
ろうと思ってたが、、
•最後にしようと思ってエントリーした純粋なフロントエンド案件取れた
•PHP の勉強やめた。(一旦)
•現在に至る
![Page 35: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/35.jpg)
思ったこと
ですが、うまくまとまっていませんのでさらっと。。
![Page 36: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/36.jpg)
思ったこと
•フロントエンド( Javascript 、 HTML/CSS )は壊れやすい
•だからこそ規約やテストやレビューが重要
•フロントエンドが中〜大規模になる場合ノープランは危険
![Page 37: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/37.jpg)
思ったことクロスブラウザ対策大変
• IE対応、 Android の標準ブラウザ対応とか
• OSS とか使う場合はレガシーブラウザで動くかどうか事前確認大事
• JS の API 、 HTML5 の要素、 CSS プロパティは Can I use.. で確認
設計が大切
• 機能や画面を構成するものをどう分類するか
• HTML 、 CSS 、 Javascript 、三位一体で考えたほうがよい
• ガイドラインの作成
![Page 38: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/38.jpg)
思ったこと• Javascript
•敷居は低いが難しい言語だということを実感
•敷居が低いというのがたちが悪い
• Javascript を書ける人はたくさんいるが、書ける人の中での理解レベルのギャップが激しい言語だと思った
![Page 39: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/39.jpg)
思ったこと
• Javascript
•非同期処理がネストしがち。コールバック関数たらい回ししがち。
• → jQuery Deferred とか q.js とかでスマートに書ける。重要。
![Page 40: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/40.jpg)
思ったこと• Javascript
•とりあえず入れるでいいんじゃ?という OSS ライブラリ
• underscorejs(lodash.js) 、 momentjs
•ある程度のコーディング規約は JSHint に任せられる
![Page 41: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/41.jpg)
思ったこと•クライアントサイド MVC
•Backbone.js入れても品質上がらない
•あれはレールを用意してくれるだけで組み立てて走らせるのは自分
•素の Backbone で設計するのはそれ相応の設計能力が必要
•Marionette とか使うと良いと思う(使ったことないです)
•ただし、レール引いても乗らない奴もいるのでレビュー重要
![Page 42: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/42.jpg)
思ったこと•HTML/CSS
•最初に CSS 設計方法の方針を固めるべき
•OOCSS 、 SMACSS 、 BEM など参考に
•サイズの単位、色指定の方法、ベーススタイルどうするかなど規約化する
•とにかく最初の決めが重要
![Page 43: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/43.jpg)
思ったことHTML/CSS
•SASS便利
•ただし、出力結果イメージできないで使うと CSS肥大化を招くので注意する
•ネストはほどほどに
• BEM 的な命名規則採用しているならネスト使わずフラットに書くべきだと思う
•mixin 、 include 、 extend 、 placeholder selctor を理解して使う。
![Page 44: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/44.jpg)
思ったこと•開発の助けとなるツール
•デバッグは Chrome Canary の DevTools が便利。これをうまく使いこなせるかで生産性に結構差がでると思うレベル
•デバッグプロキシも便利。 mac だとcharles 、 widows だと fiddler
![Page 45: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/45.jpg)
思ったこと• ブラウザの気持ちを考えるのは難しい
• なにが正解かはコンテキストによって異なってくる
• サービスの特性、画面の特性、サーバーサイドへの負荷、セキュリティへの考慮などなど
• そこらへん踏まえてバランスいい判断できるひとが優秀なフロントエンドエンジニアなのかなと
![Page 46: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/46.jpg)
今後Web サービス開発でこういう流れがある
1. 最初に SPA でスマホ用 Web アプリ作る
2. 次にコンテンツは Web アプリを流用したガワネイティヴ(ハイブリッドアプリ)作る
3. サービスが軌道に乗ってきた
4. ガワネイティヴをフルネイティヴ化する
![Page 47: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/47.jpg)
今後
つまり HTML/CSS 、 Javascript を使ったフロントエンドはフルネイティヴのつなぎ的な位置付け
![Page 48: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/48.jpg)
今後
•Android 、 iOSネイティヴもフロントエンド
•やってみたい。知らないことを学ぶのは楽しい
•ただ、今年は HTML/CSS 、 Javascript に集中する
![Page 49: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/49.jpg)
最後に
混沌としている世界ほど面白いと感じれる人はフロントエンドエンジニアに向いていると思うので是非。
飽きないです。
![Page 50: 10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話](https://reader033.fdocuments.net/reader033/viewer/2022050905/5483e077b4af9f1b5b8b461a/html5/thumbnails/50.jpg)
最後に
ご清聴ありがとうございました。