検索 - みる会図書館

検索対象: WEB+DB PRESS Vol.85

WEB+DB PRESS Vol.85から 31件ヒットしました。

WEB+DB PRESS Vol.85


朝 プ 住 ア ← エ プ ← ・ 最 前 線 流 行 に 踊 ら さ れ な い 技 術 動 向 ECMAScript 6 と JavaScript の 未 来 新 た な 機 能 を 先 取 り し て 使 う 泉 水 翔 吾 SENSUI Sho 佐 藤 歩 SATO Ayumu 株 サ イ バ ー エ ー ジ ェ ン ト 株 サ イ バ ー エ ー ジ ェ ン ト http://1000Ch. net/ http://aho.mu/ 1000Ch ahomu @ahomu 第 5 回 URL GitHub Twitter @ ・ ・ ・ 霧 , URL GitHub Maps に 代 表 さ れ る 、 ペ ー ジ 遷 移 を 伴 わ ず に コ ン テ ン ツ を 更 新 す る よ う な Web ア プ リ ケ ー シ ョ ン の リ ッ チ 化 が 進 む に し た が っ て 、 JavaScript が 占 め る 重 要 度 は 増 し て い き ま し た 。 こ う し た ニ ー ズ に 応 え る た め 、 Web の 進 化 に 伴 っ て 見 え て き た 問 題 を 解 決 し た ECMAScript 5th edition が ECMAScript は 特 定 の 言 語 実 装 を 指 す の で は な く 、 あ 2009 年 に リ リ ー ス さ れ 、 さ ら に い く つ か の 改 善 を 経 て く ま で 言 語 仕 様 の 名 称 で す 。 ECMAScript の 仕 様 は 、 情 2011 年 6 月 に ECMAScript5.1( 以 下 、 ES5) と な り ま し 報 通 信 シ ス テ ム の 国 際 的 な 標 準 化 団 体 で あ る Ecma た 。 ES5 は 現 在 の 最 新 で 、 最 も 普 及 し て い る バ ー ジ ョ lnternational に よ っ て 、 ECMA-262 と い う 文 書 で 策 定 ン で す 。 さ れ て い ま す 。 な お 、 そ の 間 の 2nd edition は ECMAScript を 言 語 と ECMAScript 由 来 の 言 語 実 装 は JavaScript だ け で は あ し て 国 際 標 準 の 基 準 と し た ISO/IEC 16262 に 準 拠 し た り ま せ ん 。 独 自 の 拡 張 が 行 わ れ て い る ケ ー ス も あ り ま も の で す 。 そ の た め lsted ⅲ on と 仕 様 に 差 異 は あ り ま す が 、 Flash で 使 わ れ て い る ActionScript や Microsoft せ ん 。 3rd edition で は 正 規 表 現 や try/catch の 例 外 処 理 の JScript も 、 ECMAScript の 仕 様 と 互 換 性 を 持 っ て い 衄 の 成 長 や 国 際 化 を 見 越 と い っ た 機 能 の 追 加 か ら る ECMAScript の 方 言 と も 呼 べ る 実 装 で す 。 、 に 1 ロ ロ し た 細 か な 変 更 が 加 わ り ま し た 。 4thed ⅲ on に つ い て ECMAScript の 歴 史 は 、 過 去 に 2 度 策 定 に 向 け た 動 き が あ り ま し た が 、 意 見 の 不 一 致 や 政 治 的 な 理 由 で い ず れ も 失 敗 に 終 わ っ て 意 外 か も し れ ま せ ん が 、 JavaScript と い う 実 装 は い ま す 。 ECMAScript よ り も 前 に 存 在 し て い ま し た 。 JavaScript の 歴 史 は 1995 年 に さ か の ば り 、 Netscape Communications に い た BrendanEich 氏 に よ っ て 開 発 さ れ ま し た 。 web ア プ リ ケ ー シ ョ ン の リ ッ チ 化 を 皮 切 り に 注 目 さ 普 及 の 途 上 に あ っ た JavaScript か ら コ ア な 仕 様 を 抜 れ た JavaScript で す が 、 実 行 環 境 は い ま や web ペ ー ジ き 出 し 、 実 行 環 境 間 ( 当 時 は 主 に 各 ブ ラ ウ ザ ) で 互 換 性 を 閲 覧 す る た め の フ 。 ラ ウ ザ だ け に と ど ま り ま せ ん 。 現 を 持 っ た 言 語 仕 様 と し て 提 供 す る た め に 標 準 化 さ れ た 在 で は 次 の よ う な 多 彩 な 環 境 で 採 用 さ れ て い ま す 。 の が ECMAScript で す 。 ECMAScript の lst edition は 1997 年 6 月 に リ リ ー ス さ れ ま し た 。 ・ Goog 厄 が 開 発 す る V8 工 ン ジ ン を 使 っ た サ ー ノ ヾ サ イ 1997 年 当 時 、 フ 。 ラ ウ ザ に 実 装 さ れ た JavaScript の 用 ド の 処 理 系 で あ る Node.js 途 は 、 DOM ( DO 翩 〃 尾 厩 0 わ 元 MO / ) の API を 用 い て ・ HTML/CSS/ 」 avaScript の ソ ー ス コ ー ド か ら Android ひ も づ ボ タ ン の ク リ ッ ク 時 に 処 理 を 紐 付 け る と い っ た よ う な や iOS の ネ イ テ ィ プ ア プ リ を 作 成 で き る Titanium 単 純 な も の で し た 。 し か し 、 2005 年 に 登 場 し た Goog 厄 今 回 は 、 JavaScript の 言 語 仕 様 と し て 馴 染 み が 深 い ECMASc ⅱ pt の 最 新 仕 様 に つ い て 紹 介 し ま す 。 ECMAScript と は 何 か 実 行 環 境 の 拡 大 W 第 8 + DB P に ′ 55 0 ぬ 85 ・ 1 15

WEB+DB PRESS Vol.85


安 定 し た 開 発 を 支 え る E2E テ ス ト 自 動 化 ・ BY. cIassName class 属 性 で 要 素 を 探 す た め の 条 件 で す 。 広 く 使 わ れ て い る ク ラ ス 名 だ と 予 想 外 の 要 素 も 一 緒 に 取 得 し て し ま う こ と が あ る た め 、 ク ラ ス の 使 わ れ て い る 範 囲 を 確 認 し た う え で 使 用 し ま し よ う 。 List く WebElement> comments d 「 iver. findElements(By. className("comment") ); は lnternet Explorer 8 で は 使 え ま せ ん 。 List く WebElement> peopleNames driver. findEIement( By. cssSeIector(" . people . name")); ・ BY. xpath xpath ( X 財 ん 加 〃 g Ⅷ g の 注 8 で 要 素 を 探 す た め の 条 件 で す 。 と て も 柔 軟 に 条 件 を 指 定 で き ま す が 、 可 読 性 が 低 く 、 実 行 時 間 も 遅 く な り が ち で 、 さ ら に By. tagName タ グ 名 で 要 素 を 探 す た め の 条 件 で す 。 こ ち ら も 予 プ ラ ウ ザ に よ っ て 若 干 挙 動 が 異 な る 部 分 も あ る の で 、 想 外 の 要 素 を 取 得 し が ち な の で 、 使 用 に は 注 意 が 必 多 用 す る の は お 勧 め し ま せ ん 。 し か し 、 「 特 定 の 文 字 要 で す 。 列 を 含 む 要 素 の 親 要 素 」 の よ う な 複 雑 な 指 定 も 可 能 で あ る た め 、 CSS セ レ ク タ で も 指 定 が 難 し い 要 素 を 取 得 す る た め に 使 う こ と は あ る と 思 い ま す 。 WebElement inputs drive 「 . findEIement(By. xpath( "//input") ) : WebElement frame = d 「 iver. findEIement(By. tagName("if 「 ame") ); By. name name 属 性 で 要 素 を 探 す た め の 条 件 で す 。 form の ⅲ put 要 素 を 探 す と き に 使 う の が 主 な 使 い 道 に な る と 思 い ま す 。 WebElement password ー driver. findEIement(By. name("password") ) : ・ ど の よ う に 使 い 分 け る べ き か こ の よ う に さ ま ざ ま な 条 件 で 要 素 を 取 得 で き ま す が 、 そ れ ぞ れ の 場 所 で バ ラ バ ラ な 方 法 を 使 っ て い る と コ ー ド の 可 読 性 が 落 ち 、 思 わ ぬ ミ ス も 生 ま れ や す い で す 。 個 人 的 な 所 感 で は あ り ま す が 、 「 基 本 的 に は 一 番 使 い や す く 可 読 性 も 高 い CSS セ レ ク タ を 使 っ て 、 ど う し て も CSS セ レ ク タ で 実 現 で き な い 部 分 だ け XPath を 使 用 す る 」 と い う 運 用 が 、 統 一 感 が 生 ま れ や す く 、 ト ラ カ レ も 起 き に く い 印 象 で す 。 製 品 の HTML に よ っ て 使 い や す い 条 件 が 異 な っ て く る の で 、 チ ー ム 内 で 方 針 に つ い て 一 度 話 し 合 っ て お く の が お 勧 め で す 。 ・ BY. IinkText リ ン ク の 文 字 列 を 完 全 一 致 で 検 索 し 、 要 素 を 取 得 す る た め の 条 件 で す 。 / / く a href="http://example.com/help">Helpく/a> / / の よ う な 要 素 を 探 す 場 合 WebElement helpLink = drive 「 . findEIement(By. IinkText("HeIp") ); ・ BY. partiaILinkText リ ン ク の 文 字 列 を 部 分 一 致 で 検 索 し 、 要 素 を 取 得 す る た め の 条 件 で す 。 / / く a href="http://example.com/home'I>G0 to Home ! く /a> / / の よ う な 要 素 を 探 す 場 合 WebElement homeLink = driver. findEIement(By. partialLinkText("Home") ) : 要 素 の 操 作 要 素 を 取 得 し た ら 、 そ の 要 素 に つ い て の 情 報 を 取 得 し た り 、 入 力 や ク リ ッ ク な ど の ア ク シ ョ ン を 行 っ た り す る こ と に な り ま す 。 Selenium で 要 素 を 表 す WebEIement ク ラ ス の メ ソ ッ ド の 中 で よ く 使 う も の を 説 明 し ま す 。 By. cssSeIector CSS セ レ ク タ で 要 素 を 探 す た め の 条 件 で す 。 と て ・ getText も 柔 軟 に 条 件 を 指 定 で き 、 可 読 性 も 高 い た め 、 一 番 要 素 の タ グ に 囲 ま れ た 部 分 の 文 字 列 か ら 前 後 の 空 汎 用 的 に 使 え る と 思 い ま す 。 た だ し 、 プ ラ ウ ザ が サ 注 8 W3C で 定 義 さ れ た 、 ><ML の 特 定 の 部 分 を 指 定 す る た め の ポ ー ト し て い る か ど う か に よ っ て 使 え る CSS セ レ ク 言 語 構 文 で す 。 タ が 異 な る の で 注 意 が 必 要 で す 。 た と え ば 、 nth-child http://www.w3.org/TR/xpath/ 82 ・ Ⅳ 第 B + DB P 県 第 55 0L85

WEB+DB PRESS Vol.85


HTML フ ァ イ ル に HTML と JavaScript の 両 方 を 記 述 す る よ う に し ま す 。 knockout. js の 実 行 に は jQuery は 不 要 で す が 、 サ ン テ ー タ バ イ ン テ ィ ン ク knockout. js で サ ン プ ル ア プ リ ケ ー シ ョ ン を 作 っ て 学 ぶ マ リ ス ト 6 べー ス HTML く html> く head> く script s 「 c="https://code.jque 「y.com/jquery-2.1.3.min.js">く/sc 「 ipt> く sc 「 ipt src="https://cdnjs.cloudfla 「e.com/ajax/Iibs/knockout/3.2.0/knockout-min.js">く/script> く script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.l/lodash.js">く/script> - JavaSc 「 ipt の デ ー タ 操 作 を 簡 略 化 す る た め に 利 用 す る - - > く script src="https://cdnjs.cloudflare.com/ajax/libs/「xjs/2.3.22/「x.lite.js">く/script> く /html> く /b0dY> く b0dY> く /head> プ ル の 実 装 を 簡 略 化 す る た め に 利 用 し ま す 。 ま た 、 デ ー タ モ デ ル の 操 作 を 簡 略 化 す る た め に lodash 注 3 ラ イ プ ラ リ を 利 用 し ま す 。 : knockout. js に お け る バ イ ン デ ィ ン グ の 基 本 系 サ ン プ ル を 実 装 す る 前 に knockout. js の 基 本 的 な 使 い 方 を 見 て お き ま し よ う 。 knockout.js の 使 い 方 は 、 先 ほ ど 作 成 し た デ ー タ バ イ ン デ マ リ ス ト 7 kno ( kout. js 工 コ ー サ ン プ ル く b0dY> - data-bind 属 性 を 使 っ て ビ ュ ー モ デ ル と バ イ ン デ ィ ン グ - - > く input type="text" name="email" data-bind="value: email, valueUpdate: く p data-bind="text : email"> く /P> く script> function ViewM0del( ) { / / ko. observable メ ソ ッ ド を 使 っ て プ ロ バ テ ィ を 0bservabIe に す る this . email = ko.observable() : く /b0dY> く /script> k0. applyBindings(new ViewM0del( ) ) : / / ko. applyBindings メ ソ ッ ド を 使 っ て DOM と ビ ュ ー モ デ ル を バ イ ン デ ィ ン グ す る iinput 曰 / > ※ 「 value:email 」 は 、 こ の DOM 要 素 の v 引 ue 属 性 に ビ ュ ー モ デ ル の ema ⅱ プ ロ バ テ ィ を バ イ ン デ ィ ン ク す る 指 定 で す ※ 「 valuelJpdate: 'input' 」 は input イ ベ ン ト が 発 行 さ れ た 際 に value 値 の 変 更 反 映 を 行 う 指 定 で す イ ン グ の し く み に よ く 似 て い ま す 。 テ キ ス ト フ ィ ー ル ド に 入 力 し た 文 字 を エ コ ー 表 示 す る サ ン プ ル を 確 認 し て み ま し よ う ( リ ス ト 7 ) 。 knockout.js で は data-bind 属 性 を 使 っ て ビ ュ ー モ デ ル と UI 要 素 の ・ バ イ ン デ ィ ン グ 宣 言 を 行 い ま す 。 knockout.js の 詳 し い 説 明 は 行 い ま せ ん が 、 な ん と な く 使 い 方 は 理 解 で き る と 思 い ま す 。 配 列 を リ ス ト 要 素 に バ イ ン デ ィ ン グ す る 次 に 、 リ ス ト 形 式 の 表 示 要 素 し バ イ ン デ イ ン グ す る 例 を 見 て み ま し よ う 。 リ ス ト 形 マ リ ス ト 8 配 列 を リ ス ト 要 素 に バ イ ン デ ィ ン グ す る く li data-bind="text: $data"> く /li> く ul data-bind="foreach: videos"> く hl > ビ デ オ ラ ン キ ン グ く / hl > く / ul > く SC 「 ipt> function this ViewModel ( ) { . videos = k0.0bse 「 vabIeArray( [ ー ベ イ マ ッ ク ス ー 映 画 妖 怪 ウ ォ ッ チ 誕 生 の 秘 密 だ ニ ャ ン い ー 映 画 ST 赤 と 白 の 捜 査 フ ァ イ ル ・ 烈 車 戦 隊 ト ッ キ ュ ウ ジ ャ ー VS キ ョ ウ リ ュ ウ ジ ャ ー THE MOVIEI ー 劇 場 版 PSYCHO-PASS サ イ コ ハ ス ー k0. applyBindings(new ViewM0deI( ) ); く /script> 式 の 要 素 と の バ イ ン デ ィ ン グ は 、 配 列 の デ ー タ 形 式 を 使 い ま す 。 先 ほ ど の 独 自 実 装 の サ ン プ ル ノ ヾ イ ン デ イ ン グ で は 配 列 要 素 の バ イ ン デ ィ ン グ ま で は 行 え ま せ ん で し た が 、 knockout.js で は 配 列 も 簡 単 に UI 要 素 に バ イ ン デ ィ ン グ で き ま す ( リ ス ト 8 ) 。 図 5 の よ 注 3 https:〃 lodash.com/ う に 表 示 さ れ ま す 。 Ⅳ を B + 03 P ー 55 MOL85 ・ 69 ー タ バ イ ン デ ィ ン グ に knockout.js を 使 い 、 非 同 期 デ っ て 検 索 フ ォ ー ム を 実 装 し て み ま し よ う 。 今 回 は デ そ れ で は 、 knockout.js の バ イ ン デ ィ ン グ 機 能 を 使 検 索 フ ォ ー ム を 実 装 す る

WEB+DB PRESS Vol.85


特 集 2 [ 速 習 ] デ ー タ の 関 係 に 着 目 し 、 = 直 感 的 に 処 理 を 記 述 の る い リ ア ク テ イ プ プ ロ グ ラ 三 ン グ 第 4 章 knockout.js で サ ン プ ル ア プ リ ケ ー シ ョ ン を 作 っ て 学 ぶ デ ー タ バ イ ン デ ィ ン グ を 実 装 す る 本 章 で は 、 デ ー タ バ イ ン デ ィ ン グ を 用 い て MVVM 注 1 あ る オ ブ ジ ェ ク ト の 状 態 の 変 化 を 観 測 す る た め の デ ザ イ ン ー と ビ ュ ー モ デ ル の 対 応 は 1 対 1 に な っ て い ま す 。 利 用 し た も の に な り ま す 。 ま た 、 サ ン プ ル の た め ビ ュ い っ て も 純 粋 な Observer パ タ ー ン で は な く 仲 介 者 を こ は Observer パ タ ー ン 主 1 で 実 装 し て い き ま す 。 と は ー と ビ ュ ー モ デ ル の 関 係 は 図 1 の よ う に な る の で 、 と の バ イ ン デ ィ ン グ を 実 装 し ま す 。 MVVM で は ビ ュ 取 っ か か り と し て テ キ ス ト ボ ッ ク ス と ビ ュ ー モ デ ル テ キ ス ト ボ ッ ク ス と バ イ ン デ ィ ン グ す る 第 2 章 で 作 っ た 検 索 フ ォ ー ム の 完 全 版 を 実 装 し ま す 。 イ ン デ ィ ン グ を 実 装 し ま す 。 そ の 後 、 RxJS も 組 み 込 み 、 デ ザ イ ン パ タ ー ン を 試 し ま す 。 最 初 は 自 作 の デ ー タ バ Subscribe デ ー タ バ イ ン デ ィ ン グ マ 図 1 デ ー タ バ イ ン デ ィ ン グ ハ タ ー ン で す 。 環 境 の 用 意 最 初 の デ ー タ バ イ ン デ ィ ン グ の 実 装 は 、 デ ー タ バ イ ン デ ィ ン グ が ど の よ う に 実 現 さ れ て い る か を 理 解 し や す く す る た め に 独 自 の 実 装 で 行 い ま す 。 JavaScript を 用 い て デ ー タ バ イ ン デ ィ ン グ の 実 装 を 行 っ て い き ま す の で 、 特 に 必 要 な ラ イ ブ ラ リ な ど は あ り ま せ ん 。 標 準 の 技 術 で 実 装 し て い き ま す 。 HTML ま ず は HTML を 用 意 し ま す 。 バ イ ン デ ィ ン グ 対 象 と な る テ キ ス ト ボ ッ ク ス を 1 つ だ け 用 意 し ま す ( リ ス ト 1 ) 注 2 JavaScript バ イ ン デ ィ ン グ 部 分 を 実 装 し ま す 。 先 に イ ン タ フ ェ ー ス だ け 実 装 し て み ま す ( リ ス ト 2 ) 。 ビ ュ ー ( テ キ ス ト ボ ッ ク ス ) と ビ ュ ー モ テ ル の ema ⅱ 属 性 が デ ー タ ー バ イ ン デ ィ ン グ さ れ て ( 0 ) 、 ビ ュ ー モ テ ル の email の 値 が 設 定 さ れ る と ビ ュ ー に 表 示 さ れ る と い う 動 き に な り ま す ( ② ) 。 表 示 結 果 は 図 2 に な り ま す 。 注 2 今 回 は サ ン プ ル 実 装 の た め 、 こ の フ ァ イ ル に 直 接 ビ ュ ー ビ ュ ー モ デ 丿 レ Notify モ デ ル マ リ ス ト 1 べ ー ス に な る HTML く html> く b0dY> く input type=iltext" id="email'l / > く script> / / こ こ に 以 降 の JavaScript を 記 述 す る く /script> </b0dY> く /html> 66 ・ Ⅳ 第 B + DB p 第 55 VO 85 」 avaScript を 記 述 し て い き ま す 。 マ リ ス ト 2 デ ー タ バ イ ン デ ィ ン グ の イ ン タ フ ェ ー ス function ViewM0del( ) { this. email = observable(); / / 対 象 の 属 性 を 観 測 可 能 に す る function observable() { / / ビ ュ ー モ デ ル と DOM 要 素 を デ ー タ バ イ ン デ ィ ン グ す る function bindViewM0deI (viewM0del) { / / 0 = new ViewM0deI ( ) : var viewModeI bindViewM0del (viewM0deI); viewM0deI. email( ・ [email protected]tion. CO. jpl ) : / / ②

WEB+DB PRESS Vol.85


) 特 集 2 [ 速 割 リ ア ク テ イ プ プ ロ グ ラ 三 ン グ デ ー ~ タ の 関 係 に 着 目 し ぐ 直 感 的 に 処 理 を 記 述 す る 。 バ イ ン デ ィ ン グ を 行 え ば 、 ど ち ら か が 変 更 に な っ た 際 に 自 動 的 に 別 の 要 素 も 変 更 さ れ る よ う に な り ま す 。 サ ン プ ル ア プ リ ケ ー シ ョ ン 作 成 前 の 準 備 そ れ で は 、 こ か ら は も う 少 し 実 践 的 な サ ン プ ル を 作 成 し な が ら 、 デ ー タ バ イ ン デ ィ ン グ の 利 用 場 面 や メ リ ッ ト を 理 解 し て い き ま し よ う 。 先 ほ ど 作 成 し た バ イ ン デ ィ ン グ の 実 装 で は 少 々 機 能 が 足 り ま せ ん こ か ら は 同 じ よ う な し く み を 持 つ knockout. の で 、 js と い う ラ イ プ ラ リ を 利 用 し て い き ま す 。 作 成 す る サ ン カ レ は 、 第 2 章 で 作 っ た GitHub リ ポ ジ ト リ 検 索 の ビ ュ ー 部 分 で す 。 第 2 章 で は R 対 S を 使 っ て 検 索 の 流 れ だ け 実 装 し ま し た が 、 第 4 章 で は ビ ュ ー と ビ ュ ー モ デ ル を 作 成 し て 画 面 表 示 の 部 分 を 実 0bse 「 vable. vaIueChanged = function( ) { 0bse 「 vable. valueChanged( ); value newVaIue; / / setter } else { return value; / / getter lundefinedl) { if (typeof(newVaIue) var Obse 「 vable = function(newVaIue) { var subscribers va 「 value; function observable( ) { this . email = obse 「 vable(); function ViewM0deI ( ) { く script> く p data-bind="email"> く /P> く input type="text" data-bind="emaili' / > く b0dY> く html> マ リ ス ト 5 複 数 の ビ ュ ー と バ イ ン デ ィ ン グ R&JS は UI 要 素 の イ ベ ン ト ス ト リ ー ム を 作 成 す る の ま た 、 第 2 章 で 扱 っ た R 灯 S も 一 緒 に 利 用 し ま す 。 装 し て い き ま す 。 subscribers . f0 「 Each(function(subsc 「 iber) { subscriber(value) : 68 ・ Ⅳ を B + DB P ー 55 Vo 85 function bindViewM0deI(viewM0deI ) { retu 「 n observable; subscribers. push(subscriber) : observable. addSubscriber = function(subscriber) に 使 い ま す 。 knockout. js に も UI イ ベ ン ト に 対 応 し た 処 理 を 記 述 で き る し く み が 用 意 さ れ て い ま す が 、 説 明 の 都 合 上 、 knockout. js を 使 う の は デ ー タ バ イ ン knockout.js と は の し く み を 使 っ て 、 動 的 に 変 化 す る UI を 構 築 す る 助 JavaScript ラ イ プ ラ リ で す 。 デ ー タ バ イ ン テ ィ ン グ が ら リ ッ チ で レ ス ポ ン シ プ な UI を 構 築 す る た め の knockout.js は 、 デ ー タ モ デ ル を ク リ ー ン に 保 ち な け と な り ま す 。 セ ッ ト ア ッ プ V1ew.1nnerText ー newVatue; } else { View. value = newvalue; if (view. hasOwnProperty('vatue' ) ) { return function(newVatue) { prop ・ addSubscriber( (function(v iew) { f0 「 は = 0 : i く views. length; i + + ) { / / ViewM0deI - > View P 「 0P = viewM0deI[prop], var views = document.querySeIect0 「 AII(' [data-bind=' + p 「 op + ・ ド ), props. f0 「 Each(function(prop) { var props = 0bject. get0wnPropertyNames(viewM0del) : な お 、 サ ン プ ル プ ロ グ ラ ム は 、 説 明 の 都 合 上 1 つ の す る と 便 利 で す 。 リ ス ト 6 の よ う な HTML を 用 意 し ま す 。 り 込 み ま す 。 knockout.js を 利 用 す る に は 、 CDN を 利 用 う 。 べ ー ス と な る HTML フ ァ イ ル に 、 knockout.js を 取 そ れ で は 、 サ ン カ レ を 動 か す た め の 環 境 を 整 え ま し ょ bindViewM0deI (viewM0deI ) : var viewModel = new ViewModel( ) : p 「 op(). target. value); view 引 i] . addEventListener('input', function(e) { for (i = i く views . length; i + + ) { / / View - > ViewM0deI く /html> く /b0dY> く /script> viewM0deI.emaiI("[email protected](0.jp") :

WEB+DB PRESS Vol.85


特 集 2 [ 速 習 ] リ ア ク テ イ プ プ ロ グ ラ 三 ン グ ② 非 同 期 テ ー タ ス ト リ ー ム デ ー → タ の 関 係 に 着 目 し 直 感 的 に 処 理 を 記 述 萸 を 本 章 で は 、 リ ア ク テ ィ フ 。 プ ロ グ ラ ミ ン グ の 特 徴 の ー っ で あ る 非 同 期 デ ー タ ス ト リ ー ム を 、 R 灯 S と い う JavaScript の ラ イ フ 。 ラ リ を 用 い て 紹 介 し ま す 。 RxJS で ス ト リ ー ム の 基 本 か ら UI イ ベ ン ト の 操 作 ま で 体 験 し よ う RxJS は 何 で も 非 同 期 リ ス ト に す る JavaScript で は 関 数 は 第 一 級 オ プ ジ ェ ク ト 師 ⅳ - ss 。 の 注 2 な の で 、 リ ス ト 処 理 に 高 階 関 数 は よ く こ の [ 1 , 2 , 3 ] の 部 分 を 非 同 期 リ ス ト に も 適 用 す る の が JS の 役 割 で す 。 そ れ で は RxJS を 見 て い き ま し よ う 。 導 入 と 動 作 確 認 。 ダ ウ ン ロ ー ド R&JS は GitHub で 提 供 さ れ て い ま す 注 3 。 直 接 フ ァ イ ル を ダ ウ ン ロ ー ド し て も よ い で す し 、 cdnjs で ホ ス テ ィ ン グ さ れ て い る の で こ ち ら を 利 用 し て も よ い で し よ う 注 4 R 灯 S は 「 rx. 〇 〇 〇 .js 」 と い う 名 前 の フ ァ イ ル が い く つ か あ り 、 ど れ を 選 べ ば よ い の か 迷 い ま す が 、 ほ と ん ど の 場 合 rx. all. js か rx. lite.js の ど ち ら か を 選 択 す れ ば よ い で す 。 rx. a Ⅱ .js は JS の 機 能 全 部 入 り の フ ァ イ ル で 、 rx. lite.js は あ ま り 使 わ な い メ ソ ッ ド が 減 ら さ れ て い る フ ァ イ ル で す 。 本 特 集 で は CDN ( 朝 厩 な D 怩 ) を 利 用 し て RxJS 2.3.22 の rx. lite.js を 使 用 し ま す 。 HTML フ ァ イ ル を 用 意 す る 執 筆 時 の 動 作 確 認 は 2015 年 1 月 時 点 で 最 新 の Chrome で 行 っ て い ま す が 、 ど の プ ラ ウ ザ で も 動 作 す る は ず で す 。 RxJS 自 体 の 実 行 に は jQuery は 必 要 あ り ま せ ん が 、 サ ン プ ル コ ー ド を 簡 潔 に 済 ま せ る た め に 利 用 し ま す ( リ ス ト 2 ) 。 注 2 変 数 に 代 入 し た り 、 関 数 の 引 数 に 渡 し た り 、 戻 り 値 と し て 返 す こ と の で き る 対 象 の こ と で す 。 注 3 https: 〃 github.com/Reactive- Extensions/Rx 」 S 注 4 http:〃cdnjs.com/libraries/rxjs RxJS と は C# に は LINQ(Language / N g 川 イ Q ) と い う ク エ リ 式 を 使 っ て さ ま ざ ま な デ ー タ ソ ー ス か ら デ ー タ を 問 い 合 わ せ る こ と が で き る 機 能 が あ り ま す 。 LINQ が 取 り 入 れ ら れ た こ と に よ り 、 リ ス ト 処 理 に 高 階 関 数 注 1 を 利 用 で き る よ う に な り ま し た 。 こ れ に よ り 関 数 プ ロ グ ラ ミ ン グ の 良 い と こ ろ を 利 用 し や す く な り ま し た 。 こ の LINQ の 機 能 を 非 同 期 イ ベ ン ト に も 対 応 で き る よ う に 拡 張 し た も の が Rx ( 0 市 怩 E 例 s 〃 s ) で す 。 取 を 使 う と 、 非 同 期 イ ベ ン ト に よ っ て 発 生 す る デ ー タ ソ ー ス も LINQ で 扱 え る よ う に な り ま す 。 の 取 を JavaScript で 利 用 で き る よ う に し た も の が RxJS 訳 ea 市 怩 E ⅵ 0 女 S 催 ゆ の で す 。 注 1 関 数 の 引 数 に 関 数 を 与 え た り 、 戻 り 値 に 関 数 を 返 す 関 数 の こ と で す 。 マ リ ス ト 1 高 階 関 数 の 例 [ 2 , 3] . forEach(function(n) { console.log(n); }); 出 力 結 果 14 つ 」 っ マ リ ス ト 2 サ ン プ ル で 使 う HTML く html> く head> く sc 「 ipt src="https://code.jque 「 Y. com/jque 「 y-l. 11.2. js"> く /script> く script src="https://cdnjs.cloudfla 「 e.com/ajax/libs/rxjs/2.3.22/「x•lite.js">く/script> く /head> く b0dY> く /b0dY> く /html> 56 ・ Ⅳ 第 B + DB p 第 55 MOL85

WEB+DB PRESS Vol.85


掘 り 下 げ て 知 る 活 用 の ワ サ Ja a の 鉱 脈 マ 図 4 テ ス ト レ ホ ー ト の デ ィ レ ク ト リ 構 成 [ 」 build/reports/geb l— ー 」 systemtest ー の E m ptyTest 尉 001-001-test-end. html (i)001-001-test-end. png FirstTest 尉 001-001-test-end. html Ä001-001-test-end. png す る こ と ・ 画 面 に 対 す る 操 作 を イ ン ス タ ン ス メ ソ ッ ド と し て 定 義 す る こ と こ れ に 従 っ て ロ グ イ ン 画 面 を ベ ー ジ オ プ ジ ェ ク ト と し て 定 義 す る と 、 次 に 示 す LoginPage. groovy の よ う に な り ま す 。 0 LoginPage. g 「 OOVY package e2etest class LoginPage extends geb. Page { Ihttp://IocaIhost:8080/Ioginl static u 「 1 グ イ ン } static at = { title = static content userid { $C input[name=nuserid"]i passwo 「 d { $(linput[name="password"]' IoginButton(to: HomePage, t0Wait: true) { $(lbutton[type="submit"]' :classes :compiIeTestJava UP-TO-DATE : compiIeTestG 「 OOVY :processTestResou 「 ces :testClasses :test BUILD SUCCESSFUL 7 void login(uid, pass) { userid. value(uid) password. value(pass) loginButton. click( ) テ ス ト レ ポ ー ト の 確 認 テ ス ト を 実 行 し た ら Geb に よ っ て 作 成 さ れ た レ ポ ー ト を 確 認 し ま し よ う 。 テ ス ト 対 象 と な っ た html と ス ク リ ー ン シ ョ ッ ト が build/repo 「 ts/geb に 図 4 の よ う に テ ス ト ク ラ ス ご と に 分 か れ て 保 存 さ れ て い ま す 。 u 「 1 で は 画 面 の URL を 設 定 し ま す 。 at で は 当 該 画 面 で あ る こ と を 確 認 す る ク ロ ー ジ ャ を 記 述 し ま す 。 で は title タ グ の 内 容 が ロ グ イ ン で あ る か ど う か を 確 認 し て い ま す 。 content で は 、 当 該 画 面 を テ ス ト が 実 行 中 に 触 れ る UI コ ン ト ロ ー ル に 名 前 を 付 け ら れ ま す 。 テ ス ト コ ー ド Geb に よ る 基 本 的 な テ ス ト の や り 方 の 次 は 、 テ ス ト コ の 中 で DOM を 検 索 す る の で は な く べ ー ジ オ ブ ジ ェ ク ー ド の メ ン テ ナ ン ス 性 を 高 め る た め に 用 意 さ れ た 機 能 で ト に 定 義 さ れ た メ ン バ を 使 う こ と で よ り 変 更 に 強 い テ あ る べ ー ジ オ プ ジ ェ ク ト と モ ジ ュ ー ル に つ い て 説 明 し て い き ま す 。 な お 、 先 ほ ど も 紹 介 し た 今 号 の 特 集 3 ス ト コ ー ド を 書 け る よ う に な り ま す 。 loginButton の 定 義 で は 、 こ の ボ タ ン が 画 面 遷 移 を 「 SeIenium 最 新 活 用 」 の 第 3 章 ( 85 ペ ー ジ ) で は Selenium 伴 う コ ン ト ロ ー ル で あ る こ と を 宣 言 し て い ま す 。 to で 標 準 の API で ペ ー ジ オ プ ジ ェ ク ト を 構 築 す る や り 方 を 説 遷 移 先 の ペ ー ジ オ プ ジ ェ ク ト が HomePage で あ る こ と を 明 し て い ま す の で 、 併 せ て 読 ん で み て く だ さ い 本 稿 に お け る テ ス ト 対 象 の ア プ リ ケ ー シ ョ ン で は 、 宣 言 し て い ま す 。 t0Wait フ ラ グ を true に す る と 、 HomePage に あ る at メ ン ・ バ を 使 っ て 表 示 さ れ る ま で 待 ち す べ て の テ ス ト が ロ グ イ ン 処 理 を 通 過 し な け れ ば な り ま す 。 Fi 「 stTest. groovy で は 画 面 遷 移 し た と き に ま せ ん 。 先 ほ ど FirstTest. groovy と し て 書 い た 処 理 を waitFo 「 を 使 っ て 表 示 待 ち を し て い ま し た が 、 そ れ が ほ か の テ ス ト で も 再 利 用 す る た め に 、 ペ ー ジ オ ブ ジ ェ 不 要 に な り ま す 。 ク ト と し て 再 定 義 し て み ま し よ う 。 さ ら に メ ン テ ナ ン ス 性 を 向 上 さ せ る た め に 、 ペ ー ジ ロ グ イ ン 画 面 オ フ 。 ジ ェ ク ト に イ ン ス タ ン ス メ ソ ッ ド を 定 義 し て テ ス ト に お け る 画 面 操 作 の 抽 象 度 を 高 め ま し よ う 。 login メ ソ ッ ド で は 、 ユ ー ザ ID と パ ス ワ ー ド を 引 数 と し て 受 け 取 り 、 そ れ ら を content で 定 義 し た UI コ ン ト ロ ー ル に 設 定 し 、 ロ グ イ ン ボ タ ン を ク リ ッ ク し て い ま す 。 テ ス ト コ ー ド の 共 通 化 7 Geb で ペ ー ジ オ プ ジ ェ ク ト を 定 義 す る に は 、 次 の よ う な 約 東 事 が あ り ま す 。 ・ geb. Page を 継 承 す る こ と ・ urls at 、 content と い う 3 つ の static メ ン ノ ヾ を 定 義 128 ・ WEB + DB P 震 第 55 MOL85

WEB+DB PRESS Vol.85


朝 プ 0 ア ← 工 ア ・ 最 前 線 流 行 に 踊 ら さ れ な い 技 術 動 向 フ 。 ラ リ の 総 称 で す 。 た と え ば promise を サ ポ ー ト し て い な い ブ ラ ウ ザ で は window. Promise は undefined に な り ま す が 、 を 読 み 込 む と 、 ES6 の promise と 同 じ 振 る 舞 い を 持 っ た オ フ 。 ジ ェ ク ト が window. Promise と し て 定 義 さ れ て 使 え る よ う に な り ま す 。 注 意 す べ き 点 と し て 、 Polyfill が 早 期 に サ ポ ー ト す る 仕 様 の 多 く は 、 策 定 中 で 変 更 さ れ る 頻 度 も 高 め で す 。 使 用 す る P01 ⅶ Ⅱ が 最 新 の 仕 様 を サ ポ ー ト し て い る の か 古 い 仕 様 を サ ポ ー ト し て い る の か は 、 確 認 し て お く べ き で し よ う 。 ES6 ト ラ ン ス パ イ ラ で 実 行 可 能 な コ ー ド に 変 換 す る P01 ⅶ Ⅱ で 足 り な い API を 補 う こ と は で き ま す が 、 次 の よ う な ES6 で 新 し く 定 義 さ れ た 文 法 仕 様 に こ で は DefauIt Parameters) は カ バ ー で き ま せ ん 。 function foo(bar = ス パ イ ラ で 変 換 す る と 、 次 の よ う な コ ー ド に な り ま す 。 の ES6 コ ー ド を 後 述 す る 6t05 と い う 名 前 の ES6 ト ラ ン 動 作 す る コ ー ド に 変 換 す る ツ ー ル で す 。 た と え ば 上 記 ES6 と し て 記 述 さ れ た コ ー ド を ES5 相 当 の サ ポ ー ト で 今 回 紹 介 す る ES6 ト ラ ン ス パ イ ラ 注 8 は 、 こ の よ う な bar = baz; if (bar = = undefined) / / DefauIt parameter va 「 qux = slice. call(arguments, 1); / / Rest paramete 「 function foo(bar) { var slice = Array. prototype. slice; luse St 「 現 在 の 主 要 な ES6 ト ラ ン ス パ イ ラ の 中 で 長 い 歴 史 を 持 Goog 厄 製 の 古 参 ラ イ ブ ラ リ ・ traceur-compiler め る だ け で ス ム ー ズ に 移 行 で き る の も メ リ ッ ト で す 。 ES6 が 普 及 し た あ と は 、 ES6 ト ラ ン ス パ イ ラ の 利 用 を や で も 利 用 で き る よ う に な る の は 大 き な 魅 力 で す 。 ま た 一 手 間 か か り ま す が 、 ES6 の 強 力 な 言 語 機 能 を 今 か ら さ れ ま す 。 ン タ イ ム ラ イ ブ ラ リ 注 9 を 使 わ ず 利 用 で き る よ う に 変 換 多 く の 機 能 、 文 法 は ES6 ト ラ ン ス パ イ ラ に よ っ て ラ 注 10 つ の は 、 Google か 開 発 し て い る traceur-compiler で す 。 次 の 例 は 、 traceur-compiler の イ ン ス ト ー ル コ マ ン ド と 変 換 処 理 の 実 行 例 で す 。 in. js は ES6 で 記 述 さ れ た JavaScript が 保 存 さ れ て い て 、 out. j s に は traceut% compiler で 変 換 さ れ た あ と の JavaScript が 出 力 さ れ る と 考 え て く だ さ い npm で イ ン ス ト ー ル ES6 → ES5 の 変 換 処 理 $ npm install -g t 「 aceur $ traceu 「 in . jS -out out . js こ で 生 成 さ れ た out. j s は 、 次 の 例 の よ う に ラ ン タ イ ム ラ イ フ 。 ラ リ と 一 緒 に 読 み 込 む こ と で 実 行 で き ま す 。 t 「 aceu 「 - 「 untime. js は 70KB を 超 え る フ ァ イ ル サ イ ズ で す が 、 カ ス タ ム ビ ル ド 注 11 す れ ば フ ァ イ ル サ イ ズ を 抑 え る こ と が で き ま す 。 く !DOCTYPE html> く html> <head> く sc 「 ipt src="https://google.github.io/traceur.com/iler /bin/t 「 aceur-runtime. js"> く /script> く script s 「 c="out. js"> く /script> く /head> く b0dY> く h1>Traceur Sample</h1> </b0dY> く /html> traceur-compiler に は 、 コ マ ン ド ラ イ ン で 変 換 す る 過 程 を 省 略 し て 、 フ 。 ラ ウ ザ 上 で 直 接 ES6 を 実 行 す る た め の ラ イ フ 。 ラ リ も 含 ま れ ま す 。 す ぐ 試 し た い 方 は 、 公 式 ド キ ュ メ ン ト 注 12 を 参 考 に す る と よ い で し よ う 。 ■ 6t05 ー ー 新 し く 登 場 し た 期 待 の ラ イ ブ ラ リ 、 主 13 は 2014 年 に 登 場 し た 新 し い ES6 ト ラ ン ス パ イ 6t05 ラ で す が 、 traceur-compiler と 比 べ て 変 換 さ れ た あ と の JavaScript が 読 み や す く 、 大 き い ラ ン タ イ ム ラ イ フ 。 ラ リ を 必 要 と し な い の が 特 徴 で す 。 次 の 例 は 6t05 の イ ン ス ト ー ル コ マ ン ド と 変 換 処 理 の 実 行 例 で す 。 traceur-compiler の 例 と 同 様 に in. j s が 入 カ フ ァ イ ル で 、 out. js が 出 力 フ ァ イ ル で す 。 6t05 の コ マ ン ド は 標 準 入 力 と 標 準 出 力 を サ ポ ー ト し て い る た め 、 cat か ら パ イ プ で 入 力 し た り リ ダ イ レ ク ト で 出 力 し た り で き ま す 。 注 7 注 8 注 9 https:〃github.com/jakearchibaId/es6-promise ト ラ ン ス パ イ ラ は ソ ー ス コ ー ド を 別 の ソ ー ス コ ー ド に 変 換 す る コ ン パ イ ラ の 総 称 で す 。 ブ ラ ウ サ で 実 行 す る と き 別 途 必 要 に な る ラ イ ブ ラ リ で す 。 注 1 0 注 1 1 注 1 2 注 1 3 https:〃github.com/google/traceur-compiler https:〃github.com/google/traceur-compiler/wiki/BuiIding- custom-Traceur-runtimes https://github.com/googIe/traceur-compiIer/wiki/Getting- Started#a-touch-of-class https:〃github.COm/6t05/6t05 120 ・ Ⅳ ー B + 08 P 第 55 0L85

WEB+DB PRESS Vol.85


Geb に よ る ス マ ー ト な E2E テ ス ト シ ン プ ル な コ ー ド で プ ラ ウ ザ 操 作 を 自 動 化 し よ う 第 5 回 page の メ ソ ッ ド や プ ロ バ テ ィ を 暗 黙 的 に 利 用 で き ま す 。 geb. junit4. GebReportingTest を 継 承 す る と テ ス ト メ ソ ッ ド が 1 っ 終 了 す る た び に ス ク リ ー ン シ ョ ッ ト と HTML を 所 定 の デ ィ レ ク ト リ に 保 存 し ま す 。 テ ス ト が 失 敗 し た と き に ス ク リ ー ン シ ョ ッ ト や HTML が あ る と 作 業 効 率 が 非 常 に 向 上 し ま す 。 し か し な が ら 、 CI サ ー バ な ど で 定 期 的 に テ ス ト を 実 行 し て い る 場 合 、 ス ク リ ー ン シ ョ ッ ト カ ゞ ノ 、 ー ド デ ィ ス ク を 圧 迫 し ま す 。 以 上 を ふ ま え 、 Groovy で Geb を 使 っ た JUnit4 の テ ス ト を 書 く と 次 の よ う に な り ま す 。 class FirstTest extends GebReportingTest { @CIassRuIe public static Serve 「 Rule serve 「 Rule = new ServerRule( ); @Test void login ( ) { go ・ http://IocaIhost:8080/login' ・ ロ グ イ ン 一 assert title $(iinput[name="userid"] ・ ) . value('taro') $ ( ・ input[name="password"] ・ ) . value( 'taropass ・ ) $('button[type="submit"] ・ ) . click() waitFor { title = = ・ ホ ー ム ・ } は う こ そ 技 評 太 郎 さ ん assert $ ( ・ hl. greeting ・ ) . text() Empt Test . 「 oovy package e2etest テ ス ト コ ー ド は go メ ソ ッ ド の 呼 び 出 し か ら 始 ま り ま す 。 こ れ に よ っ て ロ グ イ ン ペ ー ジ に 対 し て リ ク エ ス ト を 送 信 し て い ま す 。 そ の 後 、 返 っ て き た ペ ー ジ の title タ グ を ア サ ー シ ョ ン し て い ま す 。 こ れ は geb. page オ プ ジ ェ ク ト の getTitle メ ソ ッ ド を Geb の し く み に よ っ て 暗 黙 的 に 呼 び 出 す こ と で 実 現 し て い ま す 。 t itle タ グ だ け は WebDriver が 特 別 扱 い し て い る の で セ レ ク タ を 使 わ ず と も 参 照 で き る の で す 。 次 は 表 示 さ れ た ロ グ イ ン 画 面 で ユ ー ザ ID と パ ス ワ ー ド を 入 力 し た あ と に ロ グ イ ン ボ タ ン を ク リ ッ ク し て い ま す 。 Geb で は jQuery に 似 た ナ ビ ゲ ー シ ョ ン API を 使 い ま す 。 $ メ ソ ッ ド の 引 数 と し て DOM の セ レ ク タ を 渡 す ス タ イ ル は お 馴 染 み で す よ ね 。 waitFo 「 は 画 面 遷 移 を 待 っ た め に 使 い ま す 。 引 き 渡 し た ク ロ ー ジ ャ が true を 返 す ま で 待 ち ま す 。 こ で は title タ グ の 中 身 が ホ ー ム に な る の を 待 っ て い ま す 。 最 後 は 表 示 さ れ た 画 面 に お い て ロ グ イ ン ユ ー ザ に 最 適 化 さ れ た 部 分 が 正 し く 表 示 さ れ て い る か ア サ ー シ ョ ン し て い ま す 。 こ で も jQuery に 似 た セ レ ク タ API を 使 っ て class 属 性 に g 「 eeting が 設 定 さ れ て い る hl タ グ を 検 索 し た う え で テ キ ス ト ノ ー ド を 取 り 出 し て い ま す 。 Gra 引 e か ら 実 行 書 い た テ ス ト コ ー ド を Gradle か ら 実 行 し ま し よ う 。 本 稿 で は JUnit4 の テ ス ト コ ー ド と し て E2E テ ス ト を 記 述 し て い る の で 、 ほ か の ユ ニ ッ ト テ ス ト と 同 じ よ う に テ ス ト を 実 行 で き ま す 。 Gradle で test タ ス ク を 実 行 す る と 次 の よ う に 出 力 さ れ ま す 。 > . \gradlew test :compileJava :compiIeGroovy UP-TO-DATE :processResources impo 「 t static org.junit.Assert.* impo 「 t geb. junit4. GebReportingTest import org.junit. * impo 「 t 0「g . junit . 「 unner. RunWith import org.junit. runne 「 s. JUnit4 @RunWith(JUnit4) class EmptyTest extends GebReportingTest { @CIassRuIe public static Se 「 verRuIe se 「 verRuIe @Test void test() { ServerRule( ) : n ew こ で は JUnit4 の@ClassRuIe を Serve 「 Rule に 付 け て い ま す 。 Se rve rRule は 、 テ ス ト ク ラ ス の 開 始 前 に テ ス ト 対 象 と な る ア プ リ ケ ー シ ョ ン を 起 動 し 、 テ ス ト ク ラ ス の テ ス ト が す べ て 終 了 し た ら ア プ リ ケ ー シ ョ ン を 停 止 す る コ ー ド で す 。 ル ー ル に よ る テ ス ト ク ラ ス の 拡 張 に つ い て は 『 JUnit 実 践 入 門 』 注 8 の 第 9 章 に 詳 し い 説 明 が あ り ま す 。 画 面 と の イ ン タ ラ ク シ ョ ン そ れ で は Geb を 使 っ た テ ス ト コ ー ド を 書 い て み ま し よ フ 。 7 FirstTest . 「 oovy package e2etest impo 「 t static 0「g. junit. Asse 「 t. * import geb. junit4. GebReportingTest import 0「g. junit. * impo 「 t 0「g . junit. 「 unne 「 . RunWith import org.junit. 「 unne 「 s . JUnit4 @RunWith(JUnit4) 注 8 渡 辺 修 司 著 『 」 Unit 実 践 入 門 ー 一 体 系 的 に 学 ぶ ユ ニ ッ ト テ ス ト の 技 法 』 (WEB + DB PRESS p 旧 5 シ リ ー ス ) 技 術 評 論 社 、 2012 年 Ⅳ 第 B + 08 P ー 55 M .85 ・ 127

WEB+DB PRESS Vol.85


電 子 書 籍 好 評 発 売 中 詳 し く は 下 記 特 設 サ イ ト よ り Amazon Ru 衂 21 最 HTML5/CSS DB 設 言 礎 知 Web Services 詳 解 R s 4 SQ レ タ 、 成 講 座 ・ ・ 物 に 物 、 つ 材 ・ レ イ ヤ 鋼 比 亂 ・ 一 の を 6- ・ 直 ・ 理 の ・ ・ 化 第 上 ・ ・ の パ - ツ ・ ン 一 デ サ イ ン テ ス ト 駆 動 イ ン フ ラ & ユ - ヤ の ・ ・ 第 一 第 の る テ ス ト 最 前 線 MYSOLRAAB 動 修 も た ら す ワ ー ク フ 0 ー の 鋼 ・ CoffeeScript m 瞰 曲 ln 川 c 加 祀 ・ ・ 第 一 ′ ン 第 ン ス ー 第 ・ す る ツ ー 、 と ・ 強 速 習 衂 ms を ・ 一 一 一 の 第 ・ を 第 る を い 第 て サ ー ハ に よ る ・ ・ の ま ・ Sass/COI!1P" M 聞 叩 DB. , nglll)( メ ン テ ナ ン ス Redshift Redis ー 物 聞 第 ー 0 動 化 ス 月 コ - ト に よ る イ ン フ う ・ ・ 安 全 ・ 第 率 な W 曲 サ イ ト の 作 り 方 Serverspec 塹 a ” は し め て の R ⅶ ー 員 聞 第 JS で シ ン プ 第 ・ 第 朝 0 引 で - 化 00 て 第 量 な 仮 第 増 境 デ ー タ ベ ー ス 頂 を Ⅱ シ ス - ム Webt- 総 集 編 い ラ グ イ ン ・ ヨ 、 ・ い ・ N0de.js プ ロ ジ ェ ク ト マ ネ ジ メ ン ト リ ア ル イ ・ 第 も ・ を を PIXIV 第 を ・ , ビ ス 第 を 分 野 別 業 る ム ラ イ ブ ド ア , 継 続 的 な 開 発 ー 、 - 無 案 書 作 成 ス ・ 一 第 ・ 上 ′ つ 0 つ ・ リ ー ン ス タ ー ト ア ッ プ の レ 、 門 ー ふ 肥 年 分 の パ ッ ク ナ ン パ ー を 大 取 録 物 物 ー ル . ロ ジ カ ル シ ン キ ン グ 実 銀 ス お “ Li x の 基 礎 知 識 こ れ ・ の 物 ・ 、 と う 学 バ イ プ す る ・ ー Mobage Web CakePHP2 、 良 い コ ー ド を 書 く 技 術 を 支 え る 術 を 支 え る 技 術 な を W は こ ん な に も 成 功 し た の か ノ 、 タ ー ン Google 日 本 語 入 力 大 規 模 サ ー ビ ス 文 字 コ ー ド 气 ki 、 XP を 支 え る 技 術 を 支 え る 技 術 技 術 人 門 技 術 入 門 」 avaScript フ ロ ン ト ン ト 1 サ ー バ イ ン WebH 底 お 降 W 聴 師 コ ー デ ィ ン グ の 基 礎 知 識 物 ・ ・ も ・ つ 一 物 を ・ に う 、 は し め て の 設 計 テ ー タ ベ ー ス & S 入 .. ク ラ ウ ト 時 代 の イ ン フ ラ 知 識 ・ 工 ン ン : ア ・ 第 ・ ヘ ・ 第 ッ ト つ 一 や ー れ の し 、 み コ ! ェ こ ケ ー シ ー ノ 物 第 ・ の 一 い を ス , キ リ ・ ま ー 0 0 PRCSS 0 底 ー 高 速 eb 開 発 H 面 イ ベ ン ト 駆 動 プ ロ ク ラ ミ ン グ ノ ン ル コ - イ ン グ モ ダ ン リ 7 ア ク タ リ ン グ レ ン - コ - ト ー ・ 異 ト ・ ・ で 0 ・ ・ に ・ 物 大 規 模 シ ス テ ム ロ グ 活 用 と ( ソ 47 イ 蕗 気 ” ( て ・ し 、 ・ 新 の 物 プ ン も マ - ン 、 ・ ・ な - バ , ツ 第 ン ・ 一 ン ス ム 物 と 当 当 場 物 新 宿 物 な 第 ・ を と を 力 を ☆ イ 止 の ら れ な い サ ー ビ ス の た め に 今 、 何 が で き る の か コ ー ド を 簡 潔 に 保 ち 、 開 発 効 率 を 極 限 ま で 高 め る 工 。 ニ ナ イ 主 第 メ ン バ ー が 最 駅 物 の ノ ウ ハ ウ を 第 い か に 開 発 ・ 運 に れ て い る の か ? 実 践 的 な さ ト サ ー ビ ス の 設 計 指 針 ー 第 わ ハ バ い 円 洋 ′ ! 】 ~ 1 し 講 0 一 贓 爪 、 11 い - ・ ” を ノ を - ・ 0- ト ア ル 異 イ 震 を ′ ・ 破 普 通 の フ ロ ク ラ マ の た め の ス テ ッ プ ア ッ ブ ガ イ ド ・ 既 A の を 4 な 局 力 を 挙 け て Web 聞 発 者 の た め の プ ロ グ ラ マ の た め の ノ ン プ 0 グ ラ マ の た め の 1 つ の サ ン プ ル プ ロ グ ラ ム を 通 し て し つ か り 学 ぶ ノ フ ト ウ ー ′ い の 薹 を 第 テ サ イ ン パ タ ー ン xp ( ェ ク ス ト リ こ グ ラ ミ ン グ ) 回 力 も の コ ン ご ュ ー フ を と ・ の よ う に 動 か す か 大 贓 第 一 物 ・ し に 、 ⅱ 、 版 / ′ 今 文 字 コ ー ト の 則 文 字 化 け の メ ニ ズ ム コ ー ド 変 の 解 礎 膨 大 な 変 換 候 補 の 中 か ら い か に 最 適 解 を 導 く か 1 , 000 台 の シ ス テ ム は 、 何 が 変 わ る の か ? た っ た 知 行 の コ ー ド に 第 本 を 物 ー Google い ” App Engine シ ェ ル ス ク リ プ ト 基 本 リ フ ァ レ ン ス 「 実 測 ク ラ ウ ド シ ス テ ム 構 築 事 背 紀 に わ た る 歴 史 物 新 す べ て の 起 は 、 建 第 家 ア レ グ す ン ダ ー に あ っ 食 ( 気 、 飛 て 3 た こ と は . コ ン い 一 六 ン グ の 第 の 先 取 、 で す [ 反 復 学 習 ソ フ ド 付 き [ 反 復 学 習 ソ フ ト ] 付 き SQ 正 規 現 書 き 方 ド リ ル 書 き 方 ド 屮 物 生 洋 - ・ ニ も 山 工 ン シ ニ ア の プ レ ゼ ン / ス ラ イ ド 作 成 入 門 ・ 本 は ン ノ ブ ~ ま 心 第 の あ る を 第 資 料 を サ タ ク 物 ? た い ド 第 を ・ 活 用 の 秘 訣 は 、 「 制 約 」 を 正 し く 理 解 す る こ と 。 の ス ケ ー ラ ピ リ テ ィ を 件 で 使 い 切 る 基 本 を 組 み 合 わ せ て 作 れ る 、 シ ン プ ル x 効 果 抜 群 の ツ ー ル ・ ・ 0 ツ つ ア 、 00 4 一 B ・ 0 第 も 書 か な か っ た サ バ イ バ ル ガ イ ド 開 意 託 極 受 の 小 飼 弾 の ル フ ァ 逢 っ て き た 変 化 は あ な た か ら 始 ま る 現 場 か ら 学 ぶ 実 践 手 法 ・ プ ロ フ ま ッ シ ー ナ ル な 仕 事 を し た い で す か ? ・ 楽 し く 仕 事 を し た い で す か ? こ の ~ つ の 聞 、 」 Y ” 上 蓄 え た 人 の た め の 本 で す 0 ! を 氈 ・ 第 を 丨 1 ・ 上 す る す べ て の 人 へ 界 を 創 る ギ ー ク た ち は 、 何 を 想 い 、 ど う 動 こ う と し て い る の か . - さ く さ く 第 の あ る 第 第 ・ ! WEB 、 DB が us 特 設 サ イ ト 0 http://wdpress.gihyo.jp/plus 全 タ イ ト ル は こ ち ら で チ ェ ッ ク !