【5分でわかるWeb最新技術】
Web components
2019/3/29 Creators Apartment vol.05
須藤 善達
株式会社ビーコーズ
Profile
- 須藤 善達（ストウ ヨシノブ）
- エンジニア
- 株式会社ビーコーズ所属
- 八戸市出身 十和田市在住
2019年3月
ある技術が誕生して
30周年となりました。
インターネット
Web制作の技術の遍歴を
3ステップでたどる
インターネット30周年記念
おことわり
Web制作をHTML, CSS, JavaScriptの分け方という観点で説明します。
分かりやすさを重視するため、細かくは正確ではない表現もあるかと思いますが多めに見て下さい。
分かりやすさ重視のため、多くの人に馴染みのある
料理に例えて説明します。
Web制作の技術の説明
Web制作の技術について
1つのファイルに3つ
すべてまとめられていた
Web制作 初期
index.html
役割ごとにファイルを分ける
Web制作 中期
index.html
style.css
script.js
それぞれの責任（関心）を分離して明確にすることで、
1つの物事に集中させる。
ソフトウェア工学の世界では
関心の分離と言います。
責任が明確になり、
見通しがよくなった！！
と思いきや…
新たな問題が発生
お客さんの要求が増加
index.html
style.css
script.js
ファイルを分けたのはいいが、
お客さんの要求に答えるうちに
ファイルが肥大化。
各ファイルが数千行レベルに…
$(function(){
var mainContainer = $('#main_contents_wrapper');
var mainFooter = $('#footer');
var sideWrap = $('#side_menu_contents');
mainContainer.prepend('<div id="navi_active_background"></div>');
var naviActiveBackground = $('#navi_active_background');
winResize ();
$(window).resize(function(){
winResize ();
});
var sideMenu = sideWrap.find('.menu_content');
var sideSelectLink = $('#side_menu_contents .select_menu li a');
var sideSelectMenu = $('#side_menu_contents .menu_content div.menu');
var formSelectUl = $('#side_menu_contents #form_select_link');
sideSelectLink.click(function(){
var displaySideMenu = $($(this).attr('href'));
var displaySideMenuNum = sideSelectLink.index(this);
if($(this).hasClass('active')){
sideWrap.not(':animated').animate({
marginLeft:'-480px'
},300);
sideSelectLink.removeClass('active');
naviActiveBackground.fadeOut(300);
$('.select_disc_content').fadeIn(300);
} else {
naviActiveBackground.fadeIn(300,function(){
sideWrap.not(':animated').animate({
marginLeft:'0'
},300);
});
if(displaySideMenuNum == 1){
formSelectUl.show();
} else {
formSelectUl.hide();
};
sideSelectMenu.hide();
displaySideMenu.show();
sideSelectLink.removeClass('active');
$(this).addClass('active');
$('.select_disc_content').fadeOut(300);
};
menuScroll();
return false;
});
naviActiveBackground.click(function(){
sideWrap.not(':animated').animate({
marginLeft:'-480px'
},300);
sideSelectLink.removeClass('active');
naviActiveBackground.fadeOut(300);
$('.select_disc_content').fadeIn(300);
});
管理するの無理では…？
この問題皆さんならどう解決しますか？
あらゆる種類の肉、魚、野菜が
入った冷蔵庫がある。
客からのオーダーを受けて必要な材料を探しにくるが、
肉・魚・野菜それぞれ大量に入っているため、探すのが大変。
料理ごとに必要な材料を
まとめておけばいいのでは？
= 仕込み作業をしておけばいいのでは？
麻婆豆腐の注文が入ったときのために、麻婆豆腐の材料をまとめておく。
酢豚の注文が入ったときのために、
酢豚の材料をまとめておく。
役割ごとではなく、
機能ごとに分けて
コンポーネント化する
最新 Web制作
component1
component2
世界中の誰かが作って
公開したコンポーネントを自由に使える