Movatterモバイル変換

食べログのフロントエンドエンジニアってめっちゃ大変やねん...株式会社カカクコム食べログシステム本部システム開発1部 FEチーム金野淑恵

お話の流れ自己紹介食べログの紹介食べログのフロントエンドエンジニアって？具体的にやっていることまとめ

Copyright © Kakaku.com Inc. All Rights Reserved.自己紹介金野淑恵（かねのよしえ）@empitsu88ProfileCareer食べログシステム本部FEチームリーダー食べログのフロントエンド領域の設計・開発などを担当2009～2015年某印刷会社入社Flasher/フロントエンジニアとして受託Web制作2015～2017年株式会社カカクコム入社食べログのフロントエンドエンジニア

Copyright © Kakaku.com Inc. All Rights Reserved.ready イベントの callback は 1entry point につき1つだけ<html><head><script src=“smartphone/sidemenu.js”></script><script src=“smartphone/top_mainvisual.js”></script>• smartphone/top.html• smartphone/sidemenu.js$(function(){// ハンバーガーメニュークリックでサイドメニューを表示する処理});$(function(){// メインビジュアルをカルーセル化する処理});• smartphone/top_mainvisual.js

Copyright © Kakaku.com Inc. All Rights Reserved.<html><head><script src=“smartphone/sidemenu.js”></script><script src=“smartphone/top_mainvisual.js”></script>• smartphone/top.html• smartphone/sidemenu.js$(function(){// ハンバーガーメニュークリックでサイドメニューを表示する処理});$(function(){// メインビジュアルをカルーセル化する処理});• smartphone/top_mainvisual.jsready イベントの callback は 1entry point につき1つだけ

Copyright © Kakaku.com Inc. All Rights Reserved.<html><head><script src=“smartphone/top.js”></script>• smartphone/top.html• smartphone/top.js$(()=>{// ハンバーガーメニュークリックでサイドメニューを表示する処理// メインビジュアルをカルーセル化する処理});ready イベントの callback は 1entry point につき1つだけ

Copyright © Kakaku.com Inc. All Rights Reserved.Moduleファイルは Entry point から初期化する<html><head><script src=“smartphone/top.js”></script>• smartphone/top.html• smartphone/top.jsimport Sidemenu from “modules/smartphone/sidemenu.js”;import TopMainvisual from “modules/smartphone/top-mainvisual.js”;$(()=> {Sidemenu.ready();TopMainvisual.ready();});

Copyright © Kakaku.com Inc. All Rights Reserved.const Sidemenu = {ready() {// ready 時に必要な処理}}export default Sidemenu;• modules/smartphone/sidemenu.jsmoduleファイル側では、呼び出した途端に初期化が始まらないようにModuleファイルは Entry point から初期化する

Copyright © Kakaku.com Inc. All Rights Reserved.例）見た目に関わる制御はなるべくCSSファイルに$(window).on('scroll', (e) => {if ($(window).scrollTop() >= 500 ){// js で行うのは is-scroll の付け替えのみ$('.js-header').addClass('is-scroll');} else {$('.js-header').removeClass('is-scroll');}});• JS• CSS.header.is-scroll {position: fixed;top: 0;width: 100%;}

ご清聴ありがとうございました

Movatterモバイル変換

Change Language

食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･

Embed presentation

Recommended

More Related Content

What's hot

Similar to 食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･

食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･