端端舝

妘屯伕弘及白伕件玄巨件玉巨件斥瓦失勻化
戶勻切扎湮劐支友氏...
絁宒頗扦市市弁戊丞
妘屯伕弘扑旦氾丞掛窒扑旦氾丞嶱逃1窒 FE民奈丞
踢珧抃𨫆

Copyright ? Kakaku.com Inc. All Rights Reserved.
踏゜�允仇午
白伕件玄巨件玉及嶱逃极秶釬曰卞云仃月賴�

踏゜幻午氏升�今卅中仇午
撮胍腔卅用它甩它

云�及霜木
赻撩畿賡
妘屯伕弘及畿賡
妘屯伕弘及白伕件玄巨件玉巨件斥瓦失勻化ˋ
撿极腔卞支勻化中月仇午
引午戶

赻撩畿賡
踢珧抃𨫆
ㄗ井友及方仄尹ㄘ
@empitsu88
Profile
Career
妘屯伕弘扑旦氾丞掛窒FE民奈丞伉奈母奈
妘屯伕弘及白伕件玄巨件玉薆郖及偞�?嶱逃卅升毛童絞
2009‵2015爛議荂芃頗扦⻌扦
Flasher/白伕件玄巨件斥瓦失午仄化忳�Web秶釬
2015‵2017爛絁宒頗扦市市弁戊丞⻌扦
妘屯伕弘及白伕件玄巨件玉巨件斥瓦失

反
云虛腢太匹
囮㷍仄凶仁卅中�及凶戶及
弘伙丟扔奶玄匹允

妘屯伕弘勻化升氏卅扔奈申旦ˋ
生永玄匹�妘虛毛抻允午五卞お仇曰互切卅
☆砑砉午反綃丹云虛分勻凶★午中丹方丹卅囮㷍毛卅仁允凶戶卞
交奈扒奈及諳戊立午僕卞�弊及伊旦玄仿件ロ�毛𡧳徭

價掛犯奈正
1�|450勀� 廣2,200勀璃廣86勀璃
＃午中丹湮�耀卅弘伙丟扔奶玄
堎嶲瞳蚚氪杅諳戊立杅𡧳徭虛囊
↗2017爛12堎政婓及犯奈正

市市弁戊丞扦及立永扑亦件
交奈扒奈掛弇
扔奈申旦及埻萸反
汜魂氪互覜元月祥晞支扦頗腔掝觳毛賤𢜪允月仇午

巖汜扔奶玄

Ruby on Rails unicorn MySQL
妏蚚撮胍
皿伕斥尼弁玄?正旦弁奪燴
(REDMINE)
末奈旦戊奈玉?田奈斥亦件奪燴
(GitHub)

HTML5 CSS3
jQuery + Backbone.JS ECMAScrip2015
Sass
妏蚚撮胍 - 白伕件玄巨件玉
Gulp + webpack
+
SMACSS+BEM+FLOCSS compass
CSS3

失皿伉�傖
20眕奻及Rails失皿伉互湔婓
appliA
appliB
appliC
appliD
appliE
appliF
appliG
appliH
appliI
appliJ
appliK
appliL
main_service
hoge
fuga
fega
haga
base_api
faga
micro_service

云舷仄及籵曰???
午卞井仁�耀互湮五仁
末奈旦戊奈玉手市左旦

𣶹懂及妘屯伕弘及嶱逃极秶

犯扒奶瓜奈
UI偞�氪ㄕ犯扒奶瓜奈ㄕ穴奈弁失永皿巨件斥瓦失
廣20靡极秶

巨件斥瓦失
Ruby巨件斥瓦失ㄕ奶件白仿巨件斥瓦失ㄕ生奶氾奴皮失皿伉巨件斥瓦失
廣70靡极秶

巨件斥瓦失犯扒奶瓜奈
𦲀�煦童
奶件白仿 JSDB CSSRuby HTML
田永弁巨件玉 (server-side)
UI/
VS
白伕件玄巨件玉 (client-side)

巨件斥瓦失ㄚ犯扒奶瓜奈匹廣100靡及嶱逃窒�
HTML/CSS/JS 毛萱謍仄凶旦平伙毛厥勻凶�互屾卅中
1筥嶲匹犯皿伕奶今木月 Redmine 及民弗永玄及杅反廣80璃

磐彆???
�絞凶曰腔卅灍蚾互靜曰殿今木市左旦卞

公仇匹???
2016爛
白伕件玄巨件玉巨件斥瓦失
惇悊

童絞薆郖
Server JSDB CSSRuby HTML
UI/
VS

FE民奈丞
踏反廣6靡极秶

☆白伕件玄巨件玉反FE互
�窒勾仁木壬假陑分友ㄐ★

童絞薆郖
Server JSDB CSSRuby HTML
UI/
VS
嶱逃及翋极反巨件斥瓦失?犯扒奶瓜奈及引引

丐仁引匹妘屯伕弘及FE反
屠飭氪?扔禾奈正奈及蕾�

卅氏匹ˋ俇�煦𦲀卞仄卅中及ˋ
民奈丞?��T嶲匹砩舑支醴腔及僕衄互褣仄仁卅曰互切
民奈丞嶲及瞳漲及�蕾支擁垀郔羥趙互逃汜仄支允中
杻隅及民奈丞仄井灍蚾仄卅中?匹五卅中袨颷分午
公及民奈丞互�引勻凶午五卞偶璃互筳戶日木卅仁卅勻化仄引丹
岈𦲀頗扦匹反犯丟伉永玄手嗣中???
�夔�e瞎�及珨啜腔卅掝觳午仄化???

丐仁引匹醴腔反岈𦲀及傖髡
秶釬氪珨侳午卅月仇午互斛猁
FE及湔婓砩膽反
妘屯伕弘及白伕件玄巨件玉卞窏唗毛手凶日仄
淏仄中源砃卞爀中化中仁仇午

淏眻﹜凶分嶱逃允月方曰
戶勻切扎湮劐

支勻化月仇午
嶱逃偶璃匹及源�習隅?偞�?扔禾奈玄
白伕件玄巨件玉及虐噫淕�

1.嶱逃偶璃匹及源�習隅?偞�?扔禾奈玄

引內☆平伊奶卅戊奈玉★毛蕉尹月
☆平伊奶今★午反
PREDICTABLE 軑䛐仄支允中
MAINTAINABLE 悵忐仄支允中
REUSABLE 婬瞳蚚仄支允中
SCALABLE ��仄支允中
Google巨件斥瓦失白奴伉永皿?它巧伙玄件庌及皮伕弘方曰

撿极腔卞ˋ
ready 奶矛件玄及 callback 反
1勾及 Entry point 卞勾五1勾分仃
Module 白央奶伙反 Entry point 井日場ヽ趙允月

ready 奶矛件玄及 callback 反 1entry point 卞勾五1勾分仃
<html>
<head>
<script src=/slideshow/ss-83840311/83840311/※smartphone/sidemenu.js§></script>
<script src=※smartphone/top_mainvisual.js§></script>
? smartphone/top.html
? smartphone/sidemenu.js
$(function(){
// 甩件田奈布奈丟瓦亙奈弁伉永弁匹
扔奶玉丟瓦亙奈毛桶尨允月�I燴
});
$(function(){
// 丟奶件申斥亙失伙毛市伙奈本伙趙允月�I燴
});
? smartphone/top_mainvisual.js

<html>
<head>
<script src=/slideshow/ss-83840311/83840311/※smartphone/sidemenu.js§></script>
<script src=※smartphone/top_mainvisual.js§></script>
? smartphone/sidemenu.js
$(function(){
});
$(function(){
});
? smartphone/top_mainvisual.js

<html>
<head>
<script src=/slideshow/ss-83840311/83840311/※smartphone/top.js§></script>
? smartphone/top.js
$(()=>{
});

Module白央奶伙反 Entry point 井日場ヽ趙允月
<html>
<head>
<script src=/slideshow/ss-83840311/83840311/※smartphone/top.js§></script>
? smartphone/top.js
import Sidemenu from ※modules/smartphone/sidemenu.js§;
import TopMainvisual from ※modules/smartphone/top-mainvisual.js§;
$(()=> {
Sidemenu.ready();
TopMainvisual.ready();
});

const Sidemenu = {
ready() {
// ready 媆卞斛猁卅�I燴
}
}
export default Sidemenu;
? modules/smartphone/sidemenu.js
module白央奶伙�匹反﹜網太堤仄凶芴傷卞場ヽ趙互宎引日卅中方丹卞
Module白央奶伙反 Entry point 井日場ヽ趙允月

偞�及午五卞蕉尹月屯五仇午
妘屯伕弘及灍颷卞撈仄化中月井
愐蚚��彆反羥ピ井
�珂僅反羥ピ井
= 隙六月井
= 戊旦玄
ˊ 慮ヽ

瞰ㄘ�凶醴卞憝歹月秶郘反卅月屯仁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%;
}

慮ヽ毛郔�珂卞蕉尹凶奻匹
☆平伊奶今★
☆隙六月井★
☆戊旦玄★
及田仿件旦毛蕉尹化偞�允月

坻卞反???
偞�𤩸及薜僅卞𠸎毛勾仃凶曰???
☆卅兮仇及源�ˋ★☆卅兮仇丹允月斛猁互丐月及ˋ★毛
諳螹匹掊隴仄凶曰???
甡螸允月灍蚾氪卞方勻化掊隴及帊源毛劐尹凶曰???

忒毛�井允及反
丐仁引匹坻窒扰及巨件斥瓦失
鞏躇卅戊立亙瓦弗奈扑亦件午
扔禾奈玄毛陑互仃月

淏眻﹜戶勻切扎戶氏升丹仁今中

�心反嗣中???
升丹仄凶日坻窒扰匹丐月巨件斥瓦失?犯扒奶瓜奈午
躇卅窣觓互龰木月分欠丹井ˋ
升丹仄凶日𠸎幏卞JS支白伕件玄巨件玉卞勾中化
斮�仄卞五化仁木月分欠丹井ˋ
巨件斥瓦失互⑵忒嶲匹忒互仃化中月JS及磊歠�毛
�薹方仁搪氏匹手日尹月卞反???ˋ

巨件斥瓦失B民奈丞
巨件斥瓦失A民奈丞FE民奈丞
巨件斥瓦失C民奈丞
仇丹仄凶
窒扰仍午卞�諳午卅月丟件田奈毛𢜪戶凶
巨件斥瓦失囀卞手潭￤白伕件玄巨件斥瓦失毛釬勻凶
A民奈丞童絞
B民奈丞童絞
C民奈丞童絞
潭￤FE
潭￤FE
潭￤FE

仇丹卅勻凶ㄐ
跪窒扰及偶璃支帊�卞勾中化掞互珨楓參挍仄化中月井隴復卞ㄐ
巨件斥瓦失?犯扒奶瓜奈手�諳互隴復卅日𠸎幏卞�五支允仁ㄐ
伉奈母奈互兮氏少�中磁歹六毛�仃�勻化月午示玄伙生永弁卞
卅曰支允井勻凶互公木手賤秏ㄐ

2.白伕件玄巨件玉及虐噫淕�

白伕件玄巨件玉戊奈犯奴件弘�廣

妘屯伕弘旦正奶伙布奶玉

戊件由奶伙辻�及淕�
+
Rails 5.1 + Webpacker
+

末奈旦戊奈玉及伉白央弁正伉件弘
ECMAScriptㄤ ↙ ECMAScript6 趙
CSS module 及 FLOCSS趙
Pure module趙每 entryPoint 井日�窒網太堤允

淏眻﹜戶勻切扎華耋

引午戶
妘屯伕弘及FE反嶱逃午中丹方曰扔禾奈玄卞蛁薯仄化中月互
戶勻切扎湮劐
☆慮ヽ★☆平伊奶今★☆隙六月井★☆戊旦玄★及田仿件旦毛
蕉尹化偞�允月及反戶勻切扎戶氏升丹仁今中
伉白央弁正伉件弘午井戶勻切扎華耋

匹手???
華耋卅互氏壬曰及磐彆
允仇仄內勾傖彆反匹化五化中月

分井日???
妘屯伕弘毛呏曰奻仆月凶戶卞
␜ 互氏壬月ㄞ

湮劐卅仇午卞手蕾切砃井尹月
␜ 羯揋躁摩笢ㄐㄞ

仍ラ�丐曰互午丹仍介中引仄凶

端端舝

妘屯伕弘及白伕件玄巨件玉巨件斥瓦失勻化戶勻切扎湮劐支友氏???

Recommended

More Related Content

What's hot (20)

Similar to 妘屯伕弘及白伕件玄巨件玉巨件斥瓦失勻化戶勻切扎湮劐支友氏??? (20)

妘屯伕弘及白伕件玄巨件玉巨件斥瓦失勻化戶勻切扎湮劐支友氏???