検索 - みる会図書館

検索対象: メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-から 248件ヒットしました。

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-


メ ン テ ナ プ ル JavaScript 読 み や す く 保 守 し や す い JavaScript コ ー ド の た め の 作 法 NichoIas C. Zakas 著 豊 福 剛 訳 0 REILLY オ ラ イ リ ー ・ ジ ャ パ ン

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-


メ ン テ ナ プ レ JavaScript ー 物 ガ / 〃 g ea イ 4 わ / e Code \ 物 、 、 ふ お 、 ミ ま い い 、 こ : い ン は 冫 ・ ′ ・ ′ ノ ル ・ ク 読 み や す く 保 守 し や す い JavaScript コ ー ド の た め の 作 法 0 ' R 日 L オ ラ イ リ ー ・ ジ ャ パ ン Ni 訪 0 / 0 / 4 た as 著 豊 福 剛 訳

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-


5.2 CSS か ら JavaScript を 隔 離 す る 一 55 HTML だ け を 見 れ ば 解 決 で き る で し よ う 。 ス タ イ ル の 問 題 が 発 生 し た と き は 、 CSS に 問 題 が あ る こ と が わ か り 、 css を 修 正 す る だ け で 済 み ま す 。 最 後 に 、 も し 振 る 舞 い に 問 題 が あ る 場 合 、 JavaScript に 直 行 し て 解 決 す れ ば い い の で す 。 こ う し た 対 応 が 可 能 な こ と こ そ 、 メ ン テ ナ ン ス 性 に 優 れ た ウ エ プ イ ン タ フ ェ ー ス の 鍵 で す 。 52 CSS か ら JavaScript を 隔 離 す る lnternet Explorer8 と そ れ 以 前 の バ ー ジ ョ ン に は 、 一 部 で は 愛 さ れ 、 し か し 多 く の 人 々 に 嫌 わ れ た 機 能 が あ り ま し た 。 そ れ は CSS 式 で す 。 CSS 式 を 使 う と 、 CSS に JavaScript を 直 接 挿 入 で き ま す 。 CSS コ ー ド の 中 で 計 算 な ど の 機 能 が 直 接 実 行 で き る の で す 。 た と え ば 、 次 の コ ー ド で は 、 プ ラ ウ ザ の 幅 に 合 致 す る よ う に 要 素 の 幅 を 設 定 し て い ま す 。 . box { width: expression(document. b0dy.0 幵 setWidth + "px"); CSS 式 は expression() と い う 特 殊 な 関 数 で 囲 ま れ た 部 分 で あ り 、 JavaScript の い か な る コ ー ド で も 受 け 付 け ま す 。 CSS 式 は 頻 繁 に 検 討 し 直 さ れ 、 性 能 を 悪 化 さ せ る も の と 見 な さ れ ま し た 。 steve Souders の 『 High performance Web Sites 』 ( 邦 題 『 ハ イ パ フ ォ ー マ ン ス Web サ イ ト 』 オ ラ イ リ ー ・ ジ ャ パ ン 刊 ) で は 、 避 け る べ き も の に 数 え ら れ て い ま す ( ル ー ル 7 : CSS expression の 使 用 を 控 え る ) 。 性 能 問 題 と は 別 に 、 CSS の 中 に JavaScript を 埋 め 込 む と 、 メ ン テ ナ ン ス は 悪 夢 と な り ま す 。 著 者 も 直 接 体 験 し た こ と が あ り ま す 。 2005 年 、 私 が 担 当 し た JavaScript の バ グ に は 、 最 初 か ら 苦 し め ら れ ま し た 。 そ の バ グ は InternetExpIorer で の み 発 生 し 、 し か も プ ラ ウ ザ の ウ イ ン ド ウ の サ イ ズ 変 更 を 行 っ た 、 ほ ん の 数 回 し か 発 生 し な い の で す 。 そ の 時 点 で は 、 lnternet Explorer の た め の 最 良 の JavaScript デ ノ ヾ ッ ガ は Visual Studi0 で し た が 、 こ の 問 題 の 発 生 源 を 特 定 す る こ と は で き ま せ ん で し た 。 プ レ イ ク ポ イ ン ト の 設 定 と alert ( ) 文 の 挿 入 に 丸 1 日 を 費 や し て 、 何 が 置 き て い る の か 把 握 し よ う と し た の で す 。 そ の 日 の 終 わ り 近 く に な っ て 、 ど う に も 好 き に な れ な い デ バ ッ グ 手 法 で あ る コ ー ド の シ ス テ マ チ ッ ク な 削 除 を 試 し て み ま し た 。 1 つ 1 つ の フ ァ イ ル か ら JavaScript を 取 り 除 き 、 問 題 が 再 現 す る か 試 し た の で す す ぐ に イ ラ イ ラ が 募 り 、 ペ ー ジ か ら JavaScript を す べ て 取 り 除 き ま し た 。 そ れ で も バ グ カ 再 現 す る の で す 。 信 じ ら れ な い 思 い で ス ク リ ー ン を 見 つ め ま し た 。 JavaScript が 一 切 含 ま れ な い ペ ー ジ で JavaScript 工 ラ ー が 起 き る っ て 、 ど う い う こ と ? 結 局 CSS を 調 べ る こ と に な っ た の で す が 、 そ の 日 ま で CSS の ど こ に 罠 が あ る の か 知 り ま せ ん で し た 。 そ の と き は 、 何 を 探 せ ば い い の か す ら 、 よ く わ か ら な か っ た の で す 。 CSS の 頭 か ら 順 に 、 ゆ っ く り ス ク ロ ー ル し な が ら 、 何 か 目 に 飛 び 込 ん で こ な い か 見 て い ま し た 。 そ し て 遂 に 、 問 題 の 原 因 が CSS 式 だ と わ か っ た の で す 。 そ れ を 削 除 し た ら 、 JavaScript 工 ラ ー は 消 え ま し た 。 こ の 経 験 か ら 本 章 の ル ー ル を 学 び ま し た 。 JavaScript の バ グ を JavaScript か ら 探 す の に 丸 0 ヾ 、

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-


5.3 JavaScript か ら CSS を 隔 離 す る 一 57 す 。 JavaScript の 中 に ス タ イ ル 情 報 が あ る と 、 メ ン テ ナ ン ス 上 問 題 に な り ま す 。 JavaScript か ら CSS を 隔 離 す る こ と は 、 CSS の 中 に す べ て の ス タ イ ル 情 報 が あ る こ と を 意 味 し ま す 。 あ る 要 素 の ス タ イ ル を JavaScript で 変 更 す る 必 要 が あ る と き 、 CSS ク ラ ス を 操 作 す る の が 最 善 の 方 法 で す 。 た と え ば 、 ペ ー ジ 上 に ダ イ ア ロ グ ボ ッ ク ス を 表 示 す る と き は 、 次 の よ う に CSS で ク ラ ス を 定 義 し て お き ま す 。 . reveal { C010r : red; left: 10px; top: 100PX ; visibility: visible; JavaScript で は 、 そ の 問 題 の 要 素 に ク ラ ス を 追 加 し ま す 。 / / Good: HTML5 / / Good : element . / / Good: YUI c1assName 十 = Native reveal' element. c1assList. add("reveal"); 'reveal"); が ス タ イ ル を 直 接 操 作 し な け れ ば 、 CSS に 対 し て 疎 結 合 を 保 て ま す 。 JavaScript を 更 新 す る こ と な く CSS の 中 で い つ で も 好 き な と き に 変 更 で き ま す 。 JavaScript に よ っ て 適 用 さ れ た ス タ イ ル は CSS コ ー ド の 中 で 定 義 さ れ て い ま す 。 こ れ ら の ス タ イ ル は 、 ジ の ラ イ フ サ イ ク ル を 通 し て 要 素 か ら の ク ラ ス 名 の 追 加 や 削 除 が 自 由 に で き ま す 。 ク ラ ス CSS ク ラ ス 名 を CSS と JavaScript の 間 の 通 信 機 構 と 考 え ま し よ う 。 JavaScript は 、 ペ ー d0j0. addClass(e1ement, / / G00d: D0j0 $(element). addC1ass("reveal") ; / / G00d: jQuery Y. one(element). addC1ass("reveal"); そ の 値 を オ ー バ ー ラ イ ド し ま す 。 あ る 要 素 の CSS ク ラ ス は 論 理 的 な デ フ ォ ル ト 値 を 持 つ べ き で 、 ス ク リ プ ト か ら style. bottom 、 style. right を 使 っ て 要 素 を 正 確 に 配 置 す る の は 問 題 あ り ま せ ん 。 す 。 こ の タ イ プ の 計 算 は CSS で は 実 行 で き な い の で 、 style. top 、 style. left 、 他 の 要 素 や ペ ー ジ 自 体 の サ イ ズ を 基 準 に 相 対 的 に 位 置 指 定 す る 必 要 が あ る 場 合 で style プ ロ バ テ ィ を 使 う の が 妥 当 な 事 例 が 1 つ あ り ま す 。 ペ ー ジ 上 の あ る 要 素 を 、

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-


メ ン テ ナ プ ル JavaScript 読 み や す く 保 守 し や す い JavaSc ⅱ pt コ ー ド の た め の 作 法 ー 2013 年 4 月 19 日 初 版 第 2 刷 発 行 2013 年 3 月 4 日 初 版 第 1 刷 発 行 著 訳 者 者 発 行 人 作 印 刷 ・ 製 本 発 発 行 所 Nicholas C. zakas ( ニ コ ラ ス ・ C ・ ザ カ ス ) 豊 福 剛 ( と よ ふ く つ よ し ) テ イ ム ・ オ ラ イ リ ー 有 限 会 社 は る に れ 株 式 会 社 平 河 工 業 社 株 式 会 社 オ ラ イ リ ー ・ ジ ャ パ ン 〒 160 ー 0002 東 京 都 新 宿 区 坂 町 26 番 地 27 TEL ( 03 ) 3356 ー 5227 FAX ( 03 ) 3356 ー 5263 電 子 メ ー ル [email protected] 株 式 会 社 オ ー ム 社 〒 101 ー 8460 東 京 都 千 代 田 区 神 田 錦 町 3 ー 1 TEL ( 03 ) 3233 ー 0641 ( 代 表 ) FAX ( 03 ) 3233 ー 3440 イ ン テ リ ジ ェ ン ト プ ラ ザ ビ ル IF printed ⅲ Japan ( ISBN978 ー 4 ー 87311 ー 610 ー 5 ) 落 丁 、 乱 丁 の 際 は お 取 り 替 え い た し ま す 。 ら 文 書 に よ る 許 諾 を 得 ず に 、 い か な る 方 法 に お い て も 無 断 で 複 写 、 複 製 す る こ と は 禁 じ ら れ て い ま す 。 本 書 は 著 作 権 上 の 保 護 を 受 け て い ま す 。 本 書 の 一 部 あ る い は 全 部 に つ い て 、 株 式 会 社 オ ラ イ リ ー ・ ジ ャ パ ン か

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-


48 ー 4 章 変 数 、 関 数 、 演 算 子 / / 数 値 の 2 と t て ue ( onsole. 10g ( 2 ー = true); console. 10g ( 2 ー = true); var Object t0String: function() { return " 0X19 " ・ / / オ ブ ジ ェ ク ト と 25 console. log(object = console. log(object = / / null と undefined / / false / / false / / true / / false console. 10g ( null = = undefined); / / true console. 10g ( null = = undefined);// false = と ! = = の 使 用 は 、 ク ロ ッ ク フ ォ ー ド の コ ー ド 規 約 、 jQuery 、 SproutCore で 推 奨 さ れ て い ま す 。 ク ロ ッ ク フ ォ ー ド の 規 約 で は 、 と り わ け false 値 を 調 べ る 時 に 使 う こ と を 勧 め て い ま す ( 0 、 空 文 字 列 、 null 、 undefined は false に 型 強 制 さ れ ま す ) 。 jQuery で は 、 null と undefined の 両 方 を テ ス ト す る 意 図 の と き に は 、 null に 対 す る = の 使 用 を 許 可 し て い ま す 。 ど ん な と き で 生 6 eval() て い る す べ て の 箇 所 で 警 告 を 有 効 に で き ま す 。 比 較 に = = や ! = を 使 っ て い る と き 、 警 告 し ま す 。 eqeqeq オ プ シ ョ ン を 追 加 す れ ば 、 = と ! = を 使 っ JSLint は == や ! = が 使 わ れ て い る と 、 デ フ ォ ル ト で 警 告 し ま す 。 JSHint は 、 false 値 と の も 例 外 な く = = と ! = を 使 う こ と を 推 奨 し ま す 。 き ま す 。 例 を 見 て み ま し よ う 。 ま せ ん 。 同 じ こ と は Function コ ン ス ト ラ ク タ 、 setTimeout() 、 setlnterval() を 使 っ て 実 行 で eval() 関 数 は 、 JavaScript の 中 で JavaScript 文 字 列 を 実 行 す る た め の 唯 一 の 方 法 で は あ り / / 15 console. log(count); var number = eval()5 + count"); = 10 ; var count eva1("a1ert('Hi!')"); 行 す る こ と が で き ま す 。 て 、 JavaScript コ ー ド を 追 加 ダ ウ ン ロ ー ド し た り 、 JavaScript コ ー ド を 生 成 し た り し て 、 実 eval() 関 数 は 、 受 け 取 っ た JavaScript コ ー ド の 文 字 列 を 実 行 し ま す 。 開 発 者 は こ の 関 数 を 使 っ

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-


60 ー 5 章 U に で の 疎 結 合 - Bad - く script> d0Something(); く /script> JavaScript は す べ て 外 部 フ ァ イ ル に 格 納 し 、 HTML か ら イ ン ラ イ ン の JavaScript コ ー ド を 隔 離 す る の が ベ ス ト で す 。 こ の ア プ ロ ー チ が 良 い 理 由 の 1 つ に 、 デ バ ッ グ の し や す さ が あ り ま す 。 JavaScript 工 ラ ー が 起 き た と き 、 最 初 に 訂 avaScript フ ァ イ ル を 調 べ て 問 題 を 見 つ け る や り 方 に な り ま す 。 JavaScript が HTML の 中 に あ る と 、 こ う し た 作 業 フ ロ ー が 妨 げ ら れ ま す 。 JavaScript が JavaScript フ ァ イ ル に あ る の か 、 HTML の 中 に あ る の か 、 考 え な け れ ば な り ま せ ん ( 前 者 で あ る べ き で す ) 。 デ バ ッ グ に 取 り か か れ る の は 、 そ の 後 で す 。 今 日 で は 優 れ た ウ エ プ 開 発 ツ ー ル が あ る の で 、 こ れ は 些 細 な こ と に 思 わ れ る か も し れ ま せ ん が 、 実 際 に は メ ン テ ナ ン ス の パ ズ ル に お け る 重 要 な ピ ー ス で す 。 何 が ど こ に あ る か す ぐ に 予 想 で き る こ と で 、 デ バ ッ グ も 開 発 も 速 く な り 、 デ バ ッ グ を ど こ か ら 開 始 す れ ば い い の か ( 考 え な く て も ) 知 っ て い る こ と で 、 解 決 が よ り 速 く な り 、 コ ー ド 全 体 の 品 質 も 向 上 し ま す 。 5.5 JavaScript か ら HTML を 隔 離 す る HTML か ら JavaScript を 隔 離 す る の と 同 じ よ う に 、 JavaScript か ら HTML を 隔 離 す る の も ベ ス ト で す 。 す で に 述 べ た よ う に 、 デ バ ッ グ す べ き テ キ ス ト や 構 造 の 問 題 が あ る と き 、 ま す HTML か ら デ バ ッ グ を 始 め た い も の で す 。 著 者 は こ れ ま で 何 度 も 、 こ う し た 問 題 で ト ラ ブ ル を 経 験 し て き ま し た 。 HTML の 中 を 調 べ た け れ ど も 、 本 当 の 問 題 は avaScript の 中 の 奥 深 く に 埋 も れ て い た の で す 。 HTML は 、 次 の よ う に innerHTML プ ロ バ テ ィ を 使 う こ と で 、 JavaScript の 中 に 頻 繁 に 埋 め 込 ま れ ま す 。 / / Bad var diV = document. getE1ementById("my-div"); div. innerHTML = " く h3 〉 Error く /h3> く p>lnvalid e-mail address. く /P>" ・ JavaScript の 中 に HTML 文 字 列 を 埋 め 込 む の は 、 い く つ か の 理 由 か ら バ ッ ド プ ラ ク テ ィ ス で す 。 す で に 述 べ た よ う に 、 ま ず 第 1 に 、 テ キ ス ト と 構 造 の 問 題 を 突 き 止 め る の が 複 雑 に な り ま す 。 マ ー ク ア ッ プ に 問 題 が あ る と き の デ バ ッ グ の 典 型 的 な ア プ ロ ー チ は 、 プ ラ ウ ザ の イ ン ス ペ ク タ を 使 っ て DOM ツ リ ー を 調 べ 、 次 に ペ ー ジ の HTML ソ ー ス を 見 て 違 い を 探 し ま す 。 う し た や り 方 で 問 題 を 突 き 止 め る の は 、 JavaScript が 簡 単 な DOM 操 作 以 上 の こ と を 行 う 場 合 に は よ り 問 題 含 み に な り ま す 。 こ の ア プ ロ ー チ の 第 2 の 問 題 は 、 メ ン テ ナ ン ス 性 で す 。 テ キ ス ト や マ ー ク ア ッ プ を 変 更 す る 必 要 が あ る 場 合 、 変 更 す べ き は HTML を 管 理 し て い る 箇 所 だ け で あ っ て 欲 し い も の で す 。 そ れ は PHP コ ー ド 、 JSP フ ァ イ ル 、 あ る い は Mustache や Handlebars な ど の テ ン プ レ ー ト か も し れ ま せ ん 。 使 わ れ て い る 機 能 に 関 係 な く 、 簡 単 に 更 新 で き る よ う に マ ー ク ア ッ プ は す べ て

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-


58 ー 5 章 U に で の 疎 い ロ ロ 54 HTML か ら JavaScript を 隔 離 す る JavaScript を 学 び は じ め た 人 た ち は 、 最 初 は HTML の 中 に JavaScript を 埋 め 込 み ま す 。 埋 め 込 む 方 法 は い く つ も あ り ま す 。 そ の 1 つ に 、 onclick な ど の on 属 性 を 使 っ て イ ベ ン ト ハ ン ド ラ を 割 り 当 て る 方 法 が あ り ま す 。 - Bad - く button oncIick="doSomething()" id="action-btn">C1ick Me く /button> こ れ は JavaScript を 使 う ウ エ プ サ イ ト の ほ と ん ど で 2000 年 前 後 に 実 装 さ れ た や り 方 で す 。 HTML の あ ち こ ち に onclick が あ り 、 要 素 の 属 性 と し て イ ベ ン ト ハ ン ド ラ が 定 義 さ れ ま す 。 の コ ー ド は ほ ば あ ら ゆ る 状 況 で 動 作 し ま す が 、 2 つ の UI 層 (HTML と JavaScript) に 密 結 合 が あ る の で 、 い く つ か 問 題 が あ り ま す 。 ま ず 、 doSomething() 関 数 は 、 ボ タ ン が ク リ ッ ク さ れ た と き に 利 用 で き な け れ ば な り ま せ ん 。 2000 年 前 後 に ウ エ プ サ イ ト を 開 発 し て い た 人 た ち に は 、 こ の 問 題 は お 馴 染 み の も の で し た 。 doSomething() の コ ー ド は 、 外 部 フ ァ イ ル か ら ロ ー ド さ れ る か も し れ な い し 、 HTML フ ァ イ ル の 中 の 後 ろ に 登 場 す る か も し れ ま せ ん 。 ど ち ら に せ よ 、 関 数 が 利 用 可 能 に な る 前 に ユ ー ザ が ポ タ ン ク リ ッ ク す る 可 能 性 が あ り 、 そ の 場 合 、 JavaScript 工 ラ ー が 発 生 し ま す 。 そ の エ ラ ー メ ッ セ ー ジ が ユ ー ザ に ポ ッ プ ア ッ プ で 表 示 さ れ る か も し れ な い し 、 何 の 反 応 も し な い ボ タ ン に な る か も し れ ま せ ん 。 ど ち ら の ケ ー ス も 望 ま し く あ り ま せ ん 。 第 2 の 問 題 は 、 メ ン テ ナ ン ス で す 。 dosomething ( ) の 名 前 を 変 更 し た い と し た ら 、 ど う な る で し よ う 。 ボ タ ン が ク リ ッ ク さ れ た と き に 、 今 度 は 別 の 関 数 を 呼 び 出 さ な い と い け な い と し た ら 、 ど う な る で し よ う 。 ど ち ら の ケ ー ス も 、 JavaScript と HTML の 両 方 を 変 更 す る こ と に な り ま す 。 こ れ こ そ 密 結 合 さ れ た コ ー ド に 他 な り ま せ ん 。 す べ て で は な い に し て も 、 ほ と ん ど の JavaScript は 、 外 部 フ ァ イ ル に 置 か れ 、 く script> 要 素 を 介 し て ペ ー ジ に 組 み 込 ま れ ま す 。 HTML の 中 で イ ベ ン ト ハ ン ド ラ を 割 り 当 て る 目 的 で on 属 性 を 使 う べ き で は あ り ま せ ん 。 そ の 代 わ り に 、 外 部 ス ク リ プ ト が ロ ー ド さ れ た と き に イ ベ ン ト ハ ン ド ラ を 追 加 す る JavaScript の メ ソ ッ ド を 使 い ま す 。 DOMLeve12 準 拠 の プ ラ ウ ザ で あ れ ば 、 前 の 例 と 同 じ 振 る 舞 い は 次 の コ ー ド を 使 っ て 実 現 で き ま す 。 function doSomething() { / / コ ー ド var btn = document. getE1ementById("action-btn"); btn. addEventListener("cIick", doSomething, false); こ の ア プ ロ ー チ の 利 点 は 、 関 数 doSomething ( ) が イ ベ ン ト ハ ン ド ラ を 割 り 当 て る コ ー ド と 同 じ フ ァ イ ル で 定 義 さ れ て い る こ と で す 。 関 数 名 を 変 更 す る 必 要 が あ る と き で も 、 編 集 す る 必 要 が あ る フ ァ イ ル は 1 つ だ け で す 。 ボ タ ン が ク リ ッ ク さ れ た と き に 別 の 何 か を 実 行 す る 場 合 、 変 更 す べ き 箇 所 は 1 つ で す 。

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-


・ JavaScript は 、 ペ ー ジ に 振 る 舞 い を 追 加 し 、 す 。 の と し て イ メ ー ジ さ れ ま す ( 図 5-1 ) 。 U に で の 疎 結 合 ウ エ プ 開 発 に お い て 、 UI(user interface) は 恊 働 す る 3 つ の 独 立 し た 層 で 定 義 さ れ ま す 。 ・ HTML は 、 ペ ー ジ の デ ー タ と セ マ ン テ ィ ク ス を 定 義 す る の に 使 わ れ ま す 。 ・ CSS は 、 ペ ー ジ の ス タ イ ル を 設 定 し 、 視 覚 的 な 特 徴 を 作 る た め に 使 わ れ ま す 。 こ れ ら の UI 層 は 、 通 常 HTML が 基 本 に あ り 、 そ れ に CSS と JavaScript の 層 が 被 さ っ た も よ り イ ン タ ラ ク テ イ プ に す る た め に 使 わ れ ま JavaScript CSS HTML 図 5-1 ウ ェ ブ ユ ー ザ イ ン タ フ ェ ー ス の 各 層 と は い え 、 CSS と JavaScript の 実 際 の 関 係 は 、 JavaScript が CSS に 依 存 し て い る と い う よ り も 、 兄 弟 の よ う な も の で す 。 JavaScript の な い HTML と CSS だ け の ペ ー ジ に す る こ と も 可 能 で す し 、 CSS の な い HTML と JavaScript だ け の ペ ー ジ に す る こ と も 可 能 で す 。 こ れ ら 3 層 の 関 係 に つ い て は 、 図 5-2 の よ う に 考 え る こ と に し て い ま す 。 CSS と JavaScript を 、 ウ エ プ ユ ー ザ イ ン タ フ ェ ー ス 全 体 に お い て 同 じ 位 置 に あ る と 考 え れ ば 、 よ り 可 能 性 が 広 が り 、 依 存 性 を な く す こ と が で き ま す 。 た と え ば 、 CSS に 頼 ら な い と JavaScript が 正 し く 機 能 し な い よ う で は い け ま せ ん 。 仮 に 2 つ の 間 に 相 互 作 用 が あ る 場 合 で も 、 css に 依 存 す る こ と な く 機 能 す る べ き で す 。

メンテナブルJavaScript-読みやすく保守しやすいJavaScriptコードのための作法-


5.5 JavaScript か ら HTML を 隔 離 す る 一 63 本 来 な ら ば 、 必 要 以 上 に テ ン プ レ ー ト テ キ ス ト を JavaScript の 内 部 に 組 み 込 み た く あ り ま せ ん 。 テ ン プ レ ー ト を 他 の マ ー ク ア ッ プ と 同 じ 領 域 に 定 義 さ れ 、 HTML ペ ー ジ の 中 に 直 接 埋 め 込 む こ と で 、 JavaScript か ら ア ク セ ス 可 能 な よ う に 作 り ま す 。 こ れ は 2 通 り の や り 方 で 実 現 で き ま す 。 第 1 は 、 テ ン プ レ ー ト を HTML の コ メ ン ト と し て 組 み 込 む や り 方 で す 。 コ メ ン ト は 、 要 素 や テ キ ス ト と 同 じ DOM ノ ー ド な の で 、 ク エ リ が 可 能 で あ り 、 JavaScript を 使 っ て そ の コ ン テ ン の JavaScript で は 、 コ メ ン ト か ら テ ン プ レ ー ト テ キ ス ト を 参 照 し て い ま す 。 こ の コ メ ン ト は 、 使 用 さ れ る リ ス ト の 最 初 の 子 と し て 、 用 途 に 適 し た 内 容 で 配 置 し ま す 。 次 く / ul 〉 く li > く a href="/item/3">Third item く /a> く /li> く li 〉 く a href="/item/2">Second item く /a 〉 く /li> く li > く a href="/item/1">First item く /a> く /li> く ul id="mylist"> く !ー く li id="item%s"> く a href="%s">%s く /a> く /li>--> ツ を 抽 出 す る こ と が で き ま す 。 var mylist = document. getElementById("mylist"), = mylist. firstChi1d. nodeValue; templateText テ ン プ レ ー ト テ キ ス ト を 参 照 で き た ら 、 後 は こ れ を フ ォ ー マ ッ ト し て DOM に 挿 入 す る だ け で す 。 こ れ は す べ て 以 下 の 関 数 を 使 っ て 実 現 し ま す 。 function addltem(url, text) { var mylist tempIateText result = document. getElementById("my1ist") , = mylist. firstChild. node\/alue, = sprintf(tempIateText, url, text); mylist. insertAdjacentHTML("beforeend", result) ; / / 使 い 方 addItem("/item/4" "Fourth item"); こ の メ ソ ッ ド は 与 え ら れ た 情 報 で テ ン プ レ ー ト テ キ ス ト を 処 理 し 、 insertAdjacentHTML() を 使 っ て 結 果 の HTML を 注 入 し ま す 。 こ の ス テ ッ プ で HTML 文 字 列 は DOM ノ ー ド に な り 、 く ul > の 子 と し て 追 加 さ れ ま す 。 テ ン プ レ ー ト を HTML ペ ー ジ に 組 み 込 む 第 2 の や り 方 は 、 く sc ⅱ pt > 要 素 を カ ス タ ム の type プ ロ バ テ ィ を 一 緒 に 使 い ま す 。 プ ラ ウ ザ は く script> 要 素 の 中 の コ ー ド を デ フ ォ ル ト で JavaScript で あ る と 想 定 し ま す が 、 プ ラ ウ ザ が 理 解 で き な い type を 指 定 す る こ と で 、 JavaScript で な い も の を プ ラ ウ ザ に 知 ら せ る こ と が で き ま す 。