Downloaded 102 times
Uploaded bytakehiko yoshida
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
フロントエンドエンジニアで活動しようと思った経緯 半年程度の実務経験を経て感じたこととか
![[CEDEC 2021] 運用中タイトルでも怖くない！ 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例](https://cdn.slidesharecdn.com/ss_thumbnails/cedec2021-210825103749-thumbnail.jpg?width=640&height=640&fit=bounds)
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
- 1.
- 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.
- 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.
- 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. 次の仕事探し。苦戦。。 • それなりの自信をつけて次の仕事を探してはみた のものの苦戦。。 • ５月前半から次のフロントエンドエンジニア案件 を探したが決まったのは６月前半 • 大体は面談までは行くがミスマッチが多かった
- 32. 次の仕事探し。苦戦。。 • 規模的に大きくない会社でエンハンス系の案件だ とフロントエンドタスクだけではなく、サーバー サイドタスクもこなして欲しいという要望。理解 はできる。 • サーバーサイド絶対やりたくないってわけじゃな いのでフロントエンドが６、サーバーサイド４ぐ らいの割合ならというスタンス
- 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.
- 48. 今後 • Android、iOSネイティヴもフロントエンド • やってみたい。知らないことを学ぶのは楽しい • ただ、今年はHTML/CSS、Javascriptに集中する
- 49. 最後に 混沌としている世界ほど面白いと感じれる 人はフロントエンドエンジニアに向いてい ると思うので是非。 飽きないです。
- 50.
Editor's Notes
- #48 ＞つまりHTML/CSS、Javascriptを使ったフロントエンドはフルネイティヴのつなぎ的な位置付け ということになって先細りそうな