[{"data":1,"prerenderedAt":64564},["ShallowReactive",2],{"blog":3},[4,5352,14166,16145,20177,26983,34740,35252,35731,36819,37635,40865,42241,42574,44151,46942,48182,48963,50325,51726,53702,54276,62572,62980,64318],{"id":5,"title":6,"body":7,"date":5337,"description":5338,"draft":5339,"extension":5340,"image":5341,"meta":5342,"navigation":161,"path":5343,"seo":5344,"stem":5345,"summaryList":5346,"summaryText":5348,"tags":5349,"__hash__":5351},"blog/blog/webgl-image-video-texture.md","WebGLで画像や動画を描画するテクスチャクラスを作成する",{"type":8,"value":9,"toc":5316},"minimal",[10,14,18,22,25,28,79,82,85,88,107,110,113,117,120,128,244,247,251,269,309,312,570,576,582,756,763,1176,1180,1193,1326,1333,1337,1347,1488,1494,1501,1505,1515,1659,1664,1674,1678,1684,1757,1760,1796,1799,1985,1995,2029,2035,2172,2187,2191,2196,2300,2309,2407,2417,2421,2435,2510,2513,2521,2579,2582,2585,2623,2628,2757,2769,2773,2776,2961,2966,2975,2979,2982,3035,3038,3052,3056,3067,3213,3216,3219,3225,3229,3232,4732,4735,4738,4945,4951,4954,5284,5294,5297,5300,5306,5312],[11,12,13],"h2",{"id":13},"はじめに",[15,16,17],"p",{},"前回は、WebGLで法線の可視化や座標確認のためのヘルパー関数を作成する方法について解説しました。",[19,20],"recommend-link",{":items":21},"[{\"title\":\"WebGLで法線の可視化や座標確認のためのヘルパー関数を作成する\",\"link\":\"/blog/webgl-helper-function/\",\"image\":\"/images/blog/webgl-helper-function.jpg\",\"description\":\"今回は、Three.jsでいうViewHelperやVertexNormalsHelperに相当する、法線の可視化や座標確認のためのヘルパー関数をWebGLで作成する方法を解説します。\"}]",[15,23,24],{},"今回は、画像や動画を描画するテクスチャクラスを作成していきます。",[15,26,27],{},"コードはGitHubで公開しているので参考にしてみてください！",[29,30,34,35,34,70],"a",{"className":31,"href":33},[32],"rlc-container","https://github.com/nono-k/webgl-study-note","\n ",[36,37,40,41,40,46,40,51,34],"div",{"className":38},[39],"rlc-info","\n ",[36,42,45],{"className":43},[44],"rlc-title","GitHub - nono-k/webgl-study-note",[36,47,50],{"className":48},[49],"rlc-description","Contribute to nono-k/webgl-study-note development by creating an account on GitHub.",[36,52,55,56,55,64,40],{"className":53},[54],"rlc-url-container","\n ",[57,58],"img",{"className":59,"src":61,"alt":62,"width":63,"height":63},[60],"rlc-favicon","/remark-link-card/httpswww.google.coms2faviconsdomain=github.com","GitHub - nono-k/webgl-study-note favicon",16,[65,66,69],"span",{"className":67},[68],"rlc-url","github.com",[36,71,55,74,40],{"className":72},[73],"rlc-image-container",[57,75],{"className":76,"src":78,"alt":45},[77],"rlc-image","/remark-link-card/httpsopengraph.githubassets.com7f235fea9a447b89977128eb12159eee60beb44ee73b6360ea47effd83362ea9nono-kwebgl-study-note",[11,80,81],{"id":81},"実装の考え方",[15,83,84],{},"WebGLで画像や動画を表示するときには、**テクスチャ(Texture)**という仕組みを使います。Three.jsなどのライブラリを使っていると、画像を読み込んでマテリアルを設定するだけで簡単に表示できます。",[15,86,87],{},"しかし、その内部では、",[89,90,91,95,98,101,104],"ul",{},[92,93,94],"li",{},"画像を読み込む",[92,96,97],{},"WebGLのテクスチャを作成する",[92,99,100],{},"テクスチャのパラメータを設定する",[92,102,103],{},"画像データをGPUへ転送する",[92,105,106],{},"シェーダーからテクスチャを参照する",[15,108,109],{},"といった処理が行われています。",[15,111,112],{},"今回はWebGL2.0を使って、まずは画像をテクスチャとして表示する方法を確認し、その後に動画をテクスチャとして扱う方法まで解説します。",[11,114,116],{"id":115},"webglにおけるテクスチャとは","WebGLにおけるテクスチャとは",[15,118,119],{},"WebGLでは、画像そのものを直接シェーダーから参照することはできません。まず画像データをGPU側のメモリに転送し、WebGLが扱えるテクスチャオブジェクトにする必要があります。",[15,121,122,123,127],{},"シェーダー側では、uniform変数としてテクスチャを",[124,125,126],"code",{},"sampler2D","として受け取り、次のように使用します。",[129,130,136],"pre",{"className":131,"code":132,"filename":133,"language":134,"meta":135,"style":135},"language-ts shiki shiki-themes aurora-x","uniform sampler2D uTexture;\n\nin vec2 vUv;\nout vec4 fragColor;\nvoid main() {\n fragColor = texture(uTexture, vUv);\n}\n","fragment.glsl","ts","",[124,137,138,156,163,178,192,209,238],{"__ignoreMap":135},[65,139,142,146,149,152],{"class":140,"line":141},"line",1,[65,143,145],{"class":144},"svy0-","uniform",[65,147,148],{"class":144}," sampler2D",[65,150,151],{"class":144}," uTexture",[65,153,155],{"class":154},"sAklC",";\n",[65,157,159],{"class":140,"line":158},2,[65,160,162],{"emptyLinePlaceholder":161},true,"\n",[65,164,166,170,173,176],{"class":140,"line":165},3,[65,167,169],{"class":168},"sJ14y","in",[65,171,172],{"class":144}," vec2",[65,174,175],{"class":144}," vUv",[65,177,155],{"class":154},[65,179,181,184,187,190],{"class":140,"line":180},4,[65,182,183],{"class":144},"out",[65,185,186],{"class":144}," vec4",[65,188,189],{"class":144}," fragColor",[65,191,155],{"class":154},[65,193,195,198,202,206],{"class":140,"line":194},5,[65,196,197],{"class":168},"void",[65,199,201],{"class":200},"sdLwU"," main",[65,203,205],{"class":204},"soy-K","() ",[65,207,208],{"class":154},"{\n",[65,210,212,216,219,222,225,228,231,233,236],{"class":140,"line":211},6,[65,213,215],{"class":214},"s-wAU"," fragColor",[65,217,218],{"class":168}," =",[65,220,221],{"class":200}," texture",[65,223,224],{"class":204},"(",[65,226,227],{"class":214},"uTexture",[65,229,230],{"class":154},",",[65,232,175],{"class":214},[65,234,235],{"class":204},")",[65,237,155],{"class":154},[65,239,241],{"class":140,"line":240},7,[65,242,243],{"class":154},"}\n",[15,245,246],{},"それでは、実際にWebGLで画像をテクスチャとして表示する方法を見ていきましょう。",[11,248,250],{"id":249},"textureクラスの作成","Textureクラスの作成",[15,252,253,256,257,260,261,264,265,268],{},[124,254,255],{},"core","ディレクトリに",[124,258,259],{},"Texture.ts","ファイルを作成していきます。",[124,262,263],{},"index.ts","ファイルも更新して、",[124,266,267],{},"Texture","クラスをエクスポートするようにしておきましょう。",[129,270,272],{"className":131,"code":271,"filename":263,"language":134,"meta":135,"style":135},"// Core\nexport { Texture } from './core/Texture';\n",[124,273,274,280],{"__ignoreMap":135},[65,275,276],{"class":140,"line":141},[65,277,279],{"class":278},"s0_hs","// Core\n",[65,281,282,285,288,291,294,297,300,304,307],{"class":140,"line":158},[65,283,284],{"class":154},"export",[65,286,287],{"class":154}," {",[65,289,290],{"class":214}," Texture",[65,292,293],{"class":154}," }",[65,295,296],{"class":154}," from",[65,298,299],{"class":154}," '",[65,301,303],{"class":302},"sfyAc","./core/Texture",[65,305,306],{"class":154},"'",[65,308,155],{"class":154},[15,310,311],{},"まずは、テクスチャのソースとして扱える型とオプションの型を定義します。",[129,313,315],{"className":131,"code":314,"filename":259,"language":134,"meta":135,"style":135},"export type TextureSource = \n |string \n | HTMLImageElement \n | HTMLVideoElement \n | HTMLCanvasElement \n | OffscreenCanvas \n | ImageBitmap \n | ImageData;\n\nexport type TextureOptions = {\n wrapS?: number;\n wrapT?: number;\n minFilter?: number;\n magFilter?: number;\n generateMipmaps?: boolean;\n flipY?: boolean;\n premultiplyAlpha?: boolean;\n format?: number;\n internalFormat?: number;\n type?: number;\n width?: number;\n height?: number;\n}\n",[124,316,317,333,344,353,362,371,380,389,399,404,419,433,445,457,469,482,493,505,517,529,541,553,565],{"__ignoreMap":135},[65,318,319,321,324,328,330],{"class":140,"line":141},[65,320,284],{"class":154},[65,322,323],{"class":168}," type",[65,325,327],{"class":326},"s5Dmg"," TextureSource",[65,329,218],{"class":168},[65,331,332],{"class":204}," \n",[65,334,335,338,342],{"class":140,"line":158},[65,336,337],{"class":168}," |",[65,339,341],{"class":340},"s6YsC","string",[65,343,332],{"class":204},[65,345,346,348,351],{"class":140,"line":165},[65,347,337],{"class":168},[65,349,350],{"class":326}," HTMLImageElement",[65,352,332],{"class":204},[65,354,355,357,360],{"class":140,"line":180},[65,356,337],{"class":168},[65,358,359],{"class":326}," HTMLVideoElement",[65,361,332],{"class":204},[65,363,364,366,369],{"class":140,"line":194},[65,365,337],{"class":168},[65,367,368],{"class":326}," HTMLCanvasElement",[65,370,332],{"class":204},[65,372,373,375,378],{"class":140,"line":211},[65,374,337],{"class":168},[65,376,377],{"class":326}," OffscreenCanvas",[65,379,332],{"class":204},[65,381,382,384,387],{"class":140,"line":240},[65,383,337],{"class":168},[65,385,386],{"class":326}," ImageBitmap",[65,388,332],{"class":204},[65,390,392,394,397],{"class":140,"line":391},8,[65,393,337],{"class":168},[65,395,396],{"class":326}," ImageData",[65,398,155],{"class":154},[65,400,402],{"class":140,"line":401},9,[65,403,162],{"emptyLinePlaceholder":161},[65,405,407,409,411,414,416],{"class":140,"line":406},10,[65,408,284],{"class":154},[65,410,323],{"class":168},[65,412,413],{"class":326}," TextureOptions",[65,415,218],{"class":168},[65,417,418],{"class":154}," {\n",[65,420,422,425,428,431],{"class":140,"line":421},11,[65,423,424],{"class":144}," wrapS",[65,426,427],{"class":168},"?:",[65,429,430],{"class":340}," number",[65,432,155],{"class":154},[65,434,436,439,441,443],{"class":140,"line":435},12,[65,437,438],{"class":144}," wrapT",[65,440,427],{"class":168},[65,442,430],{"class":340},[65,444,155],{"class":154},[65,446,448,451,453,455],{"class":140,"line":447},13,[65,449,450],{"class":144}," minFilter",[65,452,427],{"class":168},[65,454,430],{"class":340},[65,456,155],{"class":154},[65,458,460,463,465,467],{"class":140,"line":459},14,[65,461,462],{"class":144}," magFilter",[65,464,427],{"class":168},[65,466,430],{"class":340},[65,468,155],{"class":154},[65,470,472,475,477,480],{"class":140,"line":471},15,[65,473,474],{"class":144}," generateMipmaps",[65,476,427],{"class":168},[65,478,479],{"class":340}," boolean",[65,481,155],{"class":154},[65,483,484,487,489,491],{"class":140,"line":63},[65,485,486],{"class":144}," flipY",[65,488,427],{"class":168},[65,490,479],{"class":340},[65,492,155],{"class":154},[65,494,496,499,501,503],{"class":140,"line":495},17,[65,497,498],{"class":144}," premultiplyAlpha",[65,500,427],{"class":168},[65,502,479],{"class":340},[65,504,155],{"class":154},[65,506,508,511,513,515],{"class":140,"line":507},18,[65,509,510],{"class":144}," format",[65,512,427],{"class":168},[65,514,430],{"class":340},[65,516,155],{"class":154},[65,518,520,523,525,527],{"class":140,"line":519},19,[65,521,522],{"class":144}," internalFormat",[65,524,427],{"class":168},[65,526,430],{"class":340},[65,528,155],{"class":154},[65,530,532,535,537,539],{"class":140,"line":531},20,[65,533,534],{"class":144}," type",[65,536,427],{"class":168},[65,538,430],{"class":340},[65,540,155],{"class":154},[65,542,544,547,549,551],{"class":140,"line":543},21,[65,545,546],{"class":144}," width",[65,548,427],{"class":168},[65,550,430],{"class":340},[65,552,155],{"class":154},[65,554,556,559,561,563],{"class":140,"line":555},22,[65,557,558],{"class":144}," height",[65,560,427],{"class":168},[65,562,430],{"class":340},[65,564,155],{"class":154},[65,566,568],{"class":140,"line":567},23,[65,569,243],{"class":154},[15,571,572,575],{},[124,573,574],{},"TextureSource","にある通り、テクスチャのソースとしては文字列(URL)や画像、動画、キャンバスなど様々な型を扱うことができます。",[15,577,578,581],{},[124,579,580],{},"TextureOptions","は、WebGLのテクスチャを作成するときに設定できるオプションです。項目は次のようになります。",[583,584,585,601],"table",{},[586,587,588],"thead",{},[589,590,591,595,598],"tr",{},[592,593,594],"th",{},"プロパティ",[592,596,597],{},"説明",[592,599,600],{},"デフォルト値",[602,603,604,618,630,643,655,668,680,693,706,718,731,744],"tbody",{},[589,605,606,610,613],{},[607,608,609],"td",{},"wrapS",[607,611,612],{},"テクスチャの水平方向のラップモード",[607,614,615],{},[124,616,617],{},"gl.CLAMP_TO_EDGE",[589,619,620,623,626],{},[607,621,622],{},"wrapT",[607,624,625],{},"テクスチャの垂直方向のラップモード",[607,627,628],{},[124,629,617],{},[589,631,632,635,638],{},[607,633,634],{},"minFilter",[607,636,637],{},"テクスチャの縮小フィルタ",[607,639,640],{},[124,641,642],{},"gl.LINEAR",[589,644,645,648,651],{},[607,646,647],{},"magFilter",[607,649,650],{},"テクスチャの拡大フィルタ",[607,652,653],{},[124,654,642],{},[589,656,657,660,663],{},[607,658,659],{},"generateMipmaps",[607,661,662],{},"ミップマップを生成するかどうか",[607,664,665],{},[124,666,667],{},"true",[589,669,670,673,676],{},[607,671,672],{},"flipY",[607,674,675],{},"Y軸方向に反転するかどうか",[607,677,678],{},[124,679,667],{},[589,681,682,685,688],{},[607,683,684],{},"premultiplyAlpha",[607,686,687],{},"アルファを乗算するかどうか",[607,689,690],{},[124,691,692],{},"false",[589,694,695,698,701],{},[607,696,697],{},"format",[607,699,700],{},"テクスチャのフォーマット",[607,702,703],{},[124,704,705],{},"gl.RGBA",[589,707,708,711,714],{},[607,709,710],{},"internalFormat",[607,712,713],{},"テクスチャの内部フォーマット",[607,715,716],{},[124,717,705],{},[589,719,720,723,726],{},[607,721,722],{},"type",[607,724,725],{},"テクスチャのデータ型",[607,727,728],{},[124,729,730],{},"gl.UNSIGNED_BYTE",[589,732,733,736,739],{},[607,734,735],{},"width",[607,737,738],{},"テクスチャの幅（ピクセル）",[607,740,741],{},[124,742,743],{},"0",[589,745,746,749,752],{},[607,747,748],{},"height",[607,750,751],{},"テクスチャの高さ（ピクセル）",[607,753,754],{},[124,755,743],{},[15,757,758,759,762],{},"デフォルト値は、オプションに値が指定されなかった場合に使用される値になります。これはコンストラクタ内で",[124,760,761],{},"??","演算子を使って設定されています。",[129,764,766],{"className":131,"code":765,"filename":259,"language":134,"meta":135,"style":135},"export class Texture {\n // ...\n constructor(gl: WebGL2RenderingContext, source: TextureSource, options: TextureOptions = {}) {\n this.gl = gl;\n const isVideo = source instanceof HTMLVideoElement;\n this.wrapS = options.wrapS ?? gl.CLAMP_TO_EDGE;\n this.wrapT = options.wrapT ?? gl.CLAMP_TO_EDGE;\n this.minFilter = options.minFilter ?? gl.LINEAR;\n this.magFilter = options.magFilter ?? gl.LINEAR;\n this.generateMipmaps = options.generateMipmaps ?? !isVideo;\n this.flipY = options.flipY ?? true;\n this.premultiplyAlpha = options.premultiplyAlpha ?? false;\n this.format = options.format ?? gl.RGBA;\n this.internalFormat = options.internalFormat ?? gl.RGBA;\n this.type = options.type ?? gl.UNSIGNED_BYTE;\n this.width = options.width ?? 0;\n this.height = options.height ?? 0;\n }\n}\n",[124,767,768,779,784,826,844,863,891,917,944,970,996,1019,1042,1069,1095,1122,1145,1167,1172],{"__ignoreMap":135},[65,769,770,772,775,777],{"class":140,"line":141},[65,771,284],{"class":154},[65,773,774],{"class":168}," class",[65,776,290],{"class":326},[65,778,418],{"class":154},[65,780,781],{"class":140,"line":158},[65,782,783],{"class":278}," // ...\n",[65,785,786,789,791,795,798,801,803,806,808,810,812,815,817,819,821,824],{"class":140,"line":165},[65,787,788],{"class":168}," constructor",[65,790,224],{"class":154},[65,792,794],{"class":793},"sx098","gl",[65,796,797],{"class":168},":",[65,799,800],{"class":326}," WebGL2RenderingContext",[65,802,230],{"class":154},[65,804,805],{"class":793}," source",[65,807,797],{"class":168},[65,809,327],{"class":326},[65,811,230],{"class":154},[65,813,814],{"class":793}," options",[65,816,797],{"class":168},[65,818,413],{"class":326},[65,820,218],{"class":168},[65,822,823],{"class":154}," {})",[65,825,418],{"class":154},[65,827,828,832,835,837,839,842],{"class":140,"line":180},[65,829,831],{"class":830},"s9qRY"," this",[65,833,834],{"class":154},".",[65,836,794],{"class":214},[65,838,218],{"class":168},[65,840,841],{"class":214}," gl",[65,843,155],{"class":154},[65,845,846,849,852,854,856,859,861],{"class":140,"line":194},[65,847,848],{"class":168}," const",[65,850,851],{"class":214}," isVideo",[65,853,218],{"class":168},[65,855,805],{"class":214},[65,857,858],{"class":168}," instanceof",[65,860,359],{"class":326},[65,862,155],{"class":154},[65,864,865,867,869,871,873,875,877,879,882,884,886,889],{"class":140,"line":211},[65,866,831],{"class":830},[65,868,834],{"class":154},[65,870,609],{"class":214},[65,872,218],{"class":168},[65,874,814],{"class":214},[65,876,834],{"class":154},[65,878,609],{"class":214},[65,880,881],{"class":168}," ??",[65,883,841],{"class":214},[65,885,834],{"class":154},[65,887,888],{"class":214},"CLAMP_TO_EDGE",[65,890,155],{"class":154},[65,892,893,895,897,899,901,903,905,907,909,911,913,915],{"class":140,"line":240},[65,894,831],{"class":830},[65,896,834],{"class":154},[65,898,622],{"class":214},[65,900,218],{"class":168},[65,902,814],{"class":214},[65,904,834],{"class":154},[65,906,622],{"class":214},[65,908,881],{"class":168},[65,910,841],{"class":214},[65,912,834],{"class":154},[65,914,888],{"class":214},[65,916,155],{"class":154},[65,918,919,921,923,925,927,929,931,933,935,937,939,942],{"class":140,"line":391},[65,920,831],{"class":830},[65,922,834],{"class":154},[65,924,634],{"class":214},[65,926,218],{"class":168},[65,928,814],{"class":214},[65,930,834],{"class":154},[65,932,634],{"class":214},[65,934,881],{"class":168},[65,936,841],{"class":214},[65,938,834],{"class":154},[65,940,941],{"class":214},"LINEAR",[65,943,155],{"class":154},[65,945,946,948,950,952,954,956,958,960,962,964,966,968],{"class":140,"line":401},[65,947,831],{"class":830},[65,949,834],{"class":154},[65,951,647],{"class":214},[65,953,218],{"class":168},[65,955,814],{"class":214},[65,957,834],{"class":154},[65,959,647],{"class":214},[65,961,881],{"class":168},[65,963,841],{"class":214},[65,965,834],{"class":154},[65,967,941],{"class":214},[65,969,155],{"class":154},[65,971,972,974,976,978,980,982,984,986,988,991,994],{"class":140,"line":406},[65,973,831],{"class":830},[65,975,834],{"class":154},[65,977,659],{"class":214},[65,979,218],{"class":168},[65,981,814],{"class":214},[65,983,834],{"class":154},[65,985,659],{"class":214},[65,987,881],{"class":168},[65,989,990],{"class":168}," !",[65,992,993],{"class":214},"isVideo",[65,995,155],{"class":154},[65,997,998,1000,1002,1004,1006,1008,1010,1012,1014,1017],{"class":140,"line":421},[65,999,831],{"class":830},[65,1001,834],{"class":154},[65,1003,672],{"class":214},[65,1005,218],{"class":168},[65,1007,814],{"class":214},[65,1009,834],{"class":154},[65,1011,672],{"class":214},[65,1013,881],{"class":168},[65,1015,1016],{"class":793}," true",[65,1018,155],{"class":154},[65,1020,1021,1023,1025,1027,1029,1031,1033,1035,1037,1040],{"class":140,"line":435},[65,1022,831],{"class":830},[65,1024,834],{"class":154},[65,1026,684],{"class":214},[65,1028,218],{"class":168},[65,1030,814],{"class":214},[65,1032,834],{"class":154},[65,1034,684],{"class":214},[65,1036,881],{"class":168},[65,1038,1039],{"class":793}," false",[65,1041,155],{"class":154},[65,1043,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1067],{"class":140,"line":447},[65,1045,831],{"class":830},[65,1047,834],{"class":154},[65,1049,697],{"class":214},[65,1051,218],{"class":168},[65,1053,814],{"class":214},[65,1055,834],{"class":154},[65,1057,697],{"class":214},[65,1059,881],{"class":168},[65,1061,841],{"class":214},[65,1063,834],{"class":154},[65,1065,1066],{"class":214},"RGBA",[65,1068,155],{"class":154},[65,1070,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091,1093],{"class":140,"line":459},[65,1072,831],{"class":830},[65,1074,834],{"class":154},[65,1076,710],{"class":214},[65,1078,218],{"class":168},[65,1080,814],{"class":214},[65,1082,834],{"class":154},[65,1084,710],{"class":214},[65,1086,881],{"class":168},[65,1088,841],{"class":214},[65,1090,834],{"class":154},[65,1092,1066],{"class":214},[65,1094,155],{"class":154},[65,1096,1097,1099,1101,1103,1105,1107,1109,1111,1113,1115,1117,1120],{"class":140,"line":471},[65,1098,831],{"class":830},[65,1100,834],{"class":154},[65,1102,722],{"class":214},[65,1104,218],{"class":168},[65,1106,814],{"class":214},[65,1108,834],{"class":154},[65,1110,722],{"class":214},[65,1112,881],{"class":168},[65,1114,841],{"class":214},[65,1116,834],{"class":154},[65,1118,1119],{"class":214},"UNSIGNED_BYTE",[65,1121,155],{"class":154},[65,1123,1124,1126,1128,1130,1132,1134,1136,1138,1140,1143],{"class":140,"line":63},[65,1125,831],{"class":830},[65,1127,834],{"class":154},[65,1129,735],{"class":214},[65,1131,218],{"class":168},[65,1133,814],{"class":214},[65,1135,834],{"class":154},[65,1137,735],{"class":214},[65,1139,881],{"class":168},[65,1141,1142],{"class":793}," 0",[65,1144,155],{"class":154},[65,1146,1147,1149,1151,1153,1155,1157,1159,1161,1163,1165],{"class":140,"line":495},[65,1148,831],{"class":830},[65,1150,834],{"class":154},[65,1152,748],{"class":214},[65,1154,218],{"class":168},[65,1156,814],{"class":214},[65,1158,834],{"class":154},[65,1160,748],{"class":214},[65,1162,881],{"class":168},[65,1164,1142],{"class":793},[65,1166,155],{"class":154},[65,1168,1169],{"class":140,"line":507},[65,1170,1171],{"class":154}," }\n",[65,1173,1174],{"class":140,"line":519},[65,1175,243],{"class":154},[1177,1178,1179],"h3",{"id":1179},"コンストラクタでテクスチャを作成する",[15,1181,1182,1184,1185,1188,1189,1192],{},[124,1183,267],{},"クラスのコンストラクタでは、",[124,1186,1187],{},"gl.createTexture()","を使ってWebGLのテクスチャオブジェクトを作成し、",[124,1190,1191],{},"gl.bindTexture(gl.TEXTURE_2D, tex)","でバインドする処理を行います。",[129,1194,1196],{"className":131,"code":1195,"filename":259,"language":134,"meta":135,"style":135},"export class Texture {\n // ...\n constructor(gl: WebGL2RenderingContext, source: TextureSource, options: TextureOptions = {}) {\n // ... \n const tex = gl.createTexture();\n this.texture = tex;\n\n gl.bindTexture(gl.TEXTURE_2D, tex);\n }\n}\n",[124,1197,1198,1208,1212,1246,1251,1272,1287,1291,1318,1322],{"__ignoreMap":135},[65,1199,1200,1202,1204,1206],{"class":140,"line":141},[65,1201,284],{"class":154},[65,1203,774],{"class":168},[65,1205,290],{"class":326},[65,1207,418],{"class":154},[65,1209,1210],{"class":140,"line":158},[65,1211,783],{"class":278},[65,1213,1214,1216,1218,1220,1222,1224,1226,1228,1230,1232,1234,1236,1238,1240,1242,1244],{"class":140,"line":165},[65,1215,788],{"class":168},[65,1217,224],{"class":154},[65,1219,794],{"class":793},[65,1221,797],{"class":168},[65,1223,800],{"class":326},[65,1225,230],{"class":154},[65,1227,805],{"class":793},[65,1229,797],{"class":168},[65,1231,327],{"class":326},[65,1233,230],{"class":154},[65,1235,814],{"class":793},[65,1237,797],{"class":168},[65,1239,413],{"class":326},[65,1241,218],{"class":168},[65,1243,823],{"class":154},[65,1245,418],{"class":154},[65,1247,1248],{"class":140,"line":180},[65,1249,1250],{"class":278}," // ... \n",[65,1252,1253,1255,1258,1260,1262,1264,1267,1270],{"class":140,"line":194},[65,1254,848],{"class":168},[65,1256,1257],{"class":214}," tex",[65,1259,218],{"class":168},[65,1261,841],{"class":214},[65,1263,834],{"class":154},[65,1265,1266],{"class":200},"createTexture",[65,1268,1269],{"class":204},"()",[65,1271,155],{"class":154},[65,1273,1274,1276,1278,1281,1283,1285],{"class":140,"line":211},[65,1275,831],{"class":830},[65,1277,834],{"class":154},[65,1279,1280],{"class":214},"texture",[65,1282,218],{"class":168},[65,1284,1257],{"class":214},[65,1286,155],{"class":154},[65,1288,1289],{"class":140,"line":240},[65,1290,162],{"emptyLinePlaceholder":161},[65,1292,1293,1296,1298,1301,1303,1305,1307,1310,1312,1314,1316],{"class":140,"line":391},[65,1294,1295],{"class":214}," gl",[65,1297,834],{"class":154},[65,1299,1300],{"class":200},"bindTexture",[65,1302,224],{"class":204},[65,1304,794],{"class":214},[65,1306,834],{"class":154},[65,1308,1309],{"class":214},"TEXTURE_2D",[65,1311,230],{"class":154},[65,1313,1257],{"class":214},[65,1315,235],{"class":204},[65,1317,155],{"class":154},[65,1319,1320],{"class":140,"line":401},[65,1321,1171],{"class":154},[65,1323,1324],{"class":140,"line":406},[65,1325,243],{"class":154},[15,1327,1328,1329,1332],{},"その後に、",[124,1330,1331],{},"gl.texParameteri","を使って各種設定を行います。",[1177,1334,1336],{"id":1335},"min_filterとmag_filter","MIN_FILTERとMAG_FILTER",[15,1338,1339,1342,1343,1346],{},[124,1340,1341],{},"MIN_FILTER","はテクスチャを縮小して表示するときのフィルタリング方法を指定します。",[124,1344,1345],{},"MAG_FILTER","はテクスチャを拡大して表示するときのフィルタリング方法を指定します。",[129,1348,1350],{"className":131,"code":1349,"filename":259,"language":134,"meta":135,"style":135},"export class Texture {\n // ...\n constructor(gl: WebGL2RenderingContext, source: TextureSource, options: TextureOptions = {}) {\n // ... \n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.minFilter);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.magFilter);\n }\n}\n",[124,1351,1352,1362,1366,1400,1404,1443,1480,1484],{"__ignoreMap":135},[65,1353,1354,1356,1358,1360],{"class":140,"line":141},[65,1355,284],{"class":154},[65,1357,774],{"class":168},[65,1359,290],{"class":326},[65,1361,418],{"class":154},[65,1363,1364],{"class":140,"line":158},[65,1365,783],{"class":278},[65,1367,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392,1394,1396,1398],{"class":140,"line":165},[65,1369,788],{"class":168},[65,1371,224],{"class":154},[65,1373,794],{"class":793},[65,1375,797],{"class":168},[65,1377,800],{"class":326},[65,1379,230],{"class":154},[65,1381,805],{"class":793},[65,1383,797],{"class":168},[65,1385,327],{"class":326},[65,1387,230],{"class":154},[65,1389,814],{"class":793},[65,1391,797],{"class":168},[65,1393,413],{"class":326},[65,1395,218],{"class":168},[65,1397,823],{"class":154},[65,1399,418],{"class":154},[65,1401,1402],{"class":140,"line":180},[65,1403,1250],{"class":278},[65,1405,1406,1408,1410,1413,1415,1417,1419,1421,1423,1425,1427,1430,1432,1435,1437,1439,1441],{"class":140,"line":194},[65,1407,1295],{"class":214},[65,1409,834],{"class":154},[65,1411,1412],{"class":200},"texParameteri",[65,1414,224],{"class":204},[65,1416,794],{"class":214},[65,1418,834],{"class":154},[65,1420,1309],{"class":214},[65,1422,230],{"class":154},[65,1424,841],{"class":214},[65,1426,834],{"class":154},[65,1428,1429],{"class":214},"TEXTURE_MIN_FILTER",[65,1431,230],{"class":154},[65,1433,1434],{"class":830}," this",[65,1436,834],{"class":154},[65,1438,634],{"class":214},[65,1440,235],{"class":204},[65,1442,155],{"class":154},[65,1444,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465,1468,1470,1472,1474,1476,1478],{"class":140,"line":211},[65,1446,1295],{"class":214},[65,1448,834],{"class":154},[65,1450,1412],{"class":200},[65,1452,224],{"class":204},[65,1454,794],{"class":214},[65,1456,834],{"class":154},[65,1458,1309],{"class":214},[65,1460,230],{"class":154},[65,1462,841],{"class":214},[65,1464,834],{"class":154},[65,1466,1467],{"class":214},"TEXTURE_MAG_FILTER",[65,1469,230],{"class":154},[65,1471,1434],{"class":830},[65,1473,834],{"class":154},[65,1475,647],{"class":214},[65,1477,235],{"class":204},[65,1479,155],{"class":154},[65,1481,1482],{"class":140,"line":240},[65,1483,1171],{"class":154},[65,1485,1486],{"class":140,"line":391},[65,1487,243],{"class":154},[15,1489,1490,1491,1493],{},"デフォルト値では、どちらも",[124,1492,642],{},"が使用されます。これは、周囲のピクセルを補間して滑らかに表示するフィルタリング方法です。",[15,1495,1496,1497,1500],{},"他に",[124,1498,1499],{},"gl.NEAREST","というフィルタリング方法もあります。これは、最も近いピクセルの値をそのまま使用する方法で、ドット絵のような表現に適しています。",[1177,1502,1504],{"id":1503},"wrap_sとwrap_t","WRAP_SとWRAP_T",[15,1506,1507,1510,1511,1514],{},[124,1508,1509],{},"WRAP_S","はテクスチャの水平方向のラップ方法を指定し、",[124,1512,1513],{},"WRAP_T","はテクスチャの垂直方向のラップ方法を指定します。",[129,1516,1518],{"className":131,"code":1517,"filename":259,"language":134,"meta":135,"style":135},"export class Texture {\n // ...\n constructor(gl: WebGL2RenderingContext, source: TextureSource, options: TextureOptions = {}) {\n // ...\n\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.wrapS);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.wrapT);\n }\n}\n",[124,1519,1520,1530,1534,1568,1573,1577,1614,1651,1655],{"__ignoreMap":135},[65,1521,1522,1524,1526,1528],{"class":140,"line":141},[65,1523,284],{"class":154},[65,1525,774],{"class":168},[65,1527,290],{"class":326},[65,1529,418],{"class":154},[65,1531,1532],{"class":140,"line":158},[65,1533,783],{"class":278},[65,1535,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566],{"class":140,"line":165},[65,1537,788],{"class":168},[65,1539,224],{"class":154},[65,1541,794],{"class":793},[65,1543,797],{"class":168},[65,1545,800],{"class":326},[65,1547,230],{"class":154},[65,1549,805],{"class":793},[65,1551,797],{"class":168},[65,1553,327],{"class":326},[65,1555,230],{"class":154},[65,1557,814],{"class":793},[65,1559,797],{"class":168},[65,1561,413],{"class":326},[65,1563,218],{"class":168},[65,1565,823],{"class":154},[65,1567,418],{"class":154},[65,1569,1570],{"class":140,"line":180},[65,1571,1572],{"class":278}," // ...\n",[65,1574,1575],{"class":140,"line":194},[65,1576,162],{"emptyLinePlaceholder":161},[65,1578,1579,1581,1583,1585,1587,1589,1591,1593,1595,1597,1599,1602,1604,1606,1608,1610,1612],{"class":140,"line":211},[65,1580,1295],{"class":214},[65,1582,834],{"class":154},[65,1584,1412],{"class":200},[65,1586,224],{"class":204},[65,1588,794],{"class":214},[65,1590,834],{"class":154},[65,1592,1309],{"class":214},[65,1594,230],{"class":154},[65,1596,841],{"class":214},[65,1598,834],{"class":154},[65,1600,1601],{"class":214},"TEXTURE_WRAP_S",[65,1603,230],{"class":154},[65,1605,1434],{"class":830},[65,1607,834],{"class":154},[65,1609,609],{"class":214},[65,1611,235],{"class":204},[65,1613,155],{"class":154},[65,1615,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1639,1641,1643,1645,1647,1649],{"class":140,"line":240},[65,1617,1295],{"class":214},[65,1619,834],{"class":154},[65,1621,1412],{"class":200},[65,1623,224],{"class":204},[65,1625,794],{"class":214},[65,1627,834],{"class":154},[65,1629,1309],{"class":214},[65,1631,230],{"class":154},[65,1633,841],{"class":214},[65,1635,834],{"class":154},[65,1637,1638],{"class":214},"TEXTURE_WRAP_T",[65,1640,230],{"class":154},[65,1642,1434],{"class":830},[65,1644,834],{"class":154},[65,1646,622],{"class":214},[65,1648,235],{"class":204},[65,1650,155],{"class":154},[65,1652,1653],{"class":140,"line":391},[65,1654,1171],{"class":154},[65,1656,1657],{"class":140,"line":401},[65,1658,243],{"class":154},[15,1660,1490,1661,1663],{},[124,1662,617],{},"が使用されます。これは、テクスチャの端のピクセルを繰り返し使用してラップする方法です。",[15,1665,1496,1666,1669,1670,1673],{},[124,1667,1668],{},"gl.REPEAT","というラップ方法もあります。これは、テクスチャを繰り返して表示する方法で、パターン状のテクスチャに適しています。また、",[124,1671,1672],{},"gl.MIRRORED_REPEAT","というラップ方法もあり、テクスチャを反転させながら繰り返して表示する方法です。",[1177,1675,1677],{"id":1676},"urlから画像を読み込む","URLから画像を読み込む",[15,1679,1680,1683],{},[124,1681,1682],{},"source","が文字列だった場合は、その文字列をURLとして画像を読み込みます。",[129,1685,1687],{"className":131,"code":1686,"filename":259,"language":134,"meta":135,"style":135},"if (typeof source === 'string') {\n this.source = source;\n this.load(source);\n return;\n}\n",[124,1688,1689,1716,1731,1748,1753],{"__ignoreMap":135},[65,1690,1691,1694,1697,1700,1702,1705,1707,1709,1711,1714],{"class":140,"line":141},[65,1692,1693],{"class":154},"if",[65,1695,1696],{"class":204}," (",[65,1698,1699],{"class":168},"typeof",[65,1701,805],{"class":144},[65,1703,1704],{"class":168}," ===",[65,1706,299],{"class":154},[65,1708,341],{"class":302},[65,1710,306],{"class":154},[65,1712,1713],{"class":204},") ",[65,1715,208],{"class":154},[65,1717,1718,1721,1723,1725,1727,1729],{"class":140,"line":158},[65,1719,1720],{"class":830}," this",[65,1722,834],{"class":154},[65,1724,1682],{"class":214},[65,1726,218],{"class":168},[65,1728,805],{"class":214},[65,1730,155],{"class":154},[65,1732,1733,1735,1737,1740,1742,1744,1746],{"class":140,"line":165},[65,1734,1720],{"class":830},[65,1736,834],{"class":154},[65,1738,1739],{"class":200},"load",[65,1741,224],{"class":204},[65,1743,1682],{"class":214},[65,1745,235],{"class":204},[65,1747,155],{"class":154},[65,1749,1750],{"class":140,"line":180},[65,1751,1752],{"class":154}," return;\n",[65,1754,1755],{"class":140,"line":194},[65,1756,243],{"class":154},[15,1758,1759],{},"例えば、次のようにした場合です。",[129,1761,1763],{"className":131,"code":1762,"language":134,"meta":135,"style":135},"const texture = new Texture(gl, '/images/image.png');\n",[124,1764,1765],{"__ignoreMap":135},[65,1766,1767,1770,1772,1774,1777,1779,1781,1783,1785,1787,1790,1792,1794],{"class":140,"line":141},[65,1768,1769],{"class":168},"const",[65,1771,221],{"class":144},[65,1773,218],{"class":168},[65,1775,1776],{"class":168}," new",[65,1778,290],{"class":200},[65,1780,224],{"class":204},[65,1782,794],{"class":144},[65,1784,230],{"class":154},[65,1786,299],{"class":154},[65,1788,1789],{"class":302},"/images/image.png",[65,1791,306],{"class":154},[65,1793,235],{"class":204},[65,1795,155],{"class":154},[15,1797,1798],{},"画像読み込みの処理は次のようになります。",[129,1800,1802],{"className":131,"code":1801,"filename":259,"language":134,"meta":135,"style":135},"private loadImage(src: string): Promise\u003CHTMLImageElement> {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.crossOrigin = 'anonymous';\n img.src = src;\n img.onload = () => resolve(img);\n img.onerror = e => reject(e);\n });\n}\n",[124,1803,1804,1839,1865,1883,1904,1919,1946,1973,1981],{"__ignoreMap":135},[65,1805,1806,1809,1812,1814,1817,1820,1822,1825,1828,1831,1834,1837],{"class":140,"line":141},[65,1807,1808],{"class":144},"private",[65,1810,1811],{"class":200}," loadImage",[65,1813,224],{"class":204},[65,1815,1816],{"class":144},"src",[65,1818,1819],{"class":204},": ",[65,1821,341],{"class":144},[65,1823,1824],{"class":204},"): ",[65,1826,1827],{"class":326},"Promise",[65,1829,1830],{"class":168},"\u003C",[65,1832,1833],{"class":144},"HTMLImageElement",[65,1835,1836],{"class":168},">",[65,1838,418],{"class":154},[65,1840,1841,1844,1846,1848,1850,1853,1855,1858,1860,1863],{"class":140,"line":158},[65,1842,1843],{"class":204}," return new ",[65,1845,1827],{"class":200},[65,1847,224],{"class":154},[65,1849,224],{"class":204},[65,1851,1852],{"class":793},"resolve",[65,1854,230],{"class":154},[65,1856,1857],{"class":793}," reject",[65,1859,235],{"class":154},[65,1861,1862],{"class":168}," =>",[65,1864,418],{"class":154},[65,1866,1867,1869,1872,1874,1876,1879,1881],{"class":140,"line":165},[65,1868,848],{"class":326},[65,1870,1871],{"class":144}," img",[65,1873,218],{"class":168},[65,1875,1776],{"class":168},[65,1877,1878],{"class":200}," Image",[65,1880,1269],{"class":204},[65,1882,155],{"class":154},[65,1884,1885,1888,1890,1893,1895,1897,1900,1902],{"class":140,"line":180},[65,1886,1887],{"class":326}," img",[65,1889,834],{"class":154},[65,1891,1892],{"class":144},"crossOrigin",[65,1894,218],{"class":168},[65,1896,299],{"class":154},[65,1898,1899],{"class":302},"anonymous",[65,1901,306],{"class":154},[65,1903,155],{"class":154},[65,1905,1906,1908,1910,1912,1914,1917],{"class":140,"line":194},[65,1907,1887],{"class":326},[65,1909,834],{"class":154},[65,1911,1816],{"class":144},[65,1913,218],{"class":168},[65,1915,1916],{"class":144}," src",[65,1918,155],{"class":154},[65,1920,1921,1923,1925,1928,1930,1933,1935,1938,1940,1942,1944],{"class":140,"line":211},[65,1922,1887],{"class":326},[65,1924,834],{"class":154},[65,1926,1927],{"class":200},"onload",[65,1929,218],{"class":168},[65,1931,1932],{"class":154}," ()",[65,1934,1862],{"class":168},[65,1936,1937],{"class":200}," resolve",[65,1939,224],{"class":204},[65,1941,57],{"class":144},[65,1943,235],{"class":204},[65,1945,155],{"class":154},[65,1947,1948,1950,1952,1955,1957,1960,1962,1964,1966,1969,1971],{"class":140,"line":240},[65,1949,1887],{"class":326},[65,1951,834],{"class":154},[65,1953,1954],{"class":200},"onerror",[65,1956,218],{"class":168},[65,1958,1959],{"class":793}," e",[65,1961,1862],{"class":168},[65,1963,1857],{"class":200},[65,1965,224],{"class":204},[65,1967,1968],{"class":144},"e",[65,1970,235],{"class":204},[65,1972,155],{"class":154},[65,1974,1975,1978],{"class":140,"line":391},[65,1976,1977],{"class":154}," }",[65,1979,1980],{"class":204},");\n",[65,1982,1983],{"class":140,"line":401},[65,1984,243],{"class":154},[15,1986,1987,1988,1990,1991,1994],{},"ここでは",[124,1989,1827],{},"を使って非同期に画像を読み込んでいるので、次のように",[124,1992,1993],{},"await","を使って、画像の読み込み完了を待つことができます。",[129,1996,1998],{"className":131,"code":1997,"filename":259,"language":134,"meta":135,"style":135},"this.source = await this.loadImage(source);\n",[124,1999,2000],{"__ignoreMap":135},[65,2001,2002,2005,2007,2009,2011,2014,2016,2018,2021,2023,2025,2027],{"class":140,"line":141},[65,2003,2004],{"class":830},"this",[65,2006,834],{"class":154},[65,2008,1682],{"class":144},[65,2010,218],{"class":168},[65,2012,2013],{"class":154}," await",[65,2015,1434],{"class":830},[65,2017,834],{"class":154},[65,2019,2020],{"class":200},"loadImage",[65,2022,224],{"class":204},[65,2024,1682],{"class":144},[65,2026,235],{"class":204},[65,2028,155],{"class":154},[15,2030,2031,2032,2034],{},"なので",[124,2033,1739],{},"メソッドは次の通りです。",[129,2036,2038],{"className":131,"code":2037,"filename":259,"language":134,"meta":135,"style":135},"async load(source: TextureSource) {\n if (typeof source === 'string') {\n this.source = await this.loadImage(source);\n } else {\n this.source = source;\n }\n\n this.needsUpdate = true;\n this.update();\n}\n",[124,2039,2040,2060,2083,2109,2118,2132,2136,2140,2155,2168],{"__ignoreMap":135},[65,2041,2042,2045,2048,2050,2052,2054,2056,2058],{"class":140,"line":141},[65,2043,2044],{"class":144},"async",[65,2046,2047],{"class":200}," load",[65,2049,224],{"class":204},[65,2051,1682],{"class":144},[65,2053,1819],{"class":204},[65,2055,574],{"class":144},[65,2057,1713],{"class":204},[65,2059,208],{"class":154},[65,2061,2062,2065,2067,2069,2071,2073,2075,2077,2079,2081],{"class":140,"line":158},[65,2063,2064],{"class":154}," if",[65,2066,1696],{"class":204},[65,2068,1699],{"class":168},[65,2070,805],{"class":214},[65,2072,1704],{"class":168},[65,2074,299],{"class":154},[65,2076,341],{"class":302},[65,2078,306],{"class":154},[65,2080,1713],{"class":204},[65,2082,208],{"class":154},[65,2084,2085,2087,2089,2091,2093,2095,2097,2099,2101,2103,2105,2107],{"class":140,"line":165},[65,2086,831],{"class":830},[65,2088,834],{"class":154},[65,2090,1682],{"class":214},[65,2092,218],{"class":168},[65,2094,2013],{"class":154},[65,2096,1434],{"class":830},[65,2098,834],{"class":154},[65,2100,2020],{"class":200},[65,2102,224],{"class":204},[65,2104,1682],{"class":214},[65,2106,235],{"class":204},[65,2108,155],{"class":154},[65,2110,2111,2113,2116],{"class":140,"line":180},[65,2112,1977],{"class":154},[65,2114,2115],{"class":154}," else",[65,2117,418],{"class":154},[65,2119,2120,2122,2124,2126,2128,2130],{"class":140,"line":194},[65,2121,831],{"class":830},[65,2123,834],{"class":154},[65,2125,1682],{"class":214},[65,2127,218],{"class":168},[65,2129,805],{"class":214},[65,2131,155],{"class":154},[65,2133,2134],{"class":140,"line":211},[65,2135,1171],{"class":154},[65,2137,2138],{"class":140,"line":240},[65,2139,162],{"emptyLinePlaceholder":161},[65,2141,2142,2144,2146,2149,2151,2153],{"class":140,"line":391},[65,2143,1720],{"class":830},[65,2145,834],{"class":154},[65,2147,2148],{"class":214},"needsUpdate",[65,2150,218],{"class":168},[65,2152,1016],{"class":793},[65,2154,155],{"class":154},[65,2156,2157,2159,2161,2164,2166],{"class":140,"line":401},[65,2158,1720],{"class":830},[65,2160,834],{"class":154},[65,2162,2163],{"class":200},"update",[65,2165,1269],{"class":204},[65,2167,155],{"class":154},[65,2169,2170],{"class":140,"line":406},[65,2171,243],{"class":154},[15,2173,2174,2175,2177,2178,2180,2181,2183,2184,2186],{},"読み込みが完了すると、",[124,2176,2148],{},"を",[124,2179,667],{},"に設定し、",[124,2182,2163],{},"メソッドを呼び出してGPUへ転送します。それでは、",[124,2185,2163],{},"メソッドの内容を見てみましょう。",[1177,2188,2190],{"id":2189},"updateで画像をgpuへ送る","update()で画像をGPUへ送る",[15,2192,2193,2195],{},[124,2194,2163],{},"メソッドは、次のようになります。",[129,2197,2199],{"className":131,"code":2198,"filename":259,"language":134,"meta":135,"style":135},"update(uint = 0) {\n this.bind(uint);\n\n const src = this.source;\n if (!src || typeof src === 'string') return;\n\n // ...\n}\n",[124,2200,2201,2218,2235,2239,2256,2288,2292,2296],{"__ignoreMap":135},[65,2202,2203,2205,2207,2210,2212,2214,2216],{"class":140,"line":141},[65,2204,2163],{"class":200},[65,2206,224],{"class":204},[65,2208,2209],{"class":144},"uint",[65,2211,218],{"class":168},[65,2213,1142],{"class":793},[65,2215,1713],{"class":204},[65,2217,208],{"class":154},[65,2219,2220,2222,2224,2227,2229,2231,2233],{"class":140,"line":158},[65,2221,1720],{"class":830},[65,2223,834],{"class":154},[65,2225,2226],{"class":200},"bind",[65,2228,224],{"class":204},[65,2230,2209],{"class":214},[65,2232,235],{"class":204},[65,2234,155],{"class":154},[65,2236,2237],{"class":140,"line":165},[65,2238,162],{"emptyLinePlaceholder":161},[65,2240,2241,2244,2246,2248,2250,2252,2254],{"class":140,"line":180},[65,2242,2243],{"class":168}," const",[65,2245,1916],{"class":214},[65,2247,218],{"class":168},[65,2249,1434],{"class":830},[65,2251,834],{"class":154},[65,2253,1682],{"class":214},[65,2255,155],{"class":154},[65,2257,2258,2260,2262,2265,2267,2270,2273,2275,2277,2279,2281,2283,2285],{"class":140,"line":194},[65,2259,2064],{"class":154},[65,2261,1696],{"class":204},[65,2263,2264],{"class":168},"!",[65,2266,1816],{"class":214},[65,2268,2269],{"class":168}," ||",[65,2271,2272],{"class":168}," typeof",[65,2274,1916],{"class":214},[65,2276,1704],{"class":168},[65,2278,299],{"class":154},[65,2280,341],{"class":302},[65,2282,306],{"class":154},[65,2284,1713],{"class":204},[65,2286,2287],{"class":154},"return;\n",[65,2289,2290],{"class":140,"line":211},[65,2291,162],{"emptyLinePlaceholder":161},[65,2293,2294],{"class":140,"line":240},[65,2295,783],{"class":278},[65,2297,2298],{"class":140,"line":391},[65,2299,243],{"class":154},[15,2301,2302,2303,2305,2306,2308],{},"まず、",[124,2304,2226],{},"メソッドを呼び出します。",[124,2307,2226],{},"メソッドは次のようにしてます。",[129,2310,2312],{"className":131,"code":2311,"filename":259,"language":134,"meta":135,"style":135},"bind(uint = 0) {\n const gl = this.gl;\n gl.activeTexture(gl.TEXTURE0 + uint);\n gl.bindTexture(gl.TEXTURE_2D, this.texture);\n}\n",[124,2313,2314,2330,2346,2375,2403],{"__ignoreMap":135},[65,2315,2316,2318,2320,2322,2324,2326,2328],{"class":140,"line":141},[65,2317,2226],{"class":200},[65,2319,224],{"class":204},[65,2321,2209],{"class":144},[65,2323,218],{"class":168},[65,2325,1142],{"class":793},[65,2327,1713],{"class":204},[65,2329,208],{"class":154},[65,2331,2332,2334,2336,2338,2340,2342,2344],{"class":140,"line":158},[65,2333,2243],{"class":168},[65,2335,841],{"class":214},[65,2337,218],{"class":168},[65,2339,1434],{"class":830},[65,2341,834],{"class":154},[65,2343,794],{"class":214},[65,2345,155],{"class":154},[65,2347,2348,2351,2353,2356,2358,2360,2362,2365,2368,2371,2373],{"class":140,"line":165},[65,2349,2350],{"class":214}," gl",[65,2352,834],{"class":154},[65,2354,2355],{"class":200},"activeTexture",[65,2357,224],{"class":204},[65,2359,794],{"class":214},[65,2361,834],{"class":154},[65,2363,2364],{"class":214},"TEXTURE0",[65,2366,2367],{"class":168}," +",[65,2369,2370],{"class":214}," uint",[65,2372,235],{"class":204},[65,2374,155],{"class":154},[65,2376,2377,2379,2381,2383,2385,2387,2389,2391,2393,2395,2397,2399,2401],{"class":140,"line":180},[65,2378,2350],{"class":214},[65,2380,834],{"class":154},[65,2382,1300],{"class":200},[65,2384,224],{"class":204},[65,2386,794],{"class":214},[65,2388,834],{"class":154},[65,2390,1309],{"class":214},[65,2392,230],{"class":154},[65,2394,1434],{"class":830},[65,2396,834],{"class":154},[65,2398,1280],{"class":214},[65,2400,235],{"class":204},[65,2402,155],{"class":154},[65,2404,2405],{"class":140,"line":194},[65,2406,243],{"class":154},[15,2408,2409,2410,2413,2414,2416],{},"これは、テクスチャユニットを指定して、そのテクスチャをバインドする処理です。たとえば、",[124,2411,2412],{},"texture.bind(0)","なら",[124,2415,2364],{},"を使用します。",[2418,2419,672],"h4",{"id":2420},"flipy",[15,2422,2423,2424,2426,2427,2429,2430,2177,2432,2434],{},"続いて、",[124,2425,672],{},"の設定について説明します。",[124,2428,672],{},"は、テクスチャの垂直方向を反転させるかどうかを指定するオプションです。WebGLでは、画像の座標系とテクスチャの座標系が異なるため、通常は",[124,2431,672],{},[124,2433,667],{},"に設定して反転させます。",[129,2436,2438],{"className":131,"code":2437,"filename":259,"language":134,"meta":135,"style":135},"update(uint = 0) {\n // ...\n const gl = this.gl;\n gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, this.flipY);\n}\n",[124,2439,2440,2456,2460,2476,2506],{"__ignoreMap":135},[65,2441,2442,2444,2446,2448,2450,2452,2454],{"class":140,"line":141},[65,2443,2163],{"class":200},[65,2445,224],{"class":204},[65,2447,2209],{"class":144},[65,2449,218],{"class":168},[65,2451,1142],{"class":793},[65,2453,1713],{"class":204},[65,2455,208],{"class":154},[65,2457,2458],{"class":140,"line":158},[65,2459,783],{"class":278},[65,2461,2462,2464,2466,2468,2470,2472,2474],{"class":140,"line":165},[65,2463,2243],{"class":168},[65,2465,841],{"class":214},[65,2467,218],{"class":168},[65,2469,1434],{"class":830},[65,2471,834],{"class":154},[65,2473,794],{"class":214},[65,2475,155],{"class":154},[65,2477,2478,2480,2482,2485,2487,2489,2491,2494,2496,2498,2500,2502,2504],{"class":140,"line":180},[65,2479,2350],{"class":214},[65,2481,834],{"class":154},[65,2483,2484],{"class":200},"pixelStorei",[65,2486,224],{"class":204},[65,2488,794],{"class":214},[65,2490,834],{"class":154},[65,2492,2493],{"class":214},"UNPACK_FLIP_Y_WEBGL",[65,2495,230],{"class":154},[65,2497,1434],{"class":830},[65,2499,834],{"class":154},[65,2501,672],{"class":214},[65,2503,235],{"class":204},[65,2505,155],{"class":154},[65,2507,2508],{"class":140,"line":194},[65,2509,243],{"class":154},[2418,2511,684],{"id":2512},"premultiplyalpha",[15,2514,2515,2517,2518,2520],{},[124,2516,684],{},"は、テクスチャのアルファ値を事前に乗算するかどうかを指定するオプションです。デフォルトで",[124,2519,692],{},"にしているので、今回の実装では無効になっています。",[129,2522,2524],{"className":131,"code":2523,"filename":259,"language":134,"meta":135,"style":135},"update(uint = 0) {\n // ...\n gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha);\n}\n",[124,2525,2526,2542,2546,2575],{"__ignoreMap":135},[65,2527,2528,2530,2532,2534,2536,2538,2540],{"class":140,"line":141},[65,2529,2163],{"class":200},[65,2531,224],{"class":204},[65,2533,2209],{"class":144},[65,2535,218],{"class":168},[65,2537,1142],{"class":793},[65,2539,1713],{"class":204},[65,2541,208],{"class":154},[65,2543,2544],{"class":140,"line":158},[65,2545,783],{"class":278},[65,2547,2548,2550,2552,2554,2556,2558,2560,2563,2565,2567,2569,2571,2573],{"class":140,"line":165},[65,2549,2350],{"class":214},[65,2551,834],{"class":154},[65,2553,2484],{"class":200},[65,2555,224],{"class":204},[65,2557,794],{"class":214},[65,2559,834],{"class":154},[65,2561,2562],{"class":214},"UNPACK_PREMULTIPLY_ALPHA_WEBGL",[65,2564,230],{"class":154},[65,2566,1434],{"class":830},[65,2568,834],{"class":154},[65,2570,684],{"class":214},[65,2572,235],{"class":204},[65,2574,155],{"class":154},[65,2576,2577],{"class":140,"line":180},[65,2578,243],{"class":154},[2418,2580,2581],{"id":2581},"画像サイズを取得する",[15,2583,2584],{},"画像のサイズは次のように取得しています。",[129,2586,2588],{"className":131,"code":2587,"filename":259,"language":134,"meta":135,"style":135},"const { width, height } = this.getSize(src);\n",[124,2589,2590],{"__ignoreMap":135},[65,2591,2592,2594,2596,2599,2601,2604,2606,2608,2610,2612,2615,2617,2619,2621],{"class":140,"line":141},[65,2593,1769],{"class":168},[65,2595,287],{"class":154},[65,2597,2598],{"class":144}," width",[65,2600,230],{"class":154},[65,2602,2603],{"class":144}," height",[65,2605,293],{"class":154},[65,2607,218],{"class":168},[65,2609,1434],{"class":830},[65,2611,834],{"class":154},[65,2613,2614],{"class":200},"getSize",[65,2616,224],{"class":204},[65,2618,1816],{"class":144},[65,2620,235],{"class":204},[65,2622,155],{"class":154},[15,2624,2625,2627],{},[124,2626,2614],{},"メソッドは次のように実装されています。",[129,2629,2631],{"className":131,"code":2630,"filename":259,"language":134,"meta":135,"style":135},"private getSize(src: Exclude\u003CTextureSource, string>) {\n if (src instanceof HTMLVideoElement) {\n return { width: src.videoWidth, height: src.videoHeight };\n }\n\n return { width: src.width, height: src.height };\n}\n",[124,2632,2633,2664,2680,2714,2718,2722,2753],{"__ignoreMap":135},[65,2634,2635,2637,2640,2642,2644,2646,2649,2651,2653,2655,2658,2660,2662],{"class":140,"line":141},[65,2636,1808],{"class":144},[65,2638,2639],{"class":200}," getSize",[65,2641,224],{"class":204},[65,2643,1816],{"class":144},[65,2645,1819],{"class":204},[65,2647,2648],{"class":144},"Exclude",[65,2650,1830],{"class":168},[65,2652,574],{"class":144},[65,2654,230],{"class":154},[65,2656,2657],{"class":144}," string",[65,2659,1836],{"class":168},[65,2661,1713],{"class":204},[65,2663,208],{"class":154},[65,2665,2666,2668,2670,2672,2674,2676,2678],{"class":140,"line":158},[65,2667,2064],{"class":154},[65,2669,1696],{"class":204},[65,2671,1816],{"class":214},[65,2673,858],{"class":168},[65,2675,359],{"class":326},[65,2677,1713],{"class":204},[65,2679,208],{"class":154},[65,2681,2682,2685,2687,2689,2691,2693,2695,2698,2700,2702,2704,2706,2708,2711],{"class":140,"line":165},[65,2683,2684],{"class":154}," return",[65,2686,287],{"class":154},[65,2688,2598],{"class":204},[65,2690,797],{"class":154},[65,2692,1916],{"class":214},[65,2694,834],{"class":154},[65,2696,2697],{"class":214},"videoWidth",[65,2699,230],{"class":154},[65,2701,2603],{"class":204},[65,2703,797],{"class":154},[65,2705,1916],{"class":214},[65,2707,834],{"class":154},[65,2709,2710],{"class":214},"videoHeight",[65,2712,2713],{"class":154}," };\n",[65,2715,2716],{"class":140,"line":180},[65,2717,1171],{"class":154},[65,2719,2720],{"class":140,"line":194},[65,2721,162],{"emptyLinePlaceholder":161},[65,2723,2724,2727,2729,2731,2733,2735,2737,2739,2741,2743,2745,2747,2749,2751],{"class":140,"line":211},[65,2725,2726],{"class":154}," return",[65,2728,287],{"class":154},[65,2730,2598],{"class":204},[65,2732,797],{"class":154},[65,2734,1916],{"class":214},[65,2736,834],{"class":154},[65,2738,735],{"class":214},[65,2740,230],{"class":154},[65,2742,2603],{"class":204},[65,2744,797],{"class":154},[65,2746,1916],{"class":214},[65,2748,834],{"class":154},[65,2750,748],{"class":214},[65,2752,2713],{"class":154},[65,2754,2755],{"class":140,"line":240},[65,2756,243],{"class":154},[15,2758,2759,2760,2762,2763,2765,2766,2768],{},"画像と動画では、サイズの取得方法が異なるため、",[124,2761,2614],{},"メソッドでそれぞれに対応しています。この",[124,2764,735],{},"と",[124,2767,748],{},"を使って、2種類のAPIを使い分けます。",[2418,2770,2772],{"id":2771},"teximage2dとtexsubimage2d","texImage2DとtexSubImage2D",[15,2774,2775],{},"画像をGPUへ転送するとき、コードでは2種類のAPIを使い分けています。",[129,2777,2779],{"className":131,"code":2778,"filename":259,"language":134,"meta":135,"style":135},"if (width !== this.width || height !== this.height) {\n this.width = width;\n this.height = height;\n gl.texImage2D(gl.TEXTURE_2D, 0, this.internalFormat, this.format, this.type, src);\n} else {\n gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, src);\n}\n",[124,2780,2781,2814,2828,2842,2895,2904,2957],{"__ignoreMap":135},[65,2782,2783,2785,2787,2789,2792,2794,2796,2798,2800,2802,2804,2806,2808,2810,2812],{"class":140,"line":141},[65,2784,1693],{"class":154},[65,2786,1696],{"class":204},[65,2788,735],{"class":144},[65,2790,2791],{"class":168}," !==",[65,2793,1434],{"class":830},[65,2795,834],{"class":154},[65,2797,735],{"class":144},[65,2799,2269],{"class":168},[65,2801,2603],{"class":144},[65,2803,2791],{"class":168},[65,2805,1434],{"class":830},[65,2807,834],{"class":154},[65,2809,748],{"class":144},[65,2811,1713],{"class":204},[65,2813,208],{"class":154},[65,2815,2816,2818,2820,2822,2824,2826],{"class":140,"line":158},[65,2817,1720],{"class":830},[65,2819,834],{"class":154},[65,2821,735],{"class":214},[65,2823,218],{"class":168},[65,2825,2598],{"class":214},[65,2827,155],{"class":154},[65,2829,2830,2832,2834,2836,2838,2840],{"class":140,"line":165},[65,2831,1720],{"class":830},[65,2833,834],{"class":154},[65,2835,748],{"class":214},[65,2837,218],{"class":168},[65,2839,2603],{"class":214},[65,2841,155],{"class":154},[65,2843,2844,2846,2848,2851,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873,2875,2877,2879,2881,2883,2885,2887,2889,2891,2893],{"class":140,"line":180},[65,2845,2350],{"class":214},[65,2847,834],{"class":154},[65,2849,2850],{"class":200},"texImage2D",[65,2852,224],{"class":204},[65,2854,794],{"class":214},[65,2856,834],{"class":154},[65,2858,1309],{"class":214},[65,2860,230],{"class":154},[65,2862,1142],{"class":793},[65,2864,230],{"class":154},[65,2866,1434],{"class":830},[65,2868,834],{"class":154},[65,2870,710],{"class":214},[65,2872,230],{"class":154},[65,2874,1434],{"class":830},[65,2876,834],{"class":154},[65,2878,697],{"class":214},[65,2880,230],{"class":154},[65,2882,1434],{"class":830},[65,2884,834],{"class":154},[65,2886,722],{"class":214},[65,2888,230],{"class":154},[65,2890,1916],{"class":214},[65,2892,235],{"class":204},[65,2894,155],{"class":154},[65,2896,2897,2900,2902],{"class":140,"line":194},[65,2898,2899],{"class":154},"}",[65,2901,2115],{"class":154},[65,2903,418],{"class":154},[65,2905,2906,2908,2910,2913,2915,2917,2919,2921,2923,2925,2927,2929,2931,2933,2935,2937,2939,2941,2943,2945,2947,2949,2951,2953,2955],{"class":140,"line":211},[65,2907,2350],{"class":214},[65,2909,834],{"class":154},[65,2911,2912],{"class":200},"texSubImage2D",[65,2914,224],{"class":204},[65,2916,794],{"class":214},[65,2918,834],{"class":154},[65,2920,1309],{"class":214},[65,2922,230],{"class":154},[65,2924,1142],{"class":793},[65,2926,230],{"class":154},[65,2928,1142],{"class":793},[65,2930,230],{"class":154},[65,2932,1142],{"class":793},[65,2934,230],{"class":154},[65,2936,1434],{"class":830},[65,2938,834],{"class":154},[65,2940,697],{"class":214},[65,2942,230],{"class":154},[65,2944,1434],{"class":830},[65,2946,834],{"class":154},[65,2948,722],{"class":214},[65,2950,230],{"class":154},[65,2952,1916],{"class":214},[65,2954,235],{"class":204},[65,2956,155],{"class":154},[65,2958,2959],{"class":140,"line":240},[65,2960,243],{"class":154},[15,2962,2963,2965],{},[124,2964,2850],{},"は、テクスチャの画像データを新しく設定するときに使用します。この判定は、画像のサイズが前回と異なる場合に行われます。",[15,2967,2968,2969,2971,2972,2974],{},"一方、",[124,2970,2912],{},"は、既存のテクスチャの一部を更新するときに使用します。サイズが変わらない場合は、",[124,2973,2912],{},"を使うことで効率的にGPUのメモリを更新できます。特に動画テクスチャの更新では、この方法が有効になります。",[2418,2976,2978],{"id":2977},"画像ではmipmapを生成する","画像ではMipmapを生成する",[15,2980,2981],{},"画像テクスチャの場合、通常はMipmapを生成して、異なる解像度での描画を効率化します。Mipmapは、テクスチャの縮小版を自動的に生成する仕組みです。",[129,2983,2985],{"className":131,"code":2984,"filename":259,"language":134,"meta":135,"style":135},"if (this.generateMipmaps && !isVideo) {\n gl.generateMipmap(gl.TEXTURE_2D);\n}\n",[124,2986,2987,3010,3031],{"__ignoreMap":135},[65,2988,2989,2991,2993,2995,2997,2999,3002,3004,3006,3008],{"class":140,"line":141},[65,2990,1693],{"class":154},[65,2992,1696],{"class":204},[65,2994,2004],{"class":830},[65,2996,834],{"class":154},[65,2998,659],{"class":144},[65,3000,3001],{"class":168}," &&",[65,3003,990],{"class":168},[65,3005,993],{"class":144},[65,3007,1713],{"class":204},[65,3009,208],{"class":154},[65,3011,3012,3014,3016,3019,3021,3023,3025,3027,3029],{"class":140,"line":158},[65,3013,2350],{"class":214},[65,3015,834],{"class":154},[65,3017,3018],{"class":200},"generateMipmap",[65,3020,224],{"class":204},[65,3022,794],{"class":214},[65,3024,834],{"class":154},[65,3026,1309],{"class":214},[65,3028,235],{"class":204},[65,3030,155],{"class":154},[65,3032,3033],{"class":140,"line":165},[65,3034,243],{"class":154},[15,3036,3037],{},"動画の場合は、毎フレーム画像が変化するので、Mipmapを生成するとパフォーマンスに影響を与える可能性があります。そのため、動画テクスチャでは通常Mipmapを生成しません。",[15,3039,3040,3041,3043,3044,3051],{},"これで",[124,3042,267],{},"クラスは一通り説明しました。全コードは",[29,3045,3050],{"href":3046,"rel":3047,"target":3049},"https://github.com/nono-k/webgl-study-note/blob/main/src/lib/webgl/core/Texture.ts",[3048],"nofollow","_blank","リポジトリ","を参照してください。",[11,3053,3055],{"id":3054},"programtsへ追加","Program.tsへ追加",[15,3057,3058,3059,3062,3063,3066],{},"シェーダーのユニフォームにテクスチャを設定できるように、",[124,3060,3061],{},"Program","クラスの",[124,3064,3065],{},"setUniforms","メソッドを次のように追加しましょう。",[129,3068,3071],{"className":131,"code":3069,"filename":3070,"language":134,"meta":135,"style":135},"export class Program {\n // ...\n setUniforms() {\n // ...\n if (uniform.value.texture) {\n textureUint = textureUint + 1;\n uniform.value.update(textureUint);\n return this.setUniform(gl, location, textureUint, 'init');\n }\n }\n}\n","Program.ts",[124,3072,3073,3084,3088,3097,3101,3123,3140,3162,3200,3205,3209],{"__ignoreMap":135},[65,3074,3075,3077,3079,3082],{"class":140,"line":141},[65,3076,284],{"class":154},[65,3078,774],{"class":168},[65,3080,3081],{"class":326}," Program",[65,3083,418],{"class":154},[65,3085,3086],{"class":140,"line":158},[65,3087,783],{"class":278},[65,3089,3090,3093,3095],{"class":140,"line":165},[65,3091,3092],{"class":200}," setUniforms",[65,3094,1269],{"class":154},[65,3096,418],{"class":154},[65,3098,3099],{"class":140,"line":180},[65,3100,1572],{"class":278},[65,3102,3103,3106,3108,3110,3112,3115,3117,3119,3121],{"class":140,"line":194},[65,3104,3105],{"class":154}," if",[65,3107,1696],{"class":204},[65,3109,145],{"class":214},[65,3111,834],{"class":154},[65,3113,3114],{"class":214},"value",[65,3116,834],{"class":154},[65,3118,1280],{"class":214},[65,3120,1713],{"class":204},[65,3122,208],{"class":154},[65,3124,3125,3128,3130,3133,3135,3138],{"class":140,"line":211},[65,3126,3127],{"class":214}," textureUint",[65,3129,218],{"class":168},[65,3131,3132],{"class":214}," textureUint",[65,3134,2367],{"class":168},[65,3136,3137],{"class":793}," 1",[65,3139,155],{"class":154},[65,3141,3142,3145,3147,3149,3151,3153,3155,3158,3160],{"class":140,"line":240},[65,3143,3144],{"class":214}," uniform",[65,3146,834],{"class":154},[65,3148,3114],{"class":214},[65,3150,834],{"class":154},[65,3152,2163],{"class":200},[65,3154,224],{"class":204},[65,3156,3157],{"class":214},"textureUint",[65,3159,235],{"class":204},[65,3161,155],{"class":154},[65,3163,3164,3167,3169,3171,3174,3176,3178,3180,3183,3185,3187,3189,3191,3194,3196,3198],{"class":140,"line":391},[65,3165,3166],{"class":154}," return",[65,3168,1434],{"class":830},[65,3170,834],{"class":154},[65,3172,3173],{"class":200},"setUniform",[65,3175,224],{"class":204},[65,3177,794],{"class":214},[65,3179,230],{"class":154},[65,3181,3182],{"class":214}," location",[65,3184,230],{"class":154},[65,3186,3132],{"class":214},[65,3188,230],{"class":154},[65,3190,299],{"class":154},[65,3192,3193],{"class":302},"init",[65,3195,306],{"class":154},[65,3197,235],{"class":204},[65,3199,155],{"class":154},[65,3201,3202],{"class":140,"line":401},[65,3203,3204],{"class":154}," }\n",[65,3206,3207],{"class":140,"line":406},[65,3208,1171],{"class":154},[65,3210,3211],{"class":140,"line":421},[65,3212,243],{"class":154},[15,3214,3215],{},"画像と動画を描画する準備はこれで整いました。次に、実際に描画するコードを見ていきましょう。",[11,3217,3218],{"id":3218},"画像と動画を描画する",[15,3220,3221],{},[57,3222],{"alt":3223,"src":3224,"title":3223},"画像と動画の描画","https://res.cloudinary.com/dy8ftemi0/image/upload/v1789718677/webgl-image-video-texture-01_hgqv2g.jpg",[3226,3227],"link-btn",{"href":3228},"https://nono-k.github.io/webgl-study-note/webgl/texture/",[15,3230,3231],{},"デモの全コードは次のようになります。",[3233,3234,3235,3239],"details",{},[3236,3237,3238],"summary",{},"画像と動画の描画方法",[36,3240,3241],{},[129,3242,3245],{"className":131,"code":3243,"filename":3244,"language":134,"meta":135,"style":135},"import image from '@/assets/images/autumn.jpg';\nimport video from '@/assets/video/video-01.mp4';\nimport { Box, Camera, Mesh, Orbit, Plane, Program, Render, Scene, Texture } from '@/lib/webgl';\nimport fragment from './index.frag?raw';\nimport vertex from './index.vert?raw';\n\nexport const onload = () => {\n const canvas = document.getElementById('webgl-canvas') as HTMLCanvasElement;\n const render = new Render(canvas);\n render.fitScreen();\n const gl = render.gl;\n gl.clearColor(1.0, 1.0, 1.0, 1.0);\n gl.enable(gl.DEPTH_TEST);\n\n const camera = new Camera(gl, { fov: 45, near: 0.1, far: 100 });\n camera.position.set(1, 1, 4);\n camera.lookAt([0, 0, 0]);\n\n const controls = new Orbit(camera);\n\n const scene = new Scene();\n\n const planeGeometry = new Plane(gl, { width: 3, height: 2 });\n const imageTexture = new Texture(gl, image.src);\n\n const program = new Program(gl, {\n vertex,\n fragment,\n uniforms: {\n uTexture: { value: imageTexture },\n },\n });\n\n const plane = new Mesh(gl, { geometry: planeGeometry, program });\n plane.position.set(-2, 0, 0);\n scene.add(plane);\n\n const boxGeometry = new Box(gl, { width: 1.5, height: 1.5, depth: 1.5 });\n\n const videoElement = document.createElement('video') as HTMLVideoElement;\n videoElement.src = video;\n videoElement.loop = true;\n videoElement.muted = true;\n videoElement.setAttribute('playsinline', 'playsinline');\n videoElement.play();\n\n const videoTexture = new Texture(gl, videoElement);\n\n const videoProgram = new Program(gl, {\n vertex,\n fragment,\n uniforms: {\n uTexture: { value: videoTexture },\n },\n });\n\n const box = new Mesh(gl, { geometry: boxGeometry, program: videoProgram });\n box.rotation.set(-Math.PI / 4, Math.PI / 4, 0);\n box.position.set(1.5, 0, -2);\n scene.add(box);\n\n const update = () => {\n box.rotation.y += 0.005;\n box.rotation.x += 0.005;\n\n render.render({ scene, camera });\n\n controls.update();\n\n requestAnimationFrame(update);\n };\n\n update();\n\n const resize = () => {\n render.setSize(window.innerWidth, window.innerHeight);\n camera.perspective({ aspect: gl.canvas.width / gl.canvas.height });\n };\n window.addEventListener('resize', resize);\n resize();\n};\n","render.ts",[124,3246,3247,3266,3284,3344,3362,3380,3384,3402,3437,3459,3473,3489,3520,3542,3546,3601,3634,3661,3665,3687,3691,3708,3712,3755,3785,3790,3812,3821,3829,3839,3859,3865,3874,3879,3918,3952,3972,3977,4029,4034,4068,4084,4100,4116,4147,4161,4166,4192,4197,4219,4226,4233,4242,4259,4264,4273,4278,4320,4373,4406,4424,4429,4445,4468,4488,4493,4521,4526,4540,4545,4559,4565,4570,4580,4585,4601,4635,4683,4688,4716,4726],{"__ignoreMap":135},[65,3248,3249,3252,3255,3257,3259,3262,3264],{"class":140,"line":141},[65,3250,3251],{"class":154},"import",[65,3253,3254],{"class":144}," image",[65,3256,296],{"class":154},[65,3258,299],{"class":154},[65,3260,3261],{"class":302},"@/assets/images/autumn.jpg",[65,3263,306],{"class":154},[65,3265,155],{"class":154},[65,3267,3268,3270,3273,3275,3277,3280,3282],{"class":140,"line":158},[65,3269,3251],{"class":154},[65,3271,3272],{"class":144}," video",[65,3274,296],{"class":154},[65,3276,299],{"class":154},[65,3278,3279],{"class":302},"@/assets/video/video-01.mp4",[65,3281,306],{"class":154},[65,3283,155],{"class":154},[65,3285,3286,3288,3290,3293,3295,3298,3300,3303,3305,3308,3310,3313,3315,3317,3319,3322,3324,3327,3329,3331,3333,3335,3337,3340,3342],{"class":140,"line":165},[65,3287,3251],{"class":154},[65,3289,287],{"class":154},[65,3291,3292],{"class":214}," Box",[65,3294,230],{"class":154},[65,3296,3297],{"class":214}," Camera",[65,3299,230],{"class":154},[65,3301,3302],{"class":214}," Mesh",[65,3304,230],{"class":154},[65,3306,3307],{"class":214}," Orbit",[65,3309,230],{"class":154},[65,3311,3312],{"class":214}," Plane",[65,3314,230],{"class":154},[65,3316,3081],{"class":214},[65,3318,230],{"class":154},[65,3320,3321],{"class":214}," Render",[65,3323,230],{"class":154},[65,3325,3326],{"class":214}," Scene",[65,3328,230],{"class":154},[65,3330,290],{"class":214},[65,3332,293],{"class":154},[65,3334,296],{"class":154},[65,3336,299],{"class":154},[65,3338,3339],{"class":302},"@/lib/webgl",[65,3341,306],{"class":154},[65,3343,155],{"class":154},[65,3345,3346,3348,3351,3353,3355,3358,3360],{"class":140,"line":180},[65,3347,3251],{"class":154},[65,3349,3350],{"class":144}," fragment",[65,3352,296],{"class":154},[65,3354,299],{"class":154},[65,3356,3357],{"class":302},"./index.frag?raw",[65,3359,306],{"class":154},[65,3361,155],{"class":154},[65,3363,3364,3366,3369,3371,3373,3376,3378],{"class":140,"line":194},[65,3365,3251],{"class":154},[65,3367,3368],{"class":144}," vertex",[65,3370,296],{"class":154},[65,3372,299],{"class":154},[65,3374,3375],{"class":302},"./index.vert?raw",[65,3377,306],{"class":154},[65,3379,155],{"class":154},[65,3381,3382],{"class":140,"line":211},[65,3383,162],{"emptyLinePlaceholder":161},[65,3385,3386,3388,3391,3394,3396,3398,3400],{"class":140,"line":240},[65,3387,284],{"class":154},[65,3389,3390],{"class":168}," const",[65,3392,3393],{"class":200}," onload",[65,3395,218],{"class":168},[65,3397,1932],{"class":154},[65,3399,1862],{"class":168},[65,3401,418],{"class":154},[65,3403,3404,3406,3409,3411,3414,3416,3419,3421,3423,3426,3428,3430,3433,3435],{"class":140,"line":391},[65,3405,2243],{"class":168},[65,3407,3408],{"class":214}," canvas",[65,3410,218],{"class":168},[65,3412,3413],{"class":214}," document",[65,3415,834],{"class":154},[65,3417,3418],{"class":200},"getElementById",[65,3420,224],{"class":204},[65,3422,306],{"class":154},[65,3424,3425],{"class":302},"webgl-canvas",[65,3427,306],{"class":154},[65,3429,1713],{"class":204},[65,3431,3432],{"class":154},"as",[65,3434,368],{"class":326},[65,3436,155],{"class":154},[65,3438,3439,3441,3444,3446,3448,3450,3452,3455,3457],{"class":140,"line":401},[65,3440,2243],{"class":168},[65,3442,3443],{"class":214}," render",[65,3445,218],{"class":168},[65,3447,1776],{"class":168},[65,3449,3321],{"class":200},[65,3451,224],{"class":204},[65,3453,3454],{"class":214},"canvas",[65,3456,235],{"class":204},[65,3458,155],{"class":154},[65,3460,3461,3464,3466,3469,3471],{"class":140,"line":406},[65,3462,3463],{"class":214}," render",[65,3465,834],{"class":154},[65,3467,3468],{"class":200},"fitScreen",[65,3470,1269],{"class":204},[65,3472,155],{"class":154},[65,3474,3475,3477,3479,3481,3483,3485,3487],{"class":140,"line":421},[65,3476,2243],{"class":168},[65,3478,841],{"class":214},[65,3480,218],{"class":168},[65,3482,3443],{"class":214},[65,3484,834],{"class":154},[65,3486,794],{"class":214},[65,3488,155],{"class":154},[65,3490,3491,3493,3495,3498,3500,3503,3505,3508,3510,3512,3514,3516,3518],{"class":140,"line":435},[65,3492,2350],{"class":214},[65,3494,834],{"class":154},[65,3496,3497],{"class":200},"clearColor",[65,3499,224],{"class":204},[65,3501,3502],{"class":793},"1.0",[65,3504,230],{"class":154},[65,3506,3507],{"class":793}," 1.0",[65,3509,230],{"class":154},[65,3511,3507],{"class":793},[65,3513,230],{"class":154},[65,3515,3507],{"class":793},[65,3517,235],{"class":204},[65,3519,155],{"class":154},[65,3521,3522,3524,3526,3529,3531,3533,3535,3538,3540],{"class":140,"line":447},[65,3523,2350],{"class":214},[65,3525,834],{"class":154},[65,3527,3528],{"class":200},"enable",[65,3530,224],{"class":204},[65,3532,794],{"class":214},[65,3534,834],{"class":154},[65,3536,3537],{"class":214},"DEPTH_TEST",[65,3539,235],{"class":204},[65,3541,155],{"class":154},[65,3543,3544],{"class":140,"line":459},[65,3545,162],{"emptyLinePlaceholder":161},[65,3547,3548,3550,3553,3555,3557,3559,3561,3563,3565,3567,3570,3572,3575,3577,3580,3582,3585,3587,3590,3592,3595,3597,3599],{"class":140,"line":471},[65,3549,2243],{"class":168},[65,3551,3552],{"class":214}," camera",[65,3554,218],{"class":168},[65,3556,1776],{"class":168},[65,3558,3297],{"class":200},[65,3560,224],{"class":204},[65,3562,794],{"class":214},[65,3564,230],{"class":154},[65,3566,287],{"class":154},[65,3568,3569],{"class":204}," fov",[65,3571,797],{"class":154},[65,3573,3574],{"class":793}," 45",[65,3576,230],{"class":154},[65,3578,3579],{"class":204}," near",[65,3581,797],{"class":154},[65,3583,3584],{"class":793}," 0.1",[65,3586,230],{"class":154},[65,3588,3589],{"class":204}," far",[65,3591,797],{"class":154},[65,3593,3594],{"class":793}," 100",[65,3596,293],{"class":154},[65,3598,235],{"class":204},[65,3600,155],{"class":154},[65,3602,3603,3606,3608,3611,3613,3616,3618,3621,3623,3625,3627,3630,3632],{"class":140,"line":63},[65,3604,3605],{"class":214}," camera",[65,3607,834],{"class":154},[65,3609,3610],{"class":214},"position",[65,3612,834],{"class":154},[65,3614,3615],{"class":200},"set",[65,3617,224],{"class":204},[65,3619,3620],{"class":793},"1",[65,3622,230],{"class":154},[65,3624,3137],{"class":793},[65,3626,230],{"class":154},[65,3628,3629],{"class":793}," 4",[65,3631,235],{"class":204},[65,3633,155],{"class":154},[65,3635,3636,3638,3640,3643,3646,3648,3650,3652,3654,3656,3659],{"class":140,"line":495},[65,3637,3605],{"class":214},[65,3639,834],{"class":154},[65,3641,3642],{"class":200},"lookAt",[65,3644,3645],{"class":204},"([",[65,3647,743],{"class":793},[65,3649,230],{"class":154},[65,3651,1142],{"class":793},[65,3653,230],{"class":154},[65,3655,1142],{"class":793},[65,3657,3658],{"class":204},"])",[65,3660,155],{"class":154},[65,3662,3663],{"class":140,"line":507},[65,3664,162],{"emptyLinePlaceholder":161},[65,3666,3667,3669,3672,3674,3676,3678,3680,3683,3685],{"class":140,"line":519},[65,3668,2243],{"class":168},[65,3670,3671],{"class":214}," controls",[65,3673,218],{"class":168},[65,3675,1776],{"class":168},[65,3677,3307],{"class":200},[65,3679,224],{"class":204},[65,3681,3682],{"class":214},"camera",[65,3684,235],{"class":204},[65,3686,155],{"class":154},[65,3688,3689],{"class":140,"line":531},[65,3690,162],{"emptyLinePlaceholder":161},[65,3692,3693,3695,3698,3700,3702,3704,3706],{"class":140,"line":543},[65,3694,2243],{"class":168},[65,3696,3697],{"class":214}," scene",[65,3699,218],{"class":168},[65,3701,1776],{"class":168},[65,3703,3326],{"class":200},[65,3705,1269],{"class":204},[65,3707,155],{"class":154},[65,3709,3710],{"class":140,"line":555},[65,3711,162],{"emptyLinePlaceholder":161},[65,3713,3714,3716,3719,3721,3723,3725,3727,3729,3731,3733,3735,3737,3740,3742,3744,3746,3749,3751,3753],{"class":140,"line":567},[65,3715,2243],{"class":168},[65,3717,3718],{"class":214}," planeGeometry",[65,3720,218],{"class":168},[65,3722,1776],{"class":168},[65,3724,3312],{"class":200},[65,3726,224],{"class":204},[65,3728,794],{"class":214},[65,3730,230],{"class":154},[65,3732,287],{"class":154},[65,3734,2598],{"class":204},[65,3736,797],{"class":154},[65,3738,3739],{"class":793}," 3",[65,3741,230],{"class":154},[65,3743,2603],{"class":204},[65,3745,797],{"class":154},[65,3747,3748],{"class":793}," 2",[65,3750,293],{"class":154},[65,3752,235],{"class":204},[65,3754,155],{"class":154},[65,3756,3758,3760,3763,3765,3767,3769,3771,3773,3775,3777,3779,3781,3783],{"class":140,"line":3757},24,[65,3759,2243],{"class":168},[65,3761,3762],{"class":214}," imageTexture",[65,3764,218],{"class":168},[65,3766,1776],{"class":168},[65,3768,290],{"class":200},[65,3770,224],{"class":204},[65,3772,794],{"class":214},[65,3774,230],{"class":154},[65,3776,3254],{"class":214},[65,3778,834],{"class":154},[65,3780,1816],{"class":214},[65,3782,235],{"class":204},[65,3784,155],{"class":154},[65,3786,3788],{"class":140,"line":3787},25,[65,3789,162],{"emptyLinePlaceholder":161},[65,3791,3793,3795,3798,3800,3802,3804,3806,3808,3810],{"class":140,"line":3792},26,[65,3794,2243],{"class":168},[65,3796,3797],{"class":214}," program",[65,3799,218],{"class":168},[65,3801,1776],{"class":168},[65,3803,3081],{"class":200},[65,3805,224],{"class":204},[65,3807,794],{"class":214},[65,3809,230],{"class":154},[65,3811,418],{"class":154},[65,3813,3815,3818],{"class":140,"line":3814},27,[65,3816,3817],{"class":214}," vertex",[65,3819,3820],{"class":154},",\n",[65,3822,3824,3827],{"class":140,"line":3823},28,[65,3825,3826],{"class":214}," fragment",[65,3828,3820],{"class":154},[65,3830,3832,3835,3837],{"class":140,"line":3831},29,[65,3833,3834],{"class":204}," uniforms",[65,3836,797],{"class":154},[65,3838,418],{"class":154},[65,3840,3842,3845,3847,3849,3852,3854,3856],{"class":140,"line":3841},30,[65,3843,3844],{"class":204}," uTexture",[65,3846,797],{"class":154},[65,3848,287],{"class":154},[65,3850,3851],{"class":204}," value",[65,3853,797],{"class":154},[65,3855,3762],{"class":214},[65,3857,3858],{"class":154}," },\n",[65,3860,3862],{"class":140,"line":3861},31,[65,3863,3864],{"class":154}," },\n",[65,3866,3868,3870,3872],{"class":140,"line":3867},32,[65,3869,1977],{"class":154},[65,3871,235],{"class":204},[65,3873,155],{"class":154},[65,3875,3877],{"class":140,"line":3876},33,[65,3878,162],{"emptyLinePlaceholder":161},[65,3880,3882,3884,3887,3889,3891,3893,3895,3897,3899,3901,3904,3906,3908,3910,3912,3914,3916],{"class":140,"line":3881},34,[65,3883,2243],{"class":168},[65,3885,3886],{"class":214}," plane",[65,3888,218],{"class":168},[65,3890,1776],{"class":168},[65,3892,3302],{"class":200},[65,3894,224],{"class":204},[65,3896,794],{"class":214},[65,3898,230],{"class":154},[65,3900,287],{"class":154},[65,3902,3903],{"class":204}," geometry",[65,3905,797],{"class":154},[65,3907,3718],{"class":214},[65,3909,230],{"class":154},[65,3911,3797],{"class":214},[65,3913,293],{"class":154},[65,3915,235],{"class":204},[65,3917,155],{"class":154},[65,3919,3921,3924,3926,3928,3930,3932,3934,3937,3940,3942,3944,3946,3948,3950],{"class":140,"line":3920},35,[65,3922,3923],{"class":214}," plane",[65,3925,834],{"class":154},[65,3927,3610],{"class":214},[65,3929,834],{"class":154},[65,3931,3615],{"class":200},[65,3933,224],{"class":204},[65,3935,3936],{"class":168},"-",[65,3938,3939],{"class":793},"2",[65,3941,230],{"class":154},[65,3943,1142],{"class":793},[65,3945,230],{"class":154},[65,3947,1142],{"class":793},[65,3949,235],{"class":204},[65,3951,155],{"class":154},[65,3953,3955,3958,3960,3963,3965,3968,3970],{"class":140,"line":3954},36,[65,3956,3957],{"class":214}," scene",[65,3959,834],{"class":154},[65,3961,3962],{"class":200},"add",[65,3964,224],{"class":204},[65,3966,3967],{"class":214},"plane",[65,3969,235],{"class":204},[65,3971,155],{"class":154},[65,3973,3975],{"class":140,"line":3974},37,[65,3976,162],{"emptyLinePlaceholder":161},[65,3978,3980,3982,3985,3987,3989,3991,3993,3995,3997,3999,4001,4003,4006,4008,4010,4012,4014,4016,4019,4021,4023,4025,4027],{"class":140,"line":3979},38,[65,3981,2243],{"class":168},[65,3983,3984],{"class":214}," boxGeometry",[65,3986,218],{"class":168},[65,3988,1776],{"class":168},[65,3990,3292],{"class":200},[65,3992,224],{"class":204},[65,3994,794],{"class":214},[65,3996,230],{"class":154},[65,3998,287],{"class":154},[65,4000,2598],{"class":204},[65,4002,797],{"class":154},[65,4004,4005],{"class":793}," 1.5",[65,4007,230],{"class":154},[65,4009,2603],{"class":204},[65,4011,797],{"class":154},[65,4013,4005],{"class":793},[65,4015,230],{"class":154},[65,4017,4018],{"class":204}," depth",[65,4020,797],{"class":154},[65,4022,4005],{"class":793},[65,4024,293],{"class":154},[65,4026,235],{"class":204},[65,4028,155],{"class":154},[65,4030,4032],{"class":140,"line":4031},39,[65,4033,162],{"emptyLinePlaceholder":161},[65,4035,4037,4039,4042,4044,4046,4048,4051,4053,4055,4058,4060,4062,4064,4066],{"class":140,"line":4036},40,[65,4038,2243],{"class":168},[65,4040,4041],{"class":214}," videoElement",[65,4043,218],{"class":168},[65,4045,3413],{"class":214},[65,4047,834],{"class":154},[65,4049,4050],{"class":200},"createElement",[65,4052,224],{"class":204},[65,4054,306],{"class":154},[65,4056,4057],{"class":302},"video",[65,4059,306],{"class":154},[65,4061,1713],{"class":204},[65,4063,3432],{"class":154},[65,4065,359],{"class":326},[65,4067,155],{"class":154},[65,4069,4071,4074,4076,4078,4080,4082],{"class":140,"line":4070},41,[65,4072,4073],{"class":214}," videoElement",[65,4075,834],{"class":154},[65,4077,1816],{"class":214},[65,4079,218],{"class":168},[65,4081,3272],{"class":214},[65,4083,155],{"class":154},[65,4085,4087,4089,4091,4094,4096,4098],{"class":140,"line":4086},42,[65,4088,4073],{"class":214},[65,4090,834],{"class":154},[65,4092,4093],{"class":214},"loop",[65,4095,218],{"class":168},[65,4097,1016],{"class":793},[65,4099,155],{"class":154},[65,4101,4103,4105,4107,4110,4112,4114],{"class":140,"line":4102},43,[65,4104,4073],{"class":214},[65,4106,834],{"class":154},[65,4108,4109],{"class":214},"muted",[65,4111,218],{"class":168},[65,4113,1016],{"class":793},[65,4115,155],{"class":154},[65,4117,4119,4121,4123,4126,4128,4130,4133,4135,4137,4139,4141,4143,4145],{"class":140,"line":4118},44,[65,4120,4073],{"class":214},[65,4122,834],{"class":154},[65,4124,4125],{"class":200},"setAttribute",[65,4127,224],{"class":204},[65,4129,306],{"class":154},[65,4131,4132],{"class":302},"playsinline",[65,4134,306],{"class":154},[65,4136,230],{"class":154},[65,4138,299],{"class":154},[65,4140,4132],{"class":302},[65,4142,306],{"class":154},[65,4144,235],{"class":204},[65,4146,155],{"class":154},[65,4148,4150,4152,4154,4157,4159],{"class":140,"line":4149},45,[65,4151,4073],{"class":214},[65,4153,834],{"class":154},[65,4155,4156],{"class":200},"play",[65,4158,1269],{"class":204},[65,4160,155],{"class":154},[65,4162,4164],{"class":140,"line":4163},46,[65,4165,162],{"emptyLinePlaceholder":161},[65,4167,4169,4171,4174,4176,4178,4180,4182,4184,4186,4188,4190],{"class":140,"line":4168},47,[65,4170,2243],{"class":168},[65,4172,4173],{"class":214}," videoTexture",[65,4175,218],{"class":168},[65,4177,1776],{"class":168},[65,4179,290],{"class":200},[65,4181,224],{"class":204},[65,4183,794],{"class":214},[65,4185,230],{"class":154},[65,4187,4041],{"class":214},[65,4189,235],{"class":204},[65,4191,155],{"class":154},[65,4193,4195],{"class":140,"line":4194},48,[65,4196,162],{"emptyLinePlaceholder":161},[65,4198,4200,4202,4205,4207,4209,4211,4213,4215,4217],{"class":140,"line":4199},49,[65,4201,2243],{"class":168},[65,4203,4204],{"class":214}," videoProgram",[65,4206,218],{"class":168},[65,4208,1776],{"class":168},[65,4210,3081],{"class":200},[65,4212,224],{"class":204},[65,4214,794],{"class":214},[65,4216,230],{"class":154},[65,4218,418],{"class":154},[65,4220,4222,4224],{"class":140,"line":4221},50,[65,4223,3817],{"class":214},[65,4225,3820],{"class":154},[65,4227,4229,4231],{"class":140,"line":4228},51,[65,4230,3826],{"class":214},[65,4232,3820],{"class":154},[65,4234,4236,4238,4240],{"class":140,"line":4235},52,[65,4237,3834],{"class":204},[65,4239,797],{"class":154},[65,4241,418],{"class":154},[65,4243,4245,4247,4249,4251,4253,4255,4257],{"class":140,"line":4244},53,[65,4246,3844],{"class":204},[65,4248,797],{"class":154},[65,4250,287],{"class":154},[65,4252,3851],{"class":204},[65,4254,797],{"class":154},[65,4256,4173],{"class":214},[65,4258,3858],{"class":154},[65,4260,4262],{"class":140,"line":4261},54,[65,4263,3864],{"class":154},[65,4265,4267,4269,4271],{"class":140,"line":4266},55,[65,4268,1977],{"class":154},[65,4270,235],{"class":204},[65,4272,155],{"class":154},[65,4274,4276],{"class":140,"line":4275},56,[65,4277,162],{"emptyLinePlaceholder":161},[65,4279,4281,4283,4286,4288,4290,4292,4294,4296,4298,4300,4302,4304,4306,4308,4310,4312,4314,4316,4318],{"class":140,"line":4280},57,[65,4282,2243],{"class":168},[65,4284,4285],{"class":214}," box",[65,4287,218],{"class":168},[65,4289,1776],{"class":168},[65,4291,3302],{"class":200},[65,4293,224],{"class":204},[65,4295,794],{"class":214},[65,4297,230],{"class":154},[65,4299,287],{"class":154},[65,4301,3903],{"class":204},[65,4303,797],{"class":154},[65,4305,3984],{"class":214},[65,4307,230],{"class":154},[65,4309,3797],{"class":204},[65,4311,797],{"class":154},[65,4313,4204],{"class":214},[65,4315,293],{"class":154},[65,4317,235],{"class":204},[65,4319,155],{"class":154},[65,4321,4323,4326,4328,4331,4333,4335,4337,4339,4342,4344,4347,4350,4352,4354,4357,4359,4361,4363,4365,4367,4369,4371],{"class":140,"line":4322},58,[65,4324,4325],{"class":214}," box",[65,4327,834],{"class":154},[65,4329,4330],{"class":214},"rotation",[65,4332,834],{"class":154},[65,4334,3615],{"class":200},[65,4336,224],{"class":204},[65,4338,3936],{"class":168},[65,4340,4341],{"class":214},"Math",[65,4343,834],{"class":154},[65,4345,4346],{"class":214},"PI",[65,4348,4349],{"class":168}," /",[65,4351,3629],{"class":793},[65,4353,230],{"class":154},[65,4355,4356],{"class":214}," Math",[65,4358,834],{"class":154},[65,4360,4346],{"class":214},[65,4362,4349],{"class":168},[65,4364,3629],{"class":793},[65,4366,230],{"class":154},[65,4368,1142],{"class":793},[65,4370,235],{"class":204},[65,4372,155],{"class":154},[65,4374,4376,4378,4380,4382,4384,4386,4388,4391,4393,4395,4397,4400,4402,4404],{"class":140,"line":4375},59,[65,4377,4325],{"class":214},[65,4379,834],{"class":154},[65,4381,3610],{"class":214},[65,4383,834],{"class":154},[65,4385,3615],{"class":200},[65,4387,224],{"class":204},[65,4389,4390],{"class":793},"1.5",[65,4392,230],{"class":154},[65,4394,1142],{"class":793},[65,4396,230],{"class":154},[65,4398,4399],{"class":168}," -",[65,4401,3939],{"class":793},[65,4403,235],{"class":204},[65,4405,155],{"class":154},[65,4407,4409,4411,4413,4415,4417,4420,4422],{"class":140,"line":4408},60,[65,4410,3957],{"class":214},[65,4412,834],{"class":154},[65,4414,3962],{"class":200},[65,4416,224],{"class":204},[65,4418,4419],{"class":214},"box",[65,4421,235],{"class":204},[65,4423,155],{"class":154},[65,4425,4427],{"class":140,"line":4426},61,[65,4428,162],{"emptyLinePlaceholder":161},[65,4430,4432,4434,4437,4439,4441,4443],{"class":140,"line":4431},62,[65,4433,2243],{"class":168},[65,4435,4436],{"class":200}," update",[65,4438,218],{"class":168},[65,4440,1932],{"class":154},[65,4442,1862],{"class":168},[65,4444,418],{"class":154},[65,4446,4448,4451,4453,4455,4457,4460,4463,4466],{"class":140,"line":4447},63,[65,4449,4450],{"class":214}," box",[65,4452,834],{"class":154},[65,4454,4330],{"class":214},[65,4456,834],{"class":154},[65,4458,4459],{"class":214},"y",[65,4461,4462],{"class":168}," +=",[65,4464,4465],{"class":793}," 0.005",[65,4467,155],{"class":154},[65,4469,4471,4473,4475,4477,4479,4482,4484,4486],{"class":140,"line":4470},64,[65,4472,4450],{"class":214},[65,4474,834],{"class":154},[65,4476,4330],{"class":214},[65,4478,834],{"class":154},[65,4480,4481],{"class":214},"x",[65,4483,4462],{"class":168},[65,4485,4465],{"class":793},[65,4487,155],{"class":154},[65,4489,4491],{"class":140,"line":4490},65,[65,4492,162],{"emptyLinePlaceholder":161},[65,4494,4496,4499,4501,4504,4506,4509,4511,4513,4515,4517,4519],{"class":140,"line":4495},66,[65,4497,4498],{"class":214}," render",[65,4500,834],{"class":154},[65,4502,4503],{"class":200},"render",[65,4505,224],{"class":204},[65,4507,4508],{"class":154},"{",[65,4510,3697],{"class":214},[65,4512,230],{"class":154},[65,4514,3552],{"class":214},[65,4516,293],{"class":154},[65,4518,235],{"class":204},[65,4520,155],{"class":154},[65,4522,4524],{"class":140,"line":4523},67,[65,4525,162],{"emptyLinePlaceholder":161},[65,4527,4529,4532,4534,4536,4538],{"class":140,"line":4528},68,[65,4530,4531],{"class":214}," controls",[65,4533,834],{"class":154},[65,4535,2163],{"class":200},[65,4537,1269],{"class":204},[65,4539,155],{"class":154},[65,4541,4543],{"class":140,"line":4542},69,[65,4544,162],{"emptyLinePlaceholder":161},[65,4546,4548,4551,4553,4555,4557],{"class":140,"line":4547},70,[65,4549,4550],{"class":200}," requestAnimationFrame",[65,4552,224],{"class":204},[65,4554,2163],{"class":214},[65,4556,235],{"class":204},[65,4558,155],{"class":154},[65,4560,4562],{"class":140,"line":4561},71,[65,4563,4564],{"class":154}," };\n",[65,4566,4568],{"class":140,"line":4567},72,[65,4569,162],{"emptyLinePlaceholder":161},[65,4571,4573,4576,4578],{"class":140,"line":4572},73,[65,4574,4575],{"class":200}," update",[65,4577,1269],{"class":204},[65,4579,155],{"class":154},[65,4581,4583],{"class":140,"line":4582},74,[65,4584,162],{"emptyLinePlaceholder":161},[65,4586,4588,4590,4593,4595,4597,4599],{"class":140,"line":4587},75,[65,4589,2243],{"class":168},[65,4591,4592],{"class":200}," resize",[65,4594,218],{"class":168},[65,4596,1932],{"class":154},[65,4598,1862],{"class":168},[65,4600,418],{"class":154},[65,4602,4604,4606,4608,4611,4613,4616,4618,4621,4623,4626,4628,4631,4633],{"class":140,"line":4603},76,[65,4605,4498],{"class":214},[65,4607,834],{"class":154},[65,4609,4610],{"class":200},"setSize",[65,4612,224],{"class":204},[65,4614,4615],{"class":214},"window",[65,4617,834],{"class":154},[65,4619,4620],{"class":214},"innerWidth",[65,4622,230],{"class":154},[65,4624,4625],{"class":214}," window",[65,4627,834],{"class":154},[65,4629,4630],{"class":214},"innerHeight",[65,4632,235],{"class":204},[65,4634,155],{"class":154},[65,4636,4638,4641,4643,4646,4648,4650,4653,4655,4657,4659,4661,4663,4665,4667,4669,4671,4673,4675,4677,4679,4681],{"class":140,"line":4637},77,[65,4639,4640],{"class":214}," camera",[65,4642,834],{"class":154},[65,4644,4645],{"class":200},"perspective",[65,4647,224],{"class":204},[65,4649,4508],{"class":154},[65,4651,4652],{"class":204}," aspect",[65,4654,797],{"class":154},[65,4656,841],{"class":214},[65,4658,834],{"class":154},[65,4660,3454],{"class":214},[65,4662,834],{"class":154},[65,4664,735],{"class":214},[65,4666,4349],{"class":168},[65,4668,841],{"class":214},[65,4670,834],{"class":154},[65,4672,3454],{"class":214},[65,4674,834],{"class":154},[65,4676,748],{"class":214},[65,4678,293],{"class":154},[65,4680,235],{"class":204},[65,4682,155],{"class":154},[65,4684,4686],{"class":140,"line":4685},78,[65,4687,4564],{"class":154},[65,4689,4691,4694,4696,4699,4701,4703,4706,4708,4710,4712,4714],{"class":140,"line":4690},79,[65,4692,4693],{"class":214}," window",[65,4695,834],{"class":154},[65,4697,4698],{"class":200},"addEventListener",[65,4700,224],{"class":204},[65,4702,306],{"class":154},[65,4704,4705],{"class":302},"resize",[65,4707,306],{"class":154},[65,4709,230],{"class":154},[65,4711,4592],{"class":214},[65,4713,235],{"class":204},[65,4715,155],{"class":154},[65,4717,4719,4722,4724],{"class":140,"line":4718},80,[65,4720,4721],{"class":200}," resize",[65,4723,1269],{"class":204},[65,4725,155],{"class":154},[65,4727,4729],{"class":140,"line":4728},81,[65,4730,4731],{"class":154},"};\n",[15,4733,4734],{},"デモでは、平面(Plane)に画像を、立方体(Box)に動画をテクスチャとして貼り付けて描画しています。",[15,4736,4737],{},"平面(Plane)に画像を貼り付けるコードは次のようになります。",[129,4739,4741],{"className":131,"code":4740,"filename":3244,"language":134,"meta":135,"style":135},"const planeGeometry = new Plane(gl, { width: 3, height: 2 });\nconst imageTexture = new Texture(gl, image.src);\n\nconst program = new Program(gl, {\n vertex,\n fragment,\n uniforms: {\n uTexture: { value: imageTexture },\n },\n});\n\nconst plane = new Mesh(gl, { geometry: planeGeometry, program });\nscene.add(plane);\n",[124,4742,4743,4783,4811,4815,4835,4842,4849,4858,4875,4880,4888,4892,4928],{"__ignoreMap":135},[65,4744,4745,4747,4749,4751,4753,4755,4757,4759,4761,4763,4765,4767,4769,4771,4773,4775,4777,4779,4781],{"class":140,"line":141},[65,4746,1769],{"class":168},[65,4748,3718],{"class":144},[65,4750,218],{"class":168},[65,4752,1776],{"class":168},[65,4754,3312],{"class":200},[65,4756,224],{"class":204},[65,4758,794],{"class":144},[65,4760,230],{"class":154},[65,4762,287],{"class":154},[65,4764,2598],{"class":204},[65,4766,797],{"class":154},[65,4768,3739],{"class":793},[65,4770,230],{"class":154},[65,4772,2603],{"class":204},[65,4774,797],{"class":154},[65,4776,3748],{"class":793},[65,4778,293],{"class":154},[65,4780,235],{"class":204},[65,4782,155],{"class":154},[65,4784,4785,4787,4789,4791,4793,4795,4797,4799,4801,4803,4805,4807,4809],{"class":140,"line":158},[65,4786,1769],{"class":168},[65,4788,3762],{"class":144},[65,4790,218],{"class":168},[65,4792,1776],{"class":168},[65,4794,290],{"class":200},[65,4796,224],{"class":204},[65,4798,794],{"class":144},[65,4800,230],{"class":154},[65,4802,3254],{"class":144},[65,4804,834],{"class":154},[65,4806,1816],{"class":144},[65,4808,235],{"class":204},[65,4810,155],{"class":154},[65,4812,4813],{"class":140,"line":165},[65,4814,162],{"emptyLinePlaceholder":161},[65,4816,4817,4819,4821,4823,4825,4827,4829,4831,4833],{"class":140,"line":180},[65,4818,1769],{"class":168},[65,4820,3797],{"class":144},[65,4822,218],{"class":168},[65,4824,1776],{"class":168},[65,4826,3081],{"class":200},[65,4828,224],{"class":204},[65,4830,794],{"class":144},[65,4832,230],{"class":154},[65,4834,418],{"class":154},[65,4836,4837,4840],{"class":140,"line":194},[65,4838,4839],{"class":144}," vertex",[65,4841,3820],{"class":154},[65,4843,4844,4847],{"class":140,"line":211},[65,4845,4846],{"class":144}," fragment",[65,4848,3820],{"class":154},[65,4850,4851,4854,4856],{"class":140,"line":240},[65,4852,4853],{"class":204}," uniforms",[65,4855,797],{"class":154},[65,4857,418],{"class":154},[65,4859,4860,4863,4865,4867,4869,4871,4873],{"class":140,"line":391},[65,4861,4862],{"class":204}," uTexture",[65,4864,797],{"class":154},[65,4866,287],{"class":154},[65,4868,3851],{"class":204},[65,4870,797],{"class":154},[65,4872,3762],{"class":144},[65,4874,3858],{"class":154},[65,4876,4877],{"class":140,"line":401},[65,4878,4879],{"class":154}," },\n",[65,4881,4882,4884,4886],{"class":140,"line":406},[65,4883,2899],{"class":154},[65,4885,235],{"class":204},[65,4887,155],{"class":154},[65,4889,4890],{"class":140,"line":421},[65,4891,162],{"emptyLinePlaceholder":161},[65,4893,4894,4896,4898,4900,4902,4904,4906,4908,4910,4912,4914,4916,4918,4920,4922,4924,4926],{"class":140,"line":435},[65,4895,1769],{"class":168},[65,4897,3886],{"class":144},[65,4899,218],{"class":168},[65,4901,1776],{"class":168},[65,4903,3302],{"class":200},[65,4905,224],{"class":204},[65,4907,794],{"class":144},[65,4909,230],{"class":154},[65,4911,287],{"class":154},[65,4913,3903],{"class":204},[65,4915,797],{"class":154},[65,4917,3718],{"class":144},[65,4919,230],{"class":154},[65,4921,3797],{"class":144},[65,4923,293],{"class":154},[65,4925,235],{"class":204},[65,4927,155],{"class":154},[65,4929,4930,4933,4935,4937,4939,4941,4943],{"class":140,"line":447},[65,4931,4932],{"class":144},"scene",[65,4934,834],{"class":154},[65,4936,3962],{"class":200},[65,4938,224],{"class":204},[65,4940,3967],{"class":144},[65,4942,235],{"class":204},[65,4944,155],{"class":154},[15,4946,4947,4948,4950],{},"画像読み込みの処理は、解説したとおり",[124,4949,267],{},"の内部で行っているので、画像のパスを指定するだけでテクスチャとして利用できます。",[15,4952,4953],{},"立方体(Box)に動画を貼り付けるコードは次のようになります。",[129,4955,4957],{"className":131,"code":4956,"filename":3244,"language":134,"meta":135,"style":135},"const boxGeometry = new Box(gl, { width: 1.5, height: 1.5, depth: 1.5 });\n\nconst videoElement = document.createElement('video') as HTMLVideoElement;\nvideoElement.src = video;\nvideoElement.loop = true;\nvideoElement.muted = true;\nvideoElement.setAttribute('playsinline', 'playsinline');\nvideoElement.play();\n\nconst videoTexture = new Texture(gl, videoElement);\n\nconst videoProgram = new Program(gl, {\n vertex,\n fragment,\n uniforms: {\n uTexture: { value: videoTexture },\n },\n});\n\nconst box = new Mesh(gl, { geometry: boxGeometry, program: videoProgram });\nscene.add(box);\n",[124,4958,4959,5007,5011,5041,5056,5070,5084,5112,5124,5128,5152,5156,5176,5182,5188,5196,5212,5216,5224,5228,5268],{"__ignoreMap":135},[65,4960,4961,4963,4965,4967,4969,4971,4973,4975,4977,4979,4981,4983,4985,4987,4989,4991,4993,4995,4997,4999,5001,5003,5005],{"class":140,"line":141},[65,4962,1769],{"class":168},[65,4964,3984],{"class":144},[65,4966,218],{"class":168},[65,4968,1776],{"class":168},[65,4970,3292],{"class":200},[65,4972,224],{"class":204},[65,4974,794],{"class":144},[65,4976,230],{"class":154},[65,4978,287],{"class":154},[65,4980,2598],{"class":204},[65,4982,797],{"class":154},[65,4984,4005],{"class":793},[65,4986,230],{"class":154},[65,4988,2603],{"class":204},[65,4990,797],{"class":154},[65,4992,4005],{"class":793},[65,4994,230],{"class":154},[65,4996,4018],{"class":204},[65,4998,797],{"class":154},[65,5000,4005],{"class":793},[65,5002,293],{"class":154},[65,5004,235],{"class":204},[65,5006,155],{"class":154},[65,5008,5009],{"class":140,"line":158},[65,5010,162],{"emptyLinePlaceholder":161},[65,5012,5013,5015,5017,5019,5021,5023,5025,5027,5029,5031,5033,5035,5037,5039],{"class":140,"line":165},[65,5014,1769],{"class":168},[65,5016,4041],{"class":144},[65,5018,218],{"class":168},[65,5020,3413],{"class":144},[65,5022,834],{"class":154},[65,5024,4050],{"class":200},[65,5026,224],{"class":204},[65,5028,306],{"class":154},[65,5030,4057],{"class":302},[65,5032,306],{"class":154},[65,5034,1713],{"class":204},[65,5036,3432],{"class":154},[65,5038,359],{"class":326},[65,5040,155],{"class":154},[65,5042,5043,5046,5048,5050,5052,5054],{"class":140,"line":180},[65,5044,5045],{"class":144},"videoElement",[65,5047,834],{"class":154},[65,5049,1816],{"class":144},[65,5051,218],{"class":168},[65,5053,3272],{"class":144},[65,5055,155],{"class":154},[65,5057,5058,5060,5062,5064,5066,5068],{"class":140,"line":194},[65,5059,5045],{"class":144},[65,5061,834],{"class":154},[65,5063,4093],{"class":144},[65,5065,218],{"class":168},[65,5067,1016],{"class":793},[65,5069,155],{"class":154},[65,5071,5072,5074,5076,5078,5080,5082],{"class":140,"line":211},[65,5073,5045],{"class":144},[65,5075,834],{"class":154},[65,5077,4109],{"class":144},[65,5079,218],{"class":168},[65,5081,1016],{"class":793},[65,5083,155],{"class":154},[65,5085,5086,5088,5090,5092,5094,5096,5098,5100,5102,5104,5106,5108,5110],{"class":140,"line":240},[65,5087,5045],{"class":144},[65,5089,834],{"class":154},[65,5091,4125],{"class":200},[65,5093,224],{"class":204},[65,5095,306],{"class":154},[65,5097,4132],{"class":302},[65,5099,306],{"class":154},[65,5101,230],{"class":154},[65,5103,299],{"class":154},[65,5105,4132],{"class":302},[65,5107,306],{"class":154},[65,5109,235],{"class":204},[65,5111,155],{"class":154},[65,5113,5114,5116,5118,5120,5122],{"class":140,"line":391},[65,5115,5045],{"class":144},[65,5117,834],{"class":154},[65,5119,4156],{"class":200},[65,5121,1269],{"class":204},[65,5123,155],{"class":154},[65,5125,5126],{"class":140,"line":401},[65,5127,162],{"emptyLinePlaceholder":161},[65,5129,5130,5132,5134,5136,5138,5140,5142,5144,5146,5148,5150],{"class":140,"line":406},[65,5131,1769],{"class":168},[65,5133,4173],{"class":144},[65,5135,218],{"class":168},[65,5137,1776],{"class":168},[65,5139,290],{"class":200},[65,5141,224],{"class":204},[65,5143,794],{"class":144},[65,5145,230],{"class":154},[65,5147,4041],{"class":144},[65,5149,235],{"class":204},[65,5151,155],{"class":154},[65,5153,5154],{"class":140,"line":421},[65,5155,162],{"emptyLinePlaceholder":161},[65,5157,5158,5160,5162,5164,5166,5168,5170,5172,5174],{"class":140,"line":435},[65,5159,1769],{"class":168},[65,5161,4204],{"class":144},[65,5163,218],{"class":168},[65,5165,1776],{"class":168},[65,5167,3081],{"class":200},[65,5169,224],{"class":204},[65,5171,794],{"class":144},[65,5173,230],{"class":154},[65,5175,418],{"class":154},[65,5177,5178,5180],{"class":140,"line":447},[65,5179,4839],{"class":144},[65,5181,3820],{"class":154},[65,5183,5184,5186],{"class":140,"line":459},[65,5185,4846],{"class":144},[65,5187,3820],{"class":154},[65,5189,5190,5192,5194],{"class":140,"line":471},[65,5191,4853],{"class":204},[65,5193,797],{"class":154},[65,5195,418],{"class":154},[65,5197,5198,5200,5202,5204,5206,5208,5210],{"class":140,"line":63},[65,5199,4862],{"class":204},[65,5201,797],{"class":154},[65,5203,287],{"class":154},[65,5205,3851],{"class":204},[65,5207,797],{"class":154},[65,5209,4173],{"class":144},[65,5211,3858],{"class":154},[65,5213,5214],{"class":140,"line":495},[65,5215,4879],{"class":154},[65,5217,5218,5220,5222],{"class":140,"line":507},[65,5219,2899],{"class":154},[65,5221,235],{"class":204},[65,5223,155],{"class":154},[65,5225,5226],{"class":140,"line":519},[65,5227,162],{"emptyLinePlaceholder":161},[65,5229,5230,5232,5234,5236,5238,5240,5242,5244,5246,5248,5250,5252,5254,5256,5258,5260,5262,5264,5266],{"class":140,"line":531},[65,5231,1769],{"class":168},[65,5233,4285],{"class":144},[65,5235,218],{"class":168},[65,5237,1776],{"class":168},[65,5239,3302],{"class":200},[65,5241,224],{"class":204},[65,5243,794],{"class":144},[65,5245,230],{"class":154},[65,5247,287],{"class":154},[65,5249,3903],{"class":204},[65,5251,797],{"class":154},[65,5253,3984],{"class":144},[65,5255,230],{"class":154},[65,5257,3797],{"class":204},[65,5259,797],{"class":154},[65,5261,4204],{"class":144},[65,5263,293],{"class":154},[65,5265,235],{"class":204},[65,5267,155],{"class":154},[65,5269,5270,5272,5274,5276,5278,5280,5282],{"class":140,"line":543},[65,5271,4932],{"class":144},[65,5273,834],{"class":154},[65,5275,3962],{"class":200},[65,5277,224],{"class":204},[65,5279,4419],{"class":144},[65,5281,235],{"class":204},[65,5283,155],{"class":154},[15,5285,5286,5287,5290,5291,5293],{},"動画の場合は、",[124,5288,5289],{},"HTMLVideoElement","を作成して再生し、その要素を",[124,5292,267],{},"に渡すことでテクスチャとして利用できます。",[15,5295,5296],{},"ぜひデモサイトでも確認してみてください！",[11,5298,5299],{"id":5299},"まとめ",[15,5301,5302,5303,5305],{},"今回は、WebGLでの画像と動画を描画する",[124,5304,267],{},"クラスを作成しました。これにより、画像や動画を簡単にテクスチャとして利用できるようになりました。",[15,5307,5308,5309,5311],{},"次回は、この",[124,5310,267],{},"クラスを使用してキューブマップの作成方法を解説したいと思います。",[5313,5314,5315],"style",{},"html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s9qRY, html code.shiki .s9qRY{--shiki-default:#FF5370;--shiki-default-font-style:italic}",{"title":135,"searchDepth":165,"depth":165,"links":5317},[5318,5319,5320,5321,5334,5335,5336],{"id":13,"depth":158,"text":13},{"id":81,"depth":158,"text":81},{"id":115,"depth":158,"text":116},{"id":249,"depth":158,"text":250,"children":5322},[5323,5324,5325,5326,5327],{"id":1179,"depth":165,"text":1179},{"id":1335,"depth":165,"text":1336},{"id":1503,"depth":165,"text":1504},{"id":1676,"depth":165,"text":1677},{"id":2189,"depth":165,"text":2190,"children":5328},[5329,5330,5331,5332,5333],{"id":2420,"depth":180,"text":672},{"id":2512,"depth":180,"text":684},{"id":2581,"depth":180,"text":2581},{"id":2771,"depth":180,"text":2772},{"id":2977,"depth":180,"text":2978},{"id":3054,"depth":158,"text":3055},{"id":3218,"depth":158,"text":3218},{"id":5299,"depth":158,"text":5299},"2026-09-19T00:00:00.000Z","今回は、Three.jsでいうTextureに相当する、画像や動画を描画するテクスチャクラスをWebGLで作成する方法を解説します。デモサイトでは、平面に画像を、立方体に動画を貼り付けて表示しています。",false,"md","/images/blog/webgl-image-video-texture.jpg",{},"/blog/webgl-image-video-texture",{"title":6,"description":5338},"blog/webgl-image-video-texture",[5347],"WebGLで画像や動画を描画する方法",null,[5350],"WebGL","khIPbt63Du5hX7gzhZ075QPCwc9nRGjwp7RKMyGd0ls",{"id":5353,"title":5354,"body":5355,"date":14154,"description":14155,"draft":5339,"extension":5340,"image":14156,"meta":14157,"navigation":161,"path":14158,"seo":14159,"stem":14160,"summaryList":14161,"summaryText":5348,"tags":14164,"__hash__":14165},"blog/blog/webgl-helper-function.md","WebGLで法線の可視化や座標確認のためのヘルパー関数を作成する",{"type":8,"value":5356,"toc":14123},[5357,5359,5362,5365,5368,5370,5397,5399,5402,5447,5450,5453,5456,5459,5463,5470,5618,5621,5624,6539,6542,6545,6602,6605,6615,6618,6817,6822,6832,6835,6838,6916,6921,6924,6930,6934,6939,7145,7148,7151,8028,8031,8034,8073,8087,8091,8094,8358,8361,8364,8479,8486,8610,8613,8619,8622,8625,8629,8635,8825,8828,8831,8834,10117,10120,10123,10126,10231,10251,10254,10339,10350,10353,10673,10688,10700,10703,10706,10791,10794,10798,10801,10939,10942,10945,10948,11156,11161,11269,11283,11286,11292,11296,11302,11490,11493,11496,11499,13092,13095,13101,13132,13135,13138,13141,13717,13720,13726,13743,13751,13754,13757,13893,13896,13899,14085,14091,14097,14099,14102,14108,14111,14114,14117,14120],[11,5358,13],{"id":13},[15,5360,5361],{},"前回は、WebGLで立方体(Box)ジオメトリを作成する方法について解説しました。",[19,5363],{":items":5364},"[{\"title\":\"WebGLで立方体(Box)ジオメトリを作成する方法\",\"link\":\"/blog/webgl-box-geometry/\",\"image\":\"/images/blog/webgl-box-geometry.jpg\",\"description\":\"今回は、Three.jsでいうBoxGeometry(立方体)の作成をWebGLで行っていきます。BoxGeometry同様にwidth、height、depthを設定できるのと、分割数も設定できるようにします。\"}]",[15,5366,5367],{},"今回は、作成した立方体や平面の法線を可視化したり、座標を確認できるヘルパー関数を作成していきます。",[15,5369,27],{},[29,5371,34,5373,34,5391],{"className":5372,"href":33},[32],[36,5374,40,5376,40,5379,40,5382,34],{"className":5375},[39],[36,5377,45],{"className":5378},[44],[36,5380,50],{"className":5381},[49],[36,5383,55,5385,55,5388,40],{"className":5384},[54],[57,5386],{"className":5387,"src":61,"alt":62,"width":63,"height":63},[60],[65,5389,69],{"className":5390},[68],[36,5392,55,5394,40],{"className":5393},[73],[57,5395],{"className":5396,"src":78,"alt":45},[77],[11,5398,81],{"id":81},[15,5400,5401],{},"今回作成するヘルパー関数は次のようになります。",[583,5403,5404,5413],{},[586,5405,5406],{},[589,5407,5408,5411],{},[592,5409,5410],{},"ヘルパー関数",[592,5412,597],{},[602,5414,5415,5423,5431,5439],{},[589,5416,5417,5420],{},[607,5418,5419],{},"GridHelper",[607,5421,5422],{},"XZ平面上にグリッドを表示するヘルパー関数",[589,5424,5425,5428],{},[607,5426,5427],{},"AxesHelper",[607,5429,5430],{},"座標軸を表示するヘルパー関数",[589,5432,5433,5436],{},[607,5434,5435],{},"VertexNormalsHelper",[607,5437,5438],{},"頂点法線を可視化するヘルパー関数",[589,5440,5441,5444],{},[607,5442,5443],{},"FaceNormalsHelper",[607,5445,5446],{},"面法線を可視化するヘルパー関数",[15,5448,5449],{},"4つともMeshクラスを継承しており、Geometryに頂点情報とインデックス情報を渡して描画を行います。",[15,5451,5452],{},"それでは、各ヘルパー関数の実装を順に見ていきましょう。",[11,5454,5455],{"id":5455},"座標確認のヘルパー関数の作成",[15,5457,5458],{},"まずは簡単な座標確認のヘルパー関数から作成していきます。",[1177,5460,5462],{"id":5461},"gridhelperの作成","GridHelperの作成",[15,5464,5465,5466,5469],{},"XZ平面上にグリッドを表示するヘルパー関数を作成します。",[5467,5468],"br",{},"\n使い方としては、次のようになります。",[129,5471,5473],{"className":131,"code":5472,"filename":3244,"language":134,"meta":135,"style":135},"import { GridHelper, Vec3 } from '@/lib/webgl';\n\nconst GRID_PARAMS = {\n size: 10,\n divisions: 10,\n color: new Vec3(0.5, 0.5, 0.5),\n};\n\nconst grid = new GridHelper(gl, GRID_PARAMS);\nscene.add(grid);\n",[124,5474,5475,5501,5505,5516,5528,5539,5568,5572,5576,5601],{"__ignoreMap":135},[65,5476,5477,5479,5481,5484,5486,5489,5491,5493,5495,5497,5499],{"class":140,"line":141},[65,5478,3251],{"class":154},[65,5480,287],{"class":154},[65,5482,5483],{"class":214}," GridHelper",[65,5485,230],{"class":154},[65,5487,5488],{"class":214}," Vec3",[65,5490,293],{"class":154},[65,5492,296],{"class":154},[65,5494,299],{"class":154},[65,5496,3339],{"class":302},[65,5498,306],{"class":154},[65,5500,155],{"class":154},[65,5502,5503],{"class":140,"line":158},[65,5504,162],{"emptyLinePlaceholder":161},[65,5506,5507,5509,5512,5514],{"class":140,"line":165},[65,5508,1769],{"class":168},[65,5510,5511],{"class":144}," GRID_PARAMS",[65,5513,218],{"class":168},[65,5515,418],{"class":154},[65,5517,5518,5521,5523,5526],{"class":140,"line":180},[65,5519,5520],{"class":204}," size",[65,5522,797],{"class":154},[65,5524,5525],{"class":793}," 10",[65,5527,3820],{"class":154},[65,5529,5530,5533,5535,5537],{"class":140,"line":194},[65,5531,5532],{"class":204}," divisions",[65,5534,797],{"class":154},[65,5536,5525],{"class":793},[65,5538,3820],{"class":154},[65,5540,5541,5544,5546,5548,5550,5552,5555,5557,5560,5562,5564,5566],{"class":140,"line":211},[65,5542,5543],{"class":204}," color",[65,5545,797],{"class":154},[65,5547,1776],{"class":168},[65,5549,5488],{"class":200},[65,5551,224],{"class":204},[65,5553,5554],{"class":793},"0.5",[65,5556,230],{"class":154},[65,5558,5559],{"class":793}," 0.5",[65,5561,230],{"class":154},[65,5563,5559],{"class":793},[65,5565,235],{"class":204},[65,5567,3820],{"class":154},[65,5569,5570],{"class":140,"line":240},[65,5571,4731],{"class":154},[65,5573,5574],{"class":140,"line":391},[65,5575,162],{"emptyLinePlaceholder":161},[65,5577,5578,5580,5583,5585,5587,5589,5591,5593,5595,5597,5599],{"class":140,"line":401},[65,5579,1769],{"class":168},[65,5581,5582],{"class":144}," grid",[65,5584,218],{"class":168},[65,5586,1776],{"class":168},[65,5588,5483],{"class":200},[65,5590,224],{"class":204},[65,5592,794],{"class":144},[65,5594,230],{"class":154},[65,5596,5511],{"class":144},[65,5598,235],{"class":204},[65,5600,155],{"class":154},[65,5602,5603,5605,5607,5609,5611,5614,5616],{"class":140,"line":406},[65,5604,4932],{"class":144},[65,5606,834],{"class":154},[65,5608,3962],{"class":200},[65,5610,224],{"class":204},[65,5612,5613],{"class":144},"grid",[65,5615,235],{"class":204},[65,5617,155],{"class":154},[15,5619,5620],{},"パラメータとしては、グリッドのサイズ(size)、分割数(divisions)、色(color)を指定できます。それでは、GridHelperの実装を見ていきましょう。",[15,5622,5623],{},"GridHelper.tsの全コードは次のようになります。",[3233,5625,5626,5629],{},[3236,5627,5628],{},"GridHelper.tsの全コード",[36,5630,5631],{},[129,5632,5635],{"className":131,"code":5633,"filename":5634,"language":134,"meta":135,"style":135},"import { Geometry } from '../../core/Geometry';\nimport { Mesh } from '../../core/Mesh';\nimport { Program } from '../../core/Program';\nimport type { Color } from '../../math/Color';\nimport { Vec3 } from '../../math/Vec3';\n\nexport interface GridHelperOptions {\n size: number;\n divisions: number;\n color: Color;\n}\n\nexport class GridHelper extends Mesh {\n constructor(gl: WebGL2RenderingContext, options?: Partial\u003CGridHelperOptions>) {\n const { size = 10, divisions = 10, color = new Vec3(0.75, 0.75, 0.75) } = options || {};\n const numVertices = (divisions + 1) * 2 * 2;\n const vertices = new Float32Array(numVertices * 3);\n\n const hs = size / 2;\n for (let i = 0; i \u003C= divisions; i++) {\n const t = i / divisions;\n const o = t * size - hs;\n\n vertices.set([o, 0, -hs, o, 0, hs], i * 12);\n vertices.set([-hs, 0, o, hs, 0, o], i * 12 + 6);\n }\n\n const index = new Uint16Array(numVertices);\n for (let i = 0; i \u003C numVertices; i++) {\n index[i] = i;\n }\n\n const geometry = new Geometry(gl, {\n position: { size: 3, data: vertices },\n index: { data: index },\n wireframe: {},\n });\n\n const program = new Program(gl, {\n vertex: `\n attribute vec3 position;\n uniform mat4 modelViewMatrix;\n uniform mat4 projectionMatrix;\n\n void main() {\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragment: `\n precision mediump float;\n uniform vec3 color;\n\n void main() {\n gl_FragColor = vec4(color, 1.0);\n }\n `,\n uniforms: {\n color: { value: color },\n },\n });\n\n super(gl, { geometry, program });\n }\n}\n","GridHelper.ts",[124,5636,5637,5659,5680,5701,5725,5746,5750,5762,5772,5782,5792,5796,5800,5815,5846,5906,5938,5965,5969,5986,6024,6042,6063,6067,6120,6173,6177,6181,6203,6236,6257,6261,6265,6285,6311,6327,6337,6346,6350,6370,6380,6385,6390,6395,6399,6404,6409,6414,6421,6430,6435,6440,6444,6448,6453,6457,6463,6472,6489,6494,6502,6506,6531,6535],{"__ignoreMap":135},[65,5638,5639,5641,5643,5646,5648,5650,5652,5655,5657],{"class":140,"line":141},[65,5640,3251],{"class":154},[65,5642,287],{"class":154},[65,5644,5645],{"class":214}," Geometry",[65,5647,293],{"class":154},[65,5649,296],{"class":154},[65,5651,299],{"class":154},[65,5653,5654],{"class":302},"../../core/Geometry",[65,5656,306],{"class":154},[65,5658,155],{"class":154},[65,5660,5661,5663,5665,5667,5669,5671,5673,5676,5678],{"class":140,"line":158},[65,5662,3251],{"class":154},[65,5664,287],{"class":154},[65,5666,3302],{"class":214},[65,5668,293],{"class":154},[65,5670,296],{"class":154},[65,5672,299],{"class":154},[65,5674,5675],{"class":302},"../../core/Mesh",[65,5677,306],{"class":154},[65,5679,155],{"class":154},[65,5681,5682,5684,5686,5688,5690,5692,5694,5697,5699],{"class":140,"line":165},[65,5683,3251],{"class":154},[65,5685,287],{"class":154},[65,5687,3081],{"class":214},[65,5689,293],{"class":154},[65,5691,296],{"class":154},[65,5693,299],{"class":154},[65,5695,5696],{"class":302},"../../core/Program",[65,5698,306],{"class":154},[65,5700,155],{"class":154},[65,5702,5703,5705,5707,5709,5712,5714,5716,5718,5721,5723],{"class":140,"line":180},[65,5704,3251],{"class":154},[65,5706,323],{"class":154},[65,5708,287],{"class":154},[65,5710,5711],{"class":214}," Color",[65,5713,293],{"class":154},[65,5715,296],{"class":154},[65,5717,299],{"class":154},[65,5719,5720],{"class":302},"../../math/Color",[65,5722,306],{"class":154},[65,5724,155],{"class":154},[65,5726,5727,5729,5731,5733,5735,5737,5739,5742,5744],{"class":140,"line":194},[65,5728,3251],{"class":154},[65,5730,287],{"class":154},[65,5732,5488],{"class":214},[65,5734,293],{"class":154},[65,5736,296],{"class":154},[65,5738,299],{"class":154},[65,5740,5741],{"class":302},"../../math/Vec3",[65,5743,306],{"class":154},[65,5745,155],{"class":154},[65,5747,5748],{"class":140,"line":211},[65,5749,162],{"emptyLinePlaceholder":161},[65,5751,5752,5754,5757,5760],{"class":140,"line":240},[65,5753,284],{"class":154},[65,5755,5756],{"class":168}," interface",[65,5758,5759],{"class":326}," GridHelperOptions",[65,5761,418],{"class":154},[65,5763,5764,5766,5768,5770],{"class":140,"line":391},[65,5765,5520],{"class":144},[65,5767,797],{"class":168},[65,5769,430],{"class":340},[65,5771,155],{"class":154},[65,5773,5774,5776,5778,5780],{"class":140,"line":401},[65,5775,5532],{"class":144},[65,5777,797],{"class":168},[65,5779,430],{"class":340},[65,5781,155],{"class":154},[65,5783,5784,5786,5788,5790],{"class":140,"line":406},[65,5785,5543],{"class":144},[65,5787,797],{"class":168},[65,5789,5711],{"class":326},[65,5791,155],{"class":154},[65,5793,5794],{"class":140,"line":421},[65,5795,243],{"class":154},[65,5797,5798],{"class":140,"line":435},[65,5799,162],{"emptyLinePlaceholder":161},[65,5801,5802,5804,5806,5808,5811,5813],{"class":140,"line":447},[65,5803,284],{"class":154},[65,5805,774],{"class":168},[65,5807,5483],{"class":326},[65,5809,5810],{"class":168}," extends",[65,5812,3302],{"class":302},[65,5814,418],{"class":154},[65,5816,5817,5819,5821,5823,5825,5827,5829,5831,5833,5836,5838,5841,5844],{"class":140,"line":459},[65,5818,788],{"class":168},[65,5820,224],{"class":154},[65,5822,794],{"class":793},[65,5824,797],{"class":168},[65,5826,800],{"class":326},[65,5828,230],{"class":154},[65,5830,814],{"class":793},[65,5832,427],{"class":168},[65,5834,5835],{"class":326}," Partial",[65,5837,1830],{"class":154},[65,5839,5840],{"class":326},"GridHelperOptions",[65,5842,5843],{"class":154},">)",[65,5845,418],{"class":154},[65,5847,5848,5850,5852,5855,5857,5859,5861,5864,5866,5868,5870,5873,5875,5877,5879,5881,5884,5886,5889,5891,5893,5895,5897,5899,5901,5903],{"class":140,"line":471},[65,5849,848],{"class":168},[65,5851,287],{"class":154},[65,5853,5854],{"class":214}," size",[65,5856,218],{"class":168},[65,5858,5525],{"class":793},[65,5860,230],{"class":154},[65,5862,5863],{"class":214}," divisions",[65,5865,218],{"class":168},[65,5867,5525],{"class":793},[65,5869,230],{"class":154},[65,5871,5872],{"class":214}," color",[65,5874,218],{"class":168},[65,5876,1776],{"class":168},[65,5878,5488],{"class":200},[65,5880,224],{"class":204},[65,5882,5883],{"class":793},"0.75",[65,5885,230],{"class":154},[65,5887,5888],{"class":793}," 0.75",[65,5890,230],{"class":154},[65,5892,5888],{"class":793},[65,5894,1713],{"class":204},[65,5896,2899],{"class":154},[65,5898,218],{"class":168},[65,5900,814],{"class":214},[65,5902,2269],{"class":168},[65,5904,5905],{"class":154}," {};\n",[65,5907,5908,5910,5913,5915,5917,5920,5922,5924,5926,5929,5931,5934,5936],{"class":140,"line":63},[65,5909,848],{"class":168},[65,5911,5912],{"class":214}," numVertices",[65,5914,218],{"class":168},[65,5916,1696],{"class":204},[65,5918,5919],{"class":214},"divisions",[65,5921,2367],{"class":168},[65,5923,3137],{"class":793},[65,5925,1713],{"class":204},[65,5927,5928],{"class":168},"*",[65,5930,3748],{"class":793},[65,5932,5933],{"class":168}," *",[65,5935,3748],{"class":793},[65,5937,155],{"class":154},[65,5939,5940,5942,5945,5947,5949,5952,5954,5957,5959,5961,5963],{"class":140,"line":495},[65,5941,848],{"class":168},[65,5943,5944],{"class":214}," vertices",[65,5946,218],{"class":168},[65,5948,1776],{"class":168},[65,5950,5951],{"class":200}," Float32Array",[65,5953,224],{"class":204},[65,5955,5956],{"class":214},"numVertices",[65,5958,5933],{"class":168},[65,5960,3739],{"class":793},[65,5962,235],{"class":204},[65,5964,155],{"class":154},[65,5966,5967],{"class":140,"line":507},[65,5968,162],{"emptyLinePlaceholder":161},[65,5970,5971,5973,5976,5978,5980,5982,5984],{"class":140,"line":519},[65,5972,848],{"class":168},[65,5974,5975],{"class":214}," hs",[65,5977,218],{"class":168},[65,5979,5854],{"class":214},[65,5981,4349],{"class":168},[65,5983,3748],{"class":793},[65,5985,155],{"class":154},[65,5987,5988,5991,5993,5996,5999,6001,6003,6006,6008,6011,6013,6015,6017,6020,6022],{"class":140,"line":531},[65,5989,5990],{"class":154}," for",[65,5992,1696],{"class":204},[65,5994,5995],{"class":168},"let",[65,5997,5998],{"class":214}," i",[65,6000,218],{"class":168},[65,6002,1142],{"class":793},[65,6004,6005],{"class":154},";",[65,6007,5998],{"class":214},[65,6009,6010],{"class":168}," \u003C=",[65,6012,5863],{"class":214},[65,6014,6005],{"class":154},[65,6016,5998],{"class":214},[65,6018,6019],{"class":168},"++",[65,6021,1713],{"class":204},[65,6023,208],{"class":154},[65,6025,6026,6029,6032,6034,6036,6038,6040],{"class":140,"line":543},[65,6027,6028],{"class":168}," const",[65,6030,6031],{"class":214}," t",[65,6033,218],{"class":168},[65,6035,5998],{"class":214},[65,6037,4349],{"class":168},[65,6039,5863],{"class":214},[65,6041,155],{"class":154},[65,6043,6044,6046,6049,6051,6053,6055,6057,6059,6061],{"class":140,"line":555},[65,6045,6028],{"class":168},[65,6047,6048],{"class":214}," o",[65,6050,218],{"class":168},[65,6052,6031],{"class":214},[65,6054,5933],{"class":168},[65,6056,5854],{"class":214},[65,6058,4399],{"class":168},[65,6060,5975],{"class":214},[65,6062,155],{"class":154},[65,6064,6065],{"class":140,"line":567},[65,6066,162],{"emptyLinePlaceholder":161},[65,6068,6069,6072,6074,6076,6078,6081,6083,6085,6087,6089,6092,6094,6096,6098,6100,6102,6104,6107,6109,6111,6113,6116,6118],{"class":140,"line":3757},[65,6070,6071],{"class":214}," vertices",[65,6073,834],{"class":154},[65,6075,3615],{"class":200},[65,6077,3645],{"class":204},[65,6079,6080],{"class":214},"o",[65,6082,230],{"class":154},[65,6084,1142],{"class":793},[65,6086,230],{"class":154},[65,6088,4399],{"class":168},[65,6090,6091],{"class":214},"hs",[65,6093,230],{"class":154},[65,6095,6048],{"class":214},[65,6097,230],{"class":154},[65,6099,1142],{"class":793},[65,6101,230],{"class":154},[65,6103,5975],{"class":214},[65,6105,6106],{"class":204},"]",[65,6108,230],{"class":154},[65,6110,5998],{"class":214},[65,6112,5933],{"class":168},[65,6114,6115],{"class":793}," 12",[65,6117,235],{"class":204},[65,6119,155],{"class":154},[65,6121,6122,6124,6126,6128,6130,6132,6134,6136,6138,6140,6142,6144,6146,6148,6150,6152,6154,6156,6158,6160,6162,6164,6166,6169,6171],{"class":140,"line":3787},[65,6123,6071],{"class":214},[65,6125,834],{"class":154},[65,6127,3615],{"class":200},[65,6129,3645],{"class":204},[65,6131,3936],{"class":168},[65,6133,6091],{"class":214},[65,6135,230],{"class":154},[65,6137,1142],{"class":793},[65,6139,230],{"class":154},[65,6141,6048],{"class":214},[65,6143,230],{"class":154},[65,6145,5975],{"class":214},[65,6147,230],{"class":154},[65,6149,1142],{"class":793},[65,6151,230],{"class":154},[65,6153,6048],{"class":214},[65,6155,6106],{"class":204},[65,6157,230],{"class":154},[65,6159,5998],{"class":214},[65,6161,5933],{"class":168},[65,6163,6115],{"class":793},[65,6165,2367],{"class":168},[65,6167,6168],{"class":793}," 6",[65,6170,235],{"class":204},[65,6172,155],{"class":154},[65,6174,6175],{"class":140,"line":3792},[65,6176,3204],{"class":154},[65,6178,6179],{"class":140,"line":3814},[65,6180,162],{"emptyLinePlaceholder":161},[65,6182,6183,6185,6188,6190,6192,6195,6197,6199,6201],{"class":140,"line":3823},[65,6184,848],{"class":168},[65,6186,6187],{"class":214}," index",[65,6189,218],{"class":168},[65,6191,1776],{"class":168},[65,6193,6194],{"class":200}," Uint16Array",[65,6196,224],{"class":204},[65,6198,5956],{"class":214},[65,6200,235],{"class":204},[65,6202,155],{"class":154},[65,6204,6205,6207,6209,6211,6213,6215,6217,6219,6221,6224,6226,6228,6230,6232,6234],{"class":140,"line":3831},[65,6206,5990],{"class":154},[65,6208,1696],{"class":204},[65,6210,5995],{"class":168},[65,6212,5998],{"class":214},[65,6214,218],{"class":168},[65,6216,1142],{"class":793},[65,6218,6005],{"class":154},[65,6220,5998],{"class":214},[65,6222,6223],{"class":168}," \u003C",[65,6225,5912],{"class":214},[65,6227,6005],{"class":154},[65,6229,5998],{"class":214},[65,6231,6019],{"class":168},[65,6233,1713],{"class":204},[65,6235,208],{"class":154},[65,6237,6238,6241,6244,6247,6250,6253,6255],{"class":140,"line":3841},[65,6239,6240],{"class":214}," index",[65,6242,6243],{"class":204},"[",[65,6245,6246],{"class":214},"i",[65,6248,6249],{"class":204},"] ",[65,6251,6252],{"class":168},"=",[65,6254,5998],{"class":214},[65,6256,155],{"class":154},[65,6258,6259],{"class":140,"line":3861},[65,6260,3204],{"class":154},[65,6262,6263],{"class":140,"line":3867},[65,6264,162],{"emptyLinePlaceholder":161},[65,6266,6267,6269,6271,6273,6275,6277,6279,6281,6283],{"class":140,"line":3876},[65,6268,848],{"class":168},[65,6270,3903],{"class":214},[65,6272,218],{"class":168},[65,6274,1776],{"class":168},[65,6276,5645],{"class":200},[65,6278,224],{"class":204},[65,6280,794],{"class":214},[65,6282,230],{"class":154},[65,6284,418],{"class":154},[65,6286,6287,6290,6292,6294,6296,6298,6300,6302,6305,6307,6309],{"class":140,"line":3881},[65,6288,6289],{"class":204}," position",[65,6291,797],{"class":154},[65,6293,287],{"class":154},[65,6295,5854],{"class":204},[65,6297,797],{"class":154},[65,6299,3739],{"class":793},[65,6301,230],{"class":154},[65,6303,6304],{"class":204}," data",[65,6306,797],{"class":154},[65,6308,5944],{"class":214},[65,6310,3858],{"class":154},[65,6312,6313,6315,6317,6319,6321,6323,6325],{"class":140,"line":3920},[65,6314,6240],{"class":204},[65,6316,797],{"class":154},[65,6318,287],{"class":154},[65,6320,6304],{"class":204},[65,6322,797],{"class":154},[65,6324,6187],{"class":214},[65,6326,3858],{"class":154},[65,6328,6329,6332,6334],{"class":140,"line":3954},[65,6330,6331],{"class":204}," wireframe",[65,6333,797],{"class":154},[65,6335,6336],{"class":154}," {},\n",[65,6338,6339,6342,6344],{"class":140,"line":3974},[65,6340,6341],{"class":154}," }",[65,6343,235],{"class":204},[65,6345,155],{"class":154},[65,6347,6348],{"class":140,"line":3979},[65,6349,162],{"emptyLinePlaceholder":161},[65,6351,6352,6354,6356,6358,6360,6362,6364,6366,6368],{"class":140,"line":4031},[65,6353,848],{"class":168},[65,6355,3797],{"class":214},[65,6357,218],{"class":168},[65,6359,1776],{"class":168},[65,6361,3081],{"class":200},[65,6363,224],{"class":204},[65,6365,794],{"class":214},[65,6367,230],{"class":154},[65,6369,418],{"class":154},[65,6371,6372,6375,6377],{"class":140,"line":4036},[65,6373,6374],{"class":204}," vertex",[65,6376,797],{"class":154},[65,6378,6379],{"class":154}," `\n",[65,6381,6382],{"class":140,"line":4070},[65,6383,6384],{"class":302}," attribute vec3 position;\n",[65,6386,6387],{"class":140,"line":4086},[65,6388,6389],{"class":302}," uniform mat4 modelViewMatrix;\n",[65,6391,6392],{"class":140,"line":4102},[65,6393,6394],{"class":302}," uniform mat4 projectionMatrix;\n",[65,6396,6397],{"class":140,"line":4118},[65,6398,162],{"emptyLinePlaceholder":161},[65,6400,6401],{"class":140,"line":4149},[65,6402,6403],{"class":302}," void main() {\n",[65,6405,6406],{"class":140,"line":4163},[65,6407,6408],{"class":302}," gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[65,6410,6411],{"class":140,"line":4168},[65,6412,6413],{"class":302}," }\n",[65,6415,6416,6419],{"class":140,"line":4194},[65,6417,6418],{"class":154}," `",[65,6420,3820],{"class":154},[65,6422,6423,6426,6428],{"class":140,"line":4199},[65,6424,6425],{"class":204}," fragment",[65,6427,797],{"class":154},[65,6429,6379],{"class":154},[65,6431,6432],{"class":140,"line":4221},[65,6433,6434],{"class":302}," precision mediump float;\n",[65,6436,6437],{"class":140,"line":4228},[65,6438,6439],{"class":302}," uniform vec3 color;\n",[65,6441,6442],{"class":140,"line":4235},[65,6443,162],{"emptyLinePlaceholder":161},[65,6445,6446],{"class":140,"line":4244},[65,6447,6403],{"class":302},[65,6449,6450],{"class":140,"line":4261},[65,6451,6452],{"class":302}," gl_FragColor = vec4(color, 1.0);\n",[65,6454,6455],{"class":140,"line":4266},[65,6456,6413],{"class":302},[65,6458,6459,6461],{"class":140,"line":4275},[65,6460,6418],{"class":154},[65,6462,3820],{"class":154},[65,6464,6465,6468,6470],{"class":140,"line":4280},[65,6466,6467],{"class":204}," uniforms",[65,6469,797],{"class":154},[65,6471,418],{"class":154},[65,6473,6474,6477,6479,6481,6483,6485,6487],{"class":140,"line":4322},[65,6475,6476],{"class":204}," color",[65,6478,797],{"class":154},[65,6480,287],{"class":154},[65,6482,3851],{"class":204},[65,6484,797],{"class":154},[65,6486,5872],{"class":214},[65,6488,3858],{"class":154},[65,6490,6491],{"class":140,"line":4375},[65,6492,6493],{"class":154}," },\n",[65,6495,6496,6498,6500],{"class":140,"line":4408},[65,6497,6341],{"class":154},[65,6499,235],{"class":204},[65,6501,155],{"class":154},[65,6503,6504],{"class":140,"line":4426},[65,6505,162],{"emptyLinePlaceholder":161},[65,6507,6508,6511,6513,6515,6517,6519,6521,6523,6525,6527,6529],{"class":140,"line":4431},[65,6509,6510],{"class":830}," super",[65,6512,224],{"class":204},[65,6514,794],{"class":214},[65,6516,230],{"class":154},[65,6518,287],{"class":154},[65,6520,3903],{"class":214},[65,6522,230],{"class":154},[65,6524,3797],{"class":214},[65,6526,293],{"class":154},[65,6528,235],{"class":204},[65,6530,155],{"class":154},[65,6532,6533],{"class":140,"line":4447},[65,6534,1171],{"class":154},[65,6536,6537],{"class":140,"line":4470},[65,6538,243],{"class":154},[15,6540,6541],{},"オプションのデフォルトは、サイズと分割数がそれぞれ10で、色がグレーになります。それでは、WebGLでのグリッド表示の計算部分を見ていきましょう。",[2418,6543,6544],{"id":6544},"頂点数を計算",[129,6546,6548],{"className":131,"code":6547,"language":134,"meta":135,"style":135},"const numVertices = (divisions + 1) * 2 * 2;\nconst vertices = new Float32Array(numVertices * 3);\n",[124,6549,6550,6578],{"__ignoreMap":135},[65,6551,6552,6554,6556,6558,6560,6562,6564,6566,6568,6570,6572,6574,6576],{"class":140,"line":141},[65,6553,1769],{"class":168},[65,6555,5912],{"class":144},[65,6557,218],{"class":168},[65,6559,1696],{"class":204},[65,6561,5919],{"class":144},[65,6563,2367],{"class":168},[65,6565,3137],{"class":793},[65,6567,1713],{"class":204},[65,6569,5928],{"class":168},[65,6571,3748],{"class":793},[65,6573,5933],{"class":168},[65,6575,3748],{"class":793},[65,6577,155],{"class":154},[65,6579,6580,6582,6584,6586,6588,6590,6592,6594,6596,6598,6600],{"class":140,"line":158},[65,6581,1769],{"class":168},[65,6583,5944],{"class":144},[65,6585,218],{"class":168},[65,6587,1776],{"class":168},[65,6589,5951],{"class":200},[65,6591,224],{"class":204},[65,6593,5956],{"class":144},[65,6595,5933],{"class":168},[65,6597,3739],{"class":793},[65,6599,235],{"class":204},[65,6601,155],{"class":154},[15,6603,6604],{},"グリッドは縦方向の線と横方向の線から構成されています。分割数に+1を加えた線が必要なのと、線は2つの頂点で構成されるため2を掛け、さらに縦横の両方の線があるのでさらに2を掛けています。",[15,6606,6607,6610,6611,6614],{},[124,6608,6609],{},"vertices","には、xyzの3つの座標が格納され、",[124,6612,6613],{},"Float32Array","として扱います。",[1177,6616,6617],{"id":6617},"グリッドの頂点を生成",[129,6619,6621],{"className":131,"code":6620,"language":134,"meta":135,"style":135},"const hs = size / 2;\nfor (let i = 0; i \u003C= divisions; i++) {\n const t = i / divisions;\n const o = t * size - hs;\n\n vertices.set([o, 0, -hs, o, 0, hs], i * 12);\n vertices.set([-hs, 0, o, hs, 0, o], i * 12 + 6);\n}\n",[124,6622,6623,6639,6672,6688,6708,6712,6761,6813],{"__ignoreMap":135},[65,6624,6625,6627,6629,6631,6633,6635,6637],{"class":140,"line":141},[65,6626,1769],{"class":168},[65,6628,5975],{"class":144},[65,6630,218],{"class":168},[65,6632,5854],{"class":144},[65,6634,4349],{"class":168},[65,6636,3748],{"class":793},[65,6638,155],{"class":154},[65,6640,6641,6644,6646,6648,6650,6652,6654,6656,6658,6660,6662,6664,6666,6668,6670],{"class":140,"line":158},[65,6642,6643],{"class":154},"for",[65,6645,1696],{"class":204},[65,6647,5995],{"class":168},[65,6649,5998],{"class":144},[65,6651,218],{"class":168},[65,6653,1142],{"class":793},[65,6655,6005],{"class":154},[65,6657,5998],{"class":144},[65,6659,6010],{"class":168},[65,6661,5863],{"class":144},[65,6663,6005],{"class":154},[65,6665,5998],{"class":144},[65,6667,6019],{"class":168},[65,6669,1713],{"class":204},[65,6671,208],{"class":154},[65,6673,6674,6676,6678,6680,6682,6684,6686],{"class":140,"line":165},[65,6675,2243],{"class":168},[65,6677,6031],{"class":214},[65,6679,218],{"class":168},[65,6681,5998],{"class":214},[65,6683,4349],{"class":168},[65,6685,5863],{"class":214},[65,6687,155],{"class":154},[65,6689,6690,6692,6694,6696,6698,6700,6702,6704,6706],{"class":140,"line":180},[65,6691,2243],{"class":168},[65,6693,6048],{"class":214},[65,6695,218],{"class":168},[65,6697,6031],{"class":214},[65,6699,5933],{"class":168},[65,6701,5854],{"class":214},[65,6703,4399],{"class":168},[65,6705,5975],{"class":214},[65,6707,155],{"class":154},[65,6709,6710],{"class":140,"line":194},[65,6711,162],{"emptyLinePlaceholder":161},[65,6713,6714,6717,6719,6721,6723,6725,6727,6729,6731,6733,6735,6737,6739,6741,6743,6745,6747,6749,6751,6753,6755,6757,6759],{"class":140,"line":211},[65,6715,6716],{"class":214}," vertices",[65,6718,834],{"class":154},[65,6720,3615],{"class":200},[65,6722,3645],{"class":204},[65,6724,6080],{"class":214},[65,6726,230],{"class":154},[65,6728,1142],{"class":793},[65,6730,230],{"class":154},[65,6732,4399],{"class":168},[65,6734,6091],{"class":214},[65,6736,230],{"class":154},[65,6738,6048],{"class":214},[65,6740,230],{"class":154},[65,6742,1142],{"class":793},[65,6744,230],{"class":154},[65,6746,5975],{"class":214},[65,6748,6106],{"class":204},[65,6750,230],{"class":154},[65,6752,5998],{"class":214},[65,6754,5933],{"class":168},[65,6756,6115],{"class":793},[65,6758,235],{"class":204},[65,6760,155],{"class":154},[65,6762,6763,6765,6767,6769,6771,6773,6775,6777,6779,6781,6783,6785,6787,6789,6791,6793,6795,6797,6799,6801,6803,6805,6807,6809,6811],{"class":140,"line":240},[65,6764,6716],{"class":214},[65,6766,834],{"class":154},[65,6768,3615],{"class":200},[65,6770,3645],{"class":204},[65,6772,3936],{"class":168},[65,6774,6091],{"class":214},[65,6776,230],{"class":154},[65,6778,1142],{"class":793},[65,6780,230],{"class":154},[65,6782,6048],{"class":214},[65,6784,230],{"class":154},[65,6786,5975],{"class":214},[65,6788,230],{"class":154},[65,6790,1142],{"class":793},[65,6792,230],{"class":154},[65,6794,6048],{"class":214},[65,6796,6106],{"class":204},[65,6798,230],{"class":154},[65,6800,5998],{"class":214},[65,6802,5933],{"class":168},[65,6804,6115],{"class":793},[65,6806,2367],{"class":168},[65,6808,6168],{"class":793},[65,6810,235],{"class":204},[65,6812,155],{"class":154},[65,6814,6815],{"class":140,"line":391},[65,6816,243],{"class":154},[15,6818,6819,6821],{},[124,6820,6091],{},"はグリッドの半分のサイズになり、グリッドを原点中心に配置するために使用します。",[15,6823,6824,6825,6828,6829,6831],{},"分割数に応じてループし、",[124,6826,6827],{},"t","で0から1の範囲に正規化した値を使用し、",[124,6830,6080],{},"で-size/2からsize/2までの位置を計算しています。",[15,6833,6834],{},"最初のsetではz方向の線を、次のsetではx方向の線を設定しています。第2引数の12の値は、6頂点分のデータ（xyzが2つ分で6）をスキップするために使用しています。",[1177,6836,6837],{"id":6837},"インデックスの生成",[129,6839,6841],{"className":131,"code":6840,"language":134,"meta":135,"style":135},"const index = new Uint16Array(numVertices);\nfor (let i = 0; i \u003C numVertices; i++) {\n index[i] = i;\n}\n",[124,6842,6843,6863,6895,6912],{"__ignoreMap":135},[65,6844,6845,6847,6849,6851,6853,6855,6857,6859,6861],{"class":140,"line":141},[65,6846,1769],{"class":168},[65,6848,6187],{"class":144},[65,6850,218],{"class":168},[65,6852,1776],{"class":168},[65,6854,6194],{"class":200},[65,6856,224],{"class":204},[65,6858,5956],{"class":144},[65,6860,235],{"class":204},[65,6862,155],{"class":154},[65,6864,6865,6867,6869,6871,6873,6875,6877,6879,6881,6883,6885,6887,6889,6891,6893],{"class":140,"line":158},[65,6866,6643],{"class":154},[65,6868,1696],{"class":204},[65,6870,5995],{"class":168},[65,6872,5998],{"class":144},[65,6874,218],{"class":168},[65,6876,1142],{"class":793},[65,6878,6005],{"class":154},[65,6880,5998],{"class":144},[65,6882,6223],{"class":168},[65,6884,5912],{"class":144},[65,6886,6005],{"class":154},[65,6888,5998],{"class":144},[65,6890,6019],{"class":168},[65,6892,1713],{"class":204},[65,6894,208],{"class":154},[65,6896,6897,6900,6902,6904,6906,6908,6910],{"class":140,"line":165},[65,6898,6899],{"class":214}," index",[65,6901,6243],{"class":204},[65,6903,6246],{"class":214},[65,6905,6249],{"class":204},[65,6907,6252],{"class":168},[65,6909,5998],{"class":214},[65,6911,155],{"class":154},[65,6913,6914],{"class":140,"line":180},[65,6915,243],{"class":154},[15,6917,6918,6920],{},[124,6919,5956],{},"の数だけインデックスを作成し、各頂点に対応するインデックスを設定すれば良いでしょう。",[15,6922,6923],{},"GeometryとProgramを使用して、次のようなグリッドを描画することができるようになります。",[15,6925,6926],{},[57,6927],{"alt":6928,"src":6929,"title":6928},"Gridの表示","https://res.cloudinary.com/dy8ftemi0/image/upload/v1788600080/webgl-helper-function-01_j0fvk5.jpg",[1177,6931,6933],{"id":6932},"axeshelperの作成","AxesHelperの作成",[15,6935,6936,6937,5469],{},"続いては、XYZ軸を表示するためのAxesHelperを作成していきます。",[5467,6938],{},[129,6940,6942],{"className":131,"code":6941,"filename":3244,"language":134,"meta":135,"style":135},"import { AxesHelper, Vec3 } from '@/lib/webgl';\n\nconst AXES_PARAMS = {\n size: 6,\n symmetric: true,\n xColor: new Vec3(0.96, 0.21, 0.32),\n yColor: new Vec3(0.44, 0.64, 0.11),\n zColor: new Vec3(0.18, 0.52, 0.89),\n};\n\nconst axes = new AxesHelper(gl, AXES_PARAMS);\nscene.add(axes);\n",[124,6943,6944,6969,6973,6984,6994,7005,7035,7065,7095,7099,7103,7128],{"__ignoreMap":135},[65,6945,6946,6948,6950,6953,6955,6957,6959,6961,6963,6965,6967],{"class":140,"line":141},[65,6947,3251],{"class":154},[65,6949,287],{"class":154},[65,6951,6952],{"class":214}," AxesHelper",[65,6954,230],{"class":154},[65,6956,5488],{"class":214},[65,6958,293],{"class":154},[65,6960,296],{"class":154},[65,6962,299],{"class":154},[65,6964,3339],{"class":302},[65,6966,306],{"class":154},[65,6968,155],{"class":154},[65,6970,6971],{"class":140,"line":158},[65,6972,162],{"emptyLinePlaceholder":161},[65,6974,6975,6977,6980,6982],{"class":140,"line":165},[65,6976,1769],{"class":168},[65,6978,6979],{"class":144}," AXES_PARAMS",[65,6981,218],{"class":168},[65,6983,418],{"class":154},[65,6985,6986,6988,6990,6992],{"class":140,"line":180},[65,6987,5520],{"class":204},[65,6989,797],{"class":154},[65,6991,6168],{"class":793},[65,6993,3820],{"class":154},[65,6995,6996,6999,7001,7003],{"class":140,"line":194},[65,6997,6998],{"class":204}," symmetric",[65,7000,797],{"class":154},[65,7002,1016],{"class":793},[65,7004,3820],{"class":154},[65,7006,7007,7010,7012,7014,7016,7018,7021,7023,7026,7028,7031,7033],{"class":140,"line":211},[65,7008,7009],{"class":204}," xColor",[65,7011,797],{"class":154},[65,7013,1776],{"class":168},[65,7015,5488],{"class":200},[65,7017,224],{"class":204},[65,7019,7020],{"class":793},"0.96",[65,7022,230],{"class":154},[65,7024,7025],{"class":793}," 0.21",[65,7027,230],{"class":154},[65,7029,7030],{"class":793}," 0.32",[65,7032,235],{"class":204},[65,7034,3820],{"class":154},[65,7036,7037,7040,7042,7044,7046,7048,7051,7053,7056,7058,7061,7063],{"class":140,"line":240},[65,7038,7039],{"class":204}," yColor",[65,7041,797],{"class":154},[65,7043,1776],{"class":168},[65,7045,5488],{"class":200},[65,7047,224],{"class":204},[65,7049,7050],{"class":793},"0.44",[65,7052,230],{"class":154},[65,7054,7055],{"class":793}," 0.64",[65,7057,230],{"class":154},[65,7059,7060],{"class":793}," 0.11",[65,7062,235],{"class":204},[65,7064,3820],{"class":154},[65,7066,7067,7070,7072,7074,7076,7078,7081,7083,7086,7088,7091,7093],{"class":140,"line":391},[65,7068,7069],{"class":204}," zColor",[65,7071,797],{"class":154},[65,7073,1776],{"class":168},[65,7075,5488],{"class":200},[65,7077,224],{"class":204},[65,7079,7080],{"class":793},"0.18",[65,7082,230],{"class":154},[65,7084,7085],{"class":793}," 0.52",[65,7087,230],{"class":154},[65,7089,7090],{"class":793}," 0.89",[65,7092,235],{"class":204},[65,7094,3820],{"class":154},[65,7096,7097],{"class":140,"line":401},[65,7098,4731],{"class":154},[65,7100,7101],{"class":140,"line":406},[65,7102,162],{"emptyLinePlaceholder":161},[65,7104,7105,7107,7110,7112,7114,7116,7118,7120,7122,7124,7126],{"class":140,"line":421},[65,7106,1769],{"class":168},[65,7108,7109],{"class":144}," axes",[65,7111,218],{"class":168},[65,7113,1776],{"class":168},[65,7115,6952],{"class":200},[65,7117,224],{"class":204},[65,7119,794],{"class":144},[65,7121,230],{"class":154},[65,7123,6979],{"class":144},[65,7125,235],{"class":204},[65,7127,155],{"class":154},[65,7129,7130,7132,7134,7136,7138,7141,7143],{"class":140,"line":435},[65,7131,4932],{"class":144},[65,7133,834],{"class":154},[65,7135,3962],{"class":200},[65,7137,224],{"class":204},[65,7139,7140],{"class":144},"axes",[65,7142,235],{"class":204},[65,7144,155],{"class":154},[15,7146,7147],{},"パラメータとしては、座標軸のサイズ(size)、対称表示(symmetric)、各軸の色(xColor, yColor, zColor)を指定できます。それでは、AxesHelperの実装を見ていきましょう。",[15,7149,7150],{},"AxesHelper.tsの全コードは次のようになります。",[3233,7152,7153,7156],{},[3236,7154,7155],{},"AxesHelper.tsの全コード",[36,7157,7158],{},[129,7159,7162],{"className":131,"code":7160,"filename":7161,"language":134,"meta":135,"style":135},"import { Geometry } from '../../core/Geometry';\nimport { Mesh } from '../../core/Mesh';\nimport { Program } from '../../core/Program';\nimport type { Color } from '../../math/Color';\nimport { Vec3 } from '../../math/Vec3';\n\nexport interface AxesHelperOptions {\n size: number;\n symmetric: boolean;\n xColor: Color;\n yColor: Color;\n zColor: Color;\n}\n\nexport class AxesHelper extends Mesh {\n constructor(gl: WebGL2RenderingContext, options?: Partial\u003CAxesHelperOptions>) {\n const {\n size = 1,\n symmetric = false,\n xColor = new Vec3(0.96, 0.21, 0.32),\n yColor = new Vec3(0.44, 0.64, 0.11),\n zColor = new Vec3(0.18, 0.52, 0.89),\n } = options || {};\n\n const a = symmetric ? -size : 0;\n const b = size;\n\n const vertices = new Float32Array([a, 0, 0, b, 0, 0, 0, a, 0, 0, b, 0, 0, 0, a, 0, 0, b]);\n\n const colors = new Float32Array([...xColor, ...xColor, ...yColor, ...yColor, ...zColor, ...zColor]);\n\n const index = new Uint16Array([0, 1, 2, 3, 4, 5]);\n\n const geometry = new Geometry(gl, {\n position: { size: 3, data: vertices },\n index: { size: 1, data: index },\n color: { size: 3, data: colors },\n wireframe: {},\n });\n\n const program = new Program(gl, {\n vertex: `\n attribute vec3 position;\n attribute vec3 color;\n uniform mat4 modelViewMatrix;\n uniform mat4 projectionMatrix;\n\n varying vec3 vColor;\n\n void main() {\n vColor = color;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragment: `\n precision highp float;\n varying vec3 vColor;\n\n void main() {\n gl_FragColor = vec4(vColor, 1.0);\n }\n `,\n });\n\n super(gl, { geometry, program });\n }\n}\n","AxesHelper.ts",[124,7163,7164,7184,7204,7224,7246,7266,7270,7281,7291,7301,7311,7321,7331,7335,7339,7353,7382,7388,7399,7410,7437,7464,7491,7503,7507,7534,7547,7551,7639,7643,7701,7705,7746,7750,7770,7794,7818,7843,7851,7859,7863,7883,7891,7895,7900,7904,7908,7912,7917,7921,7925,7930,7934,7938,7944,7952,7957,7961,7965,7969,7974,7978,7984,7992,7996,8020,8024],{"__ignoreMap":135},[65,7165,7166,7168,7170,7172,7174,7176,7178,7180,7182],{"class":140,"line":141},[65,7167,3251],{"class":154},[65,7169,287],{"class":154},[65,7171,5645],{"class":214},[65,7173,293],{"class":154},[65,7175,296],{"class":154},[65,7177,299],{"class":154},[65,7179,5654],{"class":302},[65,7181,306],{"class":154},[65,7183,155],{"class":154},[65,7185,7186,7188,7190,7192,7194,7196,7198,7200,7202],{"class":140,"line":158},[65,7187,3251],{"class":154},[65,7189,287],{"class":154},[65,7191,3302],{"class":214},[65,7193,293],{"class":154},[65,7195,296],{"class":154},[65,7197,299],{"class":154},[65,7199,5675],{"class":302},[65,7201,306],{"class":154},[65,7203,155],{"class":154},[65,7205,7206,7208,7210,7212,7214,7216,7218,7220,7222],{"class":140,"line":165},[65,7207,3251],{"class":154},[65,7209,287],{"class":154},[65,7211,3081],{"class":214},[65,7213,293],{"class":154},[65,7215,296],{"class":154},[65,7217,299],{"class":154},[65,7219,5696],{"class":302},[65,7221,306],{"class":154},[65,7223,155],{"class":154},[65,7225,7226,7228,7230,7232,7234,7236,7238,7240,7242,7244],{"class":140,"line":180},[65,7227,3251],{"class":154},[65,7229,323],{"class":154},[65,7231,287],{"class":154},[65,7233,5711],{"class":214},[65,7235,293],{"class":154},[65,7237,296],{"class":154},[65,7239,299],{"class":154},[65,7241,5720],{"class":302},[65,7243,306],{"class":154},[65,7245,155],{"class":154},[65,7247,7248,7250,7252,7254,7256,7258,7260,7262,7264],{"class":140,"line":194},[65,7249,3251],{"class":154},[65,7251,287],{"class":154},[65,7253,5488],{"class":214},[65,7255,293],{"class":154},[65,7257,296],{"class":154},[65,7259,299],{"class":154},[65,7261,5741],{"class":302},[65,7263,306],{"class":154},[65,7265,155],{"class":154},[65,7267,7268],{"class":140,"line":211},[65,7269,162],{"emptyLinePlaceholder":161},[65,7271,7272,7274,7276,7279],{"class":140,"line":240},[65,7273,284],{"class":154},[65,7275,5756],{"class":168},[65,7277,7278],{"class":326}," AxesHelperOptions",[65,7280,418],{"class":154},[65,7282,7283,7285,7287,7289],{"class":140,"line":391},[65,7284,5520],{"class":144},[65,7286,797],{"class":168},[65,7288,430],{"class":340},[65,7290,155],{"class":154},[65,7292,7293,7295,7297,7299],{"class":140,"line":401},[65,7294,6998],{"class":144},[65,7296,797],{"class":168},[65,7298,479],{"class":340},[65,7300,155],{"class":154},[65,7302,7303,7305,7307,7309],{"class":140,"line":406},[65,7304,7009],{"class":144},[65,7306,797],{"class":168},[65,7308,5711],{"class":326},[65,7310,155],{"class":154},[65,7312,7313,7315,7317,7319],{"class":140,"line":421},[65,7314,7039],{"class":144},[65,7316,797],{"class":168},[65,7318,5711],{"class":326},[65,7320,155],{"class":154},[65,7322,7323,7325,7327,7329],{"class":140,"line":435},[65,7324,7069],{"class":144},[65,7326,797],{"class":168},[65,7328,5711],{"class":326},[65,7330,155],{"class":154},[65,7332,7333],{"class":140,"line":447},[65,7334,243],{"class":154},[65,7336,7337],{"class":140,"line":459},[65,7338,162],{"emptyLinePlaceholder":161},[65,7340,7341,7343,7345,7347,7349,7351],{"class":140,"line":471},[65,7342,284],{"class":154},[65,7344,774],{"class":168},[65,7346,6952],{"class":326},[65,7348,5810],{"class":168},[65,7350,3302],{"class":302},[65,7352,418],{"class":154},[65,7354,7355,7357,7359,7361,7363,7365,7367,7369,7371,7373,7375,7378,7380],{"class":140,"line":63},[65,7356,788],{"class":168},[65,7358,224],{"class":154},[65,7360,794],{"class":793},[65,7362,797],{"class":168},[65,7364,800],{"class":326},[65,7366,230],{"class":154},[65,7368,814],{"class":793},[65,7370,427],{"class":168},[65,7372,5835],{"class":326},[65,7374,1830],{"class":154},[65,7376,7377],{"class":326},"AxesHelperOptions",[65,7379,5843],{"class":154},[65,7381,418],{"class":154},[65,7383,7384,7386],{"class":140,"line":495},[65,7385,848],{"class":168},[65,7387,418],{"class":154},[65,7389,7390,7393,7395,7397],{"class":140,"line":507},[65,7391,7392],{"class":214}," size",[65,7394,218],{"class":168},[65,7396,3137],{"class":793},[65,7398,3820],{"class":154},[65,7400,7401,7404,7406,7408],{"class":140,"line":519},[65,7402,7403],{"class":214}," symmetric",[65,7405,218],{"class":168},[65,7407,1039],{"class":793},[65,7409,3820],{"class":154},[65,7411,7412,7415,7417,7419,7421,7423,7425,7427,7429,7431,7433,7435],{"class":140,"line":531},[65,7413,7414],{"class":214}," xColor",[65,7416,218],{"class":168},[65,7418,1776],{"class":168},[65,7420,5488],{"class":200},[65,7422,224],{"class":204},[65,7424,7020],{"class":793},[65,7426,230],{"class":154},[65,7428,7025],{"class":793},[65,7430,230],{"class":154},[65,7432,7030],{"class":793},[65,7434,235],{"class":204},[65,7436,3820],{"class":154},[65,7438,7439,7442,7444,7446,7448,7450,7452,7454,7456,7458,7460,7462],{"class":140,"line":543},[65,7440,7441],{"class":214}," yColor",[65,7443,218],{"class":168},[65,7445,1776],{"class":168},[65,7447,5488],{"class":200},[65,7449,224],{"class":204},[65,7451,7050],{"class":793},[65,7453,230],{"class":154},[65,7455,7055],{"class":793},[65,7457,230],{"class":154},[65,7459,7060],{"class":793},[65,7461,235],{"class":204},[65,7463,3820],{"class":154},[65,7465,7466,7469,7471,7473,7475,7477,7479,7481,7483,7485,7487,7489],{"class":140,"line":555},[65,7467,7468],{"class":214}," zColor",[65,7470,218],{"class":168},[65,7472,1776],{"class":168},[65,7474,5488],{"class":200},[65,7476,224],{"class":204},[65,7478,7080],{"class":793},[65,7480,230],{"class":154},[65,7482,7085],{"class":793},[65,7484,230],{"class":154},[65,7486,7090],{"class":793},[65,7488,235],{"class":204},[65,7490,3820],{"class":154},[65,7492,7493,7495,7497,7499,7501],{"class":140,"line":567},[65,7494,6341],{"class":154},[65,7496,218],{"class":168},[65,7498,814],{"class":214},[65,7500,2269],{"class":168},[65,7502,5905],{"class":154},[65,7504,7505],{"class":140,"line":3757},[65,7506,162],{"emptyLinePlaceholder":161},[65,7508,7509,7511,7514,7516,7519,7522,7524,7527,7530,7532],{"class":140,"line":3787},[65,7510,848],{"class":168},[65,7512,7513],{"class":214}," a",[65,7515,218],{"class":168},[65,7517,7518],{"class":214}," symmetric",[65,7520,7521],{"class":168}," ?",[65,7523,4399],{"class":168},[65,7525,7526],{"class":214},"size",[65,7528,7529],{"class":168}," :",[65,7531,1142],{"class":793},[65,7533,155],{"class":154},[65,7535,7536,7538,7541,7543,7545],{"class":140,"line":3792},[65,7537,848],{"class":168},[65,7539,7540],{"class":214}," b",[65,7542,218],{"class":168},[65,7544,5854],{"class":214},[65,7546,155],{"class":154},[65,7548,7549],{"class":140,"line":3814},[65,7550,162],{"emptyLinePlaceholder":161},[65,7552,7553,7555,7557,7559,7561,7563,7565,7567,7569,7571,7573,7575,7577,7579,7581,7583,7585,7587,7589,7591,7593,7595,7597,7599,7601,7603,7605,7607,7609,7611,7613,7615,7617,7619,7621,7623,7625,7627,7629,7631,7633,7635,7637],{"class":140,"line":3823},[65,7554,848],{"class":168},[65,7556,5944],{"class":214},[65,7558,218],{"class":168},[65,7560,1776],{"class":168},[65,7562,5951],{"class":200},[65,7564,3645],{"class":204},[65,7566,29],{"class":214},[65,7568,230],{"class":154},[65,7570,1142],{"class":793},[65,7572,230],{"class":154},[65,7574,1142],{"class":793},[65,7576,230],{"class":154},[65,7578,7540],{"class":214},[65,7580,230],{"class":154},[65,7582,1142],{"class":793},[65,7584,230],{"class":154},[65,7586,1142],{"class":793},[65,7588,230],{"class":154},[65,7590,1142],{"class":793},[65,7592,230],{"class":154},[65,7594,7513],{"class":214},[65,7596,230],{"class":154},[65,7598,1142],{"class":793},[65,7600,230],{"class":154},[65,7602,1142],{"class":793},[65,7604,230],{"class":154},[65,7606,7540],{"class":214},[65,7608,230],{"class":154},[65,7610,1142],{"class":793},[65,7612,230],{"class":154},[65,7614,1142],{"class":793},[65,7616,230],{"class":154},[65,7618,1142],{"class":793},[65,7620,230],{"class":154},[65,7622,7513],{"class":214},[65,7624,230],{"class":154},[65,7626,1142],{"class":793},[65,7628,230],{"class":154},[65,7630,1142],{"class":793},[65,7632,230],{"class":154},[65,7634,7540],{"class":214},[65,7636,3658],{"class":204},[65,7638,155],{"class":154},[65,7640,7641],{"class":140,"line":3831},[65,7642,162],{"emptyLinePlaceholder":161},[65,7644,7645,7647,7650,7652,7654,7656,7658,7661,7664,7666,7669,7671,7673,7675,7678,7680,7682,7684,7686,7688,7691,7693,7695,7697,7699],{"class":140,"line":3841},[65,7646,848],{"class":168},[65,7648,7649],{"class":214}," colors",[65,7651,218],{"class":168},[65,7653,1776],{"class":168},[65,7655,5951],{"class":200},[65,7657,3645],{"class":204},[65,7659,7660],{"class":168},"...",[65,7662,7663],{"class":214},"xColor",[65,7665,230],{"class":154},[65,7667,7668],{"class":168}," ...",[65,7670,7663],{"class":214},[65,7672,230],{"class":154},[65,7674,7668],{"class":168},[65,7676,7677],{"class":214},"yColor",[65,7679,230],{"class":154},[65,7681,7668],{"class":168},[65,7683,7677],{"class":214},[65,7685,230],{"class":154},[65,7687,7668],{"class":168},[65,7689,7690],{"class":214},"zColor",[65,7692,230],{"class":154},[65,7694,7668],{"class":168},[65,7696,7690],{"class":214},[65,7698,3658],{"class":204},[65,7700,155],{"class":154},[65,7702,7703],{"class":140,"line":3861},[65,7704,162],{"emptyLinePlaceholder":161},[65,7706,7707,7709,7711,7713,7715,7717,7719,7721,7723,7725,7727,7729,7731,7733,7735,7737,7739,7742,7744],{"class":140,"line":3867},[65,7708,848],{"class":168},[65,7710,6187],{"class":214},[65,7712,218],{"class":168},[65,7714,1776],{"class":168},[65,7716,6194],{"class":200},[65,7718,3645],{"class":204},[65,7720,743],{"class":793},[65,7722,230],{"class":154},[65,7724,3137],{"class":793},[65,7726,230],{"class":154},[65,7728,3748],{"class":793},[65,7730,230],{"class":154},[65,7732,3739],{"class":793},[65,7734,230],{"class":154},[65,7736,3629],{"class":793},[65,7738,230],{"class":154},[65,7740,7741],{"class":793}," 5",[65,7743,3658],{"class":204},[65,7745,155],{"class":154},[65,7747,7748],{"class":140,"line":3876},[65,7749,162],{"emptyLinePlaceholder":161},[65,7751,7752,7754,7756,7758,7760,7762,7764,7766,7768],{"class":140,"line":3881},[65,7753,848],{"class":168},[65,7755,3903],{"class":214},[65,7757,218],{"class":168},[65,7759,1776],{"class":168},[65,7761,5645],{"class":200},[65,7763,224],{"class":204},[65,7765,794],{"class":214},[65,7767,230],{"class":154},[65,7769,418],{"class":154},[65,7771,7772,7774,7776,7778,7780,7782,7784,7786,7788,7790,7792],{"class":140,"line":3920},[65,7773,6289],{"class":204},[65,7775,797],{"class":154},[65,7777,287],{"class":154},[65,7779,5854],{"class":204},[65,7781,797],{"class":154},[65,7783,3739],{"class":793},[65,7785,230],{"class":154},[65,7787,6304],{"class":204},[65,7789,797],{"class":154},[65,7791,5944],{"class":214},[65,7793,3858],{"class":154},[65,7795,7796,7798,7800,7802,7804,7806,7808,7810,7812,7814,7816],{"class":140,"line":3954},[65,7797,6240],{"class":204},[65,7799,797],{"class":154},[65,7801,287],{"class":154},[65,7803,5854],{"class":204},[65,7805,797],{"class":154},[65,7807,3137],{"class":793},[65,7809,230],{"class":154},[65,7811,6304],{"class":204},[65,7813,797],{"class":154},[65,7815,6187],{"class":214},[65,7817,3858],{"class":154},[65,7819,7820,7823,7825,7827,7829,7831,7833,7835,7837,7839,7841],{"class":140,"line":3974},[65,7821,7822],{"class":204}," color",[65,7824,797],{"class":154},[65,7826,287],{"class":154},[65,7828,5854],{"class":204},[65,7830,797],{"class":154},[65,7832,3739],{"class":793},[65,7834,230],{"class":154},[65,7836,6304],{"class":204},[65,7838,797],{"class":154},[65,7840,7649],{"class":214},[65,7842,3858],{"class":154},[65,7844,7845,7847,7849],{"class":140,"line":3979},[65,7846,6331],{"class":204},[65,7848,797],{"class":154},[65,7850,6336],{"class":154},[65,7852,7853,7855,7857],{"class":140,"line":4031},[65,7854,6341],{"class":154},[65,7856,235],{"class":204},[65,7858,155],{"class":154},[65,7860,7861],{"class":140,"line":4036},[65,7862,162],{"emptyLinePlaceholder":161},[65,7864,7865,7867,7869,7871,7873,7875,7877,7879,7881],{"class":140,"line":4070},[65,7866,848],{"class":168},[65,7868,3797],{"class":214},[65,7870,218],{"class":168},[65,7872,1776],{"class":168},[65,7874,3081],{"class":200},[65,7876,224],{"class":204},[65,7878,794],{"class":214},[65,7880,230],{"class":154},[65,7882,418],{"class":154},[65,7884,7885,7887,7889],{"class":140,"line":4086},[65,7886,6374],{"class":204},[65,7888,797],{"class":154},[65,7890,6379],{"class":154},[65,7892,7893],{"class":140,"line":4102},[65,7894,6384],{"class":302},[65,7896,7897],{"class":140,"line":4118},[65,7898,7899],{"class":302}," attribute vec3 color;\n",[65,7901,7902],{"class":140,"line":4149},[65,7903,6389],{"class":302},[65,7905,7906],{"class":140,"line":4163},[65,7907,6394],{"class":302},[65,7909,7910],{"class":140,"line":4168},[65,7911,162],{"emptyLinePlaceholder":161},[65,7913,7914],{"class":140,"line":4194},[65,7915,7916],{"class":302}," varying vec3 vColor;\n",[65,7918,7919],{"class":140,"line":4199},[65,7920,162],{"emptyLinePlaceholder":161},[65,7922,7923],{"class":140,"line":4221},[65,7924,6403],{"class":302},[65,7926,7927],{"class":140,"line":4228},[65,7928,7929],{"class":302}," vColor = color;\n",[65,7931,7932],{"class":140,"line":4235},[65,7933,6408],{"class":302},[65,7935,7936],{"class":140,"line":4244},[65,7937,6413],{"class":302},[65,7939,7940,7942],{"class":140,"line":4261},[65,7941,6418],{"class":154},[65,7943,3820],{"class":154},[65,7945,7946,7948,7950],{"class":140,"line":4266},[65,7947,6425],{"class":204},[65,7949,797],{"class":154},[65,7951,6379],{"class":154},[65,7953,7954],{"class":140,"line":4275},[65,7955,7956],{"class":302}," precision highp float;\n",[65,7958,7959],{"class":140,"line":4280},[65,7960,7916],{"class":302},[65,7962,7963],{"class":140,"line":4322},[65,7964,162],{"emptyLinePlaceholder":161},[65,7966,7967],{"class":140,"line":4375},[65,7968,6403],{"class":302},[65,7970,7971],{"class":140,"line":4408},[65,7972,7973],{"class":302}," gl_FragColor = vec4(vColor, 1.0);\n",[65,7975,7976],{"class":140,"line":4426},[65,7977,6413],{"class":302},[65,7979,7980,7982],{"class":140,"line":4431},[65,7981,6418],{"class":154},[65,7983,3820],{"class":154},[65,7985,7986,7988,7990],{"class":140,"line":4447},[65,7987,6341],{"class":154},[65,7989,235],{"class":204},[65,7991,155],{"class":154},[65,7993,7994],{"class":140,"line":4470},[65,7995,162],{"emptyLinePlaceholder":161},[65,7997,7998,8000,8002,8004,8006,8008,8010,8012,8014,8016,8018],{"class":140,"line":4490},[65,7999,6510],{"class":830},[65,8001,224],{"class":204},[65,8003,794],{"class":214},[65,8005,230],{"class":154},[65,8007,287],{"class":154},[65,8009,3903],{"class":214},[65,8011,230],{"class":154},[65,8013,3797],{"class":214},[65,8015,293],{"class":154},[65,8017,235],{"class":204},[65,8019,155],{"class":154},[65,8021,8022],{"class":140,"line":4495},[65,8023,1171],{"class":154},[65,8025,8026],{"class":140,"line":4523},[65,8027,243],{"class":154},[15,8029,8030],{},"デフォルトでは、サイズが1で、対称表示は無効、xyz軸の色はそれぞれ赤、緑、青に設定されています。それでは、WebGLでの座標軸の作成方法を見ていきましょう。",[2418,8032,8033],{"id":8033},"軸の始点と終点",[129,8035,8037],{"className":131,"code":8036,"language":134,"meta":135,"style":135},"const a = symmetric ? -size : 0;\nconst b = size;\n",[124,8038,8039,8061],{"__ignoreMap":135},[65,8040,8041,8043,8045,8047,8049,8051,8053,8055,8057,8059],{"class":140,"line":141},[65,8042,1769],{"class":168},[65,8044,7513],{"class":144},[65,8046,218],{"class":168},[65,8048,7518],{"class":144},[65,8050,7521],{"class":168},[65,8052,4399],{"class":168},[65,8054,7526],{"class":144},[65,8056,7529],{"class":168},[65,8058,1142],{"class":793},[65,8060,155],{"class":154},[65,8062,8063,8065,8067,8069,8071],{"class":140,"line":158},[65,8064,1769],{"class":168},[65,8066,7540],{"class":144},[65,8068,218],{"class":168},[65,8070,5854],{"class":144},[65,8072,155],{"class":154},[15,8074,8075,8078,8079,8081,8082,8078,8084,8086],{},[124,8076,8077],{},"symmetric","が",[124,8080,667],{},"の時、すなわち対称表示の際には、軸の始点が負のサイズとなります。一方、",[124,8083,8077],{},[124,8085,692],{},"の時は、軸の始点は原点となります。",[2418,8088,8090],{"id":8089},"頂点色インデックスの設定","頂点、色、インデックスの設定",[15,8092,8093],{},"頂点、色、インデックスの配列を作成します。",[129,8095,8097],{"className":131,"code":8096,"language":134,"meta":135,"style":135},"const vertices = new Float32Array([\n a, 0, 0, \n b, 0, 0, \n\n 0, a, 0, \n 0, b, 0, \n\n 0, 0, a, \n 0, 0, b\n]);\n\nconst colors = new Float32Array([\n ...xColor, \n ...xColor, \n\n ...yColor, \n ...yColor, \n\n ...zColor, \n ...zColor\n]);\n\nconst index = new Uint16Array([0, 1, 2, 3, 4, 5]);\n",[124,8098,8099,8114,8131,8148,8152,8169,8185,8189,8205,8218,8224,8228,8242,8253,8263,8267,8277,8287,8291,8301,8308,8314,8318],{"__ignoreMap":135},[65,8100,8101,8103,8105,8107,8109,8111],{"class":140,"line":141},[65,8102,1769],{"class":168},[65,8104,5944],{"class":144},[65,8106,218],{"class":168},[65,8108,1776],{"class":168},[65,8110,5951],{"class":200},[65,8112,8113],{"class":204},"([\n",[65,8115,8116,8119,8121,8123,8125,8127,8129],{"class":140,"line":158},[65,8117,8118],{"class":144}," a",[65,8120,230],{"class":154},[65,8122,1142],{"class":793},[65,8124,230],{"class":154},[65,8126,1142],{"class":793},[65,8128,230],{"class":154},[65,8130,332],{"class":204},[65,8132,8133,8136,8138,8140,8142,8144,8146],{"class":140,"line":165},[65,8134,8135],{"class":144}," b",[65,8137,230],{"class":154},[65,8139,1142],{"class":793},[65,8141,230],{"class":154},[65,8143,1142],{"class":793},[65,8145,230],{"class":154},[65,8147,332],{"class":204},[65,8149,8150],{"class":140,"line":180},[65,8151,162],{"emptyLinePlaceholder":161},[65,8153,8154,8157,8159,8161,8163,8165,8167],{"class":140,"line":194},[65,8155,8156],{"class":793}," 0",[65,8158,230],{"class":154},[65,8160,7513],{"class":144},[65,8162,230],{"class":154},[65,8164,1142],{"class":793},[65,8166,230],{"class":154},[65,8168,332],{"class":204},[65,8170,8171,8173,8175,8177,8179,8181,8183],{"class":140,"line":211},[65,8172,8156],{"class":793},[65,8174,230],{"class":154},[65,8176,7540],{"class":144},[65,8178,230],{"class":154},[65,8180,1142],{"class":793},[65,8182,230],{"class":154},[65,8184,332],{"class":204},[65,8186,8187],{"class":140,"line":240},[65,8188,162],{"emptyLinePlaceholder":161},[65,8190,8191,8193,8195,8197,8199,8201,8203],{"class":140,"line":391},[65,8192,8156],{"class":793},[65,8194,230],{"class":154},[65,8196,1142],{"class":793},[65,8198,230],{"class":154},[65,8200,7513],{"class":144},[65,8202,230],{"class":154},[65,8204,332],{"class":204},[65,8206,8207,8209,8211,8213,8215],{"class":140,"line":401},[65,8208,8156],{"class":793},[65,8210,230],{"class":154},[65,8212,1142],{"class":793},[65,8214,230],{"class":154},[65,8216,8217],{"class":144}," b\n",[65,8219,8220,8222],{"class":140,"line":406},[65,8221,3658],{"class":204},[65,8223,155],{"class":154},[65,8225,8226],{"class":140,"line":421},[65,8227,162],{"emptyLinePlaceholder":161},[65,8229,8230,8232,8234,8236,8238,8240],{"class":140,"line":435},[65,8231,1769],{"class":168},[65,8233,7649],{"class":144},[65,8235,218],{"class":168},[65,8237,1776],{"class":168},[65,8239,5951],{"class":200},[65,8241,8113],{"class":204},[65,8243,8244,8247,8249,8251],{"class":140,"line":447},[65,8245,8246],{"class":168}," ...",[65,8248,7663],{"class":144},[65,8250,230],{"class":154},[65,8252,332],{"class":204},[65,8254,8255,8257,8259,8261],{"class":140,"line":459},[65,8256,8246],{"class":168},[65,8258,7663],{"class":144},[65,8260,230],{"class":154},[65,8262,332],{"class":204},[65,8264,8265],{"class":140,"line":471},[65,8266,162],{"emptyLinePlaceholder":161},[65,8268,8269,8271,8273,8275],{"class":140,"line":63},[65,8270,8246],{"class":168},[65,8272,7677],{"class":144},[65,8274,230],{"class":154},[65,8276,332],{"class":204},[65,8278,8279,8281,8283,8285],{"class":140,"line":495},[65,8280,8246],{"class":168},[65,8282,7677],{"class":144},[65,8284,230],{"class":154},[65,8286,332],{"class":204},[65,8288,8289],{"class":140,"line":507},[65,8290,162],{"emptyLinePlaceholder":161},[65,8292,8293,8295,8297,8299],{"class":140,"line":519},[65,8294,8246],{"class":168},[65,8296,7690],{"class":144},[65,8298,230],{"class":154},[65,8300,332],{"class":204},[65,8302,8303,8305],{"class":140,"line":531},[65,8304,8246],{"class":168},[65,8306,8307],{"class":144},"zColor\n",[65,8309,8310,8312],{"class":140,"line":543},[65,8311,3658],{"class":204},[65,8313,155],{"class":154},[65,8315,8316],{"class":140,"line":555},[65,8317,162],{"emptyLinePlaceholder":161},[65,8319,8320,8322,8324,8326,8328,8330,8332,8334,8336,8338,8340,8342,8344,8346,8348,8350,8352,8354,8356],{"class":140,"line":567},[65,8321,1769],{"class":168},[65,8323,6187],{"class":144},[65,8325,218],{"class":168},[65,8327,1776],{"class":168},[65,8329,6194],{"class":200},[65,8331,3645],{"class":204},[65,8333,743],{"class":793},[65,8335,230],{"class":154},[65,8337,3137],{"class":793},[65,8339,230],{"class":154},[65,8341,3748],{"class":793},[65,8343,230],{"class":154},[65,8345,3739],{"class":793},[65,8347,230],{"class":154},[65,8349,3629],{"class":793},[65,8351,230],{"class":154},[65,8353,7741],{"class":793},[65,8355,3658],{"class":204},[65,8357,155],{"class":154},[15,8359,8360],{},"XYZ軸の頂点を作成、それぞれに対応する色を設定し、インデックスを用いて描画順序を指定しています。",[15,8362,8363],{},"設定したデータをGeometryに渡してジオメトリを作成します。",[129,8365,8367],{"className":131,"code":8366,"language":134,"meta":135,"style":135},"const geometry = new Geometry(gl, {\n position: { size: 3, data: vertices },\n index: { size: 1, data: index },\n color: { size: 3, data: colors },\n wireframe: {},\n});\n",[124,8368,8369,8389,8414,8438,8462,8471],{"__ignoreMap":135},[65,8370,8371,8373,8375,8377,8379,8381,8383,8385,8387],{"class":140,"line":141},[65,8372,1769],{"class":168},[65,8374,3903],{"class":144},[65,8376,218],{"class":168},[65,8378,1776],{"class":168},[65,8380,5645],{"class":200},[65,8382,224],{"class":204},[65,8384,794],{"class":144},[65,8386,230],{"class":154},[65,8388,418],{"class":154},[65,8390,8391,8394,8396,8398,8400,8402,8404,8406,8408,8410,8412],{"class":140,"line":158},[65,8392,8393],{"class":204}," position",[65,8395,797],{"class":154},[65,8397,287],{"class":154},[65,8399,5854],{"class":204},[65,8401,797],{"class":154},[65,8403,3739],{"class":793},[65,8405,230],{"class":154},[65,8407,6304],{"class":204},[65,8409,797],{"class":154},[65,8411,5944],{"class":144},[65,8413,3858],{"class":154},[65,8415,8416,8418,8420,8422,8424,8426,8428,8430,8432,8434,8436],{"class":140,"line":165},[65,8417,6899],{"class":204},[65,8419,797],{"class":154},[65,8421,287],{"class":154},[65,8423,5854],{"class":204},[65,8425,797],{"class":154},[65,8427,3137],{"class":793},[65,8429,230],{"class":154},[65,8431,6304],{"class":204},[65,8433,797],{"class":154},[65,8435,6187],{"class":144},[65,8437,3858],{"class":154},[65,8439,8440,8442,8444,8446,8448,8450,8452,8454,8456,8458,8460],{"class":140,"line":180},[65,8441,5543],{"class":204},[65,8443,797],{"class":154},[65,8445,287],{"class":154},[65,8447,5854],{"class":204},[65,8449,797],{"class":154},[65,8451,3739],{"class":793},[65,8453,230],{"class":154},[65,8455,6304],{"class":204},[65,8457,797],{"class":154},[65,8459,7649],{"class":144},[65,8461,3858],{"class":154},[65,8463,8464,8467,8469],{"class":140,"line":194},[65,8465,8466],{"class":204}," wireframe",[65,8468,797],{"class":154},[65,8470,6336],{"class":154},[65,8472,8473,8475,8477],{"class":140,"line":211},[65,8474,2899],{"class":154},[65,8476,235],{"class":204},[65,8478,155],{"class":154},[15,8480,8481,8482,8485],{},"各軸の色は、フラグメントシェーダーで設定する",[124,8483,8484],{},"vColor","によって反映されます。",[129,8487,8489],{"className":131,"code":8488,"language":134,"meta":135,"style":135},"const program = new Program(gl, {\n vertex: `\n // ...\n attribute vec3 color;\n\n varying vec3 vColor;\n\n void main() {\n vColor = color;\n }\n `,\n fragment: `\n precision highp float;\n varying vec3 vColor;\n\n void main() {\n gl_FragColor = vec4(vColor, 1.0);\n }\n `,\n});\n",[124,8490,8491,8511,8519,8523,8528,8532,8537,8541,8546,8551,8555,8562,8570,8575,8579,8583,8587,8592,8596,8602],{"__ignoreMap":135},[65,8492,8493,8495,8497,8499,8501,8503,8505,8507,8509],{"class":140,"line":141},[65,8494,1769],{"class":168},[65,8496,3797],{"class":144},[65,8498,218],{"class":168},[65,8500,1776],{"class":168},[65,8502,3081],{"class":200},[65,8504,224],{"class":204},[65,8506,794],{"class":144},[65,8508,230],{"class":154},[65,8510,418],{"class":154},[65,8512,8513,8515,8517],{"class":140,"line":158},[65,8514,4839],{"class":204},[65,8516,797],{"class":154},[65,8518,6379],{"class":154},[65,8520,8521],{"class":140,"line":165},[65,8522,783],{"class":302},[65,8524,8525],{"class":140,"line":180},[65,8526,8527],{"class":302}," attribute vec3 color;\n",[65,8529,8530],{"class":140,"line":194},[65,8531,162],{"emptyLinePlaceholder":161},[65,8533,8534],{"class":140,"line":211},[65,8535,8536],{"class":302}," varying vec3 vColor;\n",[65,8538,8539],{"class":140,"line":240},[65,8540,162],{"emptyLinePlaceholder":161},[65,8542,8543],{"class":140,"line":391},[65,8544,8545],{"class":302}," void main() {\n",[65,8547,8548],{"class":140,"line":401},[65,8549,8550],{"class":302}," vColor = color;\n",[65,8552,8553],{"class":140,"line":406},[65,8554,1171],{"class":302},[65,8556,8557,8560],{"class":140,"line":421},[65,8558,8559],{"class":154}," `",[65,8561,3820],{"class":154},[65,8563,8564,8566,8568],{"class":140,"line":435},[65,8565,4846],{"class":204},[65,8567,797],{"class":154},[65,8569,6379],{"class":154},[65,8571,8572],{"class":140,"line":447},[65,8573,8574],{"class":302}," precision highp float;\n",[65,8576,8577],{"class":140,"line":459},[65,8578,8536],{"class":302},[65,8580,8581],{"class":140,"line":471},[65,8582,162],{"emptyLinePlaceholder":161},[65,8584,8585],{"class":140,"line":63},[65,8586,8545],{"class":302},[65,8588,8589],{"class":140,"line":495},[65,8590,8591],{"class":302}," gl_FragColor = vec4(vColor, 1.0);\n",[65,8593,8594],{"class":140,"line":507},[65,8595,1171],{"class":302},[65,8597,8598,8600],{"class":140,"line":519},[65,8599,8559],{"class":154},[65,8601,3820],{"class":154},[65,8603,8604,8606,8608],{"class":140,"line":531},[65,8605,2899],{"class":154},[65,8607,235],{"class":204},[65,8609,155],{"class":154},[15,8611,8612],{},"これでXYZ軸の作成は完了です。",[15,8614,8615],{},[57,8616],{"alt":8617,"src":8618,"title":8617},"XYZ軸の表示","https://res.cloudinary.com/dy8ftemi0/image/upload/v1788600080/webgl-helper-function-02_dx8hrp.jpg",[11,8620,8621],{"id":8621},"法線可視化のヘルパー関数の作成",[15,8623,8624],{},"ここからは、Boxなどのジオメトリを持つメッシュに対して法線を可視化する方法を見ていきます。",[1177,8626,8628],{"id":8627},"vertexnormalshelperの作成","VertexNormalsHelperの作成",[15,8630,8631,8632,8634],{},"各頂点から法線方向へ短い線を表示するヘルパー関数を作成します。",[5467,8633],{},"\n例としてBoxに対して使用する場合、次のようになります。",[129,8636,8638],{"className":131,"code":8637,"filename":3244,"language":134,"meta":135,"style":135},"import { VertexNormalsHelper, Vec3 } from '@/lib/webgl';\n\nconst VERTEX_NORMALS_PARAMS = {\n size: 0.1,\n color: new Vec3(0.86, 0.16, 0.86),\n};\n\nconst box = new Mesh(gl, { geometry: boxGeometry, program });\nscene.add(box);\n\nconst boxVertexNormals = new VertexNormalsHelper(box, VERTEX_NORMALS_PARAMS);\nscene.add(boxVertexNormals);\n",[124,8639,8640,8665,8669,8680,8690,8719,8723,8727,8763,8779,8783,8808],{"__ignoreMap":135},[65,8641,8642,8644,8646,8649,8651,8653,8655,8657,8659,8661,8663],{"class":140,"line":141},[65,8643,3251],{"class":154},[65,8645,287],{"class":154},[65,8647,8648],{"class":214}," VertexNormalsHelper",[65,8650,230],{"class":154},[65,8652,5488],{"class":214},[65,8654,293],{"class":154},[65,8656,296],{"class":154},[65,8658,299],{"class":154},[65,8660,3339],{"class":302},[65,8662,306],{"class":154},[65,8664,155],{"class":154},[65,8666,8667],{"class":140,"line":158},[65,8668,162],{"emptyLinePlaceholder":161},[65,8670,8671,8673,8676,8678],{"class":140,"line":165},[65,8672,1769],{"class":168},[65,8674,8675],{"class":144}," VERTEX_NORMALS_PARAMS",[65,8677,218],{"class":168},[65,8679,418],{"class":154},[65,8681,8682,8684,8686,8688],{"class":140,"line":180},[65,8683,5520],{"class":204},[65,8685,797],{"class":154},[65,8687,3584],{"class":793},[65,8689,3820],{"class":154},[65,8691,8692,8694,8696,8698,8700,8702,8705,8707,8710,8712,8715,8717],{"class":140,"line":194},[65,8693,5543],{"class":204},[65,8695,797],{"class":154},[65,8697,1776],{"class":168},[65,8699,5488],{"class":200},[65,8701,224],{"class":204},[65,8703,8704],{"class":793},"0.86",[65,8706,230],{"class":154},[65,8708,8709],{"class":793}," 0.16",[65,8711,230],{"class":154},[65,8713,8714],{"class":793}," 0.86",[65,8716,235],{"class":204},[65,8718,3820],{"class":154},[65,8720,8721],{"class":140,"line":211},[65,8722,4731],{"class":154},[65,8724,8725],{"class":140,"line":240},[65,8726,162],{"emptyLinePlaceholder":161},[65,8728,8729,8731,8733,8735,8737,8739,8741,8743,8745,8747,8749,8751,8753,8755,8757,8759,8761],{"class":140,"line":391},[65,8730,1769],{"class":168},[65,8732,4285],{"class":144},[65,8734,218],{"class":168},[65,8736,1776],{"class":168},[65,8738,3302],{"class":200},[65,8740,224],{"class":204},[65,8742,794],{"class":144},[65,8744,230],{"class":154},[65,8746,287],{"class":154},[65,8748,3903],{"class":204},[65,8750,797],{"class":154},[65,8752,3984],{"class":144},[65,8754,230],{"class":154},[65,8756,3797],{"class":144},[65,8758,293],{"class":154},[65,8760,235],{"class":204},[65,8762,155],{"class":154},[65,8764,8765,8767,8769,8771,8773,8775,8777],{"class":140,"line":401},[65,8766,4932],{"class":144},[65,8768,834],{"class":154},[65,8770,3962],{"class":200},[65,8772,224],{"class":204},[65,8774,4419],{"class":144},[65,8776,235],{"class":204},[65,8778,155],{"class":154},[65,8780,8781],{"class":140,"line":406},[65,8782,162],{"emptyLinePlaceholder":161},[65,8784,8785,8787,8790,8792,8794,8796,8798,8800,8802,8804,8806],{"class":140,"line":421},[65,8786,1769],{"class":168},[65,8788,8789],{"class":144}," boxVertexNormals",[65,8791,218],{"class":168},[65,8793,1776],{"class":168},[65,8795,8648],{"class":200},[65,8797,224],{"class":204},[65,8799,4419],{"class":144},[65,8801,230],{"class":154},[65,8803,8675],{"class":144},[65,8805,235],{"class":204},[65,8807,155],{"class":154},[65,8809,8810,8812,8814,8816,8818,8821,8823],{"class":140,"line":435},[65,8811,4932],{"class":144},[65,8813,834],{"class":154},[65,8815,3962],{"class":200},[65,8817,224],{"class":204},[65,8819,8820],{"class":144},"boxVertexNormals",[65,8822,235],{"class":204},[65,8824,155],{"class":154},[15,8826,8827],{},"第1引数には法線を表示したいメッシュオブジェクトを指定します。第2引数には法線のサイズや色を指定するオプションを渡すことができます。",[15,8829,8830],{},"パラメータとしては、法線のサイズ(size)、色(color)を指定できます。それでは、VertexNormalsHelperの実装を見ていきましょう。",[15,8832,8833],{},"VertexNormalsHelper.tsの全コードは次のようになります。",[3233,8835,8836,8839],{},[3236,8837,8838],{},"VertexNormalsHelper.tsの全コード",[36,8840,8841],{},[129,8842,8845],{"className":131,"code":8843,"filename":8844,"language":134,"meta":135,"style":135},"import { Geometry } from '../../core/Geometry';\nimport { Mesh } from '../../core/Mesh';\nimport { Program } from '../../core/Program';\nimport type { Color } from '../../math/Color';\nimport { Mat3 } from '../../math/Mat3';\nimport { Vec3 } from '../../math/Vec3';\n\nexport interface VertexNormalsHelperOptions {\n size: number;\n color: Color;\n}\n\nexport class VertexNormalsHelper extends Mesh {\n constructor(object: Mesh, options?: Partial\u003CVertexNormalsHelperOptions>) {\n const { size = 0.1, color = new Vec3(0.86, 0.16, 0.86) } = options || {};\n const gl = object.gl;\n const normalAttr = object.geometry.attributes.normal;\n const normalData = normalAttr.data as Float32Array;\n const nNormals = normalAttr.count ?? normalData.length / (normalAttr.size ?? 3);\n const positionsArray = new Float32Array(nNormals * 2 * 3);\n const normalsArray = new Float32Array(nNormals * 2 * 3);\n const sizeArray = new Float32Array(nNormals * 2);\n\n const positionData = object.geometry.attributes.position.data as Float32Array;\n const sizeData = new Float32Array([0, size]);\n\n for (let i = 0; i \u003C nNormals; i++) {\n const i6 = i * 6;\n const i3 = i * 3;\n\n const pSub = positionData.subarray(i3, i3 + 3);\n positionsArray.set(pSub, i6);\n positionsArray.set(pSub, i6 + 3);\n\n const nSub = normalData.subarray(i3, i3 + 3);\n normalsArray.set(nSub, i6);\n normalsArray.set(nSub, i6 + 3);\n\n sizeArray.set(sizeData, i * 2);\n }\n\n const index = new Uint16Array(nNormals * 2);\n for (let i = 0; i \u003C index.length; i++) {\n index[i] = i;\n }\n\n const geometry = new Geometry(gl, {\n position: { size: 3, data: positionsArray },\n normal: { size: 3, data: normalsArray },\n size: { size: 1, data: sizeArray },\n index: { size: 1, data: index },\n wireframe: {},\n });\n\n const program = new Program(gl, {\n vertex: `\n attribute vec3 position;\n attribute vec3 normal;\n attribute float size;\n\n uniform mat4 viewMatrix;\n uniform mat4 projectionMatrix;\n uniform mat4 objectWorldMatrix;\n uniform mat3 worldNormalMatrix;\n\n void main() {\n vec3 n = normalize(worldNormalMatrix * normal) * size;\n vec3 p = (objectWorldMatrix * vec4(position, 1.0)).xyz;\n gl_Position = projectionMatrix * viewMatrix * vec4(p + n, 1.0);\n }\n `,\n fragment: `\n precision highp float;\n uniform vec3 color;\n\n void main() {\n gl_FragColor = vec4(color, 1.0);\n }\n `,\n uniforms: {\n color: { value: color },\n worldNormalMatrix: { value: new Mat3() },\n objectWorldMatrix: { value: object.worldMatrix },\n },\n });\n\n super(gl, { geometry, program });\n }\n}\n","VertexNormalsHelper.ts",[124,8846,8847,8867,8887,8907,8929,8951,8971,8975,8986,8996,9006,9010,9014,9028,9058,9104,9121,9149,9172,9217,9247,9276,9301,9305,9338,9363,9367,9399,9416,9433,9437,9470,9492,9516,9520,9551,9573,9597,9601,9627,9631,9635,9659,9696,9712,9716,9720,9740,9764,9789,9813,9837,9845,9853,9857,9877,9885,9889,9894,9899,9903,9908,9912,9917,9922,9926,9930,9935,9940,9945,9949,9955,9963,9967,9971,9975,9979,9983,9987,9993,10001,10017,10040,10063,10068,10077,10082,10107,10112],{"__ignoreMap":135},[65,8848,8849,8851,8853,8855,8857,8859,8861,8863,8865],{"class":140,"line":141},[65,8850,3251],{"class":154},[65,8852,287],{"class":154},[65,8854,5645],{"class":214},[65,8856,293],{"class":154},[65,8858,296],{"class":154},[65,8860,299],{"class":154},[65,8862,5654],{"class":302},[65,8864,306],{"class":154},[65,8866,155],{"class":154},[65,8868,8869,8871,8873,8875,8877,8879,8881,8883,8885],{"class":140,"line":158},[65,8870,3251],{"class":154},[65,8872,287],{"class":154},[65,8874,3302],{"class":214},[65,8876,293],{"class":154},[65,8878,296],{"class":154},[65,8880,299],{"class":154},[65,8882,5675],{"class":302},[65,8884,306],{"class":154},[65,8886,155],{"class":154},[65,8888,8889,8891,8893,8895,8897,8899,8901,8903,8905],{"class":140,"line":165},[65,8890,3251],{"class":154},[65,8892,287],{"class":154},[65,8894,3081],{"class":214},[65,8896,293],{"class":154},[65,8898,296],{"class":154},[65,8900,299],{"class":154},[65,8902,5696],{"class":302},[65,8904,306],{"class":154},[65,8906,155],{"class":154},[65,8908,8909,8911,8913,8915,8917,8919,8921,8923,8925,8927],{"class":140,"line":180},[65,8910,3251],{"class":154},[65,8912,323],{"class":154},[65,8914,287],{"class":154},[65,8916,5711],{"class":214},[65,8918,293],{"class":154},[65,8920,296],{"class":154},[65,8922,299],{"class":154},[65,8924,5720],{"class":302},[65,8926,306],{"class":154},[65,8928,155],{"class":154},[65,8930,8931,8933,8935,8938,8940,8942,8944,8947,8949],{"class":140,"line":194},[65,8932,3251],{"class":154},[65,8934,287],{"class":154},[65,8936,8937],{"class":214}," Mat3",[65,8939,293],{"class":154},[65,8941,296],{"class":154},[65,8943,299],{"class":154},[65,8945,8946],{"class":302},"../../math/Mat3",[65,8948,306],{"class":154},[65,8950,155],{"class":154},[65,8952,8953,8955,8957,8959,8961,8963,8965,8967,8969],{"class":140,"line":211},[65,8954,3251],{"class":154},[65,8956,287],{"class":154},[65,8958,5488],{"class":214},[65,8960,293],{"class":154},[65,8962,296],{"class":154},[65,8964,299],{"class":154},[65,8966,5741],{"class":302},[65,8968,306],{"class":154},[65,8970,155],{"class":154},[65,8972,8973],{"class":140,"line":240},[65,8974,162],{"emptyLinePlaceholder":161},[65,8976,8977,8979,8981,8984],{"class":140,"line":391},[65,8978,284],{"class":154},[65,8980,5756],{"class":168},[65,8982,8983],{"class":326}," VertexNormalsHelperOptions",[65,8985,418],{"class":154},[65,8987,8988,8990,8992,8994],{"class":140,"line":401},[65,8989,5520],{"class":144},[65,8991,797],{"class":168},[65,8993,430],{"class":340},[65,8995,155],{"class":154},[65,8997,8998,9000,9002,9004],{"class":140,"line":406},[65,8999,5543],{"class":144},[65,9001,797],{"class":168},[65,9003,5711],{"class":326},[65,9005,155],{"class":154},[65,9007,9008],{"class":140,"line":421},[65,9009,243],{"class":154},[65,9011,9012],{"class":140,"line":435},[65,9013,162],{"emptyLinePlaceholder":161},[65,9015,9016,9018,9020,9022,9024,9026],{"class":140,"line":447},[65,9017,284],{"class":154},[65,9019,774],{"class":168},[65,9021,8648],{"class":326},[65,9023,5810],{"class":168},[65,9025,3302],{"class":302},[65,9027,418],{"class":154},[65,9029,9030,9032,9034,9037,9039,9041,9043,9045,9047,9049,9051,9054,9056],{"class":140,"line":459},[65,9031,788],{"class":168},[65,9033,224],{"class":154},[65,9035,9036],{"class":793},"object",[65,9038,797],{"class":168},[65,9040,3302],{"class":326},[65,9042,230],{"class":154},[65,9044,814],{"class":793},[65,9046,427],{"class":168},[65,9048,5835],{"class":326},[65,9050,1830],{"class":154},[65,9052,9053],{"class":326},"VertexNormalsHelperOptions",[65,9055,5843],{"class":154},[65,9057,418],{"class":154},[65,9059,9060,9062,9064,9066,9068,9070,9072,9074,9076,9078,9080,9082,9084,9086,9088,9090,9092,9094,9096,9098,9100,9102],{"class":140,"line":471},[65,9061,848],{"class":168},[65,9063,287],{"class":154},[65,9065,5854],{"class":214},[65,9067,218],{"class":168},[65,9069,3584],{"class":793},[65,9071,230],{"class":154},[65,9073,5872],{"class":214},[65,9075,218],{"class":168},[65,9077,1776],{"class":168},[65,9079,5488],{"class":200},[65,9081,224],{"class":204},[65,9083,8704],{"class":793},[65,9085,230],{"class":154},[65,9087,8709],{"class":793},[65,9089,230],{"class":154},[65,9091,8714],{"class":793},[65,9093,1713],{"class":204},[65,9095,2899],{"class":154},[65,9097,218],{"class":168},[65,9099,814],{"class":214},[65,9101,2269],{"class":168},[65,9103,5905],{"class":154},[65,9105,9106,9108,9110,9112,9115,9117,9119],{"class":140,"line":63},[65,9107,848],{"class":168},[65,9109,841],{"class":214},[65,9111,218],{"class":168},[65,9113,9114],{"class":214}," object",[65,9116,834],{"class":154},[65,9118,794],{"class":214},[65,9120,155],{"class":154},[65,9122,9123,9125,9128,9130,9132,9134,9137,9139,9142,9144,9147],{"class":140,"line":495},[65,9124,848],{"class":168},[65,9126,9127],{"class":214}," normalAttr",[65,9129,218],{"class":168},[65,9131,9114],{"class":214},[65,9133,834],{"class":154},[65,9135,9136],{"class":214},"geometry",[65,9138,834],{"class":154},[65,9140,9141],{"class":214},"attributes",[65,9143,834],{"class":154},[65,9145,9146],{"class":214},"normal",[65,9148,155],{"class":154},[65,9150,9151,9153,9156,9158,9160,9162,9165,9168,9170],{"class":140,"line":507},[65,9152,848],{"class":168},[65,9154,9155],{"class":214}," normalData",[65,9157,218],{"class":168},[65,9159,9127],{"class":214},[65,9161,834],{"class":154},[65,9163,9164],{"class":214},"data",[65,9166,9167],{"class":154}," as",[65,9169,5951],{"class":326},[65,9171,155],{"class":154},[65,9173,9174,9176,9179,9181,9183,9185,9188,9190,9192,9194,9197,9200,9202,9205,9207,9209,9211,9213,9215],{"class":140,"line":519},[65,9175,848],{"class":168},[65,9177,9178],{"class":214}," nNormals",[65,9180,218],{"class":168},[65,9182,9127],{"class":214},[65,9184,834],{"class":154},[65,9186,9187],{"class":214},"count",[65,9189,881],{"class":168},[65,9191,9155],{"class":214},[65,9193,834],{"class":154},[65,9195,9196],{"class":204},"length ",[65,9198,9199],{"class":168},"/",[65,9201,1696],{"class":204},[65,9203,9204],{"class":214},"normalAttr",[65,9206,834],{"class":154},[65,9208,7526],{"class":214},[65,9210,881],{"class":168},[65,9212,3739],{"class":793},[65,9214,235],{"class":204},[65,9216,155],{"class":154},[65,9218,9219,9221,9224,9226,9228,9230,9232,9235,9237,9239,9241,9243,9245],{"class":140,"line":531},[65,9220,848],{"class":168},[65,9222,9223],{"class":214}," positionsArray",[65,9225,218],{"class":168},[65,9227,1776],{"class":168},[65,9229,5951],{"class":200},[65,9231,224],{"class":204},[65,9233,9234],{"class":214},"nNormals",[65,9236,5933],{"class":168},[65,9238,3748],{"class":793},[65,9240,5933],{"class":168},[65,9242,3739],{"class":793},[65,9244,235],{"class":204},[65,9246,155],{"class":154},[65,9248,9249,9251,9254,9256,9258,9260,9262,9264,9266,9268,9270,9272,9274],{"class":140,"line":543},[65,9250,848],{"class":168},[65,9252,9253],{"class":214}," normalsArray",[65,9255,218],{"class":168},[65,9257,1776],{"class":168},[65,9259,5951],{"class":200},[65,9261,224],{"class":204},[65,9263,9234],{"class":214},[65,9265,5933],{"class":168},[65,9267,3748],{"class":793},[65,9269,5933],{"class":168},[65,9271,3739],{"class":793},[65,9273,235],{"class":204},[65,9275,155],{"class":154},[65,9277,9278,9280,9283,9285,9287,9289,9291,9293,9295,9297,9299],{"class":140,"line":555},[65,9279,848],{"class":168},[65,9281,9282],{"class":214}," sizeArray",[65,9284,218],{"class":168},[65,9286,1776],{"class":168},[65,9288,5951],{"class":200},[65,9290,224],{"class":204},[65,9292,9234],{"class":214},[65,9294,5933],{"class":168},[65,9296,3748],{"class":793},[65,9298,235],{"class":204},[65,9300,155],{"class":154},[65,9302,9303],{"class":140,"line":567},[65,9304,162],{"emptyLinePlaceholder":161},[65,9306,9307,9309,9312,9314,9316,9318,9320,9322,9324,9326,9328,9330,9332,9334,9336],{"class":140,"line":3757},[65,9308,848],{"class":168},[65,9310,9311],{"class":214}," positionData",[65,9313,218],{"class":168},[65,9315,9114],{"class":214},[65,9317,834],{"class":154},[65,9319,9136],{"class":214},[65,9321,834],{"class":154},[65,9323,9141],{"class":214},[65,9325,834],{"class":154},[65,9327,3610],{"class":214},[65,9329,834],{"class":154},[65,9331,9164],{"class":214},[65,9333,9167],{"class":154},[65,9335,5951],{"class":326},[65,9337,155],{"class":154},[65,9339,9340,9342,9345,9347,9349,9351,9353,9355,9357,9359,9361],{"class":140,"line":3787},[65,9341,848],{"class":168},[65,9343,9344],{"class":214}," sizeData",[65,9346,218],{"class":168},[65,9348,1776],{"class":168},[65,9350,5951],{"class":200},[65,9352,3645],{"class":204},[65,9354,743],{"class":793},[65,9356,230],{"class":154},[65,9358,5854],{"class":214},[65,9360,3658],{"class":204},[65,9362,155],{"class":154},[65,9364,9365],{"class":140,"line":3792},[65,9366,162],{"emptyLinePlaceholder":161},[65,9368,9369,9371,9373,9375,9377,9379,9381,9383,9385,9387,9389,9391,9393,9395,9397],{"class":140,"line":3814},[65,9370,5990],{"class":154},[65,9372,1696],{"class":204},[65,9374,5995],{"class":168},[65,9376,5998],{"class":214},[65,9378,218],{"class":168},[65,9380,1142],{"class":793},[65,9382,6005],{"class":154},[65,9384,5998],{"class":214},[65,9386,6223],{"class":168},[65,9388,9178],{"class":214},[65,9390,6005],{"class":154},[65,9392,5998],{"class":214},[65,9394,6019],{"class":168},[65,9396,1713],{"class":204},[65,9398,208],{"class":154},[65,9400,9401,9403,9406,9408,9410,9412,9414],{"class":140,"line":3823},[65,9402,6028],{"class":168},[65,9404,9405],{"class":214}," i6",[65,9407,218],{"class":168},[65,9409,5998],{"class":214},[65,9411,5933],{"class":168},[65,9413,6168],{"class":793},[65,9415,155],{"class":154},[65,9417,9418,9420,9423,9425,9427,9429,9431],{"class":140,"line":3831},[65,9419,6028],{"class":168},[65,9421,9422],{"class":214}," i3",[65,9424,218],{"class":168},[65,9426,5998],{"class":214},[65,9428,5933],{"class":168},[65,9430,3739],{"class":793},[65,9432,155],{"class":154},[65,9434,9435],{"class":140,"line":3841},[65,9436,162],{"emptyLinePlaceholder":161},[65,9438,9439,9441,9444,9446,9448,9450,9453,9455,9458,9460,9462,9464,9466,9468],{"class":140,"line":3861},[65,9440,6028],{"class":168},[65,9442,9443],{"class":214}," pSub",[65,9445,218],{"class":168},[65,9447,9311],{"class":214},[65,9449,834],{"class":154},[65,9451,9452],{"class":200},"subarray",[65,9454,224],{"class":204},[65,9456,9457],{"class":214},"i3",[65,9459,230],{"class":154},[65,9461,9422],{"class":214},[65,9463,2367],{"class":168},[65,9465,3739],{"class":793},[65,9467,235],{"class":204},[65,9469,155],{"class":154},[65,9471,9472,9475,9477,9479,9481,9484,9486,9488,9490],{"class":140,"line":3867},[65,9473,9474],{"class":214}," positionsArray",[65,9476,834],{"class":154},[65,9478,3615],{"class":200},[65,9480,224],{"class":204},[65,9482,9483],{"class":214},"pSub",[65,9485,230],{"class":154},[65,9487,9405],{"class":214},[65,9489,235],{"class":204},[65,9491,155],{"class":154},[65,9493,9494,9496,9498,9500,9502,9504,9506,9508,9510,9512,9514],{"class":140,"line":3876},[65,9495,9474],{"class":214},[65,9497,834],{"class":154},[65,9499,3615],{"class":200},[65,9501,224],{"class":204},[65,9503,9483],{"class":214},[65,9505,230],{"class":154},[65,9507,9405],{"class":214},[65,9509,2367],{"class":168},[65,9511,3739],{"class":793},[65,9513,235],{"class":204},[65,9515,155],{"class":154},[65,9517,9518],{"class":140,"line":3881},[65,9519,162],{"emptyLinePlaceholder":161},[65,9521,9522,9524,9527,9529,9531,9533,9535,9537,9539,9541,9543,9545,9547,9549],{"class":140,"line":3920},[65,9523,6028],{"class":168},[65,9525,9526],{"class":214}," nSub",[65,9528,218],{"class":168},[65,9530,9155],{"class":214},[65,9532,834],{"class":154},[65,9534,9452],{"class":200},[65,9536,224],{"class":204},[65,9538,9457],{"class":214},[65,9540,230],{"class":154},[65,9542,9422],{"class":214},[65,9544,2367],{"class":168},[65,9546,3739],{"class":793},[65,9548,235],{"class":204},[65,9550,155],{"class":154},[65,9552,9553,9556,9558,9560,9562,9565,9567,9569,9571],{"class":140,"line":3954},[65,9554,9555],{"class":214}," normalsArray",[65,9557,834],{"class":154},[65,9559,3615],{"class":200},[65,9561,224],{"class":204},[65,9563,9564],{"class":214},"nSub",[65,9566,230],{"class":154},[65,9568,9405],{"class":214},[65,9570,235],{"class":204},[65,9572,155],{"class":154},[65,9574,9575,9577,9579,9581,9583,9585,9587,9589,9591,9593,9595],{"class":140,"line":3974},[65,9576,9555],{"class":214},[65,9578,834],{"class":154},[65,9580,3615],{"class":200},[65,9582,224],{"class":204},[65,9584,9564],{"class":214},[65,9586,230],{"class":154},[65,9588,9405],{"class":214},[65,9590,2367],{"class":168},[65,9592,3739],{"class":793},[65,9594,235],{"class":204},[65,9596,155],{"class":154},[65,9598,9599],{"class":140,"line":3979},[65,9600,162],{"emptyLinePlaceholder":161},[65,9602,9603,9606,9608,9610,9612,9615,9617,9619,9621,9623,9625],{"class":140,"line":4031},[65,9604,9605],{"class":214}," sizeArray",[65,9607,834],{"class":154},[65,9609,3615],{"class":200},[65,9611,224],{"class":204},[65,9613,9614],{"class":214},"sizeData",[65,9616,230],{"class":154},[65,9618,5998],{"class":214},[65,9620,5933],{"class":168},[65,9622,3748],{"class":793},[65,9624,235],{"class":204},[65,9626,155],{"class":154},[65,9628,9629],{"class":140,"line":4036},[65,9630,3204],{"class":154},[65,9632,9633],{"class":140,"line":4070},[65,9634,162],{"emptyLinePlaceholder":161},[65,9636,9637,9639,9641,9643,9645,9647,9649,9651,9653,9655,9657],{"class":140,"line":4086},[65,9638,848],{"class":168},[65,9640,6187],{"class":214},[65,9642,218],{"class":168},[65,9644,1776],{"class":168},[65,9646,6194],{"class":200},[65,9648,224],{"class":204},[65,9650,9234],{"class":214},[65,9652,5933],{"class":168},[65,9654,3748],{"class":793},[65,9656,235],{"class":204},[65,9658,155],{"class":154},[65,9660,9661,9663,9665,9667,9669,9671,9673,9675,9677,9679,9681,9683,9686,9688,9690,9692,9694],{"class":140,"line":4102},[65,9662,5990],{"class":154},[65,9664,1696],{"class":204},[65,9666,5995],{"class":168},[65,9668,5998],{"class":214},[65,9670,218],{"class":168},[65,9672,1142],{"class":793},[65,9674,6005],{"class":154},[65,9676,5998],{"class":214},[65,9678,6223],{"class":168},[65,9680,6187],{"class":214},[65,9682,834],{"class":154},[65,9684,9685],{"class":204},"length",[65,9687,6005],{"class":154},[65,9689,5998],{"class":214},[65,9691,6019],{"class":168},[65,9693,1713],{"class":204},[65,9695,208],{"class":154},[65,9697,9698,9700,9702,9704,9706,9708,9710],{"class":140,"line":4118},[65,9699,6240],{"class":214},[65,9701,6243],{"class":204},[65,9703,6246],{"class":214},[65,9705,6249],{"class":204},[65,9707,6252],{"class":168},[65,9709,5998],{"class":214},[65,9711,155],{"class":154},[65,9713,9714],{"class":140,"line":4149},[65,9715,3204],{"class":154},[65,9717,9718],{"class":140,"line":4163},[65,9719,162],{"emptyLinePlaceholder":161},[65,9721,9722,9724,9726,9728,9730,9732,9734,9736,9738],{"class":140,"line":4168},[65,9723,848],{"class":168},[65,9725,3903],{"class":214},[65,9727,218],{"class":168},[65,9729,1776],{"class":168},[65,9731,5645],{"class":200},[65,9733,224],{"class":204},[65,9735,794],{"class":214},[65,9737,230],{"class":154},[65,9739,418],{"class":154},[65,9741,9742,9744,9746,9748,9750,9752,9754,9756,9758,9760,9762],{"class":140,"line":4194},[65,9743,6289],{"class":204},[65,9745,797],{"class":154},[65,9747,287],{"class":154},[65,9749,5854],{"class":204},[65,9751,797],{"class":154},[65,9753,3739],{"class":793},[65,9755,230],{"class":154},[65,9757,6304],{"class":204},[65,9759,797],{"class":154},[65,9761,9223],{"class":214},[65,9763,3858],{"class":154},[65,9765,9766,9769,9771,9773,9775,9777,9779,9781,9783,9785,9787],{"class":140,"line":4199},[65,9767,9768],{"class":204}," normal",[65,9770,797],{"class":154},[65,9772,287],{"class":154},[65,9774,5854],{"class":204},[65,9776,797],{"class":154},[65,9778,3739],{"class":793},[65,9780,230],{"class":154},[65,9782,6304],{"class":204},[65,9784,797],{"class":154},[65,9786,9253],{"class":214},[65,9788,3858],{"class":154},[65,9790,9791,9793,9795,9797,9799,9801,9803,9805,9807,9809,9811],{"class":140,"line":4221},[65,9792,7392],{"class":204},[65,9794,797],{"class":154},[65,9796,287],{"class":154},[65,9798,5854],{"class":204},[65,9800,797],{"class":154},[65,9802,3137],{"class":793},[65,9804,230],{"class":154},[65,9806,6304],{"class":204},[65,9808,797],{"class":154},[65,9810,9282],{"class":214},[65,9812,3858],{"class":154},[65,9814,9815,9817,9819,9821,9823,9825,9827,9829,9831,9833,9835],{"class":140,"line":4228},[65,9816,6240],{"class":204},[65,9818,797],{"class":154},[65,9820,287],{"class":154},[65,9822,5854],{"class":204},[65,9824,797],{"class":154},[65,9826,3137],{"class":793},[65,9828,230],{"class":154},[65,9830,6304],{"class":204},[65,9832,797],{"class":154},[65,9834,6187],{"class":214},[65,9836,3858],{"class":154},[65,9838,9839,9841,9843],{"class":140,"line":4235},[65,9840,6331],{"class":204},[65,9842,797],{"class":154},[65,9844,6336],{"class":154},[65,9846,9847,9849,9851],{"class":140,"line":4244},[65,9848,6341],{"class":154},[65,9850,235],{"class":204},[65,9852,155],{"class":154},[65,9854,9855],{"class":140,"line":4261},[65,9856,162],{"emptyLinePlaceholder":161},[65,9858,9859,9861,9863,9865,9867,9869,9871,9873,9875],{"class":140,"line":4266},[65,9860,848],{"class":168},[65,9862,3797],{"class":214},[65,9864,218],{"class":168},[65,9866,1776],{"class":168},[65,9868,3081],{"class":200},[65,9870,224],{"class":204},[65,9872,794],{"class":214},[65,9874,230],{"class":154},[65,9876,418],{"class":154},[65,9878,9879,9881,9883],{"class":140,"line":4275},[65,9880,6374],{"class":204},[65,9882,797],{"class":154},[65,9884,6379],{"class":154},[65,9886,9887],{"class":140,"line":4280},[65,9888,6384],{"class":302},[65,9890,9891],{"class":140,"line":4322},[65,9892,9893],{"class":302}," attribute vec3 normal;\n",[65,9895,9896],{"class":140,"line":4375},[65,9897,9898],{"class":302}," attribute float size;\n",[65,9900,9901],{"class":140,"line":4408},[65,9902,162],{"emptyLinePlaceholder":161},[65,9904,9905],{"class":140,"line":4426},[65,9906,9907],{"class":302}," uniform mat4 viewMatrix;\n",[65,9909,9910],{"class":140,"line":4431},[65,9911,6394],{"class":302},[65,9913,9914],{"class":140,"line":4447},[65,9915,9916],{"class":302}," uniform mat4 objectWorldMatrix;\n",[65,9918,9919],{"class":140,"line":4470},[65,9920,9921],{"class":302}," uniform mat3 worldNormalMatrix;\n",[65,9923,9924],{"class":140,"line":4490},[65,9925,162],{"emptyLinePlaceholder":161},[65,9927,9928],{"class":140,"line":4495},[65,9929,6403],{"class":302},[65,9931,9932],{"class":140,"line":4523},[65,9933,9934],{"class":302}," vec3 n = normalize(worldNormalMatrix * normal) * size;\n",[65,9936,9937],{"class":140,"line":4528},[65,9938,9939],{"class":302}," vec3 p = (objectWorldMatrix * vec4(position, 1.0)).xyz;\n",[65,9941,9942],{"class":140,"line":4542},[65,9943,9944],{"class":302}," gl_Position = projectionMatrix * viewMatrix * vec4(p + n, 1.0);\n",[65,9946,9947],{"class":140,"line":4547},[65,9948,6413],{"class":302},[65,9950,9951,9953],{"class":140,"line":4561},[65,9952,6418],{"class":154},[65,9954,3820],{"class":154},[65,9956,9957,9959,9961],{"class":140,"line":4567},[65,9958,6425],{"class":204},[65,9960,797],{"class":154},[65,9962,6379],{"class":154},[65,9964,9965],{"class":140,"line":4572},[65,9966,7956],{"class":302},[65,9968,9969],{"class":140,"line":4582},[65,9970,6439],{"class":302},[65,9972,9973],{"class":140,"line":4587},[65,9974,162],{"emptyLinePlaceholder":161},[65,9976,9977],{"class":140,"line":4603},[65,9978,6403],{"class":302},[65,9980,9981],{"class":140,"line":4637},[65,9982,6452],{"class":302},[65,9984,9985],{"class":140,"line":4685},[65,9986,6413],{"class":302},[65,9988,9989,9991],{"class":140,"line":4690},[65,9990,6418],{"class":154},[65,9992,3820],{"class":154},[65,9994,9995,9997,9999],{"class":140,"line":4718},[65,9996,6467],{"class":204},[65,9998,797],{"class":154},[65,10000,418],{"class":154},[65,10002,10003,10005,10007,10009,10011,10013,10015],{"class":140,"line":4728},[65,10004,6476],{"class":204},[65,10006,797],{"class":154},[65,10008,287],{"class":154},[65,10010,3851],{"class":204},[65,10012,797],{"class":154},[65,10014,5872],{"class":214},[65,10016,3858],{"class":154},[65,10018,10020,10023,10025,10027,10029,10031,10033,10035,10037],{"class":140,"line":10019},82,[65,10021,10022],{"class":204}," worldNormalMatrix",[65,10024,797],{"class":154},[65,10026,287],{"class":154},[65,10028,3851],{"class":204},[65,10030,797],{"class":154},[65,10032,1776],{"class":168},[65,10034,8937],{"class":200},[65,10036,205],{"class":204},[65,10038,10039],{"class":154},"},\n",[65,10041,10043,10046,10048,10050,10052,10054,10056,10058,10061],{"class":140,"line":10042},83,[65,10044,10045],{"class":204}," objectWorldMatrix",[65,10047,797],{"class":154},[65,10049,287],{"class":154},[65,10051,3851],{"class":204},[65,10053,797],{"class":154},[65,10055,9114],{"class":214},[65,10057,834],{"class":154},[65,10059,10060],{"class":214},"worldMatrix",[65,10062,3858],{"class":154},[65,10064,10066],{"class":140,"line":10065},84,[65,10067,6493],{"class":154},[65,10069,10071,10073,10075],{"class":140,"line":10070},85,[65,10072,6341],{"class":154},[65,10074,235],{"class":204},[65,10076,155],{"class":154},[65,10078,10080],{"class":140,"line":10079},86,[65,10081,162],{"emptyLinePlaceholder":161},[65,10083,10085,10087,10089,10091,10093,10095,10097,10099,10101,10103,10105],{"class":140,"line":10084},87,[65,10086,6510],{"class":830},[65,10088,224],{"class":204},[65,10090,794],{"class":214},[65,10092,230],{"class":154},[65,10094,287],{"class":154},[65,10096,3903],{"class":214},[65,10098,230],{"class":154},[65,10100,3797],{"class":214},[65,10102,293],{"class":154},[65,10104,235],{"class":204},[65,10106,155],{"class":154},[65,10108,10110],{"class":140,"line":10109},88,[65,10111,1171],{"class":154},[65,10113,10115],{"class":140,"line":10114},89,[65,10116,243],{"class":154},[15,10118,10119],{},"実装の方針としては、法線そのものを描画しているのではなく、法線の始点と終点の2つの頂点を使って線を描画しています。",[15,10121,10122],{},"それでは実装を見ていきましょう。",[2418,10124,10125],{"id":10125},"法線の数を取得",[129,10127,10129],{"className":131,"code":10128,"language":134,"meta":135,"style":135},"const gl = object.gl;\nconst normalAttr = object.geometry.attributes.normal;\nconst normalData = normalAttr.data as Float32Array;\nconst nNormals = normalAttr.count ?? normalData.length / (normalAttr.size ?? 3);\n",[124,10130,10131,10147,10171,10191],{"__ignoreMap":135},[65,10132,10133,10135,10137,10139,10141,10143,10145],{"class":140,"line":141},[65,10134,1769],{"class":168},[65,10136,841],{"class":144},[65,10138,218],{"class":168},[65,10140,9114],{"class":144},[65,10142,834],{"class":154},[65,10144,794],{"class":144},[65,10146,155],{"class":154},[65,10148,10149,10151,10153,10155,10157,10159,10161,10163,10165,10167,10169],{"class":140,"line":158},[65,10150,1769],{"class":168},[65,10152,9127],{"class":144},[65,10154,218],{"class":168},[65,10156,9114],{"class":144},[65,10158,834],{"class":154},[65,10160,9136],{"class":144},[65,10162,834],{"class":154},[65,10164,9141],{"class":144},[65,10166,834],{"class":154},[65,10168,9146],{"class":144},[65,10170,155],{"class":154},[65,10172,10173,10175,10177,10179,10181,10183,10185,10187,10189],{"class":140,"line":165},[65,10174,1769],{"class":168},[65,10176,9155],{"class":144},[65,10178,218],{"class":168},[65,10180,9127],{"class":144},[65,10182,834],{"class":154},[65,10184,9164],{"class":144},[65,10186,9167],{"class":154},[65,10188,5951],{"class":326},[65,10190,155],{"class":154},[65,10192,10193,10195,10197,10199,10201,10203,10205,10207,10209,10211,10213,10215,10217,10219,10221,10223,10225,10227,10229],{"class":140,"line":180},[65,10194,1769],{"class":168},[65,10196,9178],{"class":144},[65,10198,218],{"class":168},[65,10200,9127],{"class":144},[65,10202,834],{"class":154},[65,10204,9187],{"class":144},[65,10206,881],{"class":168},[65,10208,9155],{"class":144},[65,10210,834],{"class":154},[65,10212,9196],{"class":204},[65,10214,9199],{"class":168},[65,10216,1696],{"class":204},[65,10218,9204],{"class":144},[65,10220,834],{"class":154},[65,10222,7526],{"class":144},[65,10224,881],{"class":168},[65,10226,3739],{"class":793},[65,10228,235],{"class":204},[65,10230,155],{"class":154},[15,10232,10233,10235,10236,10238,10239,10242,10243,10246,10247,10250],{},[124,10234,9204],{},"ではジオメトリの法線属性を取得しています。この法線属性から法線が何個存在するかを取得します。",[124,10237,9187],{},"がある場合はそのまま取得して、無い場合は、",[124,10240,10241],{},"normalData.length","から",[124,10244,10245],{},"normalAttr.size","か",[124,10248,10249],{},"3","を割って法線の数を計算しています。",[2418,10252,10253],{"id":10253},"法線1本につき2つの頂点を作成",[129,10255,10257],{"className":131,"code":10256,"language":134,"meta":135,"style":135},"const positionsArray = new Float32Array(nNormals * 2 * 3);\nconst normalsArray = new Float32Array(nNormals * 2 * 3);\nconst sizeArray = new Float32Array(nNormals * 2);\n",[124,10258,10259,10287,10315],{"__ignoreMap":135},[65,10260,10261,10263,10265,10267,10269,10271,10273,10275,10277,10279,10281,10283,10285],{"class":140,"line":141},[65,10262,1769],{"class":168},[65,10264,9223],{"class":144},[65,10266,218],{"class":168},[65,10268,1776],{"class":168},[65,10270,5951],{"class":200},[65,10272,224],{"class":204},[65,10274,9234],{"class":144},[65,10276,5933],{"class":168},[65,10278,3748],{"class":793},[65,10280,5933],{"class":168},[65,10282,3739],{"class":793},[65,10284,235],{"class":204},[65,10286,155],{"class":154},[65,10288,10289,10291,10293,10295,10297,10299,10301,10303,10305,10307,10309,10311,10313],{"class":140,"line":158},[65,10290,1769],{"class":168},[65,10292,9253],{"class":144},[65,10294,218],{"class":168},[65,10296,1776],{"class":168},[65,10298,5951],{"class":200},[65,10300,224],{"class":204},[65,10302,9234],{"class":144},[65,10304,5933],{"class":168},[65,10306,3748],{"class":793},[65,10308,5933],{"class":168},[65,10310,3739],{"class":793},[65,10312,235],{"class":204},[65,10314,155],{"class":154},[65,10316,10317,10319,10321,10323,10325,10327,10329,10331,10333,10335,10337],{"class":140,"line":165},[65,10318,1769],{"class":168},[65,10320,9282],{"class":144},[65,10322,218],{"class":168},[65,10324,1776],{"class":168},[65,10326,5951],{"class":200},[65,10328,224],{"class":204},[65,10330,9234],{"class":144},[65,10332,5933],{"class":168},[65,10334,3748],{"class":793},[65,10336,235],{"class":204},[65,10338,155],{"class":154},[15,10340,10341,10342,10345,10346,10349],{},"法線を線として描画するためには2つの頂点が必要です。そのために2を掛けています。",[124,10343,10344],{},"positionsArray","や",[124,10347,10348],{},"normalsArray","はxyzの3成分を持つため、さらに3を掛けています。",[2418,10351,10352],{"id":10352},"各法線についてデータを作成",[129,10354,10356],{"className":131,"code":10355,"language":134,"meta":135,"style":135},"const positionData = object.geometry.attributes.position.data as Float32Array;\nconst sizeData = new Float32Array([0, size]);\n\nfor (let i = 0; i \u003C nNormals; i++) {\n const i6 = i * 6;\n const i3 = i * 3;\n\n const pSub = positionData.subarray(i3, i3 + 3);\n positionsArray.set(pSub, i6);\n positionsArray.set(pSub, i6 + 3);\n\n const nSub = normalData.subarray(i3, i3 + 3);\n normalsArray.set(nSub, i6);\n normalsArray.set(nSub, i6 + 3);\n\n sizeArray.set(sizeData, i * 2);\n}\n",[124,10357,10358,10390,10414,10418,10450,10466,10482,10486,10516,10537,10561,10565,10595,10616,10640,10644,10669],{"__ignoreMap":135},[65,10359,10360,10362,10364,10366,10368,10370,10372,10374,10376,10378,10380,10382,10384,10386,10388],{"class":140,"line":141},[65,10361,1769],{"class":168},[65,10363,9311],{"class":144},[65,10365,218],{"class":168},[65,10367,9114],{"class":144},[65,10369,834],{"class":154},[65,10371,9136],{"class":144},[65,10373,834],{"class":154},[65,10375,9141],{"class":144},[65,10377,834],{"class":154},[65,10379,3610],{"class":144},[65,10381,834],{"class":154},[65,10383,9164],{"class":144},[65,10385,9167],{"class":154},[65,10387,5951],{"class":326},[65,10389,155],{"class":154},[65,10391,10392,10394,10396,10398,10400,10402,10404,10406,10408,10410,10412],{"class":140,"line":158},[65,10393,1769],{"class":168},[65,10395,9344],{"class":144},[65,10397,218],{"class":168},[65,10399,1776],{"class":168},[65,10401,5951],{"class":200},[65,10403,3645],{"class":204},[65,10405,743],{"class":793},[65,10407,230],{"class":154},[65,10409,5854],{"class":144},[65,10411,3658],{"class":204},[65,10413,155],{"class":154},[65,10415,10416],{"class":140,"line":165},[65,10417,162],{"emptyLinePlaceholder":161},[65,10419,10420,10422,10424,10426,10428,10430,10432,10434,10436,10438,10440,10442,10444,10446,10448],{"class":140,"line":180},[65,10421,6643],{"class":154},[65,10423,1696],{"class":204},[65,10425,5995],{"class":168},[65,10427,5998],{"class":144},[65,10429,218],{"class":168},[65,10431,1142],{"class":793},[65,10433,6005],{"class":154},[65,10435,5998],{"class":144},[65,10437,6223],{"class":168},[65,10439,9178],{"class":144},[65,10441,6005],{"class":154},[65,10443,5998],{"class":144},[65,10445,6019],{"class":168},[65,10447,1713],{"class":204},[65,10449,208],{"class":154},[65,10451,10452,10454,10456,10458,10460,10462,10464],{"class":140,"line":194},[65,10453,2243],{"class":168},[65,10455,9405],{"class":214},[65,10457,218],{"class":168},[65,10459,5998],{"class":214},[65,10461,5933],{"class":168},[65,10463,6168],{"class":793},[65,10465,155],{"class":154},[65,10467,10468,10470,10472,10474,10476,10478,10480],{"class":140,"line":211},[65,10469,2243],{"class":168},[65,10471,9422],{"class":214},[65,10473,218],{"class":168},[65,10475,5998],{"class":214},[65,10477,5933],{"class":168},[65,10479,3739],{"class":793},[65,10481,155],{"class":154},[65,10483,10484],{"class":140,"line":240},[65,10485,162],{"emptyLinePlaceholder":161},[65,10487,10488,10490,10492,10494,10496,10498,10500,10502,10504,10506,10508,10510,10512,10514],{"class":140,"line":391},[65,10489,2243],{"class":168},[65,10491,9443],{"class":214},[65,10493,218],{"class":168},[65,10495,9311],{"class":214},[65,10497,834],{"class":154},[65,10499,9452],{"class":200},[65,10501,224],{"class":204},[65,10503,9457],{"class":214},[65,10505,230],{"class":154},[65,10507,9422],{"class":214},[65,10509,2367],{"class":168},[65,10511,3739],{"class":793},[65,10513,235],{"class":204},[65,10515,155],{"class":154},[65,10517,10518,10521,10523,10525,10527,10529,10531,10533,10535],{"class":140,"line":401},[65,10519,10520],{"class":214}," positionsArray",[65,10522,834],{"class":154},[65,10524,3615],{"class":200},[65,10526,224],{"class":204},[65,10528,9483],{"class":214},[65,10530,230],{"class":154},[65,10532,9405],{"class":214},[65,10534,235],{"class":204},[65,10536,155],{"class":154},[65,10538,10539,10541,10543,10545,10547,10549,10551,10553,10555,10557,10559],{"class":140,"line":406},[65,10540,10520],{"class":214},[65,10542,834],{"class":154},[65,10544,3615],{"class":200},[65,10546,224],{"class":204},[65,10548,9483],{"class":214},[65,10550,230],{"class":154},[65,10552,9405],{"class":214},[65,10554,2367],{"class":168},[65,10556,3739],{"class":793},[65,10558,235],{"class":204},[65,10560,155],{"class":154},[65,10562,10563],{"class":140,"line":421},[65,10564,162],{"emptyLinePlaceholder":161},[65,10566,10567,10569,10571,10573,10575,10577,10579,10581,10583,10585,10587,10589,10591,10593],{"class":140,"line":435},[65,10568,2243],{"class":168},[65,10570,9526],{"class":214},[65,10572,218],{"class":168},[65,10574,9155],{"class":214},[65,10576,834],{"class":154},[65,10578,9452],{"class":200},[65,10580,224],{"class":204},[65,10582,9457],{"class":214},[65,10584,230],{"class":154},[65,10586,9422],{"class":214},[65,10588,2367],{"class":168},[65,10590,3739],{"class":793},[65,10592,235],{"class":204},[65,10594,155],{"class":154},[65,10596,10597,10600,10602,10604,10606,10608,10610,10612,10614],{"class":140,"line":447},[65,10598,10599],{"class":214}," normalsArray",[65,10601,834],{"class":154},[65,10603,3615],{"class":200},[65,10605,224],{"class":204},[65,10607,9564],{"class":214},[65,10609,230],{"class":154},[65,10611,9405],{"class":214},[65,10613,235],{"class":204},[65,10615,155],{"class":154},[65,10617,10618,10620,10622,10624,10626,10628,10630,10632,10634,10636,10638],{"class":140,"line":459},[65,10619,10599],{"class":214},[65,10621,834],{"class":154},[65,10623,3615],{"class":200},[65,10625,224],{"class":204},[65,10627,9564],{"class":214},[65,10629,230],{"class":154},[65,10631,9405],{"class":214},[65,10633,2367],{"class":168},[65,10635,3739],{"class":793},[65,10637,235],{"class":204},[65,10639,155],{"class":154},[65,10641,10642],{"class":140,"line":471},[65,10643,162],{"emptyLinePlaceholder":161},[65,10645,10646,10649,10651,10653,10655,10657,10659,10661,10663,10665,10667],{"class":140,"line":63},[65,10647,10648],{"class":214}," sizeArray",[65,10650,834],{"class":154},[65,10652,3615],{"class":200},[65,10654,224],{"class":204},[65,10656,9614],{"class":214},[65,10658,230],{"class":154},[65,10660,5998],{"class":214},[65,10662,5933],{"class":168},[65,10664,3748],{"class":793},[65,10666,235],{"class":204},[65,10668,155],{"class":154},[65,10670,10671],{"class":140,"line":495},[65,10672,243],{"class":154},[15,10674,10675,10676,10678,10679,10682,10683,2765,10685,10687],{},"法線を1個ずつ処理しています。",[124,10677,9457],{},"は元の頂点データの開始インデックス、",[124,10680,10681],{},"i6","は法線用の頂点データの開始インデックスになります。",[124,10684,9483],{},[124,10686,9564],{},"はそれぞれ元の頂点座標と法線ベクトルの部分配列となり元のデータを参照しています。",[15,10689,10690,10692,10693,10695,10696,10699],{},[124,10691,10344],{},"には法線の始点と終点の両方の頂点座標を設定し、",[124,10694,10348],{},"には法線の方向を設定しています。",[124,10697,10698],{},"sizeArray","には法線の長さを設定しています。",[2418,10701,6837],{"id":10702},"インデックスの生成-1",[15,10704,10705],{},"インデックス情報は次のようになります。",[129,10707,10709],{"className":131,"code":10708,"language":134,"meta":135,"style":135},"const index = new Uint16Array(nNormals * 2);\nfor (let i = 0; i \u003C index.length; i++) {\n index[i] = i;\n}\n",[124,10710,10711,10735,10771,10787],{"__ignoreMap":135},[65,10712,10713,10715,10717,10719,10721,10723,10725,10727,10729,10731,10733],{"class":140,"line":141},[65,10714,1769],{"class":168},[65,10716,6187],{"class":144},[65,10718,218],{"class":168},[65,10720,1776],{"class":168},[65,10722,6194],{"class":200},[65,10724,224],{"class":204},[65,10726,9234],{"class":144},[65,10728,5933],{"class":168},[65,10730,3748],{"class":793},[65,10732,235],{"class":204},[65,10734,155],{"class":154},[65,10736,10737,10739,10741,10743,10745,10747,10749,10751,10753,10755,10757,10759,10761,10763,10765,10767,10769],{"class":140,"line":158},[65,10738,6643],{"class":154},[65,10740,1696],{"class":204},[65,10742,5995],{"class":168},[65,10744,5998],{"class":144},[65,10746,218],{"class":168},[65,10748,1142],{"class":793},[65,10750,6005],{"class":154},[65,10752,5998],{"class":144},[65,10754,6223],{"class":168},[65,10756,6187],{"class":144},[65,10758,834],{"class":154},[65,10760,9685],{"class":204},[65,10762,6005],{"class":154},[65,10764,5998],{"class":144},[65,10766,6019],{"class":168},[65,10768,1713],{"class":204},[65,10770,208],{"class":154},[65,10772,10773,10775,10777,10779,10781,10783,10785],{"class":140,"line":165},[65,10774,6899],{"class":214},[65,10776,6243],{"class":204},[65,10778,6246],{"class":214},[65,10780,6249],{"class":204},[65,10782,6252],{"class":168},[65,10784,5998],{"class":214},[65,10786,155],{"class":154},[65,10788,10789],{"class":140,"line":180},[65,10790,243],{"class":154},[15,10792,10793],{},"こちらも法線1本につき2つの頂点を持つことになります。",[2418,10795,10797],{"id":10796},"geometryの作成","Geometryの作成",[15,10799,10800],{},"これら計算した値を使用してGeometryを作成します。",[129,10802,10804],{"className":131,"code":10803,"language":134,"meta":135,"style":135},"const geometry = new Geometry(gl, {\n position: { size: 3, data: positionsArray },\n normal: { size: 3, data: normalsArray },\n size: { size: 1, data: sizeArray },\n index: { size: 1, data: index },\n wireframe: {},\n});\n",[124,10805,10806,10826,10850,10875,10899,10923,10931],{"__ignoreMap":135},[65,10807,10808,10810,10812,10814,10816,10818,10820,10822,10824],{"class":140,"line":141},[65,10809,1769],{"class":168},[65,10811,3903],{"class":144},[65,10813,218],{"class":168},[65,10815,1776],{"class":168},[65,10817,5645],{"class":200},[65,10819,224],{"class":204},[65,10821,794],{"class":144},[65,10823,230],{"class":154},[65,10825,418],{"class":154},[65,10827,10828,10830,10832,10834,10836,10838,10840,10842,10844,10846,10848],{"class":140,"line":158},[65,10829,8393],{"class":204},[65,10831,797],{"class":154},[65,10833,287],{"class":154},[65,10835,5854],{"class":204},[65,10837,797],{"class":154},[65,10839,3739],{"class":793},[65,10841,230],{"class":154},[65,10843,6304],{"class":204},[65,10845,797],{"class":154},[65,10847,9223],{"class":144},[65,10849,3858],{"class":154},[65,10851,10852,10855,10857,10859,10861,10863,10865,10867,10869,10871,10873],{"class":140,"line":165},[65,10853,10854],{"class":204}," normal",[65,10856,797],{"class":154},[65,10858,287],{"class":154},[65,10860,5854],{"class":204},[65,10862,797],{"class":154},[65,10864,3739],{"class":793},[65,10866,230],{"class":154},[65,10868,6304],{"class":204},[65,10870,797],{"class":154},[65,10872,9253],{"class":144},[65,10874,3858],{"class":154},[65,10876,10877,10879,10881,10883,10885,10887,10889,10891,10893,10895,10897],{"class":140,"line":180},[65,10878,5520],{"class":204},[65,10880,797],{"class":154},[65,10882,287],{"class":154},[65,10884,5854],{"class":204},[65,10886,797],{"class":154},[65,10888,3137],{"class":793},[65,10890,230],{"class":154},[65,10892,6304],{"class":204},[65,10894,797],{"class":154},[65,10896,9282],{"class":144},[65,10898,3858],{"class":154},[65,10900,10901,10903,10905,10907,10909,10911,10913,10915,10917,10919,10921],{"class":140,"line":194},[65,10902,6899],{"class":204},[65,10904,797],{"class":154},[65,10906,287],{"class":154},[65,10908,5854],{"class":204},[65,10910,797],{"class":154},[65,10912,3137],{"class":793},[65,10914,230],{"class":154},[65,10916,6304],{"class":204},[65,10918,797],{"class":154},[65,10920,6187],{"class":144},[65,10922,3858],{"class":154},[65,10924,10925,10927,10929],{"class":140,"line":211},[65,10926,8466],{"class":204},[65,10928,797],{"class":154},[65,10930,6336],{"class":154},[65,10932,10933,10935,10937],{"class":140,"line":240},[65,10934,2899],{"class":154},[65,10936,235],{"class":204},[65,10938,155],{"class":154},[15,10940,10941],{},"attributeを準備したので、vertexシェーダーで線として描画しましょう。",[2418,10943,10944],{"id":10944},"vertexシェーダーでの頂点法線の表示",[15,10946,10947],{},"attributeのpositionとnormalとsizeを使用して、vertexシェーダーで法線の始点と終点を計算し、線として描画します。",[129,10949,10952],{"className":131,"code":10950,"filename":10951,"language":134,"meta":135,"style":135},"attribute vec3 position;\nattribute vec3 normal;\nattribute float size;\n\nuniform mat4 viewMatrix;\nuniform mat4 projectionMatrix;\nuniform mat4 objectWorldMatrix;\nuniform mat3 worldNormalMatrix;\n\nvoid main() {\n vec3 n = normalize(worldNormalMatrix * normal) * size;\n vec3 p = (objectWorldMatrix * vec4(position, 1.0)).xyz;\n gl_Position = projectionMatrix * viewMatrix * vec4(p + n, 1.0);\n}\n","vertex",[124,10953,10954,10967,10978,10989,10993,11005,11016,11027,11039,11043,11053,11083,11119,11152],{"__ignoreMap":135},[65,10955,10956,10959,10962,10965],{"class":140,"line":141},[65,10957,10958],{"class":144},"attribute",[65,10960,10961],{"class":144}," vec3",[65,10963,10964],{"class":144}," position",[65,10966,155],{"class":154},[65,10968,10969,10971,10973,10976],{"class":140,"line":158},[65,10970,10958],{"class":144},[65,10972,10961],{"class":144},[65,10974,10975],{"class":144}," normal",[65,10977,155],{"class":154},[65,10979,10980,10982,10985,10987],{"class":140,"line":165},[65,10981,10958],{"class":144},[65,10983,10984],{"class":144}," float",[65,10986,5854],{"class":144},[65,10988,155],{"class":154},[65,10990,10991],{"class":140,"line":180},[65,10992,162],{"emptyLinePlaceholder":161},[65,10994,10995,10997,11000,11003],{"class":140,"line":194},[65,10996,145],{"class":144},[65,10998,10999],{"class":144}," mat4",[65,11001,11002],{"class":144}," viewMatrix",[65,11004,155],{"class":154},[65,11006,11007,11009,11011,11014],{"class":140,"line":211},[65,11008,145],{"class":144},[65,11010,10999],{"class":144},[65,11012,11013],{"class":144}," projectionMatrix",[65,11015,155],{"class":154},[65,11017,11018,11020,11022,11025],{"class":140,"line":240},[65,11019,145],{"class":144},[65,11021,10999],{"class":144},[65,11023,11024],{"class":144}," objectWorldMatrix",[65,11026,155],{"class":154},[65,11028,11029,11031,11034,11037],{"class":140,"line":391},[65,11030,145],{"class":144},[65,11032,11033],{"class":144}," mat3",[65,11035,11036],{"class":144}," worldNormalMatrix",[65,11038,155],{"class":154},[65,11040,11041],{"class":140,"line":401},[65,11042,162],{"emptyLinePlaceholder":161},[65,11044,11045,11047,11049,11051],{"class":140,"line":406},[65,11046,197],{"class":168},[65,11048,201],{"class":200},[65,11050,205],{"class":204},[65,11052,208],{"class":154},[65,11054,11055,11058,11061,11063,11066,11068,11071,11073,11075,11077,11079,11081],{"class":140,"line":421},[65,11056,11057],{"class":214}," vec3",[65,11059,11060],{"class":214}," n",[65,11062,218],{"class":168},[65,11064,11065],{"class":200}," normalize",[65,11067,224],{"class":204},[65,11069,11070],{"class":214},"worldNormalMatrix",[65,11072,5933],{"class":168},[65,11074,10975],{"class":214},[65,11076,1713],{"class":204},[65,11078,5928],{"class":168},[65,11080,5854],{"class":214},[65,11082,155],{"class":154},[65,11084,11085,11087,11090,11092,11094,11097,11099,11101,11103,11105,11107,11109,11112,11114,11117],{"class":140,"line":435},[65,11086,11057],{"class":214},[65,11088,11089],{"class":214}," p",[65,11091,218],{"class":168},[65,11093,1696],{"class":204},[65,11095,11096],{"class":214},"objectWorldMatrix",[65,11098,5933],{"class":168},[65,11100,186],{"class":200},[65,11102,224],{"class":204},[65,11104,3610],{"class":214},[65,11106,230],{"class":154},[65,11108,3507],{"class":793},[65,11110,11111],{"class":204},"))",[65,11113,834],{"class":154},[65,11115,11116],{"class":214},"xyz",[65,11118,155],{"class":154},[65,11120,11121,11124,11126,11128,11130,11132,11134,11136,11138,11140,11142,11144,11146,11148,11150],{"class":140,"line":447},[65,11122,11123],{"class":214}," gl_Position",[65,11125,218],{"class":168},[65,11127,11013],{"class":214},[65,11129,5933],{"class":168},[65,11131,11002],{"class":214},[65,11133,5933],{"class":168},[65,11135,186],{"class":200},[65,11137,224],{"class":204},[65,11139,15],{"class":214},[65,11141,2367],{"class":168},[65,11143,11060],{"class":214},[65,11145,230],{"class":154},[65,11147,3507],{"class":793},[65,11149,235],{"class":204},[65,11151,155],{"class":154},[65,11153,11154],{"class":140,"line":459},[65,11155,243],{"class":154},[15,11157,11158,11160],{},[124,11159,3061],{},"のuniformsは次のようになっています。",[129,11162,11164],{"className":131,"code":11163,"language":134,"meta":135,"style":135},"const program = new Program(gl, {\n // ...\n uniforms: {\n color: { value: color },\n worldNormalMatrix: { value: new Mat3() },\n objectWorldMatrix: { value: object.worldMatrix },\n },\n});\n",[124,11165,11166,11186,11190,11198,11215,11236,11257,11261],{"__ignoreMap":135},[65,11167,11168,11170,11172,11174,11176,11178,11180,11182,11184],{"class":140,"line":141},[65,11169,1769],{"class":168},[65,11171,3797],{"class":144},[65,11173,218],{"class":168},[65,11175,1776],{"class":168},[65,11177,3081],{"class":200},[65,11179,224],{"class":204},[65,11181,794],{"class":144},[65,11183,230],{"class":154},[65,11185,418],{"class":154},[65,11187,11188],{"class":140,"line":158},[65,11189,783],{"class":278},[65,11191,11192,11194,11196],{"class":140,"line":165},[65,11193,4853],{"class":204},[65,11195,797],{"class":154},[65,11197,418],{"class":154},[65,11199,11200,11203,11205,11207,11209,11211,11213],{"class":140,"line":180},[65,11201,11202],{"class":204}," color",[65,11204,797],{"class":154},[65,11206,287],{"class":154},[65,11208,3851],{"class":204},[65,11210,797],{"class":154},[65,11212,5872],{"class":144},[65,11214,3858],{"class":154},[65,11216,11217,11220,11222,11224,11226,11228,11230,11232,11234],{"class":140,"line":194},[65,11218,11219],{"class":204}," worldNormalMatrix",[65,11221,797],{"class":154},[65,11223,287],{"class":154},[65,11225,3851],{"class":204},[65,11227,797],{"class":154},[65,11229,1776],{"class":168},[65,11231,8937],{"class":200},[65,11233,205],{"class":204},[65,11235,10039],{"class":154},[65,11237,11238,11241,11243,11245,11247,11249,11251,11253,11255],{"class":140,"line":211},[65,11239,11240],{"class":204}," objectWorldMatrix",[65,11242,797],{"class":154},[65,11244,287],{"class":154},[65,11246,3851],{"class":204},[65,11248,797],{"class":154},[65,11250,9114],{"class":144},[65,11252,834],{"class":154},[65,11254,10060],{"class":144},[65,11256,3858],{"class":154},[65,11258,11259],{"class":140,"line":240},[65,11260,4879],{"class":154},[65,11262,11263,11265,11267],{"class":140,"line":391},[65,11264,2899],{"class":154},[65,11266,235],{"class":204},[65,11268,155],{"class":154},[15,11270,11271,11272,11275,11276,11278,11279,11282],{},"やっていることは、",[124,11273,11274],{},"n","は法線をワールド空間へ変換しサイズを掛け、",[124,11277,15],{},"は頂点をワールド空間へ変換しています。",[124,11280,11281],{},"gl_Position","には法線の終点の座標を設定しているため、線として描画されます。",[15,11284,11285],{},"これで、マゼンタの頂点法線が表示されるようになります。",[15,11287,11288],{},[57,11289],{"alt":11290,"src":11291,"title":11290},"頂点法線の表示","https://res.cloudinary.com/dy8ftemi0/image/upload/v1788600080/webgl-helper-function-03_msyn4k.jpg",[1177,11293,11295],{"id":11294},"facenormalshelperの作成","FaceNormalsHelperの作成",[15,11297,11298,11299,11301],{},"最後に、面の法線を表示するヘルパー関数を作成します。",[5467,11300],{},"\n同じようにBoxに対して使用する場合、次のようになります。",[129,11303,11305],{"className":131,"code":11304,"filename":3244,"language":134,"meta":135,"style":135},"import { FaceNormalsHelper, Vec3 } from '@/lib/webgl';\n\nconst FACE_NORMALS_PARAMS = {\n size: 0.1,\n color: new Vec3(0.15, 0.86, 0.86),\n};\n\nconst box = new Mesh(gl, { geometry: boxGeometry, program });\nscene.add(box);\n\nconst boxFaceNormals = new FaceNormalsHelper(box, FACE_NORMALS_PARAMS);\nscene.add(boxFaceNormals);\n",[124,11306,11307,11332,11336,11347,11357,11384,11388,11392,11428,11444,11448,11473],{"__ignoreMap":135},[65,11308,11309,11311,11313,11316,11318,11320,11322,11324,11326,11328,11330],{"class":140,"line":141},[65,11310,3251],{"class":154},[65,11312,287],{"class":154},[65,11314,11315],{"class":214}," FaceNormalsHelper",[65,11317,230],{"class":154},[65,11319,5488],{"class":214},[65,11321,293],{"class":154},[65,11323,296],{"class":154},[65,11325,299],{"class":154},[65,11327,3339],{"class":302},[65,11329,306],{"class":154},[65,11331,155],{"class":154},[65,11333,11334],{"class":140,"line":158},[65,11335,162],{"emptyLinePlaceholder":161},[65,11337,11338,11340,11343,11345],{"class":140,"line":165},[65,11339,1769],{"class":168},[65,11341,11342],{"class":144}," FACE_NORMALS_PARAMS",[65,11344,218],{"class":168},[65,11346,418],{"class":154},[65,11348,11349,11351,11353,11355],{"class":140,"line":180},[65,11350,5520],{"class":204},[65,11352,797],{"class":154},[65,11354,3584],{"class":793},[65,11356,3820],{"class":154},[65,11358,11359,11361,11363,11365,11367,11369,11372,11374,11376,11378,11380,11382],{"class":140,"line":194},[65,11360,5543],{"class":204},[65,11362,797],{"class":154},[65,11364,1776],{"class":168},[65,11366,5488],{"class":200},[65,11368,224],{"class":204},[65,11370,11371],{"class":793},"0.15",[65,11373,230],{"class":154},[65,11375,8714],{"class":793},[65,11377,230],{"class":154},[65,11379,8714],{"class":793},[65,11381,235],{"class":204},[65,11383,3820],{"class":154},[65,11385,11386],{"class":140,"line":211},[65,11387,4731],{"class":154},[65,11389,11390],{"class":140,"line":240},[65,11391,162],{"emptyLinePlaceholder":161},[65,11393,11394,11396,11398,11400,11402,11404,11406,11408,11410,11412,11414,11416,11418,11420,11422,11424,11426],{"class":140,"line":391},[65,11395,1769],{"class":168},[65,11397,4285],{"class":144},[65,11399,218],{"class":168},[65,11401,1776],{"class":168},[65,11403,3302],{"class":200},[65,11405,224],{"class":204},[65,11407,794],{"class":144},[65,11409,230],{"class":154},[65,11411,287],{"class":154},[65,11413,3903],{"class":204},[65,11415,797],{"class":154},[65,11417,3984],{"class":144},[65,11419,230],{"class":154},[65,11421,3797],{"class":144},[65,11423,293],{"class":154},[65,11425,235],{"class":204},[65,11427,155],{"class":154},[65,11429,11430,11432,11434,11436,11438,11440,11442],{"class":140,"line":401},[65,11431,4932],{"class":144},[65,11433,834],{"class":154},[65,11435,3962],{"class":200},[65,11437,224],{"class":204},[65,11439,4419],{"class":144},[65,11441,235],{"class":204},[65,11443,155],{"class":154},[65,11445,11446],{"class":140,"line":406},[65,11447,162],{"emptyLinePlaceholder":161},[65,11449,11450,11452,11455,11457,11459,11461,11463,11465,11467,11469,11471],{"class":140,"line":421},[65,11451,1769],{"class":168},[65,11453,11454],{"class":144}," boxFaceNormals",[65,11456,218],{"class":168},[65,11458,1776],{"class":168},[65,11460,11315],{"class":200},[65,11462,224],{"class":204},[65,11464,4419],{"class":144},[65,11466,230],{"class":154},[65,11468,11342],{"class":144},[65,11470,235],{"class":204},[65,11472,155],{"class":154},[65,11474,11475,11477,11479,11481,11483,11486,11488],{"class":140,"line":435},[65,11476,4932],{"class":144},[65,11478,834],{"class":154},[65,11480,3962],{"class":200},[65,11482,224],{"class":204},[65,11484,11485],{"class":144},"boxFaceNormals",[65,11487,235],{"class":204},[65,11489,155],{"class":154},[15,11491,11492],{},"同様に第1引数には法線を表示したいメッシュオブジェクトを指定します。第2引数には法線のサイズや色を指定するオプションを渡すことができます。",[15,11494,11495],{},"こちらもパラメータとしては、法線のサイズ(size)、色(color)を指定できます。それでは、FaceNormalsHelperの実装を見ていきましょう。",[15,11497,11498],{},"FaceNormalsHelper.tsの全コードは次のようになります。",[3233,11500,11501,11504],{},[3236,11502,11503],{},"FaceNormalsHelper.tsの全コード",[36,11505,11506],{},[129,11507,11510],{"className":131,"code":11508,"filename":11509,"language":134,"meta":135,"style":135},"import { Geometry } from '../../core/Geometry';\nimport { Mesh } from '../../core/Mesh';\nimport { Program } from '../../core/Program';\nimport type { Color } from '../../math/Color';\nimport { Mat3 } from '../../math/Mat3';\nimport { Vec3 } from '../../math/Vec3';\n\nexport interface FaceNormalsHelperOptions {\n size: number;\n color: Color;\n}\n\nexport class FaceNormalsHelper extends Mesh {\n constructor(object: Mesh, options?: Partial\u003CFaceNormalsHelperOptions>) {\n const { size = 0.1, color = new Vec3(0.15, 0.86, 0.86) } = options || {};\n const gl = object.gl;\n const positionData = object.geometry.attributes.position.data as Float32Array;\n const sizeData = new Float32Array([0, size]);\n\n const indexAttr = object.geometry.attributes.index as { data: Uint16Array } | undefined;\n const getIndex = indexAttr ? (i: number) => indexAttr.data[i] : (i: number) => i;\n const numVertices = indexAttr ? indexAttr.data.length : Math.floor(positionData.length / 3);\n\n const nNormals = Math.floor(numVertices / 3);\n const positionsArray = new Float32Array(nNormals * 2 * 3);\n const normalsArray = new Float32Array(nNormals * 2 * 3);\n const sizeArray = new Float32Array(nNormals * 2);\n\n const vA = new Vec3();\n const vB = new Vec3();\n const vC = new Vec3();\n const vCenter = new Vec3();\n const vNormal = new Vec3();\n\n for (let i = 0; i \u003C numVertices; i += 3) {\n vA.fromArray(positionData, getIndex(i + 0) * 3);\n vB.fromArray(positionData, getIndex(i + 1) * 3);\n vC.fromArray(positionData, getIndex(i + 2) * 3);\n\n vCenter\n .add(vA, vB)\n .add(vC)\n .multiply(1 / 3);\n vA.sub(vA, vB);\n vC.sub(vC, vB);\n vNormal.cross(vC, vA).normalize();\n\n const i2 = i * 2;\n positionsArray.set(vCenter, i2);\n positionsArray.set(vCenter, i2 + 3);\n\n normalsArray.set(vNormal, i2);\n normalsArray.set(vNormal, i2 + 3);\n sizeArray.set(sizeData, (i / 3) * 2);\n }\n\n const index = new Uint16Array(nNormals * 2);\n for (let i = 0; i \u003C index.length; i++) {\n index[i] = i;\n }\n\n const geometry = new Geometry(gl, {\n position: { size: 3, data: positionsArray },\n normal: { size: 3, data: normalsArray },\n size: { size: 1, data: sizeArray },\n index: { size: 1, data: index },\n wireframe: {},\n });\n\n const program = new Program(gl, {\n vertex: `\n attribute vec3 position;\n attribute vec3 normal;\n attribute float size;\n\n uniform mat4 viewMatrix;\n uniform mat4 projectionMatrix;\n uniform mat4 objectWorldMatrix;\n uniform mat3 worldNormalMatrix;\n\n void main() {\n vec3 n = normalize(worldNormalMatrix * normal) * size;\n vec3 p = (objectWorldMatrix * vec4(position, 1.0)).xyz;\n gl_Position = projectionMatrix * viewMatrix * vec4(p + n, 1.0);\n }\n `,\n fragment: `\n precision highp float;\n uniform vec3 color;\n\n void main() {\n gl_FragColor = vec4(color, 1.0);\n }\n `,\n uniforms: {\n color: { value: color },\n worldNormalMatrix: { value: new Mat3() },\n objectWorldMatrix: { value: object.worldMatrix },\n },\n });\n\n super(gl, { geometry, program });\n }\n}\n","FaceNormalsHelper.ts",[124,11511,11512,11532,11552,11572,11594,11614,11634,11638,11649,11659,11669,11673,11677,11691,11720,11766,11782,11814,11838,11842,11886,11941,11989,11993,12019,12047,12075,12099,12103,12120,12137,12154,12171,12188,12192,12226,12262,12297,12332,12336,12341,12360,12373,12392,12413,12433,12462,12466,12483,12504,12528,12532,12553,12577,12609,12613,12617,12641,12677,12693,12697,12701,12721,12745,12769,12793,12817,12825,12833,12837,12857,12865,12869,12873,12877,12881,12885,12889,12893,12897,12901,12905,12909,12913,12917,12921,12927,12935,12939,12943,12948,12953,12958,12963,12970,12979,12996,13017,13038,13043,13052,13057,13082,13087],{"__ignoreMap":135},[65,11513,11514,11516,11518,11520,11522,11524,11526,11528,11530],{"class":140,"line":141},[65,11515,3251],{"class":154},[65,11517,287],{"class":154},[65,11519,5645],{"class":214},[65,11521,293],{"class":154},[65,11523,296],{"class":154},[65,11525,299],{"class":154},[65,11527,5654],{"class":302},[65,11529,306],{"class":154},[65,11531,155],{"class":154},[65,11533,11534,11536,11538,11540,11542,11544,11546,11548,11550],{"class":140,"line":158},[65,11535,3251],{"class":154},[65,11537,287],{"class":154},[65,11539,3302],{"class":214},[65,11541,293],{"class":154},[65,11543,296],{"class":154},[65,11545,299],{"class":154},[65,11547,5675],{"class":302},[65,11549,306],{"class":154},[65,11551,155],{"class":154},[65,11553,11554,11556,11558,11560,11562,11564,11566,11568,11570],{"class":140,"line":165},[65,11555,3251],{"class":154},[65,11557,287],{"class":154},[65,11559,3081],{"class":214},[65,11561,293],{"class":154},[65,11563,296],{"class":154},[65,11565,299],{"class":154},[65,11567,5696],{"class":302},[65,11569,306],{"class":154},[65,11571,155],{"class":154},[65,11573,11574,11576,11578,11580,11582,11584,11586,11588,11590,11592],{"class":140,"line":180},[65,11575,3251],{"class":154},[65,11577,323],{"class":154},[65,11579,287],{"class":154},[65,11581,5711],{"class":214},[65,11583,293],{"class":154},[65,11585,296],{"class":154},[65,11587,299],{"class":154},[65,11589,5720],{"class":302},[65,11591,306],{"class":154},[65,11593,155],{"class":154},[65,11595,11596,11598,11600,11602,11604,11606,11608,11610,11612],{"class":140,"line":194},[65,11597,3251],{"class":154},[65,11599,287],{"class":154},[65,11601,8937],{"class":214},[65,11603,293],{"class":154},[65,11605,296],{"class":154},[65,11607,299],{"class":154},[65,11609,8946],{"class":302},[65,11611,306],{"class":154},[65,11613,155],{"class":154},[65,11615,11616,11618,11620,11622,11624,11626,11628,11630,11632],{"class":140,"line":211},[65,11617,3251],{"class":154},[65,11619,287],{"class":154},[65,11621,5488],{"class":214},[65,11623,293],{"class":154},[65,11625,296],{"class":154},[65,11627,299],{"class":154},[65,11629,5741],{"class":302},[65,11631,306],{"class":154},[65,11633,155],{"class":154},[65,11635,11636],{"class":140,"line":240},[65,11637,162],{"emptyLinePlaceholder":161},[65,11639,11640,11642,11644,11647],{"class":140,"line":391},[65,11641,284],{"class":154},[65,11643,5756],{"class":168},[65,11645,11646],{"class":326}," FaceNormalsHelperOptions",[65,11648,418],{"class":154},[65,11650,11651,11653,11655,11657],{"class":140,"line":401},[65,11652,5520],{"class":144},[65,11654,797],{"class":168},[65,11656,430],{"class":340},[65,11658,155],{"class":154},[65,11660,11661,11663,11665,11667],{"class":140,"line":406},[65,11662,5543],{"class":144},[65,11664,797],{"class":168},[65,11666,5711],{"class":326},[65,11668,155],{"class":154},[65,11670,11671],{"class":140,"line":421},[65,11672,243],{"class":154},[65,11674,11675],{"class":140,"line":435},[65,11676,162],{"emptyLinePlaceholder":161},[65,11678,11679,11681,11683,11685,11687,11689],{"class":140,"line":447},[65,11680,284],{"class":154},[65,11682,774],{"class":168},[65,11684,11315],{"class":326},[65,11686,5810],{"class":168},[65,11688,3302],{"class":302},[65,11690,418],{"class":154},[65,11692,11693,11695,11697,11699,11701,11703,11705,11707,11709,11711,11713,11716,11718],{"class":140,"line":459},[65,11694,788],{"class":168},[65,11696,224],{"class":154},[65,11698,9036],{"class":793},[65,11700,797],{"class":168},[65,11702,3302],{"class":326},[65,11704,230],{"class":154},[65,11706,814],{"class":793},[65,11708,427],{"class":168},[65,11710,5835],{"class":326},[65,11712,1830],{"class":154},[65,11714,11715],{"class":326},"FaceNormalsHelperOptions",[65,11717,5843],{"class":154},[65,11719,418],{"class":154},[65,11721,11722,11724,11726,11728,11730,11732,11734,11736,11738,11740,11742,11744,11746,11748,11750,11752,11754,11756,11758,11760,11762,11764],{"class":140,"line":471},[65,11723,848],{"class":168},[65,11725,287],{"class":154},[65,11727,5854],{"class":214},[65,11729,218],{"class":168},[65,11731,3584],{"class":793},[65,11733,230],{"class":154},[65,11735,5872],{"class":214},[65,11737,218],{"class":168},[65,11739,1776],{"class":168},[65,11741,5488],{"class":200},[65,11743,224],{"class":204},[65,11745,11371],{"class":793},[65,11747,230],{"class":154},[65,11749,8714],{"class":793},[65,11751,230],{"class":154},[65,11753,8714],{"class":793},[65,11755,1713],{"class":204},[65,11757,2899],{"class":154},[65,11759,218],{"class":168},[65,11761,814],{"class":214},[65,11763,2269],{"class":168},[65,11765,5905],{"class":154},[65,11767,11768,11770,11772,11774,11776,11778,11780],{"class":140,"line":63},[65,11769,848],{"class":168},[65,11771,841],{"class":214},[65,11773,218],{"class":168},[65,11775,9114],{"class":214},[65,11777,834],{"class":154},[65,11779,794],{"class":214},[65,11781,155],{"class":154},[65,11783,11784,11786,11788,11790,11792,11794,11796,11798,11800,11802,11804,11806,11808,11810,11812],{"class":140,"line":495},[65,11785,848],{"class":168},[65,11787,9311],{"class":214},[65,11789,218],{"class":168},[65,11791,9114],{"class":214},[65,11793,834],{"class":154},[65,11795,9136],{"class":214},[65,11797,834],{"class":154},[65,11799,9141],{"class":214},[65,11801,834],{"class":154},[65,11803,3610],{"class":214},[65,11805,834],{"class":154},[65,11807,9164],{"class":214},[65,11809,9167],{"class":154},[65,11811,5951],{"class":326},[65,11813,155],{"class":154},[65,11815,11816,11818,11820,11822,11824,11826,11828,11830,11832,11834,11836],{"class":140,"line":507},[65,11817,848],{"class":168},[65,11819,9344],{"class":214},[65,11821,218],{"class":168},[65,11823,1776],{"class":168},[65,11825,5951],{"class":200},[65,11827,3645],{"class":204},[65,11829,743],{"class":793},[65,11831,230],{"class":154},[65,11833,5854],{"class":214},[65,11835,3658],{"class":204},[65,11837,155],{"class":154},[65,11839,11840],{"class":140,"line":519},[65,11841,162],{"emptyLinePlaceholder":161},[65,11843,11844,11846,11849,11851,11853,11855,11857,11859,11861,11863,11866,11868,11870,11872,11874,11876,11878,11881,11884],{"class":140,"line":531},[65,11845,848],{"class":168},[65,11847,11848],{"class":214}," indexAttr",[65,11850,218],{"class":168},[65,11852,9114],{"class":214},[65,11854,834],{"class":154},[65,11856,9136],{"class":214},[65,11858,834],{"class":154},[65,11860,9141],{"class":214},[65,11862,834],{"class":154},[65,11864,11865],{"class":214},"index",[65,11867,9167],{"class":154},[65,11869,287],{"class":154},[65,11871,6304],{"class":144},[65,11873,797],{"class":168},[65,11875,6194],{"class":326},[65,11877,293],{"class":154},[65,11879,11880],{"class":168}," |",[65,11882,11883],{"class":340}," undefined",[65,11885,155],{"class":154},[65,11887,11888,11890,11893,11895,11897,11899,11901,11903,11905,11907,11909,11911,11913,11915,11917,11919,11921,11923,11925,11927,11929,11931,11933,11935,11937,11939],{"class":140,"line":543},[65,11889,848],{"class":168},[65,11891,11892],{"class":214}," getIndex",[65,11894,218],{"class":168},[65,11896,11848],{"class":214},[65,11898,7521],{"class":168},[65,11900,1696],{"class":154},[65,11902,6246],{"class":793},[65,11904,797],{"class":168},[65,11906,430],{"class":340},[65,11908,235],{"class":154},[65,11910,1862],{"class":168},[65,11912,11848],{"class":214},[65,11914,834],{"class":154},[65,11916,9164],{"class":214},[65,11918,6243],{"class":204},[65,11920,6246],{"class":214},[65,11922,6249],{"class":204},[65,11924,797],{"class":168},[65,11926,1696],{"class":154},[65,11928,6246],{"class":793},[65,11930,797],{"class":168},[65,11932,430],{"class":340},[65,11934,235],{"class":154},[65,11936,1862],{"class":168},[65,11938,5998],{"class":214},[65,11940,155],{"class":154},[65,11942,11943,11945,11947,11949,11951,11953,11955,11957,11959,11961,11963,11965,11967,11969,11972,11974,11977,11979,11981,11983,11985,11987],{"class":140,"line":555},[65,11944,848],{"class":168},[65,11946,5912],{"class":214},[65,11948,218],{"class":168},[65,11950,11848],{"class":214},[65,11952,7521],{"class":168},[65,11954,11848],{"class":214},[65,11956,834],{"class":154},[65,11958,9164],{"class":214},[65,11960,834],{"class":154},[65,11962,9196],{"class":204},[65,11964,797],{"class":168},[65,11966,4356],{"class":214},[65,11968,834],{"class":154},[65,11970,11971],{"class":200},"floor",[65,11973,224],{"class":204},[65,11975,11976],{"class":214},"positionData",[65,11978,834],{"class":154},[65,11980,9196],{"class":204},[65,11982,9199],{"class":168},[65,11984,3739],{"class":793},[65,11986,235],{"class":204},[65,11988,155],{"class":154},[65,11990,11991],{"class":140,"line":567},[65,11992,162],{"emptyLinePlaceholder":161},[65,11994,11995,11997,11999,12001,12003,12005,12007,12009,12011,12013,12015,12017],{"class":140,"line":3757},[65,11996,848],{"class":168},[65,11998,9178],{"class":214},[65,12000,218],{"class":168},[65,12002,4356],{"class":214},[65,12004,834],{"class":154},[65,12006,11971],{"class":200},[65,12008,224],{"class":204},[65,12010,5956],{"class":214},[65,12012,4349],{"class":168},[65,12014,3739],{"class":793},[65,12016,235],{"class":204},[65,12018,155],{"class":154},[65,12020,12021,12023,12025,12027,12029,12031,12033,12035,12037,12039,12041,12043,12045],{"class":140,"line":3787},[65,12022,848],{"class":168},[65,12024,9223],{"class":214},[65,12026,218],{"class":168},[65,12028,1776],{"class":168},[65,12030,5951],{"class":200},[65,12032,224],{"class":204},[65,12034,9234],{"class":214},[65,12036,5933],{"class":168},[65,12038,3748],{"class":793},[65,12040,5933],{"class":168},[65,12042,3739],{"class":793},[65,12044,235],{"class":204},[65,12046,155],{"class":154},[65,12048,12049,12051,12053,12055,12057,12059,12061,12063,12065,12067,12069,12071,12073],{"class":140,"line":3792},[65,12050,848],{"class":168},[65,12052,9253],{"class":214},[65,12054,218],{"class":168},[65,12056,1776],{"class":168},[65,12058,5951],{"class":200},[65,12060,224],{"class":204},[65,12062,9234],{"class":214},[65,12064,5933],{"class":168},[65,12066,3748],{"class":793},[65,12068,5933],{"class":168},[65,12070,3739],{"class":793},[65,12072,235],{"class":204},[65,12074,155],{"class":154},[65,12076,12077,12079,12081,12083,12085,12087,12089,12091,12093,12095,12097],{"class":140,"line":3814},[65,12078,848],{"class":168},[65,12080,9282],{"class":214},[65,12082,218],{"class":168},[65,12084,1776],{"class":168},[65,12086,5951],{"class":200},[65,12088,224],{"class":204},[65,12090,9234],{"class":214},[65,12092,5933],{"class":168},[65,12094,3748],{"class":793},[65,12096,235],{"class":204},[65,12098,155],{"class":154},[65,12100,12101],{"class":140,"line":3823},[65,12102,162],{"emptyLinePlaceholder":161},[65,12104,12105,12107,12110,12112,12114,12116,12118],{"class":140,"line":3831},[65,12106,848],{"class":168},[65,12108,12109],{"class":214}," vA",[65,12111,218],{"class":168},[65,12113,1776],{"class":168},[65,12115,5488],{"class":200},[65,12117,1269],{"class":204},[65,12119,155],{"class":154},[65,12121,12122,12124,12127,12129,12131,12133,12135],{"class":140,"line":3841},[65,12123,848],{"class":168},[65,12125,12126],{"class":214}," vB",[65,12128,218],{"class":168},[65,12130,1776],{"class":168},[65,12132,5488],{"class":200},[65,12134,1269],{"class":204},[65,12136,155],{"class":154},[65,12138,12139,12141,12144,12146,12148,12150,12152],{"class":140,"line":3861},[65,12140,848],{"class":168},[65,12142,12143],{"class":214}," vC",[65,12145,218],{"class":168},[65,12147,1776],{"class":168},[65,12149,5488],{"class":200},[65,12151,1269],{"class":204},[65,12153,155],{"class":154},[65,12155,12156,12158,12161,12163,12165,12167,12169],{"class":140,"line":3867},[65,12157,848],{"class":168},[65,12159,12160],{"class":214}," vCenter",[65,12162,218],{"class":168},[65,12164,1776],{"class":168},[65,12166,5488],{"class":200},[65,12168,1269],{"class":204},[65,12170,155],{"class":154},[65,12172,12173,12175,12178,12180,12182,12184,12186],{"class":140,"line":3876},[65,12174,848],{"class":168},[65,12176,12177],{"class":214}," vNormal",[65,12179,218],{"class":168},[65,12181,1776],{"class":168},[65,12183,5488],{"class":200},[65,12185,1269],{"class":204},[65,12187,155],{"class":154},[65,12189,12190],{"class":140,"line":3881},[65,12191,162],{"emptyLinePlaceholder":161},[65,12193,12194,12196,12198,12200,12202,12204,12206,12208,12210,12212,12214,12216,12218,12220,12222,12224],{"class":140,"line":3920},[65,12195,5990],{"class":154},[65,12197,1696],{"class":204},[65,12199,5995],{"class":168},[65,12201,5998],{"class":214},[65,12203,218],{"class":168},[65,12205,1142],{"class":793},[65,12207,6005],{"class":154},[65,12209,5998],{"class":214},[65,12211,6223],{"class":168},[65,12213,5912],{"class":214},[65,12215,6005],{"class":154},[65,12217,5998],{"class":214},[65,12219,4462],{"class":168},[65,12221,3739],{"class":793},[65,12223,1713],{"class":204},[65,12225,208],{"class":154},[65,12227,12228,12231,12233,12236,12238,12240,12242,12244,12246,12248,12250,12252,12254,12256,12258,12260],{"class":140,"line":3954},[65,12229,12230],{"class":214}," vA",[65,12232,834],{"class":154},[65,12234,12235],{"class":200},"fromArray",[65,12237,224],{"class":204},[65,12239,11976],{"class":214},[65,12241,230],{"class":154},[65,12243,11892],{"class":200},[65,12245,224],{"class":204},[65,12247,6246],{"class":214},[65,12249,2367],{"class":168},[65,12251,1142],{"class":793},[65,12253,1713],{"class":204},[65,12255,5928],{"class":168},[65,12257,3739],{"class":793},[65,12259,235],{"class":204},[65,12261,155],{"class":154},[65,12263,12264,12267,12269,12271,12273,12275,12277,12279,12281,12283,12285,12287,12289,12291,12293,12295],{"class":140,"line":3974},[65,12265,12266],{"class":214}," vB",[65,12268,834],{"class":154},[65,12270,12235],{"class":200},[65,12272,224],{"class":204},[65,12274,11976],{"class":214},[65,12276,230],{"class":154},[65,12278,11892],{"class":200},[65,12280,224],{"class":204},[65,12282,6246],{"class":214},[65,12284,2367],{"class":168},[65,12286,3137],{"class":793},[65,12288,1713],{"class":204},[65,12290,5928],{"class":168},[65,12292,3739],{"class":793},[65,12294,235],{"class":204},[65,12296,155],{"class":154},[65,12298,12299,12302,12304,12306,12308,12310,12312,12314,12316,12318,12320,12322,12324,12326,12328,12330],{"class":140,"line":3979},[65,12300,12301],{"class":214}," vC",[65,12303,834],{"class":154},[65,12305,12235],{"class":200},[65,12307,224],{"class":204},[65,12309,11976],{"class":214},[65,12311,230],{"class":154},[65,12313,11892],{"class":200},[65,12315,224],{"class":204},[65,12317,6246],{"class":214},[65,12319,2367],{"class":168},[65,12321,3748],{"class":793},[65,12323,1713],{"class":204},[65,12325,5928],{"class":168},[65,12327,3739],{"class":793},[65,12329,235],{"class":204},[65,12331,155],{"class":154},[65,12333,12334],{"class":140,"line":4031},[65,12335,162],{"emptyLinePlaceholder":161},[65,12337,12338],{"class":140,"line":4036},[65,12339,12340],{"class":214}," vCenter\n",[65,12342,12343,12346,12348,12350,12353,12355,12357],{"class":140,"line":4070},[65,12344,12345],{"class":154}," .",[65,12347,3962],{"class":200},[65,12349,224],{"class":204},[65,12351,12352],{"class":214},"vA",[65,12354,230],{"class":154},[65,12356,12126],{"class":214},[65,12358,12359],{"class":204},")\n",[65,12361,12362,12364,12366,12368,12371],{"class":140,"line":4086},[65,12363,12345],{"class":154},[65,12365,3962],{"class":200},[65,12367,224],{"class":204},[65,12369,12370],{"class":214},"vC",[65,12372,12359],{"class":204},[65,12374,12375,12377,12380,12382,12384,12386,12388,12390],{"class":140,"line":4102},[65,12376,12345],{"class":154},[65,12378,12379],{"class":200},"multiply",[65,12381,224],{"class":204},[65,12383,3620],{"class":793},[65,12385,4349],{"class":168},[65,12387,3739],{"class":793},[65,12389,235],{"class":204},[65,12391,155],{"class":154},[65,12393,12394,12396,12398,12401,12403,12405,12407,12409,12411],{"class":140,"line":4118},[65,12395,12230],{"class":214},[65,12397,834],{"class":154},[65,12399,12400],{"class":200},"sub",[65,12402,224],{"class":204},[65,12404,12352],{"class":214},[65,12406,230],{"class":154},[65,12408,12126],{"class":214},[65,12410,235],{"class":204},[65,12412,155],{"class":154},[65,12414,12415,12417,12419,12421,12423,12425,12427,12429,12431],{"class":140,"line":4149},[65,12416,12301],{"class":214},[65,12418,834],{"class":154},[65,12420,12400],{"class":200},[65,12422,224],{"class":204},[65,12424,12370],{"class":214},[65,12426,230],{"class":154},[65,12428,12126],{"class":214},[65,12430,235],{"class":204},[65,12432,155],{"class":154},[65,12434,12435,12438,12440,12443,12445,12447,12449,12451,12453,12455,12458,12460],{"class":140,"line":4163},[65,12436,12437],{"class":214}," vNormal",[65,12439,834],{"class":154},[65,12441,12442],{"class":200},"cross",[65,12444,224],{"class":204},[65,12446,12370],{"class":214},[65,12448,230],{"class":154},[65,12450,12109],{"class":214},[65,12452,235],{"class":204},[65,12454,834],{"class":154},[65,12456,12457],{"class":200},"normalize",[65,12459,1269],{"class":204},[65,12461,155],{"class":154},[65,12463,12464],{"class":140,"line":4168},[65,12465,162],{"emptyLinePlaceholder":161},[65,12467,12468,12470,12473,12475,12477,12479,12481],{"class":140,"line":4194},[65,12469,6028],{"class":168},[65,12471,12472],{"class":214}," i2",[65,12474,218],{"class":168},[65,12476,5998],{"class":214},[65,12478,5933],{"class":168},[65,12480,3748],{"class":793},[65,12482,155],{"class":154},[65,12484,12485,12487,12489,12491,12493,12496,12498,12500,12502],{"class":140,"line":4199},[65,12486,9474],{"class":214},[65,12488,834],{"class":154},[65,12490,3615],{"class":200},[65,12492,224],{"class":204},[65,12494,12495],{"class":214},"vCenter",[65,12497,230],{"class":154},[65,12499,12472],{"class":214},[65,12501,235],{"class":204},[65,12503,155],{"class":154},[65,12505,12506,12508,12510,12512,12514,12516,12518,12520,12522,12524,12526],{"class":140,"line":4221},[65,12507,9474],{"class":214},[65,12509,834],{"class":154},[65,12511,3615],{"class":200},[65,12513,224],{"class":204},[65,12515,12495],{"class":214},[65,12517,230],{"class":154},[65,12519,12472],{"class":214},[65,12521,2367],{"class":168},[65,12523,3739],{"class":793},[65,12525,235],{"class":204},[65,12527,155],{"class":154},[65,12529,12530],{"class":140,"line":4228},[65,12531,162],{"emptyLinePlaceholder":161},[65,12533,12534,12536,12538,12540,12542,12545,12547,12549,12551],{"class":140,"line":4235},[65,12535,9555],{"class":214},[65,12537,834],{"class":154},[65,12539,3615],{"class":200},[65,12541,224],{"class":204},[65,12543,12544],{"class":214},"vNormal",[65,12546,230],{"class":154},[65,12548,12472],{"class":214},[65,12550,235],{"class":204},[65,12552,155],{"class":154},[65,12554,12555,12557,12559,12561,12563,12565,12567,12569,12571,12573,12575],{"class":140,"line":4244},[65,12556,9555],{"class":214},[65,12558,834],{"class":154},[65,12560,3615],{"class":200},[65,12562,224],{"class":204},[65,12564,12544],{"class":214},[65,12566,230],{"class":154},[65,12568,12472],{"class":214},[65,12570,2367],{"class":168},[65,12572,3739],{"class":793},[65,12574,235],{"class":204},[65,12576,155],{"class":154},[65,12578,12579,12581,12583,12585,12587,12589,12591,12593,12595,12597,12599,12601,12603,12605,12607],{"class":140,"line":4261},[65,12580,9605],{"class":214},[65,12582,834],{"class":154},[65,12584,3615],{"class":200},[65,12586,224],{"class":204},[65,12588,9614],{"class":214},[65,12590,230],{"class":154},[65,12592,1696],{"class":204},[65,12594,6246],{"class":214},[65,12596,4349],{"class":168},[65,12598,3739],{"class":793},[65,12600,1713],{"class":204},[65,12602,5928],{"class":168},[65,12604,3748],{"class":793},[65,12606,235],{"class":204},[65,12608,155],{"class":154},[65,12610,12611],{"class":140,"line":4266},[65,12612,3204],{"class":154},[65,12614,12615],{"class":140,"line":4275},[65,12616,162],{"emptyLinePlaceholder":161},[65,12618,12619,12621,12623,12625,12627,12629,12631,12633,12635,12637,12639],{"class":140,"line":4280},[65,12620,848],{"class":168},[65,12622,6187],{"class":214},[65,12624,218],{"class":168},[65,12626,1776],{"class":168},[65,12628,6194],{"class":200},[65,12630,224],{"class":204},[65,12632,9234],{"class":214},[65,12634,5933],{"class":168},[65,12636,3748],{"class":793},[65,12638,235],{"class":204},[65,12640,155],{"class":154},[65,12642,12643,12645,12647,12649,12651,12653,12655,12657,12659,12661,12663,12665,12667,12669,12671,12673,12675],{"class":140,"line":4322},[65,12644,5990],{"class":154},[65,12646,1696],{"class":204},[65,12648,5995],{"class":168},[65,12650,5998],{"class":214},[65,12652,218],{"class":168},[65,12654,1142],{"class":793},[65,12656,6005],{"class":154},[65,12658,5998],{"class":214},[65,12660,6223],{"class":168},[65,12662,6187],{"class":214},[65,12664,834],{"class":154},[65,12666,9685],{"class":204},[65,12668,6005],{"class":154},[65,12670,5998],{"class":214},[65,12672,6019],{"class":168},[65,12674,1713],{"class":204},[65,12676,208],{"class":154},[65,12678,12679,12681,12683,12685,12687,12689,12691],{"class":140,"line":4375},[65,12680,6240],{"class":214},[65,12682,6243],{"class":204},[65,12684,6246],{"class":214},[65,12686,6249],{"class":204},[65,12688,6252],{"class":168},[65,12690,5998],{"class":214},[65,12692,155],{"class":154},[65,12694,12695],{"class":140,"line":4408},[65,12696,3204],{"class":154},[65,12698,12699],{"class":140,"line":4426},[65,12700,162],{"emptyLinePlaceholder":161},[65,12702,12703,12705,12707,12709,12711,12713,12715,12717,12719],{"class":140,"line":4431},[65,12704,848],{"class":168},[65,12706,3903],{"class":214},[65,12708,218],{"class":168},[65,12710,1776],{"class":168},[65,12712,5645],{"class":200},[65,12714,224],{"class":204},[65,12716,794],{"class":214},[65,12718,230],{"class":154},[65,12720,418],{"class":154},[65,12722,12723,12725,12727,12729,12731,12733,12735,12737,12739,12741,12743],{"class":140,"line":4447},[65,12724,6289],{"class":204},[65,12726,797],{"class":154},[65,12728,287],{"class":154},[65,12730,5854],{"class":204},[65,12732,797],{"class":154},[65,12734,3739],{"class":793},[65,12736,230],{"class":154},[65,12738,6304],{"class":204},[65,12740,797],{"class":154},[65,12742,9223],{"class":214},[65,12744,3858],{"class":154},[65,12746,12747,12749,12751,12753,12755,12757,12759,12761,12763,12765,12767],{"class":140,"line":4470},[65,12748,9768],{"class":204},[65,12750,797],{"class":154},[65,12752,287],{"class":154},[65,12754,5854],{"class":204},[65,12756,797],{"class":154},[65,12758,3739],{"class":793},[65,12760,230],{"class":154},[65,12762,6304],{"class":204},[65,12764,797],{"class":154},[65,12766,9253],{"class":214},[65,12768,3858],{"class":154},[65,12770,12771,12773,12775,12777,12779,12781,12783,12785,12787,12789,12791],{"class":140,"line":4490},[65,12772,7392],{"class":204},[65,12774,797],{"class":154},[65,12776,287],{"class":154},[65,12778,5854],{"class":204},[65,12780,797],{"class":154},[65,12782,3137],{"class":793},[65,12784,230],{"class":154},[65,12786,6304],{"class":204},[65,12788,797],{"class":154},[65,12790,9282],{"class":214},[65,12792,3858],{"class":154},[65,12794,12795,12797,12799,12801,12803,12805,12807,12809,12811,12813,12815],{"class":140,"line":4495},[65,12796,6240],{"class":204},[65,12798,797],{"class":154},[65,12800,287],{"class":154},[65,12802,5854],{"class":204},[65,12804,797],{"class":154},[65,12806,3137],{"class":793},[65,12808,230],{"class":154},[65,12810,6304],{"class":204},[65,12812,797],{"class":154},[65,12814,6187],{"class":214},[65,12816,3858],{"class":154},[65,12818,12819,12821,12823],{"class":140,"line":4523},[65,12820,6331],{"class":204},[65,12822,797],{"class":154},[65,12824,6336],{"class":154},[65,12826,12827,12829,12831],{"class":140,"line":4528},[65,12828,6341],{"class":154},[65,12830,235],{"class":204},[65,12832,155],{"class":154},[65,12834,12835],{"class":140,"line":4542},[65,12836,162],{"emptyLinePlaceholder":161},[65,12838,12839,12841,12843,12845,12847,12849,12851,12853,12855],{"class":140,"line":4547},[65,12840,848],{"class":168},[65,12842,3797],{"class":214},[65,12844,218],{"class":168},[65,12846,1776],{"class":168},[65,12848,3081],{"class":200},[65,12850,224],{"class":204},[65,12852,794],{"class":214},[65,12854,230],{"class":154},[65,12856,418],{"class":154},[65,12858,12859,12861,12863],{"class":140,"line":4561},[65,12860,6374],{"class":204},[65,12862,797],{"class":154},[65,12864,6379],{"class":154},[65,12866,12867],{"class":140,"line":4567},[65,12868,6384],{"class":302},[65,12870,12871],{"class":140,"line":4572},[65,12872,9893],{"class":302},[65,12874,12875],{"class":140,"line":4582},[65,12876,9898],{"class":302},[65,12878,12879],{"class":140,"line":4587},[65,12880,162],{"emptyLinePlaceholder":161},[65,12882,12883],{"class":140,"line":4603},[65,12884,9907],{"class":302},[65,12886,12887],{"class":140,"line":4637},[65,12888,6394],{"class":302},[65,12890,12891],{"class":140,"line":4685},[65,12892,9916],{"class":302},[65,12894,12895],{"class":140,"line":4690},[65,12896,9921],{"class":302},[65,12898,12899],{"class":140,"line":4718},[65,12900,162],{"emptyLinePlaceholder":161},[65,12902,12903],{"class":140,"line":4728},[65,12904,6403],{"class":302},[65,12906,12907],{"class":140,"line":10019},[65,12908,9934],{"class":302},[65,12910,12911],{"class":140,"line":10042},[65,12912,9939],{"class":302},[65,12914,12915],{"class":140,"line":10065},[65,12916,9944],{"class":302},[65,12918,12919],{"class":140,"line":10070},[65,12920,6413],{"class":302},[65,12922,12923,12925],{"class":140,"line":10079},[65,12924,6418],{"class":154},[65,12926,3820],{"class":154},[65,12928,12929,12931,12933],{"class":140,"line":10084},[65,12930,6425],{"class":204},[65,12932,797],{"class":154},[65,12934,6379],{"class":154},[65,12936,12937],{"class":140,"line":10109},[65,12938,7956],{"class":302},[65,12940,12941],{"class":140,"line":10114},[65,12942,6439],{"class":302},[65,12944,12946],{"class":140,"line":12945},90,[65,12947,162],{"emptyLinePlaceholder":161},[65,12949,12951],{"class":140,"line":12950},91,[65,12952,6403],{"class":302},[65,12954,12956],{"class":140,"line":12955},92,[65,12957,6452],{"class":302},[65,12959,12961],{"class":140,"line":12960},93,[65,12962,6413],{"class":302},[65,12964,12966,12968],{"class":140,"line":12965},94,[65,12967,6418],{"class":154},[65,12969,3820],{"class":154},[65,12971,12973,12975,12977],{"class":140,"line":12972},95,[65,12974,6467],{"class":204},[65,12976,797],{"class":154},[65,12978,418],{"class":154},[65,12980,12982,12984,12986,12988,12990,12992,12994],{"class":140,"line":12981},96,[65,12983,6476],{"class":204},[65,12985,797],{"class":154},[65,12987,287],{"class":154},[65,12989,3851],{"class":204},[65,12991,797],{"class":154},[65,12993,5872],{"class":214},[65,12995,3858],{"class":154},[65,12997,12999,13001,13003,13005,13007,13009,13011,13013,13015],{"class":140,"line":12998},97,[65,13000,10022],{"class":204},[65,13002,797],{"class":154},[65,13004,287],{"class":154},[65,13006,3851],{"class":204},[65,13008,797],{"class":154},[65,13010,1776],{"class":168},[65,13012,8937],{"class":200},[65,13014,205],{"class":204},[65,13016,10039],{"class":154},[65,13018,13020,13022,13024,13026,13028,13030,13032,13034,13036],{"class":140,"line":13019},98,[65,13021,10045],{"class":204},[65,13023,797],{"class":154},[65,13025,287],{"class":154},[65,13027,3851],{"class":204},[65,13029,797],{"class":154},[65,13031,9114],{"class":214},[65,13033,834],{"class":154},[65,13035,10060],{"class":214},[65,13037,3858],{"class":154},[65,13039,13041],{"class":140,"line":13040},99,[65,13042,6493],{"class":154},[65,13044,13046,13048,13050],{"class":140,"line":13045},100,[65,13047,6341],{"class":154},[65,13049,235],{"class":204},[65,13051,155],{"class":154},[65,13053,13055],{"class":140,"line":13054},101,[65,13056,162],{"emptyLinePlaceholder":161},[65,13058,13060,13062,13064,13066,13068,13070,13072,13074,13076,13078,13080],{"class":140,"line":13059},102,[65,13061,6510],{"class":830},[65,13063,224],{"class":204},[65,13065,794],{"class":214},[65,13067,230],{"class":154},[65,13069,287],{"class":154},[65,13071,3903],{"class":214},[65,13073,230],{"class":154},[65,13075,3797],{"class":214},[65,13077,293],{"class":154},[65,13079,235],{"class":204},[65,13081,155],{"class":154},[65,13083,13085],{"class":140,"line":13084},103,[65,13086,1171],{"class":154},[65,13088,13090],{"class":140,"line":13089},104,[65,13091,243],{"class":154},[15,13093,13094],{},"VertexNormalHelperと同様に法線を描画するには、始点と終点を計算して、それを線として描画する必要があります。",[15,13096,13097,13098,13100],{},"WebGLでは、面は三角形で構成されているため、各三角形の法線を計算して描画する必要があります。三角形の数としては、",[124,13099,9234],{},"として次のように計算してます。",[129,13102,13104],{"className":131,"code":13103,"language":134,"meta":135,"style":135},"const nNormals = Math.floor(numVertices / 3);\n",[124,13105,13106],{"__ignoreMap":135},[65,13107,13108,13110,13112,13114,13116,13118,13120,13122,13124,13126,13128,13130],{"class":140,"line":141},[65,13109,1769],{"class":168},[65,13111,9178],{"class":144},[65,13113,218],{"class":168},[65,13115,4356],{"class":144},[65,13117,834],{"class":154},[65,13119,11971],{"class":200},[65,13121,224],{"class":204},[65,13123,5956],{"class":144},[65,13125,4349],{"class":168},[65,13127,3739],{"class":793},[65,13129,235],{"class":204},[65,13131,155],{"class":154},[15,13133,13134],{},"これは、1つの三角形が3つの頂点で構成されているため、全頂点数を3で割ることで三角形の数を求めています。",[2418,13136,13137],{"id":13137},"面法線の計算",[15,13139,13140],{},"途中までは、VertexNormalHelperと同様なのでそちらを見ていただき、面法線の計算部分を解説します。",[129,13142,13144],{"className":131,"code":13143,"language":134,"meta":135,"style":135},"const getIndex = indexAttr ? (i: number) => indexAttr.data[i] : (i: number) => i;\n\nconst vA = new Vec3(); // 三角形の頂点A\nconst vB = new Vec3(); // 三角形の頂点B\nconst vC = new Vec3(); // 三角形の頂点C\nconst vCenter = new Vec3(); // 三角形の中心\nconst vNormal = new Vec3(); // 三角形の法線\n\nfor (let i = 0; i \u003C numVertices; i += 3) {\n vA.fromArray(positionData, getIndex(i + 0) * 3);\n vB.fromArray(positionData, getIndex(i + 1) * 3);\n vC.fromArray(positionData, getIndex(i + 2) * 3);\n\n vCenter\n .add(vA, vB)\n .add(vC)\n .multiply(1 / 3);\n\n vA.sub(vA, vB);\n vC.sub(vC, vB);\n vNormal.cross(vC, vA).normalize();\n\n const i2 = i * 2;\n positionsArray.set(vCenter, i2);\n positionsArray.set(vCenter, i2 + 3);\n\n normalsArray.set(vNormal, i2);\n normalsArray.set(vNormal, i2 + 3);\n sizeArray.set(sizeData, (i / 3) * 2);\n}\n",[124,13145,13146,13200,13204,13223,13242,13261,13280,13299,13303,13337,13372,13407,13442,13446,13451,13468,13480,13498,13502,13522,13542,13569,13573,13589,13609,13633,13637,13657,13681,13713],{"__ignoreMap":135},[65,13147,13148,13150,13152,13154,13156,13158,13160,13162,13164,13166,13168,13170,13172,13174,13176,13178,13180,13182,13184,13186,13188,13190,13192,13194,13196,13198],{"class":140,"line":141},[65,13149,1769],{"class":168},[65,13151,11892],{"class":144},[65,13153,218],{"class":168},[65,13155,11848],{"class":144},[65,13157,7521],{"class":168},[65,13159,1696],{"class":154},[65,13161,6246],{"class":793},[65,13163,797],{"class":168},[65,13165,430],{"class":340},[65,13167,235],{"class":154},[65,13169,1862],{"class":168},[65,13171,11848],{"class":144},[65,13173,834],{"class":154},[65,13175,9164],{"class":144},[65,13177,6243],{"class":204},[65,13179,6246],{"class":144},[65,13181,6249],{"class":204},[65,13183,797],{"class":168},[65,13185,1696],{"class":154},[65,13187,6246],{"class":793},[65,13189,797],{"class":168},[65,13191,430],{"class":340},[65,13193,235],{"class":154},[65,13195,1862],{"class":168},[65,13197,5998],{"class":144},[65,13199,155],{"class":154},[65,13201,13202],{"class":140,"line":158},[65,13203,162],{"emptyLinePlaceholder":161},[65,13205,13206,13208,13210,13212,13214,13216,13218,13220],{"class":140,"line":165},[65,13207,1769],{"class":168},[65,13209,12109],{"class":144},[65,13211,218],{"class":168},[65,13213,1776],{"class":168},[65,13215,5488],{"class":200},[65,13217,1269],{"class":204},[65,13219,6005],{"class":154},[65,13221,13222],{"class":278}," // 三角形の頂点A\n",[65,13224,13225,13227,13229,13231,13233,13235,13237,13239],{"class":140,"line":180},[65,13226,1769],{"class":168},[65,13228,12126],{"class":144},[65,13230,218],{"class":168},[65,13232,1776],{"class":168},[65,13234,5488],{"class":200},[65,13236,1269],{"class":204},[65,13238,6005],{"class":154},[65,13240,13241],{"class":278}," // 三角形の頂点B\n",[65,13243,13244,13246,13248,13250,13252,13254,13256,13258],{"class":140,"line":194},[65,13245,1769],{"class":168},[65,13247,12143],{"class":144},[65,13249,218],{"class":168},[65,13251,1776],{"class":168},[65,13253,5488],{"class":200},[65,13255,1269],{"class":204},[65,13257,6005],{"class":154},[65,13259,13260],{"class":278}," // 三角形の頂点C\n",[65,13262,13263,13265,13267,13269,13271,13273,13275,13277],{"class":140,"line":211},[65,13264,1769],{"class":168},[65,13266,12160],{"class":144},[65,13268,218],{"class":168},[65,13270,1776],{"class":168},[65,13272,5488],{"class":200},[65,13274,1269],{"class":204},[65,13276,6005],{"class":154},[65,13278,13279],{"class":278}," // 三角形の中心\n",[65,13281,13282,13284,13286,13288,13290,13292,13294,13296],{"class":140,"line":240},[65,13283,1769],{"class":168},[65,13285,12177],{"class":144},[65,13287,218],{"class":168},[65,13289,1776],{"class":168},[65,13291,5488],{"class":200},[65,13293,1269],{"class":204},[65,13295,6005],{"class":154},[65,13297,13298],{"class":278}," // 三角形の法線\n",[65,13300,13301],{"class":140,"line":391},[65,13302,162],{"emptyLinePlaceholder":161},[65,13304,13305,13307,13309,13311,13313,13315,13317,13319,13321,13323,13325,13327,13329,13331,13333,13335],{"class":140,"line":401},[65,13306,6643],{"class":154},[65,13308,1696],{"class":204},[65,13310,5995],{"class":168},[65,13312,5998],{"class":144},[65,13314,218],{"class":168},[65,13316,1142],{"class":793},[65,13318,6005],{"class":154},[65,13320,5998],{"class":144},[65,13322,6223],{"class":168},[65,13324,5912],{"class":144},[65,13326,6005],{"class":154},[65,13328,5998],{"class":144},[65,13330,4462],{"class":168},[65,13332,3739],{"class":793},[65,13334,1713],{"class":204},[65,13336,208],{"class":154},[65,13338,13339,13342,13344,13346,13348,13350,13352,13354,13356,13358,13360,13362,13364,13366,13368,13370],{"class":140,"line":406},[65,13340,13341],{"class":214}," vA",[65,13343,834],{"class":154},[65,13345,12235],{"class":200},[65,13347,224],{"class":204},[65,13349,11976],{"class":214},[65,13351,230],{"class":154},[65,13353,11892],{"class":200},[65,13355,224],{"class":204},[65,13357,6246],{"class":214},[65,13359,2367],{"class":168},[65,13361,1142],{"class":793},[65,13363,1713],{"class":204},[65,13365,5928],{"class":168},[65,13367,3739],{"class":793},[65,13369,235],{"class":204},[65,13371,155],{"class":154},[65,13373,13374,13377,13379,13381,13383,13385,13387,13389,13391,13393,13395,13397,13399,13401,13403,13405],{"class":140,"line":421},[65,13375,13376],{"class":214}," vB",[65,13378,834],{"class":154},[65,13380,12235],{"class":200},[65,13382,224],{"class":204},[65,13384,11976],{"class":214},[65,13386,230],{"class":154},[65,13388,11892],{"class":200},[65,13390,224],{"class":204},[65,13392,6246],{"class":214},[65,13394,2367],{"class":168},[65,13396,3137],{"class":793},[65,13398,1713],{"class":204},[65,13400,5928],{"class":168},[65,13402,3739],{"class":793},[65,13404,235],{"class":204},[65,13406,155],{"class":154},[65,13408,13409,13412,13414,13416,13418,13420,13422,13424,13426,13428,13430,13432,13434,13436,13438,13440],{"class":140,"line":435},[65,13410,13411],{"class":214}," vC",[65,13413,834],{"class":154},[65,13415,12235],{"class":200},[65,13417,224],{"class":204},[65,13419,11976],{"class":214},[65,13421,230],{"class":154},[65,13423,11892],{"class":200},[65,13425,224],{"class":204},[65,13427,6246],{"class":214},[65,13429,2367],{"class":168},[65,13431,3748],{"class":793},[65,13433,1713],{"class":204},[65,13435,5928],{"class":168},[65,13437,3739],{"class":793},[65,13439,235],{"class":204},[65,13441,155],{"class":154},[65,13443,13444],{"class":140,"line":447},[65,13445,162],{"emptyLinePlaceholder":161},[65,13447,13448],{"class":140,"line":459},[65,13449,13450],{"class":214}," vCenter\n",[65,13452,13453,13456,13458,13460,13462,13464,13466],{"class":140,"line":471},[65,13454,13455],{"class":154}," .",[65,13457,3962],{"class":200},[65,13459,224],{"class":204},[65,13461,12352],{"class":214},[65,13463,230],{"class":154},[65,13465,12126],{"class":214},[65,13467,12359],{"class":204},[65,13469,13470,13472,13474,13476,13478],{"class":140,"line":63},[65,13471,13455],{"class":154},[65,13473,3962],{"class":200},[65,13475,224],{"class":204},[65,13477,12370],{"class":214},[65,13479,12359],{"class":204},[65,13481,13482,13484,13486,13488,13490,13492,13494,13496],{"class":140,"line":495},[65,13483,13455],{"class":154},[65,13485,12379],{"class":200},[65,13487,224],{"class":204},[65,13489,3620],{"class":793},[65,13491,4349],{"class":168},[65,13493,3739],{"class":793},[65,13495,235],{"class":204},[65,13497,155],{"class":154},[65,13499,13500],{"class":140,"line":507},[65,13501,162],{"emptyLinePlaceholder":161},[65,13503,13504,13506,13508,13510,13512,13514,13516,13518,13520],{"class":140,"line":519},[65,13505,13341],{"class":214},[65,13507,834],{"class":154},[65,13509,12400],{"class":200},[65,13511,224],{"class":204},[65,13513,12352],{"class":214},[65,13515,230],{"class":154},[65,13517,12126],{"class":214},[65,13519,235],{"class":204},[65,13521,155],{"class":154},[65,13523,13524,13526,13528,13530,13532,13534,13536,13538,13540],{"class":140,"line":531},[65,13525,13411],{"class":214},[65,13527,834],{"class":154},[65,13529,12400],{"class":200},[65,13531,224],{"class":204},[65,13533,12370],{"class":214},[65,13535,230],{"class":154},[65,13537,12126],{"class":214},[65,13539,235],{"class":204},[65,13541,155],{"class":154},[65,13543,13544,13547,13549,13551,13553,13555,13557,13559,13561,13563,13565,13567],{"class":140,"line":543},[65,13545,13546],{"class":214}," vNormal",[65,13548,834],{"class":154},[65,13550,12442],{"class":200},[65,13552,224],{"class":204},[65,13554,12370],{"class":214},[65,13556,230],{"class":154},[65,13558,12109],{"class":214},[65,13560,235],{"class":204},[65,13562,834],{"class":154},[65,13564,12457],{"class":200},[65,13566,1269],{"class":204},[65,13568,155],{"class":154},[65,13570,13571],{"class":140,"line":555},[65,13572,162],{"emptyLinePlaceholder":161},[65,13574,13575,13577,13579,13581,13583,13585,13587],{"class":140,"line":567},[65,13576,2243],{"class":168},[65,13578,12472],{"class":214},[65,13580,218],{"class":168},[65,13582,5998],{"class":214},[65,13584,5933],{"class":168},[65,13586,3748],{"class":793},[65,13588,155],{"class":154},[65,13590,13591,13593,13595,13597,13599,13601,13603,13605,13607],{"class":140,"line":3757},[65,13592,10520],{"class":214},[65,13594,834],{"class":154},[65,13596,3615],{"class":200},[65,13598,224],{"class":204},[65,13600,12495],{"class":214},[65,13602,230],{"class":154},[65,13604,12472],{"class":214},[65,13606,235],{"class":204},[65,13608,155],{"class":154},[65,13610,13611,13613,13615,13617,13619,13621,13623,13625,13627,13629,13631],{"class":140,"line":3787},[65,13612,10520],{"class":214},[65,13614,834],{"class":154},[65,13616,3615],{"class":200},[65,13618,224],{"class":204},[65,13620,12495],{"class":214},[65,13622,230],{"class":154},[65,13624,12472],{"class":214},[65,13626,2367],{"class":168},[65,13628,3739],{"class":793},[65,13630,235],{"class":204},[65,13632,155],{"class":154},[65,13634,13635],{"class":140,"line":3792},[65,13636,162],{"emptyLinePlaceholder":161},[65,13638,13639,13641,13643,13645,13647,13649,13651,13653,13655],{"class":140,"line":3814},[65,13640,10599],{"class":214},[65,13642,834],{"class":154},[65,13644,3615],{"class":200},[65,13646,224],{"class":204},[65,13648,12544],{"class":214},[65,13650,230],{"class":154},[65,13652,12472],{"class":214},[65,13654,235],{"class":204},[65,13656,155],{"class":154},[65,13658,13659,13661,13663,13665,13667,13669,13671,13673,13675,13677,13679],{"class":140,"line":3823},[65,13660,10599],{"class":214},[65,13662,834],{"class":154},[65,13664,3615],{"class":200},[65,13666,224],{"class":204},[65,13668,12544],{"class":214},[65,13670,230],{"class":154},[65,13672,12472],{"class":214},[65,13674,2367],{"class":168},[65,13676,3739],{"class":793},[65,13678,235],{"class":204},[65,13680,155],{"class":154},[65,13682,13683,13685,13687,13689,13691,13693,13695,13697,13699,13701,13703,13705,13707,13709,13711],{"class":140,"line":3831},[65,13684,10648],{"class":214},[65,13686,834],{"class":154},[65,13688,3615],{"class":200},[65,13690,224],{"class":204},[65,13692,9614],{"class":214},[65,13694,230],{"class":154},[65,13696,1696],{"class":204},[65,13698,6246],{"class":214},[65,13700,4349],{"class":168},[65,13702,3739],{"class":793},[65,13704,1713],{"class":204},[65,13706,5928],{"class":168},[65,13708,3748],{"class":793},[65,13710,235],{"class":204},[65,13712,155],{"class":154},[65,13714,13715],{"class":140,"line":3841},[65,13716,243],{"class":154},[15,13718,13719],{},"3頂点ずつ処理して各三角形の中心と法線を計算しています。",[15,13721,13722,13723,13725],{},"三角形の中心の計算式は、(A + B + C) / 3となります。",[5467,13724],{},"\n三角形の法線の計算式は、((C - B) × (A - B)) / ||(C - B) × (A - B)||です。",[15,13727,13728,13729,13732,13733,10345,13735,13737,13738,13737,13740,13742],{},"コードでは、",[124,13730,13731],{},"Vec3","クラスにある",[124,13734,3962],{},[124,13736,12400],{},"、",[124,13739,12442],{},[124,13741,12457],{},"メソッドを使用して計算しています。",[15,13744,13745,13746,10345,13748,13750],{},"これら計算した三角形の中心と法線を使用して、",[124,13747,10344],{},[124,13749,10348],{},"にデータを格納しています。",[2418,13752,10797],{"id":13753},"geometryの作成-1",[15,13755,13756],{},"attributeを準備できたので、これを使ってGeometryを作成します。",[129,13758,13759],{"className":131,"code":10803,"language":134,"meta":135,"style":135},[124,13760,13761,13781,13805,13829,13853,13877,13885],{"__ignoreMap":135},[65,13762,13763,13765,13767,13769,13771,13773,13775,13777,13779],{"class":140,"line":141},[65,13764,1769],{"class":168},[65,13766,3903],{"class":144},[65,13768,218],{"class":168},[65,13770,1776],{"class":168},[65,13772,5645],{"class":200},[65,13774,224],{"class":204},[65,13776,794],{"class":144},[65,13778,230],{"class":154},[65,13780,418],{"class":154},[65,13782,13783,13785,13787,13789,13791,13793,13795,13797,13799,13801,13803],{"class":140,"line":158},[65,13784,8393],{"class":204},[65,13786,797],{"class":154},[65,13788,287],{"class":154},[65,13790,5854],{"class":204},[65,13792,797],{"class":154},[65,13794,3739],{"class":793},[65,13796,230],{"class":154},[65,13798,6304],{"class":204},[65,13800,797],{"class":154},[65,13802,9223],{"class":144},[65,13804,3858],{"class":154},[65,13806,13807,13809,13811,13813,13815,13817,13819,13821,13823,13825,13827],{"class":140,"line":165},[65,13808,10854],{"class":204},[65,13810,797],{"class":154},[65,13812,287],{"class":154},[65,13814,5854],{"class":204},[65,13816,797],{"class":154},[65,13818,3739],{"class":793},[65,13820,230],{"class":154},[65,13822,6304],{"class":204},[65,13824,797],{"class":154},[65,13826,9253],{"class":144},[65,13828,3858],{"class":154},[65,13830,13831,13833,13835,13837,13839,13841,13843,13845,13847,13849,13851],{"class":140,"line":180},[65,13832,5520],{"class":204},[65,13834,797],{"class":154},[65,13836,287],{"class":154},[65,13838,5854],{"class":204},[65,13840,797],{"class":154},[65,13842,3137],{"class":793},[65,13844,230],{"class":154},[65,13846,6304],{"class":204},[65,13848,797],{"class":154},[65,13850,9282],{"class":144},[65,13852,3858],{"class":154},[65,13854,13855,13857,13859,13861,13863,13865,13867,13869,13871,13873,13875],{"class":140,"line":194},[65,13856,6899],{"class":204},[65,13858,797],{"class":154},[65,13860,287],{"class":154},[65,13862,5854],{"class":204},[65,13864,797],{"class":154},[65,13866,3137],{"class":793},[65,13868,230],{"class":154},[65,13870,6304],{"class":204},[65,13872,797],{"class":154},[65,13874,6187],{"class":144},[65,13876,3858],{"class":154},[65,13878,13879,13881,13883],{"class":140,"line":211},[65,13880,8466],{"class":204},[65,13882,797],{"class":154},[65,13884,6336],{"class":154},[65,13886,13887,13889,13891],{"class":140,"line":240},[65,13888,2899],{"class":154},[65,13890,235],{"class":204},[65,13892,155],{"class":154},[15,13894,13895],{},"VertexNormalHelperと同様に、vertexシェーダーで面の法線を描画します。",[2418,13897,13898],{"id":13898},"vertexシェーダーでの面法線の表示",[129,13900,13901],{"className":131,"code":10950,"filename":10951,"language":134,"meta":135,"style":135},[124,13902,13903,13913,13923,13933,13937,13947,13957,13967,13977,13981,13991,14017,14049,14081],{"__ignoreMap":135},[65,13904,13905,13907,13909,13911],{"class":140,"line":141},[65,13906,10958],{"class":144},[65,13908,10961],{"class":144},[65,13910,10964],{"class":144},[65,13912,155],{"class":154},[65,13914,13915,13917,13919,13921],{"class":140,"line":158},[65,13916,10958],{"class":144},[65,13918,10961],{"class":144},[65,13920,10975],{"class":144},[65,13922,155],{"class":154},[65,13924,13925,13927,13929,13931],{"class":140,"line":165},[65,13926,10958],{"class":144},[65,13928,10984],{"class":144},[65,13930,5854],{"class":144},[65,13932,155],{"class":154},[65,13934,13935],{"class":140,"line":180},[65,13936,162],{"emptyLinePlaceholder":161},[65,13938,13939,13941,13943,13945],{"class":140,"line":194},[65,13940,145],{"class":144},[65,13942,10999],{"class":144},[65,13944,11002],{"class":144},[65,13946,155],{"class":154},[65,13948,13949,13951,13953,13955],{"class":140,"line":211},[65,13950,145],{"class":144},[65,13952,10999],{"class":144},[65,13954,11013],{"class":144},[65,13956,155],{"class":154},[65,13958,13959,13961,13963,13965],{"class":140,"line":240},[65,13960,145],{"class":144},[65,13962,10999],{"class":144},[65,13964,11024],{"class":144},[65,13966,155],{"class":154},[65,13968,13969,13971,13973,13975],{"class":140,"line":391},[65,13970,145],{"class":144},[65,13972,11033],{"class":144},[65,13974,11036],{"class":144},[65,13976,155],{"class":154},[65,13978,13979],{"class":140,"line":401},[65,13980,162],{"emptyLinePlaceholder":161},[65,13982,13983,13985,13987,13989],{"class":140,"line":406},[65,13984,197],{"class":168},[65,13986,201],{"class":200},[65,13988,205],{"class":204},[65,13990,208],{"class":154},[65,13992,13993,13995,13997,13999,14001,14003,14005,14007,14009,14011,14013,14015],{"class":140,"line":421},[65,13994,11057],{"class":214},[65,13996,11060],{"class":214},[65,13998,218],{"class":168},[65,14000,11065],{"class":200},[65,14002,224],{"class":204},[65,14004,11070],{"class":214},[65,14006,5933],{"class":168},[65,14008,10975],{"class":214},[65,14010,1713],{"class":204},[65,14012,5928],{"class":168},[65,14014,5854],{"class":214},[65,14016,155],{"class":154},[65,14018,14019,14021,14023,14025,14027,14029,14031,14033,14035,14037,14039,14041,14043,14045,14047],{"class":140,"line":435},[65,14020,11057],{"class":214},[65,14022,11089],{"class":214},[65,14024,218],{"class":168},[65,14026,1696],{"class":204},[65,14028,11096],{"class":214},[65,14030,5933],{"class":168},[65,14032,186],{"class":200},[65,14034,224],{"class":204},[65,14036,3610],{"class":214},[65,14038,230],{"class":154},[65,14040,3507],{"class":793},[65,14042,11111],{"class":204},[65,14044,834],{"class":154},[65,14046,11116],{"class":214},[65,14048,155],{"class":154},[65,14050,14051,14053,14055,14057,14059,14061,14063,14065,14067,14069,14071,14073,14075,14077,14079],{"class":140,"line":447},[65,14052,11123],{"class":214},[65,14054,218],{"class":168},[65,14056,11013],{"class":214},[65,14058,5933],{"class":168},[65,14060,11002],{"class":214},[65,14062,5933],{"class":168},[65,14064,186],{"class":200},[65,14066,224],{"class":204},[65,14068,15],{"class":214},[65,14070,2367],{"class":168},[65,14072,11060],{"class":214},[65,14074,230],{"class":154},[65,14076,3507],{"class":793},[65,14078,235],{"class":204},[65,14080,155],{"class":154},[65,14082,14083],{"class":140,"line":459},[65,14084,243],{"class":154},[15,14086,14087,14088,14090],{},"vertexシェーダーはVertexNormalHelperと同様なことが分かるでしょう。",[5467,14089],{},"\nこれで、シアンの面法線が表示されるようになりました！",[15,14092,14093],{},[57,14094],{"alt":14095,"src":14096,"title":14095},"面法線の表示","https://res.cloudinary.com/dy8ftemi0/image/upload/v1788600080/webgl-helper-function-04_lir70o.jpg",[11,14098,5299],{"id":5299},[15,14100,14101],{},"今回作成したヘルパー関数の表示と、Box・Plane・Sphereに対しての確認は次のようになります。ぜひデモサイトでも確認してみてください！",[15,14103,14104],{},[57,14105],{"alt":14106,"src":14107,"title":14106},"今回作成したヘルパー関数のすべて","https://res.cloudinary.com/dy8ftemi0/image/upload/v1788600080/webgl-helper-function-05_pf98jp.jpg",[3226,14109],{"href":14110},"https://nono-k.github.io/webgl-study-note/webgl/helper/",[15,14112,14113],{},"今回は、WebGLでデバックとして使用するヘルパー関数の作成方法について解説しました。Three.jsでも同様なものがありますが、実装がどのようになっているのか参考になればと思います。",[15,14115,14116],{},"次回は、WebGLで画像や動画を表示させるTextureクラスの作成方法を解説したいと思います。",[19,14118],{":items":14119},"[{\"title\":\"WebGLで画像や動画を描画するテクスチャクラスを作成する\",\"link\":\"/blog/webgl-image-video-texture/\",\"image\":\"/images/blog/webgl-image-video-texture.jpg\",\"description\":\"今回は、Three.jsでいうTextureに相当する、画像や動画を描画するテクスチャクラスをWebGLで作成する方法を解説します。デモサイトでは、平面に画像を、立方体に動画を貼り付けて表示しています。\"}]",[5313,14121,14122],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .s9qRY, html code.shiki .s9qRY{--shiki-default:#FF5370;--shiki-default-font-style:italic}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}",{"title":135,"searchDepth":165,"depth":165,"links":14124},[14125,14126,14127,14138,14153],{"id":13,"depth":158,"text":13},{"id":81,"depth":158,"text":81},{"id":5455,"depth":158,"text":5455,"children":14128},[14129,14132,14133,14134],{"id":5461,"depth":165,"text":5462,"children":14130},[14131],{"id":6544,"depth":180,"text":6544},{"id":6617,"depth":165,"text":6617},{"id":6837,"depth":165,"text":6837},{"id":6932,"depth":165,"text":6933,"children":14135},[14136,14137],{"id":8033,"depth":180,"text":8033},{"id":8089,"depth":180,"text":8090},{"id":8621,"depth":158,"text":8621,"children":14139},[14140,14148],{"id":8627,"depth":165,"text":8628,"children":14141},[14142,14143,14144,14145,14146,14147],{"id":10125,"depth":180,"text":10125},{"id":10253,"depth":180,"text":10253},{"id":10352,"depth":180,"text":10352},{"id":10702,"depth":180,"text":6837},{"id":10796,"depth":180,"text":10797},{"id":10944,"depth":180,"text":10944},{"id":11294,"depth":165,"text":11295,"children":14149},[14150,14151,14152],{"id":13137,"depth":180,"text":13137},{"id":13753,"depth":180,"text":10797},{"id":13898,"depth":180,"text":13898},{"id":5299,"depth":158,"text":5299},"2026-09-07T00:00:00.000Z","今回は、Three.jsでいうViewHelperやVertexNormalsHelperに相当する、法線の可視化や座標確認のためのヘルパー関数をWebGLで作成する方法を解説します。","/images/blog/webgl-helper-function.jpg",{},"/blog/webgl-helper-function",{"title":5354,"description":14155},"blog/webgl-helper-function",[14162,14163],"WebGLで座標確認を行う方法","WebGLで法線を可視化する方法",[5350],"PGLk7JqJ571id5xeqd09HDofrDrFg6nkUu3OHuJ-NeQ",{"id":14167,"title":14168,"body":14169,"date":16133,"description":16134,"draft":5339,"extension":5340,"image":16135,"meta":16136,"navigation":161,"path":16137,"seo":16138,"stem":16139,"summaryList":16140,"summaryText":5348,"tags":16143,"__hash__":16144},"blog/blog/webgl-box-geometry.md","WebGLで立方体(Box)ジオメトリを作成する方法",{"type":8,"value":14170,"toc":16118},[14171,14173,14176,14179,14182,14184,14211,14215,14218,14225,14229,14242,14273,14282,14449,14454,14713,14726,14729,14732,14899,14904,14907,14910,14980,14983,14989,14993,15007,15206,15209,15463,15466,15469,15510,15513,15517,15524,15573,15580,15584,15591,15632,15635,15639,15642,15847,15850,16096,16102,16105,16107,16110,16113,16115],[11,14172,13],{"id":13},[15,14174,14175],{},"前回は、WebGLで平面(Plane)ジオメトリを作成する方法について解説しました。",[19,14177],{":items":14178},"[{\"title\":\"WebGLで平面(Plane)ジオメトリを作成する方法\",\"link\":\"/blog/webgl-plane-geometry/\",\"image\":\"/images/blog/webgl-plane-geometry.jpg\",\"description\":\"今回は、Three.jsでいうPlaneGeometry(平面)の作成をWebGLで行っていきます。widthとheightを設定できるのはもちろん、分割数も設定できるようにしていきます。\"}]",[15,14180,14181],{},"今回は、前回作成した平面(Plane)ジオメトリを組み合わせて立方体(Box)ジオメトリを作成していきます。",[15,14183,27],{},[29,14185,34,14187,34,14205],{"className":14186,"href":33},[32],[36,14188,40,14190,40,14193,40,14196,34],{"className":14189},[39],[36,14191,45],{"className":14192},[44],[36,14194,50],{"className":14195},[49],[36,14197,55,14199,55,14202,40],{"className":14198},[54],[57,14200],{"className":14201,"src":61,"alt":62,"width":63,"height":63},[60],[65,14203,69],{"className":14204},[68],[36,14206,55,14208,40],{"className":14207},[73],[57,14209],{"className":14210,"src":78,"alt":45},[77],[1177,14212,14214],{"id":14213},"webglでの立方体の作成の考え方","WebGLでの立方体の作成の考え方",[15,14216,14217],{},"前回で、平面ジオメトリのクラスを作成したので、この平面を6つ組み合わせて立方体を作成していきます。それぞれの平面は、left、right、top、bottom、front、backの6面となり、この平面を立方体になるように位置を計算して配置していきます。",[15,14219,14220,14221,14224],{},"それでは、",[124,14222,14223],{},"Box","クラスを作成していきましょう！",[11,14226,14228],{"id":14227},"立方体boxクラスの作成","立方体(Box)クラスの作成",[15,14230,14231,14232,256,14235,260,14238,264,14240,268],{},"前回同様に、",[124,14233,14234],{},"extras",[124,14236,14237],{},"Box.ts",[124,14239,263],{},[124,14241,14223],{},[129,14243,14245],{"className":131,"code":14244,"filename":263,"language":134,"meta":135,"style":135},"// Extras\nexport { Box } from './extras/Box';\n",[124,14246,14247,14252],{"__ignoreMap":135},[65,14248,14249],{"class":140,"line":141},[65,14250,14251],{"class":278},"// Extras\n",[65,14253,14254,14256,14258,14260,14262,14264,14266,14269,14271],{"class":140,"line":158},[65,14255,284],{"class":154},[65,14257,287],{"class":154},[65,14259,3292],{"class":214},[65,14261,293],{"class":154},[65,14263,296],{"class":154},[65,14265,299],{"class":154},[65,14267,14268],{"class":302},"./extras/Box",[65,14270,306],{"class":154},[65,14272,155],{"class":154},[15,14274,14275,14276,14278,14279,14281],{},"この",[124,14277,14223],{},"クラスの使い方は次のようになります。",[5467,14280],{},"\n引数のPARAMSはコメント通りになります。",[129,14283,14285],{"className":131,"code":14284,"filename":3244,"language":134,"meta":135,"style":135},"import { Box } from '@/lib/webgl';\n\nconst PARAMS = {\n wireframe: false, // ワイヤーフレームモードで描画するかどうか\n width: 1, // 立方体の幅\n height: 1, // 立方体の高さ\n depth: 1, // 立方体の奥行き\n widthSegments: 1, // 幅の分割数\n heightSegments: 1, // 高さの分割数\n depthSegments: 1, // 奥行きの分割数\n};\n\nconst boxGeometry = new Box(gl, PARAMS);\n",[124,14286,14287,14307,14311,14322,14335,14348,14361,14375,14389,14403,14417,14421,14425],{"__ignoreMap":135},[65,14288,14289,14291,14293,14295,14297,14299,14301,14303,14305],{"class":140,"line":141},[65,14290,3251],{"class":154},[65,14292,287],{"class":154},[65,14294,3292],{"class":214},[65,14296,293],{"class":154},[65,14298,296],{"class":154},[65,14300,299],{"class":154},[65,14302,3339],{"class":302},[65,14304,306],{"class":154},[65,14306,155],{"class":154},[65,14308,14309],{"class":140,"line":158},[65,14310,162],{"emptyLinePlaceholder":161},[65,14312,14313,14315,14318,14320],{"class":140,"line":165},[65,14314,1769],{"class":168},[65,14316,14317],{"class":144}," PARAMS",[65,14319,218],{"class":168},[65,14321,418],{"class":154},[65,14323,14324,14326,14328,14330,14332],{"class":140,"line":180},[65,14325,8466],{"class":204},[65,14327,797],{"class":154},[65,14329,1039],{"class":793},[65,14331,230],{"class":154},[65,14333,14334],{"class":278}," // ワイヤーフレームモードで描画するかどうか\n",[65,14336,14337,14339,14341,14343,14345],{"class":140,"line":194},[65,14338,546],{"class":204},[65,14340,797],{"class":154},[65,14342,3137],{"class":793},[65,14344,230],{"class":154},[65,14346,14347],{"class":278}," // 立方体の幅\n",[65,14349,14350,14352,14354,14356,14358],{"class":140,"line":211},[65,14351,558],{"class":204},[65,14353,797],{"class":154},[65,14355,3137],{"class":793},[65,14357,230],{"class":154},[65,14359,14360],{"class":278}," // 立方体の高さ\n",[65,14362,14363,14366,14368,14370,14372],{"class":140,"line":240},[65,14364,14365],{"class":204}," depth",[65,14367,797],{"class":154},[65,14369,3137],{"class":793},[65,14371,230],{"class":154},[65,14373,14374],{"class":278}," // 立方体の奥行き\n",[65,14376,14377,14380,14382,14384,14386],{"class":140,"line":391},[65,14378,14379],{"class":204}," widthSegments",[65,14381,797],{"class":154},[65,14383,3137],{"class":793},[65,14385,230],{"class":154},[65,14387,14388],{"class":278}," // 幅の分割数\n",[65,14390,14391,14394,14396,14398,14400],{"class":140,"line":401},[65,14392,14393],{"class":204}," heightSegments",[65,14395,797],{"class":154},[65,14397,3137],{"class":793},[65,14399,230],{"class":154},[65,14401,14402],{"class":278}," // 高さの分割数\n",[65,14404,14405,14408,14410,14412,14414],{"class":140,"line":406},[65,14406,14407],{"class":204}," depthSegments",[65,14409,797],{"class":154},[65,14411,3137],{"class":793},[65,14413,230],{"class":154},[65,14415,14416],{"class":278}," // 奥行きの分割数\n",[65,14418,14419],{"class":140,"line":421},[65,14420,4731],{"class":154},[65,14422,14423],{"class":140,"line":435},[65,14424,162],{"emptyLinePlaceholder":161},[65,14426,14427,14429,14431,14433,14435,14437,14439,14441,14443,14445,14447],{"class":140,"line":447},[65,14428,1769],{"class":168},[65,14430,3984],{"class":144},[65,14432,218],{"class":168},[65,14434,1776],{"class":168},[65,14436,3292],{"class":200},[65,14438,224],{"class":204},[65,14440,794],{"class":144},[65,14442,230],{"class":154},[65,14444,14317],{"class":144},[65,14446,235],{"class":204},[65,14448,155],{"class":154},[15,14450,14451,14452,14224],{},"この前提を踏まえて、",[124,14453,14223],{},[129,14455,14457],{"className":131,"code":14456,"filename":14237,"language":134,"meta":135,"style":135},"interface BoxOptions {\n width: number;\n height: number;\n depth: number;\n widthSegments: number;\n heightSegments: number;\n depthSegments: number;\n wireframe: boolean;\n attributes: AttributeMap;\n}\n\nexport class Box extends Geometry {\n constructor(gl: WebGL2RenderingContext, options?: Partial\u003CBoxOptions>) {\n const {\n width = 1,\n height = 1,\n depth = 1,\n widthSegments = 1,\n heightSegments = 1,\n depthSegments = 1,\n wireframe = false,\n attributes = {},\n } = options ?? {};\n }\n}\n",[124,14458,14459,14469,14479,14489,14499,14509,14519,14529,14539,14551,14555,14559,14573,14602,14608,14619,14630,14641,14652,14663,14674,14684,14693,14705,14709],{"__ignoreMap":135},[65,14460,14461,14464,14467],{"class":140,"line":141},[65,14462,14463],{"class":168},"interface",[65,14465,14466],{"class":326}," BoxOptions",[65,14468,418],{"class":154},[65,14470,14471,14473,14475,14477],{"class":140,"line":158},[65,14472,546],{"class":144},[65,14474,797],{"class":168},[65,14476,430],{"class":340},[65,14478,155],{"class":154},[65,14480,14481,14483,14485,14487],{"class":140,"line":165},[65,14482,558],{"class":144},[65,14484,797],{"class":168},[65,14486,430],{"class":340},[65,14488,155],{"class":154},[65,14490,14491,14493,14495,14497],{"class":140,"line":180},[65,14492,14365],{"class":144},[65,14494,797],{"class":168},[65,14496,430],{"class":340},[65,14498,155],{"class":154},[65,14500,14501,14503,14505,14507],{"class":140,"line":194},[65,14502,14379],{"class":144},[65,14504,797],{"class":168},[65,14506,430],{"class":340},[65,14508,155],{"class":154},[65,14510,14511,14513,14515,14517],{"class":140,"line":211},[65,14512,14393],{"class":144},[65,14514,797],{"class":168},[65,14516,430],{"class":340},[65,14518,155],{"class":154},[65,14520,14521,14523,14525,14527],{"class":140,"line":240},[65,14522,14407],{"class":144},[65,14524,797],{"class":168},[65,14526,430],{"class":340},[65,14528,155],{"class":154},[65,14530,14531,14533,14535,14537],{"class":140,"line":391},[65,14532,8466],{"class":144},[65,14534,797],{"class":168},[65,14536,479],{"class":340},[65,14538,155],{"class":154},[65,14540,14541,14544,14546,14549],{"class":140,"line":401},[65,14542,14543],{"class":144}," attributes",[65,14545,797],{"class":168},[65,14547,14548],{"class":326}," AttributeMap",[65,14550,155],{"class":154},[65,14552,14553],{"class":140,"line":406},[65,14554,243],{"class":154},[65,14556,14557],{"class":140,"line":421},[65,14558,162],{"emptyLinePlaceholder":161},[65,14560,14561,14563,14565,14567,14569,14571],{"class":140,"line":435},[65,14562,284],{"class":154},[65,14564,774],{"class":168},[65,14566,3292],{"class":326},[65,14568,5810],{"class":168},[65,14570,5645],{"class":302},[65,14572,418],{"class":154},[65,14574,14575,14577,14579,14581,14583,14585,14587,14589,14591,14593,14595,14598,14600],{"class":140,"line":447},[65,14576,788],{"class":168},[65,14578,224],{"class":154},[65,14580,794],{"class":793},[65,14582,797],{"class":168},[65,14584,800],{"class":326},[65,14586,230],{"class":154},[65,14588,814],{"class":793},[65,14590,427],{"class":168},[65,14592,5835],{"class":326},[65,14594,1830],{"class":154},[65,14596,14597],{"class":326},"BoxOptions",[65,14599,5843],{"class":154},[65,14601,418],{"class":154},[65,14603,14604,14606],{"class":140,"line":459},[65,14605,848],{"class":168},[65,14607,418],{"class":154},[65,14609,14610,14613,14615,14617],{"class":140,"line":471},[65,14611,14612],{"class":214}," width",[65,14614,218],{"class":168},[65,14616,3137],{"class":793},[65,14618,3820],{"class":154},[65,14620,14621,14624,14626,14628],{"class":140,"line":63},[65,14622,14623],{"class":214}," height",[65,14625,218],{"class":168},[65,14627,3137],{"class":793},[65,14629,3820],{"class":154},[65,14631,14632,14635,14637,14639],{"class":140,"line":495},[65,14633,14634],{"class":214}," depth",[65,14636,218],{"class":168},[65,14638,3137],{"class":793},[65,14640,3820],{"class":154},[65,14642,14643,14646,14648,14650],{"class":140,"line":507},[65,14644,14645],{"class":214}," widthSegments",[65,14647,218],{"class":168},[65,14649,3137],{"class":793},[65,14651,3820],{"class":154},[65,14653,14654,14657,14659,14661],{"class":140,"line":519},[65,14655,14656],{"class":214}," heightSegments",[65,14658,218],{"class":168},[65,14660,3137],{"class":793},[65,14662,3820],{"class":154},[65,14664,14665,14668,14670,14672],{"class":140,"line":531},[65,14666,14667],{"class":214}," depthSegments",[65,14669,218],{"class":168},[65,14671,3137],{"class":793},[65,14673,3820],{"class":154},[65,14675,14676,14678,14680,14682],{"class":140,"line":543},[65,14677,6331],{"class":214},[65,14679,218],{"class":168},[65,14681,1039],{"class":793},[65,14683,3820],{"class":154},[65,14685,14686,14689,14691],{"class":140,"line":555},[65,14687,14688],{"class":214}," attributes",[65,14690,218],{"class":168},[65,14692,6336],{"class":154},[65,14694,14695,14697,14699,14701,14703],{"class":140,"line":567},[65,14696,6341],{"class":154},[65,14698,218],{"class":168},[65,14700,814],{"class":214},[65,14702,881],{"class":168},[65,14704,5905],{"class":154},[65,14706,14707],{"class":140,"line":3757},[65,14708,1171],{"class":154},[65,14710,14711],{"class":140,"line":3787},[65,14712,243],{"class":154},[15,14714,14715,14717,14718,14721,14722,14725],{},[124,14716,14223],{},"も",[124,14719,14720],{},"Plane","と同様に、引数は全てオプショナルになります。例えば、",[124,14723,14724],{},"new Box(gl)","のようにオプションの引数が空の場合はデフォルトの値が適用されるようになります。",[1177,14727,14728],{"id":14728},"立方体の頂点数の計算",[15,14730,14731],{},"立方体の頂点数は、幅、奥行き、高さの分割数に基づいて計算されます。",[129,14733,14736],{"className":131,"code":14734,"filename":14735,"language":134,"meta":135,"style":135},"const wSegs = widthSegments;\nconst hSegs = heightSegments;\nconst dSegs = depthSegments;\n\nconst num = \n (wSegs + 1) * (hSegs + 1) * 2 // front/back\n + (wSegs + 1) * (dSegs + 1) * 2 // top/bottom \n + (hSegs + 1) * (dSegs + 1) * 2; // left/right\n","頂点数の計算",[124,14737,14738,14752,14766,14780,14784,14795,14829,14864],{"__ignoreMap":135},[65,14739,14740,14742,14745,14747,14750],{"class":140,"line":141},[65,14741,1769],{"class":168},[65,14743,14744],{"class":144}," wSegs",[65,14746,218],{"class":168},[65,14748,14749],{"class":144}," widthSegments",[65,14751,155],{"class":154},[65,14753,14754,14756,14759,14761,14764],{"class":140,"line":158},[65,14755,1769],{"class":168},[65,14757,14758],{"class":144}," hSegs",[65,14760,218],{"class":168},[65,14762,14763],{"class":144}," heightSegments",[65,14765,155],{"class":154},[65,14767,14768,14770,14773,14775,14778],{"class":140,"line":165},[65,14769,1769],{"class":168},[65,14771,14772],{"class":144}," dSegs",[65,14774,218],{"class":168},[65,14776,14777],{"class":144}," depthSegments",[65,14779,155],{"class":154},[65,14781,14782],{"class":140,"line":180},[65,14783,162],{"emptyLinePlaceholder":161},[65,14785,14786,14788,14791,14793],{"class":140,"line":194},[65,14787,1769],{"class":168},[65,14789,14790],{"class":144}," num",[65,14792,218],{"class":168},[65,14794,332],{"class":204},[65,14796,14797,14800,14803,14805,14807,14809,14811,14813,14816,14818,14820,14822,14824,14826],{"class":140,"line":211},[65,14798,14799],{"class":204}," (",[65,14801,14802],{"class":144},"wSegs",[65,14804,2367],{"class":168},[65,14806,3137],{"class":793},[65,14808,1713],{"class":204},[65,14810,5928],{"class":168},[65,14812,1696],{"class":204},[65,14814,14815],{"class":144},"hSegs",[65,14817,2367],{"class":168},[65,14819,3137],{"class":793},[65,14821,1713],{"class":204},[65,14823,5928],{"class":168},[65,14825,3748],{"class":793},[65,14827,14828],{"class":278}," // front/back\n",[65,14830,14831,14834,14836,14838,14840,14842,14844,14846,14848,14851,14853,14855,14857,14859,14861],{"class":140,"line":240},[65,14832,14833],{"class":168}," +",[65,14835,1696],{"class":204},[65,14837,14802],{"class":144},[65,14839,2367],{"class":168},[65,14841,3137],{"class":793},[65,14843,1713],{"class":204},[65,14845,5928],{"class":168},[65,14847,1696],{"class":204},[65,14849,14850],{"class":144},"dSegs",[65,14852,2367],{"class":168},[65,14854,3137],{"class":793},[65,14856,1713],{"class":204},[65,14858,5928],{"class":168},[65,14860,3748],{"class":793},[65,14862,14863],{"class":278}," // top/bottom \n",[65,14865,14866,14868,14870,14872,14874,14876,14878,14880,14882,14884,14886,14888,14890,14892,14894,14896],{"class":140,"line":391},[65,14867,14833],{"class":168},[65,14869,1696],{"class":204},[65,14871,14815],{"class":144},[65,14873,2367],{"class":168},[65,14875,3137],{"class":793},[65,14877,1713],{"class":204},[65,14879,5928],{"class":168},[65,14881,1696],{"class":204},[65,14883,14850],{"class":144},[65,14885,2367],{"class":168},[65,14887,3137],{"class":793},[65,14889,1713],{"class":204},[65,14891,5928],{"class":168},[65,14893,3748],{"class":793},[65,14895,6005],{"class":154},[65,14897,14898],{"class":278}," // left/right\n",[15,14900,14901,14903],{},[124,14902,14223],{},"は6面あります。コメントに書いている通り、それぞれの面の頂点数を計算して合計しています。例えば、分割数が1の場合は、計算通りに24になります。分割数が増えると、頂点数も増えることになります。",[1177,14905,14906],{"id":14906},"立方体のインデックス数の計算",[15,14908,14909],{},"インデックス数も同様に、幅、奥行き、高さの分割数に基づいて計算されます。",[129,14911,14914],{"className":131,"code":14912,"filename":14913,"language":134,"meta":135,"style":135},"const numIndices = \n (wSegs * hSegs * 2\n + wSegs * dSegs * 2\n + hSegs * dSegs * 2) * 6;\n","インデックス数の計算",[124,14915,14916,14927,14942,14957],{"__ignoreMap":135},[65,14917,14918,14920,14923,14925],{"class":140,"line":141},[65,14919,1769],{"class":168},[65,14921,14922],{"class":144}," numIndices",[65,14924,218],{"class":168},[65,14926,332],{"class":204},[65,14928,14929,14931,14933,14935,14937,14939],{"class":140,"line":158},[65,14930,14799],{"class":204},[65,14932,14802],{"class":144},[65,14934,5933],{"class":168},[65,14936,14758],{"class":144},[65,14938,5933],{"class":168},[65,14940,14941],{"class":793}," 2\n",[65,14943,14944,14947,14949,14951,14953,14955],{"class":140,"line":165},[65,14945,14946],{"class":168}," +",[65,14948,14744],{"class":144},[65,14950,5933],{"class":168},[65,14952,14772],{"class":144},[65,14954,5933],{"class":168},[65,14956,14941],{"class":793},[65,14958,14959,14962,14964,14966,14968,14970,14972,14974,14976,14978],{"class":140,"line":180},[65,14960,14961],{"class":168}," +",[65,14963,14758],{"class":144},[65,14965,5933],{"class":168},[65,14967,14772],{"class":144},[65,14969,5933],{"class":168},[65,14971,3748],{"class":793},[65,14973,1713],{"class":204},[65,14975,5928],{"class":168},[65,14977,6168],{"class":793},[65,14979,155],{"class":154},[15,14981,14982],{},"分割数が1の場合は、計算通りに36になります。ここでも同様に、分割数が増えると、インデックス数も増えることになります。",[15,14984,14985,14986,14988],{},"Bufferの作成に関しては、",[124,14987,14720],{},"と同様になりますので省略します。",[1177,14990,14992],{"id":14991},"立方体の6面の頂点座標uvインデックスの計算","立方体の6面の頂点座標、uv、インデックスの計算",[15,14994,14995,14997,14998,15001,15002,3062,15004,15006],{},[124,14996,14720],{},"クラスで使用した、",[124,14999,15000],{},"buildPlane","メソッドを使用して立方体の6面の頂点座標、uv、インデックスの計算を次のように行います。",[124,15003,14720],{},[124,15005,15000],{},"メソッドの引数は次のようになっていました。",[129,15008,15011],{"className":131,"code":15009,"filename":15010,"language":134,"meta":135,"style":135},"static buildPlane(\n position: Float32Array,\n normal: Float32Array,\n uv: Float32Array,\n index: Uint32Array | Uint16Array,\n width: number,\n height: number,\n depth: number,\n wSegs: number,\n hSegs: number,\n u = 0,\n v = 1,\n w = 2,\n uDir = 1,\n vDir = -1,\n i = 0,\n ii = 0,\n)\n","Plane.buildPlane",[124,15012,15013,15024,15034,15044,15055,15070,15081,15091,15101,15112,15123,15134,15145,15156,15167,15180,15191,15202],{"__ignoreMap":135},[65,15014,15015,15018,15021],{"class":140,"line":141},[65,15016,15017],{"class":144},"static",[65,15019,15020],{"class":200}," buildPlane",[65,15022,15023],{"class":204},"(\n",[65,15025,15026,15028,15030,15032],{"class":140,"line":158},[65,15027,8393],{"class":144},[65,15029,1819],{"class":204},[65,15031,6613],{"class":144},[65,15033,3820],{"class":154},[65,15035,15036,15038,15040,15042],{"class":140,"line":165},[65,15037,10854],{"class":144},[65,15039,1819],{"class":204},[65,15041,6613],{"class":144},[65,15043,3820],{"class":154},[65,15045,15046,15049,15051,15053],{"class":140,"line":180},[65,15047,15048],{"class":144}," uv",[65,15050,1819],{"class":204},[65,15052,6613],{"class":144},[65,15054,3820],{"class":154},[65,15056,15057,15059,15061,15064,15066,15068],{"class":140,"line":194},[65,15058,6899],{"class":144},[65,15060,1819],{"class":204},[65,15062,15063],{"class":144},"Uint32Array",[65,15065,11880],{"class":168},[65,15067,6194],{"class":144},[65,15069,3820],{"class":154},[65,15071,15072,15074,15076,15079],{"class":140,"line":211},[65,15073,546],{"class":144},[65,15075,1819],{"class":204},[65,15077,15078],{"class":144},"number",[65,15080,3820],{"class":154},[65,15082,15083,15085,15087,15089],{"class":140,"line":240},[65,15084,558],{"class":144},[65,15086,1819],{"class":204},[65,15088,15078],{"class":144},[65,15090,3820],{"class":154},[65,15092,15093,15095,15097,15099],{"class":140,"line":391},[65,15094,14365],{"class":144},[65,15096,1819],{"class":204},[65,15098,15078],{"class":144},[65,15100,3820],{"class":154},[65,15102,15103,15106,15108,15110],{"class":140,"line":401},[65,15104,15105],{"class":144}," wSegs",[65,15107,1819],{"class":204},[65,15109,15078],{"class":144},[65,15111,3820],{"class":154},[65,15113,15114,15117,15119,15121],{"class":140,"line":406},[65,15115,15116],{"class":144}," hSegs",[65,15118,1819],{"class":204},[65,15120,15078],{"class":144},[65,15122,3820],{"class":154},[65,15124,15125,15128,15130,15132],{"class":140,"line":421},[65,15126,15127],{"class":144}," u",[65,15129,218],{"class":168},[65,15131,1142],{"class":793},[65,15133,3820],{"class":154},[65,15135,15136,15139,15141,15143],{"class":140,"line":435},[65,15137,15138],{"class":144}," v",[65,15140,218],{"class":168},[65,15142,3137],{"class":793},[65,15144,3820],{"class":154},[65,15146,15147,15150,15152,15154],{"class":140,"line":447},[65,15148,15149],{"class":144}," w",[65,15151,218],{"class":168},[65,15153,3748],{"class":793},[65,15155,3820],{"class":154},[65,15157,15158,15161,15163,15165],{"class":140,"line":459},[65,15159,15160],{"class":144}," uDir",[65,15162,218],{"class":168},[65,15164,3137],{"class":793},[65,15166,3820],{"class":154},[65,15168,15169,15172,15174,15176,15178],{"class":140,"line":471},[65,15170,15171],{"class":144}," vDir",[65,15173,218],{"class":168},[65,15175,4399],{"class":168},[65,15177,3620],{"class":793},[65,15179,3820],{"class":154},[65,15181,15182,15185,15187,15189],{"class":140,"line":63},[65,15183,15184],{"class":144}," i",[65,15186,218],{"class":168},[65,15188,1142],{"class":793},[65,15190,3820],{"class":154},[65,15192,15193,15196,15198,15200],{"class":140,"line":495},[65,15194,15195],{"class":144}," ii",[65,15197,218],{"class":168},[65,15199,1142],{"class":793},[65,15201,3820],{"class":154},[65,15203,15204],{"class":140,"line":507},[65,15205,12359],{"class":204},[15,15207,15208],{},"ここでは、立方体のleft、rightについて見てみます。全ての面はコードを参照してください。",[129,15210,15212],{"className":131,"code":15211,"filename":14992,"language":134,"meta":135,"style":135},"let i = 0;\nlet ii = 0;\n\n// left\nPlane.buildPlane(position, normal, uv, index, depth, height, width, dSegs, hSegs, 2, 1, 0, -1, -1, i, ii);\ni += (dSegs + 1) * (hSegs + 1);\nii += dSegs * hSegs;\n\n// right\nPlane.buildPlane(position, normal, uv, index, depth, height, -width, dSegs, hSegs, 2, 1, 0, 1, -1, i, ii);\n",[124,15213,15214,15226,15239,15243,15248,15329,15359,15374,15378,15383],{"__ignoreMap":135},[65,15215,15216,15218,15220,15222,15224],{"class":140,"line":141},[65,15217,5995],{"class":168},[65,15219,5998],{"class":144},[65,15221,218],{"class":168},[65,15223,1142],{"class":793},[65,15225,155],{"class":154},[65,15227,15228,15230,15233,15235,15237],{"class":140,"line":158},[65,15229,5995],{"class":168},[65,15231,15232],{"class":144}," ii",[65,15234,218],{"class":168},[65,15236,1142],{"class":793},[65,15238,155],{"class":154},[65,15240,15241],{"class":140,"line":165},[65,15242,162],{"emptyLinePlaceholder":161},[65,15244,15245],{"class":140,"line":180},[65,15246,15247],{"class":278},"// left\n",[65,15249,15250,15252,15254,15256,15258,15260,15262,15264,15266,15269,15271,15273,15275,15277,15279,15281,15283,15285,15287,15289,15291,15293,15295,15297,15299,15301,15303,15305,15307,15309,15311,15313,15315,15317,15319,15321,15323,15325,15327],{"class":140,"line":194},[65,15251,14720],{"class":144},[65,15253,834],{"class":154},[65,15255,15000],{"class":200},[65,15257,224],{"class":204},[65,15259,3610],{"class":144},[65,15261,230],{"class":154},[65,15263,10975],{"class":144},[65,15265,230],{"class":154},[65,15267,15268],{"class":144}," uv",[65,15270,230],{"class":154},[65,15272,6187],{"class":144},[65,15274,230],{"class":154},[65,15276,4018],{"class":144},[65,15278,230],{"class":154},[65,15280,2603],{"class":144},[65,15282,230],{"class":154},[65,15284,2598],{"class":144},[65,15286,230],{"class":154},[65,15288,14772],{"class":144},[65,15290,230],{"class":154},[65,15292,14758],{"class":144},[65,15294,230],{"class":154},[65,15296,3748],{"class":793},[65,15298,230],{"class":154},[65,15300,3137],{"class":793},[65,15302,230],{"class":154},[65,15304,1142],{"class":793},[65,15306,230],{"class":154},[65,15308,4399],{"class":168},[65,15310,3620],{"class":793},[65,15312,230],{"class":154},[65,15314,4399],{"class":168},[65,15316,3620],{"class":793},[65,15318,230],{"class":154},[65,15320,5998],{"class":144},[65,15322,230],{"class":154},[65,15324,15232],{"class":144},[65,15326,235],{"class":204},[65,15328,155],{"class":154},[65,15330,15331,15333,15335,15337,15339,15341,15343,15345,15347,15349,15351,15353,15355,15357],{"class":140,"line":211},[65,15332,6246],{"class":144},[65,15334,4462],{"class":168},[65,15336,1696],{"class":204},[65,15338,14850],{"class":144},[65,15340,2367],{"class":168},[65,15342,3137],{"class":793},[65,15344,1713],{"class":204},[65,15346,5928],{"class":168},[65,15348,1696],{"class":204},[65,15350,14815],{"class":144},[65,15352,2367],{"class":168},[65,15354,3137],{"class":793},[65,15356,235],{"class":204},[65,15358,155],{"class":154},[65,15360,15361,15364,15366,15368,15370,15372],{"class":140,"line":240},[65,15362,15363],{"class":144},"ii",[65,15365,4462],{"class":168},[65,15367,14772],{"class":144},[65,15369,5933],{"class":168},[65,15371,14758],{"class":144},[65,15373,155],{"class":154},[65,15375,15376],{"class":140,"line":391},[65,15377,162],{"emptyLinePlaceholder":161},[65,15379,15380],{"class":140,"line":401},[65,15381,15382],{"class":278},"// right\n",[65,15384,15385,15387,15389,15391,15393,15395,15397,15399,15401,15403,15405,15407,15409,15411,15413,15415,15417,15419,15421,15423,15425,15427,15429,15431,15433,15435,15437,15439,15441,15443,15445,15447,15449,15451,15453,15455,15457,15459,15461],{"class":140,"line":406},[65,15386,14720],{"class":144},[65,15388,834],{"class":154},[65,15390,15000],{"class":200},[65,15392,224],{"class":204},[65,15394,3610],{"class":144},[65,15396,230],{"class":154},[65,15398,10975],{"class":144},[65,15400,230],{"class":154},[65,15402,15268],{"class":144},[65,15404,230],{"class":154},[65,15406,6187],{"class":144},[65,15408,230],{"class":154},[65,15410,4018],{"class":144},[65,15412,230],{"class":154},[65,15414,2603],{"class":144},[65,15416,230],{"class":154},[65,15418,4399],{"class":168},[65,15420,735],{"class":144},[65,15422,230],{"class":154},[65,15424,14772],{"class":144},[65,15426,230],{"class":154},[65,15428,14758],{"class":144},[65,15430,230],{"class":154},[65,15432,3748],{"class":793},[65,15434,230],{"class":154},[65,15436,3137],{"class":793},[65,15438,230],{"class":154},[65,15440,1142],{"class":793},[65,15442,230],{"class":154},[65,15444,3137],{"class":793},[65,15446,230],{"class":154},[65,15448,4399],{"class":168},[65,15450,3620],{"class":793},[65,15452,230],{"class":154},[65,15454,5998],{"class":144},[65,15456,230],{"class":154},[65,15458,15232],{"class":144},[65,15460,235],{"class":204},[65,15462,155],{"class":154},[15,15464,15465],{},"leftは、YZ平面に配置されるので、横(width)をdepthにして、奥行き(depth)をwidthにしています。rightは、left面の反対側に配置されるので、横(width)を-depthにしています。",[15,15467,15468],{},"軸の指定は、leftとrightは、u=2、v=1、w=0となっていますが、これは以下を意味します。",[129,15470,15472],{"className":131,"code":15471,"language":134,"meta":135,"style":135},"u = z;\nv = y;\nw = x;\n",[124,15473,15474,15486,15498],{"__ignoreMap":135},[65,15475,15476,15479,15481,15484],{"class":140,"line":141},[65,15477,15478],{"class":144},"u",[65,15480,218],{"class":168},[65,15482,15483],{"class":144}," z",[65,15485,155],{"class":154},[65,15487,15488,15491,15493,15496],{"class":140,"line":158},[65,15489,15490],{"class":144},"v",[65,15492,218],{"class":168},[65,15494,15495],{"class":144}," y",[65,15497,155],{"class":154},[65,15499,15500,15503,15505,15508],{"class":140,"line":165},[65,15501,15502],{"class":144},"w",[65,15504,218],{"class":168},[65,15506,15507],{"class":144}," x",[65,15509,155],{"class":154},[15,15511,15512],{},"つまり、YZ平面に配置されることになります。",[2418,15514,15516],{"id":15515},"offset更新","Offset更新",[15,15518,15519,2765,15521,15523],{},[124,15520,6246],{},[124,15522,15363],{},"は次のPlaneを書き込む位置を指定するための変数になります。",[129,15525,15527],{"className":131,"code":15526,"language":134,"meta":135,"style":135},"i += (dSegs + 1) * (hSegs + 1);\nii += dSegs * hSegs;\n",[124,15528,15529,15559],{"__ignoreMap":135},[65,15530,15531,15533,15535,15537,15539,15541,15543,15545,15547,15549,15551,15553,15555,15557],{"class":140,"line":141},[65,15532,6246],{"class":144},[65,15534,4462],{"class":168},[65,15536,1696],{"class":204},[65,15538,14850],{"class":144},[65,15540,2367],{"class":168},[65,15542,3137],{"class":793},[65,15544,1713],{"class":204},[65,15546,5928],{"class":168},[65,15548,1696],{"class":204},[65,15550,14815],{"class":144},[65,15552,2367],{"class":168},[65,15554,3137],{"class":793},[65,15556,235],{"class":204},[65,15558,155],{"class":154},[65,15560,15561,15563,15565,15567,15569,15571],{"class":140,"line":158},[65,15562,15363],{"class":144},[65,15564,4462],{"class":168},[65,15566,14772],{"class":144},[65,15568,5933],{"class":168},[65,15570,14758],{"class":144},[65,15572,155],{"class":154},[15,15574,15575,15576,15579],{},"上記はright面に書き込むための更新になります。left面は、",[124,15577,15578],{},"(dSegs + 1) * (hSegs + 1)","個の頂点があるので、次の面はこの分だけ書き込む位置を更新する必要があります。インデックスも同様になります。",[11,15581,15583],{"id":15582},"wireframe","Wireframe",[15,15585,15586,15587,15590],{},"Wireframeモードで描画する場合は、Planeの",[124,15588,15589],{},"buildWireframeIndex","メソッドを使用して、別のインデックス値を計算します。",[129,15592,15594],{"className":131,"code":15593,"filename":14237,"language":134,"meta":135,"style":135},"if (wireframe) {\n index = Plane.buildWireframeIndex(index);\n}\n",[124,15595,15596,15608,15628],{"__ignoreMap":135},[65,15597,15598,15600,15602,15604,15606],{"class":140,"line":141},[65,15599,1693],{"class":154},[65,15601,1696],{"class":204},[65,15603,15582],{"class":144},[65,15605,1713],{"class":204},[65,15607,208],{"class":154},[65,15609,15610,15612,15614,15616,15618,15620,15622,15624,15626],{"class":140,"line":158},[65,15611,6899],{"class":214},[65,15613,218],{"class":168},[65,15615,3312],{"class":214},[65,15617,834],{"class":154},[65,15619,15589],{"class":200},[65,15621,224],{"class":204},[65,15623,11865],{"class":214},[65,15625,235],{"class":204},[65,15627,155],{"class":154},[65,15629,15630],{"class":140,"line":165},[65,15631,243],{"class":154},[15,15633,15634],{},"これで、Wireframeモードで描画するようになります。",[11,15636,15638],{"id":15637},"geometryへ渡す","Geometryへ渡す",[15,15640,15641],{},"最後に、計算した頂点座標、uv、インデックスをGeometryクラスのコンストラクタに渡して、Boxクラスを完成させましょう。",[129,15643,15645],{"className":131,"code":15644,"filename":14237,"language":134,"meta":135,"style":135},"export class Box extends Geometry {\n constructor(gl: WebGL2RenderingContext, options?: Partial\u003CBoxOptions>) {\n // ...\n\n Object.assign(attributes, {\n position: { size: 3, data: position },\n normal: { size: 3, data: normal },\n uv: { size: 2, data: uv },\n index: { data: index },\n wireframe,\n });\n\n super(gl, attributes);\n }\n}\n",[124,15646,15647,15661,15689,15693,15697,15715,15739,15763,15788,15804,15810,15818,15822,15839,15843],{"__ignoreMap":135},[65,15648,15649,15651,15653,15655,15657,15659],{"class":140,"line":141},[65,15650,284],{"class":154},[65,15652,774],{"class":168},[65,15654,3292],{"class":326},[65,15656,5810],{"class":168},[65,15658,5645],{"class":302},[65,15660,418],{"class":154},[65,15662,15663,15665,15667,15669,15671,15673,15675,15677,15679,15681,15683,15685,15687],{"class":140,"line":158},[65,15664,788],{"class":168},[65,15666,224],{"class":154},[65,15668,794],{"class":793},[65,15670,797],{"class":168},[65,15672,800],{"class":326},[65,15674,230],{"class":154},[65,15676,814],{"class":793},[65,15678,427],{"class":168},[65,15680,5835],{"class":326},[65,15682,1830],{"class":154},[65,15684,14597],{"class":326},[65,15686,5843],{"class":154},[65,15688,418],{"class":154},[65,15690,15691],{"class":140,"line":165},[65,15692,1572],{"class":278},[65,15694,15695],{"class":140,"line":180},[65,15696,162],{"emptyLinePlaceholder":161},[65,15698,15699,15702,15704,15707,15709,15711,15713],{"class":140,"line":194},[65,15700,15701],{"class":214}," Object",[65,15703,834],{"class":154},[65,15705,15706],{"class":200},"assign",[65,15708,224],{"class":204},[65,15710,9141],{"class":214},[65,15712,230],{"class":154},[65,15714,418],{"class":154},[65,15716,15717,15719,15721,15723,15725,15727,15729,15731,15733,15735,15737],{"class":140,"line":211},[65,15718,6289],{"class":204},[65,15720,797],{"class":154},[65,15722,287],{"class":154},[65,15724,5854],{"class":204},[65,15726,797],{"class":154},[65,15728,3739],{"class":793},[65,15730,230],{"class":154},[65,15732,6304],{"class":204},[65,15734,797],{"class":154},[65,15736,10964],{"class":214},[65,15738,3858],{"class":154},[65,15740,15741,15743,15745,15747,15749,15751,15753,15755,15757,15759,15761],{"class":140,"line":240},[65,15742,9768],{"class":204},[65,15744,797],{"class":154},[65,15746,287],{"class":154},[65,15748,5854],{"class":204},[65,15750,797],{"class":154},[65,15752,3739],{"class":793},[65,15754,230],{"class":154},[65,15756,6304],{"class":204},[65,15758,797],{"class":154},[65,15760,10975],{"class":214},[65,15762,3858],{"class":154},[65,15764,15765,15768,15770,15772,15774,15776,15778,15780,15782,15784,15786],{"class":140,"line":391},[65,15766,15767],{"class":204}," uv",[65,15769,797],{"class":154},[65,15771,287],{"class":154},[65,15773,5854],{"class":204},[65,15775,797],{"class":154},[65,15777,3748],{"class":793},[65,15779,230],{"class":154},[65,15781,6304],{"class":204},[65,15783,797],{"class":154},[65,15785,15268],{"class":214},[65,15787,3858],{"class":154},[65,15789,15790,15792,15794,15796,15798,15800,15802],{"class":140,"line":401},[65,15791,6240],{"class":204},[65,15793,797],{"class":154},[65,15795,287],{"class":154},[65,15797,6304],{"class":204},[65,15799,797],{"class":154},[65,15801,6187],{"class":214},[65,15803,3858],{"class":154},[65,15805,15806,15808],{"class":140,"line":406},[65,15807,6331],{"class":214},[65,15809,3820],{"class":154},[65,15811,15812,15814,15816],{"class":140,"line":421},[65,15813,6341],{"class":154},[65,15815,235],{"class":204},[65,15817,155],{"class":154},[65,15819,15820],{"class":140,"line":435},[65,15821,162],{"emptyLinePlaceholder":161},[65,15823,15824,15826,15828,15830,15832,15835,15837],{"class":140,"line":447},[65,15825,6510],{"class":830},[65,15827,224],{"class":204},[65,15829,794],{"class":214},[65,15831,230],{"class":154},[65,15833,15834],{"class":214}," attributes",[65,15836,235],{"class":204},[65,15838,155],{"class":154},[65,15840,15841],{"class":140,"line":459},[65,15842,1171],{"class":154},[65,15844,15845],{"class":140,"line":471},[65,15846,243],{"class":154},[15,15848,15849],{},"このBoxクラスを使用して、立方体を描画できるようになりました。",[129,15851,15853],{"className":131,"code":15852,"filename":3244,"language":134,"meta":135,"style":135},"const PARAMS = {\n wireframe: false,\n width: 1,\n height: 1,\n depth: 1,\n widthSegments: 1,\n heightSegments: 1,\n depthSegments: 1,\n};\n\nconst boxGeometry = new Box(gl, PARAMS);\n\nconst program = new Program(gl, {\n vertex,\n fragment,\n uniforms: {\n uTime: { value: 0 },\n },\n});\n\nconst box = new Mesh(gl, { geometry: boxGeometry, program });\nscene.add(box);\n",[124,15854,15855,15865,15875,15885,15895,15905,15915,15925,15935,15939,15943,15967,15971,15991,15997,16003,16011,16028,16032,16040,16044,16080],{"__ignoreMap":135},[65,15856,15857,15859,15861,15863],{"class":140,"line":141},[65,15858,1769],{"class":168},[65,15860,14317],{"class":144},[65,15862,218],{"class":168},[65,15864,418],{"class":154},[65,15866,15867,15869,15871,15873],{"class":140,"line":158},[65,15868,8466],{"class":204},[65,15870,797],{"class":154},[65,15872,1039],{"class":793},[65,15874,3820],{"class":154},[65,15876,15877,15879,15881,15883],{"class":140,"line":165},[65,15878,546],{"class":204},[65,15880,797],{"class":154},[65,15882,3137],{"class":793},[65,15884,3820],{"class":154},[65,15886,15887,15889,15891,15893],{"class":140,"line":180},[65,15888,558],{"class":204},[65,15890,797],{"class":154},[65,15892,3137],{"class":793},[65,15894,3820],{"class":154},[65,15896,15897,15899,15901,15903],{"class":140,"line":194},[65,15898,14365],{"class":204},[65,15900,797],{"class":154},[65,15902,3137],{"class":793},[65,15904,3820],{"class":154},[65,15906,15907,15909,15911,15913],{"class":140,"line":211},[65,15908,14379],{"class":204},[65,15910,797],{"class":154},[65,15912,3137],{"class":793},[65,15914,3820],{"class":154},[65,15916,15917,15919,15921,15923],{"class":140,"line":240},[65,15918,14393],{"class":204},[65,15920,797],{"class":154},[65,15922,3137],{"class":793},[65,15924,3820],{"class":154},[65,15926,15927,15929,15931,15933],{"class":140,"line":391},[65,15928,14407],{"class":204},[65,15930,797],{"class":154},[65,15932,3137],{"class":793},[65,15934,3820],{"class":154},[65,15936,15937],{"class":140,"line":401},[65,15938,4731],{"class":154},[65,15940,15941],{"class":140,"line":406},[65,15942,162],{"emptyLinePlaceholder":161},[65,15944,15945,15947,15949,15951,15953,15955,15957,15959,15961,15963,15965],{"class":140,"line":421},[65,15946,1769],{"class":168},[65,15948,3984],{"class":144},[65,15950,218],{"class":168},[65,15952,1776],{"class":168},[65,15954,3292],{"class":200},[65,15956,224],{"class":204},[65,15958,794],{"class":144},[65,15960,230],{"class":154},[65,15962,14317],{"class":144},[65,15964,235],{"class":204},[65,15966,155],{"class":154},[65,15968,15969],{"class":140,"line":435},[65,15970,162],{"emptyLinePlaceholder":161},[65,15972,15973,15975,15977,15979,15981,15983,15985,15987,15989],{"class":140,"line":447},[65,15974,1769],{"class":168},[65,15976,3797],{"class":144},[65,15978,218],{"class":168},[65,15980,1776],{"class":168},[65,15982,3081],{"class":200},[65,15984,224],{"class":204},[65,15986,794],{"class":144},[65,15988,230],{"class":154},[65,15990,418],{"class":154},[65,15992,15993,15995],{"class":140,"line":459},[65,15994,4839],{"class":144},[65,15996,3820],{"class":154},[65,15998,15999,16001],{"class":140,"line":471},[65,16000,4846],{"class":144},[65,16002,3820],{"class":154},[65,16004,16005,16007,16009],{"class":140,"line":63},[65,16006,4853],{"class":204},[65,16008,797],{"class":154},[65,16010,418],{"class":154},[65,16012,16013,16016,16018,16020,16022,16024,16026],{"class":140,"line":495},[65,16014,16015],{"class":204}," uTime",[65,16017,797],{"class":154},[65,16019,287],{"class":154},[65,16021,3851],{"class":204},[65,16023,797],{"class":154},[65,16025,1142],{"class":793},[65,16027,3858],{"class":154},[65,16029,16030],{"class":140,"line":507},[65,16031,4879],{"class":154},[65,16033,16034,16036,16038],{"class":140,"line":519},[65,16035,2899],{"class":154},[65,16037,235],{"class":204},[65,16039,155],{"class":154},[65,16041,16042],{"class":140,"line":531},[65,16043,162],{"emptyLinePlaceholder":161},[65,16045,16046,16048,16050,16052,16054,16056,16058,16060,16062,16064,16066,16068,16070,16072,16074,16076,16078],{"class":140,"line":543},[65,16047,1769],{"class":168},[65,16049,4285],{"class":144},[65,16051,218],{"class":168},[65,16053,1776],{"class":168},[65,16055,3302],{"class":200},[65,16057,224],{"class":204},[65,16059,794],{"class":144},[65,16061,230],{"class":154},[65,16063,287],{"class":154},[65,16065,3903],{"class":204},[65,16067,797],{"class":154},[65,16069,3984],{"class":144},[65,16071,230],{"class":154},[65,16073,3797],{"class":144},[65,16075,293],{"class":154},[65,16077,235],{"class":204},[65,16079,155],{"class":154},[65,16081,16082,16084,16086,16088,16090,16092,16094],{"class":140,"line":555},[65,16083,4932],{"class":144},[65,16085,834],{"class":154},[65,16087,3962],{"class":200},[65,16089,224],{"class":204},[65,16091,4419],{"class":144},[65,16093,235],{"class":204},[65,16095,155],{"class":154},[15,16097,16098],{},[57,16099],{"alt":16100,"src":16101,"title":16100},"Boxの描画","https://res.cloudinary.com/dy8ftemi0/image/upload/v1780213577/webgl-box-geometry-01_fvdq2a.jpg",[3226,16103],{"href":16104},"https://nono-k.github.io/webgl-study-note/webgl/box/",[11,16106,5299],{"id":5299},[15,16108,16109],{},"今回は、WebGLで立方体(Box)ジオメトリを描画する方法を解説しました。前回作成した平面(Plane)ジオメトリを組み合わせて、立方体を作成していることが分かったかと思います。",[15,16111,16112],{},"次回は、作成した立方体や平面の法線を可視化したり、座標を確認できるヘルパー関数を作成する方法を解説しようと思います。",[19,16114],{":items":21},[5313,16116,16117],{},"html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .s9qRY, html code.shiki .s9qRY{--shiki-default:#FF5370;--shiki-default-font-style:italic}",{"title":135,"searchDepth":165,"depth":165,"links":16119},[16120,16123,16130,16131,16132],{"id":13,"depth":158,"text":13,"children":16121},[16122],{"id":14213,"depth":165,"text":14214},{"id":14227,"depth":158,"text":14228,"children":16124},[16125,16126,16127],{"id":14728,"depth":165,"text":14728},{"id":14906,"depth":165,"text":14906},{"id":14991,"depth":165,"text":14992,"children":16128},[16129],{"id":15515,"depth":180,"text":15516},{"id":15582,"depth":158,"text":15583},{"id":15637,"depth":158,"text":15638},{"id":5299,"depth":158,"text":5299},"2026-06-01T00:00:00.000Z","今回は、Three.jsでいうBoxGeometry(立方体)の作成をWebGLで行っていきます。BoxGeometry同様にwidth、height、depthを設定できるのと、分割数も設定できるようにします。","/images/blog/webgl-box-geometry.jpg",{},"/blog/webgl-box-geometry",{"title":14168,"description":16134},"blog/webgl-box-geometry",[16141,16142],"WebGLで立方体(Box)ジオメトリを描画する方法","平面ジオメトリを組み合わせて立方体を作成する方法",[5350],"sRCsQQNHSuufjpCmJhu0h7WreAU-8RVugpdBgrhtbD0",{"id":16146,"title":16147,"body":16148,"date":20166,"description":20167,"draft":5339,"extension":5340,"image":20168,"meta":20169,"navigation":161,"path":20170,"seo":20171,"stem":20172,"summaryList":20173,"summaryText":5348,"tags":20175,"__hash__":20176},"blog/blog/webgl-plane-geometry.md","WebGLで平面(Plane)ジオメトリを作成する方法",{"type":8,"value":16149,"toc":20150},[16150,16152,16155,16158,16161,16163,16190,16199,16203,16206,16209,16297,16300,16401,16404,16462,16468,16472,16485,16515,16520,16655,16658,16855,16864,16866,16877,16942,16945,16948,16956,16981,16984,16988,16991,17113,17124,17130,17136,17189,17193,17199,18192,18195,18199,18202,18239,18242,18245,18248,18962,18965,18968,18971,19234,19237,19240,19280,19284,19529,19547,19696,19699,19701,19704,19901,19904,20129,20134,20137,20139,20142,20145,20147],[11,16151,13],{"id":13},[15,16153,16154],{},"前回は、MVP行列の紹介をしてCameraクラスを作成し、複数の三角形を描画する方法を解説しました。",[19,16156],{":items":16157},"[{\"title\":\"【WebGL】MVP行列の理解と複数の三角形を描画する\",\"link\":\"/blog/webgl-multiple-triangle/\",\"image\":\"/images/blog/webgl-multiple-triangle.jpg\",\"description\":\"今回は、WebGLやCGでの3次元描画をする上で必要な知識となるMVP行列を紹介します。そしてCameraクラスを作成し、一つの頂点バッファでサムネの画像にあるような複数の三角形を描画する方法まで解説します。\"}]",[15,16159,16160],{},"今回は、Three.jsでいうPlaneGeometry(平面)の作成をWebGLで行っていきます。Three.jsと同様にwidthとheightを設定できるのと、分割数も設定できるようにします。",[15,16162,27],{},[29,16164,34,16166,34,16184],{"className":16165,"href":33},[32],[36,16167,40,16169,40,16172,40,16175,34],{"className":16168},[39],[36,16170,45],{"className":16171},[44],[36,16173,50],{"className":16174},[49],[36,16176,55,16178,55,16181,40],{"className":16177},[54],[57,16179],{"className":16180,"src":61,"alt":62,"width":63,"height":63},[60],[65,16182,69],{"className":16183},[68],[36,16185,55,16187,40],{"className":16186},[73],[57,16188],{"className":16189,"src":78,"alt":45},[77],[15,16191,16192,16193,16198],{},"前回からの差分は",[29,16194,16197],{"href":16195,"rel":16196,"target":3049},"https://github.com/nono-k/webgl-study-note/commit/701f787c8a5a19410e88697d33b2d66871e36965",[3048],"こちら","になります。",[11,16200,16202],{"id":16201},"webglでの平面の作成の考え方","WebGLでの平面の作成の考え方",[15,16204,16205],{},"WebGLで平面を作成するには、2つの三角形で四角形を作成することになります。ここでは、分割数を1として考えてみます。",[15,16207,16208],{},"最初に頂点座標を考えてみましょう。次のような中央に平面を配置する場合を考えます。",[129,16210,16215],{"className":16211,"code":16212,"filename":16213,"language":16214,"meta":135,"style":135},"language-bash shiki shiki-themes aurora-x","(-1, 1) (1, 1)\n 0 ------ 1\n | / |\n | / |\n 2 ------ 3\n(-1,-1) (1,-1)\n","平面の頂点座標とインデックス","bash",[124,16216,16217,16238,16249,16260,16270,16280],{"__ignoreMap":135},[65,16218,16219,16221,16224,16226,16228,16231,16234,16236],{"class":140,"line":141},[65,16220,224],{"class":154},[65,16222,16223],{"class":326},"-1,",[65,16225,3137],{"class":793},[65,16227,235],{"class":154},[65,16229,16230],{"class":154}," (",[65,16232,16233],{"class":326},"1,",[65,16235,3137],{"class":793},[65,16237,12359],{"class":154},[65,16239,16240,16243,16246],{"class":140,"line":158},[65,16241,16242],{"class":326}," 0",[65,16244,16245],{"class":302}," ------",[65,16247,16248],{"class":793}," 1\n",[65,16250,16251,16254,16257],{"class":140,"line":165},[65,16252,16253],{"class":168}," |",[65,16255,16256],{"class":326}," /",[65,16258,16259],{"class":168}," |\n",[65,16261,16262,16264,16267],{"class":140,"line":180},[65,16263,16253],{"class":168},[65,16265,16266],{"class":326}," /",[65,16268,16269],{"class":168}," |\n",[65,16271,16272,16275,16277],{"class":140,"line":194},[65,16273,16274],{"class":326}," 2",[65,16276,16245],{"class":302},[65,16278,16279],{"class":793}," 3\n",[65,16281,16282,16284,16287,16289,16292,16295],{"class":140,"line":211},[65,16283,224],{"class":154},[65,16285,16286],{"class":326},"-1,-1",[65,16288,235],{"class":154},[65,16290,16291],{"class":154}," (",[65,16293,16294],{"class":326},"1,-1",[65,16296,12359],{"class":154},[15,16298,16299],{},"頂点は4つ必要になるので、次のようなx,y,zの頂点座標になります。",[129,16301,16304],{"className":131,"code":16302,"filename":16303,"language":134,"meta":135,"style":135},"const vertices = [\n -1, 1, 0, // 頂点0\n 1, 1, 0, // 頂点1\n -1, -1, 0, // 頂点2\n 1, -1, 0, // 頂点3\n];\n","頂点座標",[124,16305,16306,16317,16337,16355,16376,16395],{"__ignoreMap":135},[65,16307,16308,16310,16312,16314],{"class":140,"line":141},[65,16309,1769],{"class":168},[65,16311,5944],{"class":144},[65,16313,218],{"class":168},[65,16315,16316],{"class":204}," [\n",[65,16318,16319,16322,16324,16326,16328,16330,16332,16334],{"class":140,"line":158},[65,16320,16321],{"class":168}," -",[65,16323,3620],{"class":793},[65,16325,230],{"class":154},[65,16327,3137],{"class":793},[65,16329,230],{"class":154},[65,16331,1142],{"class":793},[65,16333,230],{"class":154},[65,16335,16336],{"class":278}," // 頂点0\n",[65,16338,16339,16342,16344,16346,16348,16350,16352],{"class":140,"line":165},[65,16340,16341],{"class":793}," 1",[65,16343,230],{"class":154},[65,16345,3137],{"class":793},[65,16347,230],{"class":154},[65,16349,1142],{"class":793},[65,16351,230],{"class":154},[65,16353,16354],{"class":278}," // 頂点1\n",[65,16356,16357,16359,16361,16363,16365,16367,16369,16371,16373],{"class":140,"line":180},[65,16358,16321],{"class":168},[65,16360,3620],{"class":793},[65,16362,230],{"class":154},[65,16364,4399],{"class":168},[65,16366,3620],{"class":793},[65,16368,230],{"class":154},[65,16370,1142],{"class":793},[65,16372,230],{"class":154},[65,16374,16375],{"class":278}," // 頂点2\n",[65,16377,16378,16380,16382,16384,16386,16388,16390,16392],{"class":140,"line":194},[65,16379,16341],{"class":793},[65,16381,230],{"class":154},[65,16383,4399],{"class":168},[65,16385,3620],{"class":793},[65,16387,230],{"class":154},[65,16389,1142],{"class":793},[65,16391,230],{"class":154},[65,16393,16394],{"class":278}," // 頂点3\n",[65,16396,16397,16399],{"class":140,"line":211},[65,16398,6106],{"class":204},[65,16400,155],{"class":154},[15,16402,16403],{},"次に、インデックスを考えてみましょう。三角形は2つ必要になるので、次のようなインデックスになります。",[129,16405,16408],{"className":131,"code":16406,"filename":16407,"language":134,"meta":135,"style":135},"const indices = [\n 0, 2, 1, // 三角形1\n 2, 3, 1, // 三角形2\n];\n","インデックス",[124,16409,16410,16421,16438,16456],{"__ignoreMap":135},[65,16411,16412,16414,16417,16419],{"class":140,"line":141},[65,16413,1769],{"class":168},[65,16415,16416],{"class":144}," indices",[65,16418,218],{"class":168},[65,16420,16316],{"class":204},[65,16422,16423,16425,16427,16429,16431,16433,16435],{"class":140,"line":158},[65,16424,8156],{"class":793},[65,16426,230],{"class":154},[65,16428,3748],{"class":793},[65,16430,230],{"class":154},[65,16432,3137],{"class":793},[65,16434,230],{"class":154},[65,16436,16437],{"class":278}," // 三角形1\n",[65,16439,16440,16443,16445,16447,16449,16451,16453],{"class":140,"line":165},[65,16441,16442],{"class":793}," 2",[65,16444,230],{"class":154},[65,16446,3739],{"class":793},[65,16448,230],{"class":154},[65,16450,3137],{"class":793},[65,16452,230],{"class":154},[65,16454,16455],{"class":278}," // 三角形2\n",[65,16457,16458,16460],{"class":140,"line":180},[65,16459,6106],{"class":204},[65,16461,155],{"class":154},[15,16463,16464,16465,16467],{},"このように2つの三角形を使用することで、平面を作成することができます。分割数を増やす場合は、頂点座標とインデックスの数が増えることになります。それでは、平面を作成する",[124,16466,14720],{},"クラスを実装していきましょう。",[11,16469,16471],{"id":16470},"平面planeジオメトリの作成","平面(Plane)ジオメトリの作成",[15,16473,16474,16475,16477,16478,16481,16482,16484],{},"OGLに倣って、今回の平面(Plane)ジオメトリは、ライブラリのコアではないので、新たに",[124,16476,14234],{},"ディレクトリを作成し、その中に",[124,16479,16480],{},"Plane.ts","というファイルを作成していきます。",[124,16483,263],{},"でエクスポートするのも忘れないようにしましょう。",[129,16486,16488],{"className":131,"code":16487,"filename":263,"language":134,"meta":135,"style":135},"// Extras\nexport { Plane } from './extras/Plane';\n",[124,16489,16490,16494],{"__ignoreMap":135},[65,16491,16492],{"class":140,"line":141},[65,16493,14251],{"class":278},[65,16495,16496,16498,16500,16502,16504,16506,16508,16511,16513],{"class":140,"line":158},[65,16497,284],{"class":154},[65,16499,287],{"class":154},[65,16501,3312],{"class":214},[65,16503,293],{"class":154},[65,16505,296],{"class":154},[65,16507,299],{"class":154},[65,16509,16510],{"class":302},"./extras/Plane",[65,16512,306],{"class":154},[65,16514,155],{"class":154},[15,16516,16517,16518,14281],{},"作成する前に、このPlaneクラスの使い方を見てみましょう。",[5467,16519],{},[129,16521,16523],{"className":131,"code":16522,"filename":3244,"language":134,"meta":135,"style":135},"import { Plane } from '@/lib/webgl';\n\nconst PARAMS = {\n wireframe: false, // ワイヤーフレームモードで描画するかどうか\n width: 1, // 平面の幅\n height: 1, // 平面の高さ\n widthSegments: 10, // 幅方向の分割数\n heightSegments: 10, // 高さ方向の分割数\n};\n\nconst planeGeometry = new Plane(gl, PARAMS);\n",[124,16524,16525,16545,16549,16559,16571,16584,16597,16610,16623,16627,16631],{"__ignoreMap":135},[65,16526,16527,16529,16531,16533,16535,16537,16539,16541,16543],{"class":140,"line":141},[65,16528,3251],{"class":154},[65,16530,287],{"class":154},[65,16532,3312],{"class":214},[65,16534,293],{"class":154},[65,16536,296],{"class":154},[65,16538,299],{"class":154},[65,16540,3339],{"class":302},[65,16542,306],{"class":154},[65,16544,155],{"class":154},[65,16546,16547],{"class":140,"line":158},[65,16548,162],{"emptyLinePlaceholder":161},[65,16550,16551,16553,16555,16557],{"class":140,"line":165},[65,16552,1769],{"class":168},[65,16554,14317],{"class":144},[65,16556,218],{"class":168},[65,16558,418],{"class":154},[65,16560,16561,16563,16565,16567,16569],{"class":140,"line":180},[65,16562,8466],{"class":204},[65,16564,797],{"class":154},[65,16566,1039],{"class":793},[65,16568,230],{"class":154},[65,16570,14334],{"class":278},[65,16572,16573,16575,16577,16579,16581],{"class":140,"line":194},[65,16574,546],{"class":204},[65,16576,797],{"class":154},[65,16578,3137],{"class":793},[65,16580,230],{"class":154},[65,16582,16583],{"class":278}," // 平面の幅\n",[65,16585,16586,16588,16590,16592,16594],{"class":140,"line":211},[65,16587,558],{"class":204},[65,16589,797],{"class":154},[65,16591,3137],{"class":793},[65,16593,230],{"class":154},[65,16595,16596],{"class":278}," // 平面の高さ\n",[65,16598,16599,16601,16603,16605,16607],{"class":140,"line":240},[65,16600,14379],{"class":204},[65,16602,797],{"class":154},[65,16604,5525],{"class":793},[65,16606,230],{"class":154},[65,16608,16609],{"class":278}," // 幅方向の分割数\n",[65,16611,16612,16614,16616,16618,16620],{"class":140,"line":391},[65,16613,14393],{"class":204},[65,16615,797],{"class":154},[65,16617,5525],{"class":793},[65,16619,230],{"class":154},[65,16621,16622],{"class":278}," // 高さ方向の分割数\n",[65,16624,16625],{"class":140,"line":401},[65,16626,4731],{"class":154},[65,16628,16629],{"class":140,"line":406},[65,16630,162],{"emptyLinePlaceholder":161},[65,16632,16633,16635,16637,16639,16641,16643,16645,16647,16649,16651,16653],{"class":140,"line":421},[65,16634,1769],{"class":168},[65,16636,3718],{"class":144},[65,16638,218],{"class":168},[65,16640,1776],{"class":168},[65,16642,3312],{"class":200},[65,16644,224],{"class":204},[65,16646,794],{"class":144},[65,16648,230],{"class":154},[65,16650,14317],{"class":144},[65,16652,235],{"class":204},[65,16654,155],{"class":154},[15,16656,16657],{},"この前提を踏まえて、Planeクラスを作成していきましょう。",[129,16659,16661],{"className":131,"code":16660,"filename":16480,"language":134,"meta":135,"style":135},"interface PlaneOptions {\n width: number;\n height: number;\n widthSegments: number;\n heightSegments: number;\n wireframe: boolean;\n attributes: AttributeMap;\n}\n\nexport class Plane extends Geometry {\n constructor(gl: WebGL2RenderingContext, options?: Partial\u003CPlaneOptions>) {\n const { width = 1, height = 1, widthSegments = 1, heightSegments = 1, wireframe = false, attributes = {} } = options ?? {};\n }\n}\n",[124,16662,16663,16672,16682,16692,16702,16712,16722,16732,16736,16740,16754,16783,16847,16851],{"__ignoreMap":135},[65,16664,16665,16667,16670],{"class":140,"line":141},[65,16666,14463],{"class":168},[65,16668,16669],{"class":326}," PlaneOptions",[65,16671,418],{"class":154},[65,16673,16674,16676,16678,16680],{"class":140,"line":158},[65,16675,546],{"class":144},[65,16677,797],{"class":168},[65,16679,430],{"class":340},[65,16681,155],{"class":154},[65,16683,16684,16686,16688,16690],{"class":140,"line":165},[65,16685,558],{"class":144},[65,16687,797],{"class":168},[65,16689,430],{"class":340},[65,16691,155],{"class":154},[65,16693,16694,16696,16698,16700],{"class":140,"line":180},[65,16695,14379],{"class":144},[65,16697,797],{"class":168},[65,16699,430],{"class":340},[65,16701,155],{"class":154},[65,16703,16704,16706,16708,16710],{"class":140,"line":194},[65,16705,14393],{"class":144},[65,16707,797],{"class":168},[65,16709,430],{"class":340},[65,16711,155],{"class":154},[65,16713,16714,16716,16718,16720],{"class":140,"line":211},[65,16715,8466],{"class":144},[65,16717,797],{"class":168},[65,16719,479],{"class":340},[65,16721,155],{"class":154},[65,16723,16724,16726,16728,16730],{"class":140,"line":240},[65,16725,14543],{"class":144},[65,16727,797],{"class":168},[65,16729,14548],{"class":326},[65,16731,155],{"class":154},[65,16733,16734],{"class":140,"line":391},[65,16735,243],{"class":154},[65,16737,16738],{"class":140,"line":401},[65,16739,162],{"emptyLinePlaceholder":161},[65,16741,16742,16744,16746,16748,16750,16752],{"class":140,"line":406},[65,16743,284],{"class":154},[65,16745,774],{"class":168},[65,16747,3312],{"class":326},[65,16749,5810],{"class":168},[65,16751,5645],{"class":302},[65,16753,418],{"class":154},[65,16755,16756,16758,16760,16762,16764,16766,16768,16770,16772,16774,16776,16779,16781],{"class":140,"line":421},[65,16757,788],{"class":168},[65,16759,224],{"class":154},[65,16761,794],{"class":793},[65,16763,797],{"class":168},[65,16765,800],{"class":326},[65,16767,230],{"class":154},[65,16769,814],{"class":793},[65,16771,427],{"class":168},[65,16773,5835],{"class":326},[65,16775,1830],{"class":154},[65,16777,16778],{"class":326},"PlaneOptions",[65,16780,5843],{"class":154},[65,16782,418],{"class":154},[65,16784,16785,16787,16789,16791,16793,16795,16797,16799,16801,16803,16805,16807,16809,16811,16813,16815,16817,16819,16821,16824,16826,16828,16830,16832,16834,16837,16839,16841,16843,16845],{"class":140,"line":435},[65,16786,848],{"class":168},[65,16788,287],{"class":154},[65,16790,2598],{"class":214},[65,16792,218],{"class":168},[65,16794,3137],{"class":793},[65,16796,230],{"class":154},[65,16798,2603],{"class":214},[65,16800,218],{"class":168},[65,16802,3137],{"class":793},[65,16804,230],{"class":154},[65,16806,14749],{"class":214},[65,16808,218],{"class":168},[65,16810,3137],{"class":793},[65,16812,230],{"class":154},[65,16814,14763],{"class":214},[65,16816,218],{"class":168},[65,16818,3137],{"class":793},[65,16820,230],{"class":154},[65,16822,16823],{"class":214}," wireframe",[65,16825,218],{"class":168},[65,16827,1039],{"class":793},[65,16829,230],{"class":154},[65,16831,15834],{"class":214},[65,16833,218],{"class":168},[65,16835,16836],{"class":154}," {}",[65,16838,293],{"class":154},[65,16840,218],{"class":168},[65,16842,814],{"class":214},[65,16844,881],{"class":168},[65,16846,5905],{"class":154},[65,16848,16849],{"class":140,"line":447},[65,16850,1171],{"class":154},[65,16852,16853],{"class":140,"line":459},[65,16854,243],{"class":154},[15,16856,16857,16860,16861,14725],{},[124,16858,16859],{},"Partial\u003CPlaneOptions>","となるので、引数は全てオプショナルになります。例えば、",[124,16862,16863],{},"new Plane(gl)",[1177,16865,14735],{"id":14735},[15,16867,16868,16869,16872,16873,16876],{},"頂点数は、幅方向の分割数と高さ方向の分割数に基づいて計算されます。例えば、幅方向に",[124,16870,16871],{},"widthSegments","、高さ方向に",[124,16874,16875],{},"heightSegments","の分割がある場合、頂点数は次のように計算されます。",[129,16878,16880],{"className":131,"code":16879,"filename":14735,"language":134,"meta":135,"style":135},"const wSegs = widthSegments;\nconst hSegs = heightSegments;\n\nconst num = (wSegs + 1) * (hSegs + 1);\n",[124,16881,16882,16894,16906,16910],{"__ignoreMap":135},[65,16883,16884,16886,16888,16890,16892],{"class":140,"line":141},[65,16885,1769],{"class":168},[65,16887,14744],{"class":144},[65,16889,218],{"class":168},[65,16891,14749],{"class":144},[65,16893,155],{"class":154},[65,16895,16896,16898,16900,16902,16904],{"class":140,"line":158},[65,16897,1769],{"class":168},[65,16899,14758],{"class":144},[65,16901,218],{"class":168},[65,16903,14763],{"class":144},[65,16905,155],{"class":154},[65,16907,16908],{"class":140,"line":165},[65,16909,162],{"emptyLinePlaceholder":161},[65,16911,16912,16914,16916,16918,16920,16922,16924,16926,16928,16930,16932,16934,16936,16938,16940],{"class":140,"line":180},[65,16913,1769],{"class":168},[65,16915,14790],{"class":144},[65,16917,218],{"class":168},[65,16919,1696],{"class":204},[65,16921,14802],{"class":144},[65,16923,2367],{"class":168},[65,16925,3137],{"class":793},[65,16927,1713],{"class":204},[65,16929,5928],{"class":168},[65,16931,1696],{"class":204},[65,16933,14815],{"class":144},[65,16935,2367],{"class":168},[65,16937,3137],{"class":793},[65,16939,235],{"class":204},[65,16941,155],{"class":154},[15,16943,16944],{},"ここで、分割数が1の場合は、計算通りに4になることが分かるでしょう。分割数が増えると、頂点数も増えることになります。",[1177,16946,16947],{"id":16947},"index数",[15,16949,16950,16951,16872,16953,16955],{},"インデックス数も同様に、幅方向の分割数と高さ方向の分割数に基づいて計算されます。例えば、幅方向に",[124,16952,16871],{},[124,16954,16875],{},"の分割がある場合、インデックス数は次のように計算されます。",[129,16957,16959],{"className":131,"code":16958,"filename":14913,"language":134,"meta":135,"style":135},"const num = wSegs * hSegs * 6;\n",[124,16960,16961],{"__ignoreMap":135},[65,16962,16963,16965,16967,16969,16971,16973,16975,16977,16979],{"class":140,"line":141},[65,16964,1769],{"class":168},[65,16966,14790],{"class":144},[65,16968,218],{"class":168},[65,16970,14744],{"class":144},[65,16972,5933],{"class":168},[65,16974,14758],{"class":144},[65,16976,5933],{"class":168},[65,16978,6168],{"class":793},[65,16980,155],{"class":154},[15,16982,16983],{},"分割数が1の場合は、計算通りに6になることが分かるでしょう。ここでも同様に、分割数が増えると、インデックス数も増えることになります。",[1177,16985,16987],{"id":16986},"bufferの作成","Bufferの作成",[15,16989,16990],{},"頂点座標とインデックスとuvのBufferを作成します。",[129,16992,16994],{"className":131,"code":16993,"filename":16987,"language":134,"meta":135,"style":135},"const position = new Float32Array(num * 3);\nconst normal = new Float32Array(num * 3);\nconst uv = new Float32Array(num * 2);\nlet index = numIndices > 65535 ? new Uint32Array(numIndices) : new Uint16Array(numIndices);\n",[124,16995,16996,17021,17045,17069],{"__ignoreMap":135},[65,16997,16998,17000,17002,17004,17006,17008,17010,17013,17015,17017,17019],{"class":140,"line":141},[65,16999,1769],{"class":168},[65,17001,10964],{"class":144},[65,17003,218],{"class":168},[65,17005,1776],{"class":168},[65,17007,5951],{"class":200},[65,17009,224],{"class":204},[65,17011,17012],{"class":144},"num",[65,17014,5933],{"class":168},[65,17016,3739],{"class":793},[65,17018,235],{"class":204},[65,17020,155],{"class":154},[65,17022,17023,17025,17027,17029,17031,17033,17035,17037,17039,17041,17043],{"class":140,"line":158},[65,17024,1769],{"class":168},[65,17026,10975],{"class":144},[65,17028,218],{"class":168},[65,17030,1776],{"class":168},[65,17032,5951],{"class":200},[65,17034,224],{"class":204},[65,17036,17012],{"class":144},[65,17038,5933],{"class":168},[65,17040,3739],{"class":793},[65,17042,235],{"class":204},[65,17044,155],{"class":154},[65,17046,17047,17049,17051,17053,17055,17057,17059,17061,17063,17065,17067],{"class":140,"line":165},[65,17048,1769],{"class":168},[65,17050,15268],{"class":144},[65,17052,218],{"class":168},[65,17054,1776],{"class":168},[65,17056,5951],{"class":200},[65,17058,224],{"class":204},[65,17060,17012],{"class":144},[65,17062,5933],{"class":168},[65,17064,3748],{"class":793},[65,17066,235],{"class":204},[65,17068,155],{"class":154},[65,17070,17071,17073,17075,17077,17079,17082,17085,17087,17089,17092,17094,17097,17099,17101,17103,17105,17107,17109,17111],{"class":140,"line":180},[65,17072,5995],{"class":168},[65,17074,6187],{"class":144},[65,17076,218],{"class":168},[65,17078,14922],{"class":144},[65,17080,17081],{"class":168}," >",[65,17083,17084],{"class":793}," 65535",[65,17086,7521],{"class":168},[65,17088,1776],{"class":168},[65,17090,17091],{"class":200}," Uint32Array",[65,17093,224],{"class":204},[65,17095,17096],{"class":144},"numIndices",[65,17098,1713],{"class":204},[65,17100,797],{"class":168},[65,17102,1776],{"class":168},[65,17104,6194],{"class":200},[65,17106,224],{"class":204},[65,17108,17096],{"class":144},[65,17110,235],{"class":204},[65,17112,155],{"class":154},[15,17114,17115,17116,17119,17120,17123],{},"ここで、頂点座標は3つの値(x,y,z)が必要になるので、",[124,17117,17118],{},"num * 3","になります。uvは2つの値(u,v)が必要になるので、",[124,17121,17122],{},"num * 2","になります。インデックスは、65535を超える場合はUint32Arrayを使用し、それ以外の場合はUint16Arrayを使用します。",[15,17125,17126,17127,17129],{},"また、インデックスはwireframeモードで描画する場合は、変える必要があるので、",[124,17128,5995],{},"で宣言しています。",[15,17131,17132,17133,17135],{},"これらのBufferを使用して、頂点座標、法線、uv、インデックスを計算する",[124,17134,15000],{},"関数を作成していきましょう。",[129,17137,17139],{"className":131,"code":17138,"filename":15000,"language":134,"meta":135,"style":135},"Plane.buildPlane(position, normal, uv, index, width, height, 0, wSegs, hSegs);\n",[124,17140,17141],{"__ignoreMap":135},[65,17142,17143,17145,17147,17149,17151,17153,17155,17157,17159,17161,17163,17165,17167,17169,17171,17173,17175,17177,17179,17181,17183,17185,17187],{"class":140,"line":141},[65,17144,14720],{"class":144},[65,17146,834],{"class":154},[65,17148,15000],{"class":200},[65,17150,224],{"class":204},[65,17152,3610],{"class":144},[65,17154,230],{"class":154},[65,17156,10975],{"class":144},[65,17158,230],{"class":154},[65,17160,15268],{"class":144},[65,17162,230],{"class":154},[65,17164,6187],{"class":144},[65,17166,230],{"class":154},[65,17168,2598],{"class":144},[65,17170,230],{"class":154},[65,17172,2603],{"class":144},[65,17174,230],{"class":154},[65,17176,1142],{"class":793},[65,17178,230],{"class":154},[65,17180,14744],{"class":144},[65,17182,230],{"class":154},[65,17184,14758],{"class":144},[65,17186,235],{"class":204},[65,17188,155],{"class":154},[1177,17190,17192],{"id":17191},"頂点座標法線uvインデックスの計算","頂点座標、法線、uv、インデックスの計算",[15,17194,17195,17196,17198],{},"分割数も考慮するので、頂点座標、法線、uv、インデックスの計算は少し複雑になります。",[124,17197,15000],{},"関数の全コードは次のようになります。",[129,17200,17202],{"className":131,"code":17201,"filename":15000,"language":134,"meta":135,"style":135},"static buildPlane(\n position: Float32Array,\n normal: Float32Array,\n uv: Float32Array,\n index: Uint32Array | Uint16Array,\n width: number,\n height: number,\n depth: number,\n wSegs: number,\n hSegs: number,\n u = 0,\n v = 1,\n w = 2,\n uDir = 1,\n vDir = -1,\n i = 0,\n ii = 0,\n) {\n const io = i;\n let idx = i;\n let idx2 = ii;\n\n const segW = width / wSegs;\n const segH = height / hSegs;\n\n for (let iy = 0; iy \u003C= hSegs; iy++) {\n const y = iy * segH - height / 2;\n for (let ix = 0; ix \u003C= wSegs; ix++, idx++) {\n const x = ix * segW - width / 2;\n\n position[idx * 3 + u] = x * uDir;\n position[idx * 3 + v] = y * vDir;\n position[idx * 3 + w] = depth / 2;\n\n normal[idx * 3 + u] = 0;\n normal[idx * 3 + v] = 0;\n normal[idx * 3 + w] = depth >= 0 ? 1 : -1;\n\n uv[idx * 2] = ix / wSegs;\n uv[idx * 2 + 1] = 1 - iy / hSegs;\n\n if (iy === hSegs || ix === wSegs) continue;\n\n const a = io + ix + iy * (wSegs + 1);\n const b = io + ix + (iy + 1) * (wSegs + 1);\n const c = io + ix + (iy + 1) * (wSegs + 1) + 1;\n const d = io + ix + iy * (wSegs + 1) + 1;\n\n index[idx2 * 6] = a;\n index[idx2 * 6 + 1] = b;\n index[idx2 * 6 + 2] = d;\n index[idx2 * 6 + 3] = b;\n index[idx2 * 6 + 4] = c;\n index[idx2 * 6 + 5] = d;\n\n idx2++;\n }\n }\n}\n",[124,17203,17204,17212,17222,17232,17242,17256,17266,17276,17286,17296,17306,17316,17326,17336,17346,17358,17368,17378,17384,17397,17411,17424,17428,17445,17462,17466,17500,17524,17563,17587,17591,17622,17652,17681,17685,17709,17733,17772,17776,17800,17832,17836,17863,17867,17899,17939,17985,18022,18026,18047,18071,18095,18119,18143,18167,18171,18180,18184,18188],{"__ignoreMap":135},[65,17205,17206,17208,17210],{"class":140,"line":141},[65,17207,15017],{"class":144},[65,17209,15020],{"class":200},[65,17211,15023],{"class":204},[65,17213,17214,17216,17218,17220],{"class":140,"line":158},[65,17215,8393],{"class":144},[65,17217,1819],{"class":204},[65,17219,6613],{"class":144},[65,17221,3820],{"class":154},[65,17223,17224,17226,17228,17230],{"class":140,"line":165},[65,17225,10854],{"class":144},[65,17227,1819],{"class":204},[65,17229,6613],{"class":144},[65,17231,3820],{"class":154},[65,17233,17234,17236,17238,17240],{"class":140,"line":180},[65,17235,15048],{"class":144},[65,17237,1819],{"class":204},[65,17239,6613],{"class":144},[65,17241,3820],{"class":154},[65,17243,17244,17246,17248,17250,17252,17254],{"class":140,"line":194},[65,17245,6899],{"class":144},[65,17247,1819],{"class":204},[65,17249,15063],{"class":144},[65,17251,11880],{"class":168},[65,17253,6194],{"class":144},[65,17255,3820],{"class":154},[65,17257,17258,17260,17262,17264],{"class":140,"line":211},[65,17259,546],{"class":144},[65,17261,1819],{"class":204},[65,17263,15078],{"class":144},[65,17265,3820],{"class":154},[65,17267,17268,17270,17272,17274],{"class":140,"line":240},[65,17269,558],{"class":144},[65,17271,1819],{"class":204},[65,17273,15078],{"class":144},[65,17275,3820],{"class":154},[65,17277,17278,17280,17282,17284],{"class":140,"line":391},[65,17279,14365],{"class":144},[65,17281,1819],{"class":204},[65,17283,15078],{"class":144},[65,17285,3820],{"class":154},[65,17287,17288,17290,17292,17294],{"class":140,"line":401},[65,17289,15105],{"class":144},[65,17291,1819],{"class":204},[65,17293,15078],{"class":144},[65,17295,3820],{"class":154},[65,17297,17298,17300,17302,17304],{"class":140,"line":406},[65,17299,15116],{"class":144},[65,17301,1819],{"class":204},[65,17303,15078],{"class":144},[65,17305,3820],{"class":154},[65,17307,17308,17310,17312,17314],{"class":140,"line":421},[65,17309,15127],{"class":144},[65,17311,218],{"class":168},[65,17313,1142],{"class":793},[65,17315,3820],{"class":154},[65,17317,17318,17320,17322,17324],{"class":140,"line":435},[65,17319,15138],{"class":144},[65,17321,218],{"class":168},[65,17323,3137],{"class":793},[65,17325,3820],{"class":154},[65,17327,17328,17330,17332,17334],{"class":140,"line":447},[65,17329,15149],{"class":144},[65,17331,218],{"class":168},[65,17333,3748],{"class":793},[65,17335,3820],{"class":154},[65,17337,17338,17340,17342,17344],{"class":140,"line":459},[65,17339,15160],{"class":144},[65,17341,218],{"class":168},[65,17343,3137],{"class":793},[65,17345,3820],{"class":154},[65,17347,17348,17350,17352,17354,17356],{"class":140,"line":471},[65,17349,15171],{"class":144},[65,17351,218],{"class":168},[65,17353,4399],{"class":168},[65,17355,3620],{"class":793},[65,17357,3820],{"class":154},[65,17359,17360,17362,17364,17366],{"class":140,"line":63},[65,17361,15184],{"class":144},[65,17363,218],{"class":168},[65,17365,1142],{"class":793},[65,17367,3820],{"class":154},[65,17369,17370,17372,17374,17376],{"class":140,"line":495},[65,17371,15195],{"class":144},[65,17373,218],{"class":168},[65,17375,1142],{"class":793},[65,17377,3820],{"class":154},[65,17379,17380,17382],{"class":140,"line":507},[65,17381,1713],{"class":204},[65,17383,208],{"class":154},[65,17385,17386,17388,17391,17393,17395],{"class":140,"line":519},[65,17387,2243],{"class":168},[65,17389,17390],{"class":214}," io",[65,17392,218],{"class":168},[65,17394,5998],{"class":214},[65,17396,155],{"class":154},[65,17398,17399,17402,17405,17407,17409],{"class":140,"line":531},[65,17400,17401],{"class":168}," let",[65,17403,17404],{"class":214}," idx",[65,17406,218],{"class":168},[65,17408,5998],{"class":214},[65,17410,155],{"class":154},[65,17412,17413,17415,17418,17420,17422],{"class":140,"line":543},[65,17414,17401],{"class":168},[65,17416,17417],{"class":214}," idx2",[65,17419,218],{"class":168},[65,17421,15232],{"class":214},[65,17423,155],{"class":154},[65,17425,17426],{"class":140,"line":555},[65,17427,162],{"emptyLinePlaceholder":161},[65,17429,17430,17432,17435,17437,17439,17441,17443],{"class":140,"line":567},[65,17431,2243],{"class":168},[65,17433,17434],{"class":214}," segW",[65,17436,218],{"class":168},[65,17438,2598],{"class":214},[65,17440,4349],{"class":168},[65,17442,14744],{"class":214},[65,17444,155],{"class":154},[65,17446,17447,17449,17452,17454,17456,17458,17460],{"class":140,"line":3757},[65,17448,2243],{"class":168},[65,17450,17451],{"class":214}," segH",[65,17453,218],{"class":168},[65,17455,2603],{"class":214},[65,17457,4349],{"class":168},[65,17459,14758],{"class":214},[65,17461,155],{"class":154},[65,17463,17464],{"class":140,"line":3787},[65,17465,162],{"emptyLinePlaceholder":161},[65,17467,17468,17471,17473,17475,17478,17480,17482,17484,17486,17488,17490,17492,17494,17496,17498],{"class":140,"line":3792},[65,17469,17470],{"class":154}," for",[65,17472,1696],{"class":204},[65,17474,5995],{"class":168},[65,17476,17477],{"class":214}," iy",[65,17479,218],{"class":168},[65,17481,1142],{"class":793},[65,17483,6005],{"class":154},[65,17485,17477],{"class":214},[65,17487,6010],{"class":168},[65,17489,14758],{"class":214},[65,17491,6005],{"class":154},[65,17493,17477],{"class":214},[65,17495,6019],{"class":168},[65,17497,1713],{"class":204},[65,17499,208],{"class":154},[65,17501,17502,17504,17506,17508,17510,17512,17514,17516,17518,17520,17522],{"class":140,"line":3814},[65,17503,848],{"class":168},[65,17505,15495],{"class":214},[65,17507,218],{"class":168},[65,17509,17477],{"class":214},[65,17511,5933],{"class":168},[65,17513,17451],{"class":214},[65,17515,4399],{"class":168},[65,17517,2603],{"class":214},[65,17519,4349],{"class":168},[65,17521,3748],{"class":793},[65,17523,155],{"class":154},[65,17525,17526,17528,17530,17532,17535,17537,17539,17541,17543,17545,17547,17549,17551,17553,17555,17557,17559,17561],{"class":140,"line":3823},[65,17527,5990],{"class":154},[65,17529,1696],{"class":204},[65,17531,5995],{"class":168},[65,17533,17534],{"class":214}," ix",[65,17536,218],{"class":168},[65,17538,1142],{"class":793},[65,17540,6005],{"class":154},[65,17542,17534],{"class":214},[65,17544,6010],{"class":168},[65,17546,14744],{"class":214},[65,17548,6005],{"class":154},[65,17550,17534],{"class":214},[65,17552,6019],{"class":168},[65,17554,230],{"class":154},[65,17556,17404],{"class":214},[65,17558,6019],{"class":168},[65,17560,1713],{"class":204},[65,17562,208],{"class":154},[65,17564,17565,17567,17569,17571,17573,17575,17577,17579,17581,17583,17585],{"class":140,"line":3831},[65,17566,6028],{"class":168},[65,17568,15507],{"class":214},[65,17570,218],{"class":168},[65,17572,17534],{"class":214},[65,17574,5933],{"class":168},[65,17576,17434],{"class":214},[65,17578,4399],{"class":168},[65,17580,2598],{"class":214},[65,17582,4349],{"class":168},[65,17584,3748],{"class":793},[65,17586,155],{"class":154},[65,17588,17589],{"class":140,"line":3841},[65,17590,162],{"emptyLinePlaceholder":161},[65,17592,17593,17595,17597,17600,17602,17604,17606,17609,17611,17613,17615,17617,17620],{"class":140,"line":3861},[65,17594,6289],{"class":214},[65,17596,6243],{"class":204},[65,17598,17599],{"class":214},"idx",[65,17601,5933],{"class":168},[65,17603,3739],{"class":793},[65,17605,2367],{"class":168},[65,17607,17608],{"class":214}," u",[65,17610,6249],{"class":204},[65,17612,6252],{"class":168},[65,17614,15507],{"class":214},[65,17616,5933],{"class":168},[65,17618,17619],{"class":214}," uDir",[65,17621,155],{"class":154},[65,17623,17624,17626,17628,17630,17632,17634,17636,17639,17641,17643,17645,17647,17650],{"class":140,"line":3867},[65,17625,6289],{"class":214},[65,17627,6243],{"class":204},[65,17629,17599],{"class":214},[65,17631,5933],{"class":168},[65,17633,3739],{"class":793},[65,17635,2367],{"class":168},[65,17637,17638],{"class":214}," v",[65,17640,6249],{"class":204},[65,17642,6252],{"class":168},[65,17644,15495],{"class":214},[65,17646,5933],{"class":168},[65,17648,17649],{"class":214}," vDir",[65,17651,155],{"class":154},[65,17653,17654,17656,17658,17660,17662,17664,17666,17669,17671,17673,17675,17677,17679],{"class":140,"line":3876},[65,17655,6289],{"class":214},[65,17657,6243],{"class":204},[65,17659,17599],{"class":214},[65,17661,5933],{"class":168},[65,17663,3739],{"class":793},[65,17665,2367],{"class":168},[65,17667,17668],{"class":214}," w",[65,17670,6249],{"class":204},[65,17672,6252],{"class":168},[65,17674,4018],{"class":214},[65,17676,4349],{"class":168},[65,17678,3748],{"class":793},[65,17680,155],{"class":154},[65,17682,17683],{"class":140,"line":3881},[65,17684,162],{"emptyLinePlaceholder":161},[65,17686,17687,17689,17691,17693,17695,17697,17699,17701,17703,17705,17707],{"class":140,"line":3920},[65,17688,9768],{"class":214},[65,17690,6243],{"class":204},[65,17692,17599],{"class":214},[65,17694,5933],{"class":168},[65,17696,3739],{"class":793},[65,17698,2367],{"class":168},[65,17700,17608],{"class":214},[65,17702,6249],{"class":204},[65,17704,6252],{"class":168},[65,17706,1142],{"class":793},[65,17708,155],{"class":154},[65,17710,17711,17713,17715,17717,17719,17721,17723,17725,17727,17729,17731],{"class":140,"line":3954},[65,17712,9768],{"class":214},[65,17714,6243],{"class":204},[65,17716,17599],{"class":214},[65,17718,5933],{"class":168},[65,17720,3739],{"class":793},[65,17722,2367],{"class":168},[65,17724,17638],{"class":214},[65,17726,6249],{"class":204},[65,17728,6252],{"class":168},[65,17730,1142],{"class":793},[65,17732,155],{"class":154},[65,17734,17735,17737,17739,17741,17743,17745,17747,17749,17751,17753,17755,17758,17760,17762,17764,17766,17768,17770],{"class":140,"line":3974},[65,17736,9768],{"class":214},[65,17738,6243],{"class":204},[65,17740,17599],{"class":214},[65,17742,5933],{"class":168},[65,17744,3739],{"class":793},[65,17746,2367],{"class":168},[65,17748,17668],{"class":214},[65,17750,6249],{"class":204},[65,17752,6252],{"class":168},[65,17754,4018],{"class":214},[65,17756,17757],{"class":168}," >=",[65,17759,1142],{"class":793},[65,17761,7521],{"class":168},[65,17763,3137],{"class":793},[65,17765,7529],{"class":168},[65,17767,4399],{"class":168},[65,17769,3620],{"class":793},[65,17771,155],{"class":154},[65,17773,17774],{"class":140,"line":3979},[65,17775,162],{"emptyLinePlaceholder":161},[65,17777,17778,17780,17782,17784,17786,17788,17790,17792,17794,17796,17798],{"class":140,"line":4031},[65,17779,15767],{"class":214},[65,17781,6243],{"class":204},[65,17783,17599],{"class":214},[65,17785,5933],{"class":168},[65,17787,3748],{"class":793},[65,17789,6249],{"class":204},[65,17791,6252],{"class":168},[65,17793,17534],{"class":214},[65,17795,4349],{"class":168},[65,17797,14744],{"class":214},[65,17799,155],{"class":154},[65,17801,17802,17804,17806,17808,17810,17812,17814,17816,17818,17820,17822,17824,17826,17828,17830],{"class":140,"line":4036},[65,17803,15767],{"class":214},[65,17805,6243],{"class":204},[65,17807,17599],{"class":214},[65,17809,5933],{"class":168},[65,17811,3748],{"class":793},[65,17813,2367],{"class":168},[65,17815,3137],{"class":793},[65,17817,6249],{"class":204},[65,17819,6252],{"class":168},[65,17821,3137],{"class":793},[65,17823,4399],{"class":168},[65,17825,17477],{"class":214},[65,17827,4349],{"class":168},[65,17829,14758],{"class":214},[65,17831,155],{"class":154},[65,17833,17834],{"class":140,"line":4070},[65,17835,162],{"emptyLinePlaceholder":161},[65,17837,17838,17841,17843,17846,17848,17850,17852,17854,17856,17858,17860],{"class":140,"line":4086},[65,17839,17840],{"class":154}," if",[65,17842,1696],{"class":204},[65,17844,17845],{"class":214},"iy",[65,17847,1704],{"class":168},[65,17849,14758],{"class":214},[65,17851,2269],{"class":168},[65,17853,17534],{"class":214},[65,17855,1704],{"class":168},[65,17857,14744],{"class":214},[65,17859,1713],{"class":204},[65,17861,17862],{"class":154},"continue;\n",[65,17864,17865],{"class":140,"line":4102},[65,17866,162],{"emptyLinePlaceholder":161},[65,17868,17869,17871,17873,17875,17877,17879,17881,17883,17885,17887,17889,17891,17893,17895,17897],{"class":140,"line":4118},[65,17870,6028],{"class":168},[65,17872,7513],{"class":214},[65,17874,218],{"class":168},[65,17876,17390],{"class":214},[65,17878,2367],{"class":168},[65,17880,17534],{"class":214},[65,17882,2367],{"class":168},[65,17884,17477],{"class":214},[65,17886,5933],{"class":168},[65,17888,1696],{"class":204},[65,17890,14802],{"class":214},[65,17892,2367],{"class":168},[65,17894,3137],{"class":793},[65,17896,235],{"class":204},[65,17898,155],{"class":154},[65,17900,17901,17903,17905,17907,17909,17911,17913,17915,17917,17919,17921,17923,17925,17927,17929,17931,17933,17935,17937],{"class":140,"line":4149},[65,17902,6028],{"class":168},[65,17904,7540],{"class":214},[65,17906,218],{"class":168},[65,17908,17390],{"class":214},[65,17910,2367],{"class":168},[65,17912,17534],{"class":214},[65,17914,2367],{"class":168},[65,17916,1696],{"class":204},[65,17918,17845],{"class":214},[65,17920,2367],{"class":168},[65,17922,3137],{"class":793},[65,17924,1713],{"class":204},[65,17926,5928],{"class":168},[65,17928,1696],{"class":204},[65,17930,14802],{"class":214},[65,17932,2367],{"class":168},[65,17934,3137],{"class":793},[65,17936,235],{"class":204},[65,17938,155],{"class":154},[65,17940,17941,17943,17946,17948,17950,17952,17954,17956,17958,17960,17962,17964,17966,17968,17970,17972,17974,17976,17978,17981,17983],{"class":140,"line":4163},[65,17942,6028],{"class":168},[65,17944,17945],{"class":214}," c",[65,17947,218],{"class":168},[65,17949,17390],{"class":214},[65,17951,2367],{"class":168},[65,17953,17534],{"class":214},[65,17955,2367],{"class":168},[65,17957,1696],{"class":204},[65,17959,17845],{"class":214},[65,17961,2367],{"class":168},[65,17963,3137],{"class":793},[65,17965,1713],{"class":204},[65,17967,5928],{"class":168},[65,17969,1696],{"class":204},[65,17971,14802],{"class":214},[65,17973,2367],{"class":168},[65,17975,3137],{"class":793},[65,17977,1713],{"class":204},[65,17979,17980],{"class":168},"+",[65,17982,3137],{"class":793},[65,17984,155],{"class":154},[65,17986,17987,17989,17992,17994,17996,17998,18000,18002,18004,18006,18008,18010,18012,18014,18016,18018,18020],{"class":140,"line":4168},[65,17988,6028],{"class":168},[65,17990,17991],{"class":214}," d",[65,17993,218],{"class":168},[65,17995,17390],{"class":214},[65,17997,2367],{"class":168},[65,17999,17534],{"class":214},[65,18001,2367],{"class":168},[65,18003,17477],{"class":214},[65,18005,5933],{"class":168},[65,18007,1696],{"class":204},[65,18009,14802],{"class":214},[65,18011,2367],{"class":168},[65,18013,3137],{"class":793},[65,18015,1713],{"class":204},[65,18017,17980],{"class":168},[65,18019,3137],{"class":793},[65,18021,155],{"class":154},[65,18023,18024],{"class":140,"line":4194},[65,18025,162],{"emptyLinePlaceholder":161},[65,18027,18028,18030,18032,18035,18037,18039,18041,18043,18045],{"class":140,"line":4199},[65,18029,6240],{"class":214},[65,18031,6243],{"class":204},[65,18033,18034],{"class":214},"idx2",[65,18036,5933],{"class":168},[65,18038,6168],{"class":793},[65,18040,6249],{"class":204},[65,18042,6252],{"class":168},[65,18044,7513],{"class":214},[65,18046,155],{"class":154},[65,18048,18049,18051,18053,18055,18057,18059,18061,18063,18065,18067,18069],{"class":140,"line":4221},[65,18050,6240],{"class":214},[65,18052,6243],{"class":204},[65,18054,18034],{"class":214},[65,18056,5933],{"class":168},[65,18058,6168],{"class":793},[65,18060,2367],{"class":168},[65,18062,3137],{"class":793},[65,18064,6249],{"class":204},[65,18066,6252],{"class":168},[65,18068,7540],{"class":214},[65,18070,155],{"class":154},[65,18072,18073,18075,18077,18079,18081,18083,18085,18087,18089,18091,18093],{"class":140,"line":4228},[65,18074,6240],{"class":214},[65,18076,6243],{"class":204},[65,18078,18034],{"class":214},[65,18080,5933],{"class":168},[65,18082,6168],{"class":793},[65,18084,2367],{"class":168},[65,18086,3748],{"class":793},[65,18088,6249],{"class":204},[65,18090,6252],{"class":168},[65,18092,17991],{"class":214},[65,18094,155],{"class":154},[65,18096,18097,18099,18101,18103,18105,18107,18109,18111,18113,18115,18117],{"class":140,"line":4235},[65,18098,6240],{"class":214},[65,18100,6243],{"class":204},[65,18102,18034],{"class":214},[65,18104,5933],{"class":168},[65,18106,6168],{"class":793},[65,18108,2367],{"class":168},[65,18110,3739],{"class":793},[65,18112,6249],{"class":204},[65,18114,6252],{"class":168},[65,18116,7540],{"class":214},[65,18118,155],{"class":154},[65,18120,18121,18123,18125,18127,18129,18131,18133,18135,18137,18139,18141],{"class":140,"line":4244},[65,18122,6240],{"class":214},[65,18124,6243],{"class":204},[65,18126,18034],{"class":214},[65,18128,5933],{"class":168},[65,18130,6168],{"class":793},[65,18132,2367],{"class":168},[65,18134,3629],{"class":793},[65,18136,6249],{"class":204},[65,18138,6252],{"class":168},[65,18140,17945],{"class":214},[65,18142,155],{"class":154},[65,18144,18145,18147,18149,18151,18153,18155,18157,18159,18161,18163,18165],{"class":140,"line":4261},[65,18146,6240],{"class":214},[65,18148,6243],{"class":204},[65,18150,18034],{"class":214},[65,18152,5933],{"class":168},[65,18154,6168],{"class":793},[65,18156,2367],{"class":168},[65,18158,7741],{"class":793},[65,18160,6249],{"class":204},[65,18162,6252],{"class":168},[65,18164,17991],{"class":214},[65,18166,155],{"class":154},[65,18168,18169],{"class":140,"line":4266},[65,18170,162],{"emptyLinePlaceholder":161},[65,18172,18173,18176,18178],{"class":140,"line":4275},[65,18174,18175],{"class":214}," idx2",[65,18177,6019],{"class":168},[65,18179,155],{"class":154},[65,18181,18182],{"class":140,"line":4280},[65,18183,3204],{"class":154},[65,18185,18186],{"class":140,"line":4322},[65,18187,1171],{"class":154},[65,18189,18190],{"class":140,"line":4375},[65,18191,243],{"class":154},[15,18193,18194],{},"それでは、個々に見ていきましょう。",[2418,18196,18198],{"id":18197},"_1マスの幅と高さの計算","1マスの幅と高さの計算",[15,18200,18201],{},"1マスの幅と高さは、平面の幅と高さを分割数で割ることで計算されます。",[129,18203,18205],{"className":131,"code":18204,"filename":18198,"language":134,"meta":135,"style":135},"const segW = width / wSegs;\nconst segH = height / hSegs;\n",[124,18206,18207,18223],{"__ignoreMap":135},[65,18208,18209,18211,18213,18215,18217,18219,18221],{"class":140,"line":141},[65,18210,1769],{"class":168},[65,18212,17434],{"class":144},[65,18214,218],{"class":168},[65,18216,2598],{"class":144},[65,18218,4349],{"class":168},[65,18220,14744],{"class":144},[65,18222,155],{"class":154},[65,18224,18225,18227,18229,18231,18233,18235,18237],{"class":140,"line":158},[65,18226,1769],{"class":168},[65,18228,17451],{"class":144},[65,18230,218],{"class":168},[65,18232,2603],{"class":144},[65,18234,4349],{"class":168},[65,18236,14758],{"class":144},[65,18238,155],{"class":154},[15,18240,18241],{},"例えば、幅が1で、分割数が4の場合、1マスの幅は0.25になります。",[2418,18243,18244],{"id":18244},"頂点座標とインデックスとuvの計算",[15,18246,18247],{},"頂点座標とインデックスとuvの計算は、二重ループを使用して行います。外側のループは高さ方向の分割数を、内側のループは幅方向の分割数をループします。",[129,18249,18251],{"className":131,"code":18250,"filename":18244,"language":134,"meta":135,"style":135},"for (let iy = 0; iy \u003C= hSegs; iy++) {\n const y = iy * segH - height / 2;\n for (let ix = 0; ix \u003C= wSegs; ix++, idx++) {\n const x = ix * segW - width / 2;\n\n position[idx * 3 + u] = x * uDir;\n position[idx * 3 + v] = y * vDir;\n position[idx * 3 + w] = depth / 2;\n\n normal[idx * 3 + u] = 0;\n normal[idx * 3 + v] = 0;\n normal[idx * 3 + w] = depth >= 0 ? 1 : -1;\n\n uv[idx * 2] = ix / wSegs;\n uv[idx * 2 + 1] = 1 - iy / hSegs;\n\n if (iy === hSegs || ix === wSegs) continue;\n\n const a = io + ix + iy * (wSegs + 1);\n const b = io + ix + (iy + 1) * (wSegs + 1);\n const c = io + ix + (iy + 1) * (wSegs + 1) + 1;\n const d = io + ix + iy * (wSegs + 1) + 1;\n\n index[idx2 * 6] = a;\n index[idx2 * 6 + 1] = b;\n index[idx2 * 6 + 2] = d;\n index[idx2 * 6 + 3] = b;\n index[idx2 * 6 + 4] = c;\n index[idx2 * 6 + 5] = d;\n\n idx2++;\n }\n}\n",[124,18252,18253,18285,18309,18347,18371,18375,18404,18432,18460,18464,18489,18513,18551,18555,18580,18612,18616,18640,18644,18676,18716,18760,18796,18800,18821,18845,18869,18893,18917,18941,18945,18954,18958],{"__ignoreMap":135},[65,18254,18255,18257,18259,18261,18263,18265,18267,18269,18271,18273,18275,18277,18279,18281,18283],{"class":140,"line":141},[65,18256,6643],{"class":154},[65,18258,1696],{"class":204},[65,18260,5995],{"class":168},[65,18262,17477],{"class":144},[65,18264,218],{"class":168},[65,18266,1142],{"class":793},[65,18268,6005],{"class":154},[65,18270,17477],{"class":144},[65,18272,6010],{"class":168},[65,18274,14758],{"class":144},[65,18276,6005],{"class":154},[65,18278,17477],{"class":144},[65,18280,6019],{"class":168},[65,18282,1713],{"class":204},[65,18284,208],{"class":154},[65,18286,18287,18289,18291,18293,18295,18297,18299,18301,18303,18305,18307],{"class":140,"line":158},[65,18288,2243],{"class":168},[65,18290,15495],{"class":214},[65,18292,218],{"class":168},[65,18294,17477],{"class":214},[65,18296,5933],{"class":168},[65,18298,17451],{"class":214},[65,18300,4399],{"class":168},[65,18302,2603],{"class":214},[65,18304,4349],{"class":168},[65,18306,3748],{"class":793},[65,18308,155],{"class":154},[65,18310,18311,18313,18315,18317,18319,18321,18323,18325,18327,18329,18331,18333,18335,18337,18339,18341,18343,18345],{"class":140,"line":165},[65,18312,17470],{"class":154},[65,18314,1696],{"class":204},[65,18316,5995],{"class":168},[65,18318,17534],{"class":214},[65,18320,218],{"class":168},[65,18322,1142],{"class":793},[65,18324,6005],{"class":154},[65,18326,17534],{"class":214},[65,18328,6010],{"class":168},[65,18330,14744],{"class":214},[65,18332,6005],{"class":154},[65,18334,17534],{"class":214},[65,18336,6019],{"class":168},[65,18338,230],{"class":154},[65,18340,17404],{"class":214},[65,18342,6019],{"class":168},[65,18344,1713],{"class":204},[65,18346,208],{"class":154},[65,18348,18349,18351,18353,18355,18357,18359,18361,18363,18365,18367,18369],{"class":140,"line":180},[65,18350,848],{"class":168},[65,18352,15507],{"class":214},[65,18354,218],{"class":168},[65,18356,17534],{"class":214},[65,18358,5933],{"class":168},[65,18360,17434],{"class":214},[65,18362,4399],{"class":168},[65,18364,2598],{"class":214},[65,18366,4349],{"class":168},[65,18368,3748],{"class":793},[65,18370,155],{"class":154},[65,18372,18373],{"class":140,"line":194},[65,18374,162],{"emptyLinePlaceholder":161},[65,18376,18377,18380,18382,18384,18386,18388,18390,18392,18394,18396,18398,18400,18402],{"class":140,"line":211},[65,18378,18379],{"class":214}," position",[65,18381,6243],{"class":204},[65,18383,17599],{"class":214},[65,18385,5933],{"class":168},[65,18387,3739],{"class":793},[65,18389,2367],{"class":168},[65,18391,17608],{"class":214},[65,18393,6249],{"class":204},[65,18395,6252],{"class":168},[65,18397,15507],{"class":214},[65,18399,5933],{"class":168},[65,18401,17619],{"class":214},[65,18403,155],{"class":154},[65,18405,18406,18408,18410,18412,18414,18416,18418,18420,18422,18424,18426,18428,18430],{"class":140,"line":240},[65,18407,18379],{"class":214},[65,18409,6243],{"class":204},[65,18411,17599],{"class":214},[65,18413,5933],{"class":168},[65,18415,3739],{"class":793},[65,18417,2367],{"class":168},[65,18419,17638],{"class":214},[65,18421,6249],{"class":204},[65,18423,6252],{"class":168},[65,18425,15495],{"class":214},[65,18427,5933],{"class":168},[65,18429,17649],{"class":214},[65,18431,155],{"class":154},[65,18433,18434,18436,18438,18440,18442,18444,18446,18448,18450,18452,18454,18456,18458],{"class":140,"line":391},[65,18435,18379],{"class":214},[65,18437,6243],{"class":204},[65,18439,17599],{"class":214},[65,18441,5933],{"class":168},[65,18443,3739],{"class":793},[65,18445,2367],{"class":168},[65,18447,17668],{"class":214},[65,18449,6249],{"class":204},[65,18451,6252],{"class":168},[65,18453,4018],{"class":214},[65,18455,4349],{"class":168},[65,18457,3748],{"class":793},[65,18459,155],{"class":154},[65,18461,18462],{"class":140,"line":401},[65,18463,162],{"emptyLinePlaceholder":161},[65,18465,18466,18469,18471,18473,18475,18477,18479,18481,18483,18485,18487],{"class":140,"line":406},[65,18467,18468],{"class":214}," normal",[65,18470,6243],{"class":204},[65,18472,17599],{"class":214},[65,18474,5933],{"class":168},[65,18476,3739],{"class":793},[65,18478,2367],{"class":168},[65,18480,17608],{"class":214},[65,18482,6249],{"class":204},[65,18484,6252],{"class":168},[65,18486,1142],{"class":793},[65,18488,155],{"class":154},[65,18490,18491,18493,18495,18497,18499,18501,18503,18505,18507,18509,18511],{"class":140,"line":421},[65,18492,18468],{"class":214},[65,18494,6243],{"class":204},[65,18496,17599],{"class":214},[65,18498,5933],{"class":168},[65,18500,3739],{"class":793},[65,18502,2367],{"class":168},[65,18504,17638],{"class":214},[65,18506,6249],{"class":204},[65,18508,6252],{"class":168},[65,18510,1142],{"class":793},[65,18512,155],{"class":154},[65,18514,18515,18517,18519,18521,18523,18525,18527,18529,18531,18533,18535,18537,18539,18541,18543,18545,18547,18549],{"class":140,"line":435},[65,18516,18468],{"class":214},[65,18518,6243],{"class":204},[65,18520,17599],{"class":214},[65,18522,5933],{"class":168},[65,18524,3739],{"class":793},[65,18526,2367],{"class":168},[65,18528,17668],{"class":214},[65,18530,6249],{"class":204},[65,18532,6252],{"class":168},[65,18534,4018],{"class":214},[65,18536,17757],{"class":168},[65,18538,1142],{"class":793},[65,18540,7521],{"class":168},[65,18542,3137],{"class":793},[65,18544,7529],{"class":168},[65,18546,4399],{"class":168},[65,18548,3620],{"class":793},[65,18550,155],{"class":154},[65,18552,18553],{"class":140,"line":447},[65,18554,162],{"emptyLinePlaceholder":161},[65,18556,18557,18560,18562,18564,18566,18568,18570,18572,18574,18576,18578],{"class":140,"line":459},[65,18558,18559],{"class":214}," uv",[65,18561,6243],{"class":204},[65,18563,17599],{"class":214},[65,18565,5933],{"class":168},[65,18567,3748],{"class":793},[65,18569,6249],{"class":204},[65,18571,6252],{"class":168},[65,18573,17534],{"class":214},[65,18575,4349],{"class":168},[65,18577,14744],{"class":214},[65,18579,155],{"class":154},[65,18581,18582,18584,18586,18588,18590,18592,18594,18596,18598,18600,18602,18604,18606,18608,18610],{"class":140,"line":471},[65,18583,18559],{"class":214},[65,18585,6243],{"class":204},[65,18587,17599],{"class":214},[65,18589,5933],{"class":168},[65,18591,3748],{"class":793},[65,18593,2367],{"class":168},[65,18595,3137],{"class":793},[65,18597,6249],{"class":204},[65,18599,6252],{"class":168},[65,18601,3137],{"class":793},[65,18603,4399],{"class":168},[65,18605,17477],{"class":214},[65,18607,4349],{"class":168},[65,18609,14758],{"class":214},[65,18611,155],{"class":154},[65,18613,18614],{"class":140,"line":63},[65,18615,162],{"emptyLinePlaceholder":161},[65,18617,18618,18620,18622,18624,18626,18628,18630,18632,18634,18636,18638],{"class":140,"line":495},[65,18619,3105],{"class":154},[65,18621,1696],{"class":204},[65,18623,17845],{"class":214},[65,18625,1704],{"class":168},[65,18627,14758],{"class":214},[65,18629,2269],{"class":168},[65,18631,17534],{"class":214},[65,18633,1704],{"class":168},[65,18635,14744],{"class":214},[65,18637,1713],{"class":204},[65,18639,17862],{"class":154},[65,18641,18642],{"class":140,"line":507},[65,18643,162],{"emptyLinePlaceholder":161},[65,18645,18646,18648,18650,18652,18654,18656,18658,18660,18662,18664,18666,18668,18670,18672,18674],{"class":140,"line":519},[65,18647,848],{"class":168},[65,18649,7513],{"class":214},[65,18651,218],{"class":168},[65,18653,17390],{"class":214},[65,18655,2367],{"class":168},[65,18657,17534],{"class":214},[65,18659,2367],{"class":168},[65,18661,17477],{"class":214},[65,18663,5933],{"class":168},[65,18665,1696],{"class":204},[65,18667,14802],{"class":214},[65,18669,2367],{"class":168},[65,18671,3137],{"class":793},[65,18673,235],{"class":204},[65,18675,155],{"class":154},[65,18677,18678,18680,18682,18684,18686,18688,18690,18692,18694,18696,18698,18700,18702,18704,18706,18708,18710,18712,18714],{"class":140,"line":531},[65,18679,848],{"class":168},[65,18681,7540],{"class":214},[65,18683,218],{"class":168},[65,18685,17390],{"class":214},[65,18687,2367],{"class":168},[65,18689,17534],{"class":214},[65,18691,2367],{"class":168},[65,18693,1696],{"class":204},[65,18695,17845],{"class":214},[65,18697,2367],{"class":168},[65,18699,3137],{"class":793},[65,18701,1713],{"class":204},[65,18703,5928],{"class":168},[65,18705,1696],{"class":204},[65,18707,14802],{"class":214},[65,18709,2367],{"class":168},[65,18711,3137],{"class":793},[65,18713,235],{"class":204},[65,18715,155],{"class":154},[65,18717,18718,18720,18722,18724,18726,18728,18730,18732,18734,18736,18738,18740,18742,18744,18746,18748,18750,18752,18754,18756,18758],{"class":140,"line":543},[65,18719,848],{"class":168},[65,18721,17945],{"class":214},[65,18723,218],{"class":168},[65,18725,17390],{"class":214},[65,18727,2367],{"class":168},[65,18729,17534],{"class":214},[65,18731,2367],{"class":168},[65,18733,1696],{"class":204},[65,18735,17845],{"class":214},[65,18737,2367],{"class":168},[65,18739,3137],{"class":793},[65,18741,1713],{"class":204},[65,18743,5928],{"class":168},[65,18745,1696],{"class":204},[65,18747,14802],{"class":214},[65,18749,2367],{"class":168},[65,18751,3137],{"class":793},[65,18753,1713],{"class":204},[65,18755,17980],{"class":168},[65,18757,3137],{"class":793},[65,18759,155],{"class":154},[65,18761,18762,18764,18766,18768,18770,18772,18774,18776,18778,18780,18782,18784,18786,18788,18790,18792,18794],{"class":140,"line":555},[65,18763,848],{"class":168},[65,18765,17991],{"class":214},[65,18767,218],{"class":168},[65,18769,17390],{"class":214},[65,18771,2367],{"class":168},[65,18773,17534],{"class":214},[65,18775,2367],{"class":168},[65,18777,17477],{"class":214},[65,18779,5933],{"class":168},[65,18781,1696],{"class":204},[65,18783,14802],{"class":214},[65,18785,2367],{"class":168},[65,18787,3137],{"class":793},[65,18789,1713],{"class":204},[65,18791,17980],{"class":168},[65,18793,3137],{"class":793},[65,18795,155],{"class":154},[65,18797,18798],{"class":140,"line":567},[65,18799,162],{"emptyLinePlaceholder":161},[65,18801,18802,18805,18807,18809,18811,18813,18815,18817,18819],{"class":140,"line":3757},[65,18803,18804],{"class":214}," index",[65,18806,6243],{"class":204},[65,18808,18034],{"class":214},[65,18810,5933],{"class":168},[65,18812,6168],{"class":793},[65,18814,6249],{"class":204},[65,18816,6252],{"class":168},[65,18818,7513],{"class":214},[65,18820,155],{"class":154},[65,18822,18823,18825,18827,18829,18831,18833,18835,18837,18839,18841,18843],{"class":140,"line":3787},[65,18824,18804],{"class":214},[65,18826,6243],{"class":204},[65,18828,18034],{"class":214},[65,18830,5933],{"class":168},[65,18832,6168],{"class":793},[65,18834,2367],{"class":168},[65,18836,3137],{"class":793},[65,18838,6249],{"class":204},[65,18840,6252],{"class":168},[65,18842,7540],{"class":214},[65,18844,155],{"class":154},[65,18846,18847,18849,18851,18853,18855,18857,18859,18861,18863,18865,18867],{"class":140,"line":3792},[65,18848,18804],{"class":214},[65,18850,6243],{"class":204},[65,18852,18034],{"class":214},[65,18854,5933],{"class":168},[65,18856,6168],{"class":793},[65,18858,2367],{"class":168},[65,18860,3748],{"class":793},[65,18862,6249],{"class":204},[65,18864,6252],{"class":168},[65,18866,17991],{"class":214},[65,18868,155],{"class":154},[65,18870,18871,18873,18875,18877,18879,18881,18883,18885,18887,18889,18891],{"class":140,"line":3814},[65,18872,18804],{"class":214},[65,18874,6243],{"class":204},[65,18876,18034],{"class":214},[65,18878,5933],{"class":168},[65,18880,6168],{"class":793},[65,18882,2367],{"class":168},[65,18884,3739],{"class":793},[65,18886,6249],{"class":204},[65,18888,6252],{"class":168},[65,18890,7540],{"class":214},[65,18892,155],{"class":154},[65,18894,18895,18897,18899,18901,18903,18905,18907,18909,18911,18913,18915],{"class":140,"line":3823},[65,18896,18804],{"class":214},[65,18898,6243],{"class":204},[65,18900,18034],{"class":214},[65,18902,5933],{"class":168},[65,18904,6168],{"class":793},[65,18906,2367],{"class":168},[65,18908,3629],{"class":793},[65,18910,6249],{"class":204},[65,18912,6252],{"class":168},[65,18914,17945],{"class":214},[65,18916,155],{"class":154},[65,18918,18919,18921,18923,18925,18927,18929,18931,18933,18935,18937,18939],{"class":140,"line":3831},[65,18920,18804],{"class":214},[65,18922,6243],{"class":204},[65,18924,18034],{"class":214},[65,18926,5933],{"class":168},[65,18928,6168],{"class":793},[65,18930,2367],{"class":168},[65,18932,7741],{"class":793},[65,18934,6249],{"class":204},[65,18936,6252],{"class":168},[65,18938,17991],{"class":214},[65,18940,155],{"class":154},[65,18942,18943],{"class":140,"line":3841},[65,18944,162],{"emptyLinePlaceholder":161},[65,18946,18947,18950,18952],{"class":140,"line":3861},[65,18948,18949],{"class":214}," idx2",[65,18951,6019],{"class":168},[65,18953,155],{"class":154},[65,18955,18956],{"class":140,"line":3867},[65,18957,1171],{"class":154},[65,18959,18960],{"class":140,"line":3876},[65,18961,243],{"class":154},[15,18963,18964],{},"頂点座標は、中心を原点として計算しています。uvは、幅方向と高さ方向の分割数に基づいて計算されます。インデックスは、頂点の順序に基づいて計算されます。",[15,18966,18967],{},"言葉で説明するのが難しいので、実際に値を入れてみて計算してみると分かりやすいと思います。",[15,18969,18970],{},"widthが1で、heightが1で、widthSegmentsが1で、heightSegmentsが1の場合、次のようになります。",[129,18972,18974],{"className":131,"code":18973,"language":134,"meta":135,"style":135},"position = [\n -0.5, 0.5, 0,\n 0.5, 0.5, 0,\n -0.5, -0.5, 0,\n 0.5, -0.5, 0,\n];\n\nnormal = [\n 0, 0, 1,\n 0, 0, 1,\n 0, 0, 1,\n 0, 0, 1,\n];\n\nuv = [\n 0, 1,\n 1, 1,\n 0, 0,\n 1, 0,\n];\n\nindex = [\n 0, 2, 1,\n 2, 3, 1,\n];\n",[124,18975,18976,18984,19000,19015,19033,19049,19055,19059,19067,19081,19095,19109,19123,19129,19133,19142,19152,19162,19172,19182,19188,19192,19200,19214,19228],{"__ignoreMap":135},[65,18977,18978,18980,18982],{"class":140,"line":141},[65,18979,3610],{"class":144},[65,18981,218],{"class":168},[65,18983,16316],{"class":204},[65,18985,18986,18988,18990,18992,18994,18996,18998],{"class":140,"line":158},[65,18987,16321],{"class":168},[65,18989,5554],{"class":793},[65,18991,230],{"class":154},[65,18993,5559],{"class":793},[65,18995,230],{"class":154},[65,18997,1142],{"class":793},[65,18999,3820],{"class":154},[65,19001,19002,19005,19007,19009,19011,19013],{"class":140,"line":165},[65,19003,19004],{"class":793}," 0.5",[65,19006,230],{"class":154},[65,19008,5559],{"class":793},[65,19010,230],{"class":154},[65,19012,1142],{"class":793},[65,19014,3820],{"class":154},[65,19016,19017,19019,19021,19023,19025,19027,19029,19031],{"class":140,"line":180},[65,19018,16321],{"class":168},[65,19020,5554],{"class":793},[65,19022,230],{"class":154},[65,19024,4399],{"class":168},[65,19026,5554],{"class":793},[65,19028,230],{"class":154},[65,19030,1142],{"class":793},[65,19032,3820],{"class":154},[65,19034,19035,19037,19039,19041,19043,19045,19047],{"class":140,"line":194},[65,19036,19004],{"class":793},[65,19038,230],{"class":154},[65,19040,4399],{"class":168},[65,19042,5554],{"class":793},[65,19044,230],{"class":154},[65,19046,1142],{"class":793},[65,19048,3820],{"class":154},[65,19050,19051,19053],{"class":140,"line":211},[65,19052,6106],{"class":204},[65,19054,155],{"class":154},[65,19056,19057],{"class":140,"line":240},[65,19058,162],{"emptyLinePlaceholder":161},[65,19060,19061,19063,19065],{"class":140,"line":391},[65,19062,9146],{"class":144},[65,19064,218],{"class":168},[65,19066,16316],{"class":204},[65,19068,19069,19071,19073,19075,19077,19079],{"class":140,"line":401},[65,19070,8156],{"class":793},[65,19072,230],{"class":154},[65,19074,1142],{"class":793},[65,19076,230],{"class":154},[65,19078,3137],{"class":793},[65,19080,3820],{"class":154},[65,19082,19083,19085,19087,19089,19091,19093],{"class":140,"line":406},[65,19084,8156],{"class":793},[65,19086,230],{"class":154},[65,19088,1142],{"class":793},[65,19090,230],{"class":154},[65,19092,3137],{"class":793},[65,19094,3820],{"class":154},[65,19096,19097,19099,19101,19103,19105,19107],{"class":140,"line":421},[65,19098,8156],{"class":793},[65,19100,230],{"class":154},[65,19102,1142],{"class":793},[65,19104,230],{"class":154},[65,19106,3137],{"class":793},[65,19108,3820],{"class":154},[65,19110,19111,19113,19115,19117,19119,19121],{"class":140,"line":435},[65,19112,8156],{"class":793},[65,19114,230],{"class":154},[65,19116,1142],{"class":793},[65,19118,230],{"class":154},[65,19120,3137],{"class":793},[65,19122,3820],{"class":154},[65,19124,19125,19127],{"class":140,"line":447},[65,19126,6106],{"class":204},[65,19128,155],{"class":154},[65,19130,19131],{"class":140,"line":459},[65,19132,162],{"emptyLinePlaceholder":161},[65,19134,19135,19138,19140],{"class":140,"line":471},[65,19136,19137],{"class":144},"uv",[65,19139,218],{"class":168},[65,19141,16316],{"class":204},[65,19143,19144,19146,19148,19150],{"class":140,"line":63},[65,19145,8156],{"class":793},[65,19147,230],{"class":154},[65,19149,3137],{"class":793},[65,19151,3820],{"class":154},[65,19153,19154,19156,19158,19160],{"class":140,"line":495},[65,19155,16341],{"class":793},[65,19157,230],{"class":154},[65,19159,3137],{"class":793},[65,19161,3820],{"class":154},[65,19163,19164,19166,19168,19170],{"class":140,"line":507},[65,19165,8156],{"class":793},[65,19167,230],{"class":154},[65,19169,1142],{"class":793},[65,19171,3820],{"class":154},[65,19173,19174,19176,19178,19180],{"class":140,"line":519},[65,19175,16341],{"class":793},[65,19177,230],{"class":154},[65,19179,1142],{"class":793},[65,19181,3820],{"class":154},[65,19183,19184,19186],{"class":140,"line":531},[65,19185,6106],{"class":204},[65,19187,155],{"class":154},[65,19189,19190],{"class":140,"line":543},[65,19191,162],{"emptyLinePlaceholder":161},[65,19193,19194,19196,19198],{"class":140,"line":555},[65,19195,11865],{"class":144},[65,19197,218],{"class":168},[65,19199,16316],{"class":204},[65,19201,19202,19204,19206,19208,19210,19212],{"class":140,"line":567},[65,19203,8156],{"class":793},[65,19205,230],{"class":154},[65,19207,3748],{"class":793},[65,19209,230],{"class":154},[65,19211,3137],{"class":793},[65,19213,3820],{"class":154},[65,19215,19216,19218,19220,19222,19224,19226],{"class":140,"line":3757},[65,19217,16442],{"class":793},[65,19219,230],{"class":154},[65,19221,3739],{"class":793},[65,19223,230],{"class":154},[65,19225,3137],{"class":793},[65,19227,3820],{"class":154},[65,19229,19230,19232],{"class":140,"line":3787},[65,19231,6106],{"class":204},[65,19233,155],{"class":154},[11,19235,19236],{"id":19236},"wireframeモードの描画方法",[15,19238,19239],{},"wireframeモードで描画する場合は、インデックスの計算を変更する必要があります。",[129,19241,19242],{"className":131,"code":15593,"language":134,"meta":135,"style":135},[124,19243,19244,19256,19276],{"__ignoreMap":135},[65,19245,19246,19248,19250,19252,19254],{"class":140,"line":141},[65,19247,1693],{"class":154},[65,19249,1696],{"class":204},[65,19251,15582],{"class":144},[65,19253,1713],{"class":204},[65,19255,208],{"class":154},[65,19257,19258,19260,19262,19264,19266,19268,19270,19272,19274],{"class":140,"line":158},[65,19259,6899],{"class":214},[65,19261,218],{"class":168},[65,19263,3312],{"class":214},[65,19265,834],{"class":154},[65,19267,15589],{"class":200},[65,19269,224],{"class":204},[65,19271,11865],{"class":214},[65,19273,235],{"class":204},[65,19275,155],{"class":154},[65,19277,19278],{"class":140,"line":165},[65,19279,243],{"class":154},[15,19281,19282,2195],{},[124,19283,15589],{},[129,19285,19287],{"className":131,"code":19286,"filename":15589,"language":134,"meta":135,"style":135},"static buildWireframeIndex(index: Uint16Array | Uint32Array) {\n const edges: number[] = [];\n\n for (let i = 0; i \u003C index.length; i += 3) {\n const a = index[i];\n const b = index[i + 1];\n const c = index[i + 2];\n\n edges.push(a, b, b, c, c, a);\n }\n\n return index instanceof Uint32Array ? new Uint32Array(edges) : new Uint16Array(edges);\n}\n",[124,19288,19289,19313,19334,19338,19376,19394,19416,19438,19442,19480,19484,19488,19525],{"__ignoreMap":135},[65,19290,19291,19293,19296,19298,19300,19302,19305,19307,19309,19311],{"class":140,"line":141},[65,19292,15017],{"class":144},[65,19294,19295],{"class":200}," buildWireframeIndex",[65,19297,224],{"class":204},[65,19299,11865],{"class":144},[65,19301,1819],{"class":204},[65,19303,19304],{"class":144},"Uint16Array",[65,19306,11880],{"class":168},[65,19308,17091],{"class":144},[65,19310,1713],{"class":204},[65,19312,208],{"class":154},[65,19314,19315,19317,19320,19322,19324,19327,19329,19332],{"class":140,"line":158},[65,19316,2243],{"class":168},[65,19318,19319],{"class":214}," edges",[65,19321,797],{"class":168},[65,19323,430],{"class":340},[65,19325,19326],{"class":204},"[] ",[65,19328,6252],{"class":168},[65,19330,19331],{"class":204}," []",[65,19333,155],{"class":154},[65,19335,19336],{"class":140,"line":165},[65,19337,162],{"emptyLinePlaceholder":161},[65,19339,19340,19342,19344,19346,19348,19350,19352,19354,19356,19358,19360,19362,19364,19366,19368,19370,19372,19374],{"class":140,"line":180},[65,19341,17470],{"class":154},[65,19343,1696],{"class":204},[65,19345,5995],{"class":168},[65,19347,5998],{"class":214},[65,19349,218],{"class":168},[65,19351,1142],{"class":793},[65,19353,6005],{"class":154},[65,19355,5998],{"class":214},[65,19357,6223],{"class":168},[65,19359,6187],{"class":214},[65,19361,834],{"class":154},[65,19363,9685],{"class":204},[65,19365,6005],{"class":154},[65,19367,5998],{"class":214},[65,19369,4462],{"class":168},[65,19371,3739],{"class":793},[65,19373,1713],{"class":204},[65,19375,208],{"class":154},[65,19377,19378,19380,19382,19384,19386,19388,19390,19392],{"class":140,"line":194},[65,19379,848],{"class":168},[65,19381,7513],{"class":214},[65,19383,218],{"class":168},[65,19385,6187],{"class":214},[65,19387,6243],{"class":204},[65,19389,6246],{"class":214},[65,19391,6106],{"class":204},[65,19393,155],{"class":154},[65,19395,19396,19398,19400,19402,19404,19406,19408,19410,19412,19414],{"class":140,"line":211},[65,19397,848],{"class":168},[65,19399,7540],{"class":214},[65,19401,218],{"class":168},[65,19403,6187],{"class":214},[65,19405,6243],{"class":204},[65,19407,6246],{"class":214},[65,19409,2367],{"class":168},[65,19411,3137],{"class":793},[65,19413,6106],{"class":204},[65,19415,155],{"class":154},[65,19417,19418,19420,19422,19424,19426,19428,19430,19432,19434,19436],{"class":140,"line":240},[65,19419,848],{"class":168},[65,19421,17945],{"class":214},[65,19423,218],{"class":168},[65,19425,6187],{"class":214},[65,19427,6243],{"class":204},[65,19429,6246],{"class":214},[65,19431,2367],{"class":168},[65,19433,3748],{"class":793},[65,19435,6106],{"class":204},[65,19437,155],{"class":154},[65,19439,19440],{"class":140,"line":391},[65,19441,162],{"emptyLinePlaceholder":161},[65,19443,19444,19447,19449,19452,19454,19456,19458,19460,19462,19464,19466,19468,19470,19472,19474,19476,19478],{"class":140,"line":401},[65,19445,19446],{"class":214}," edges",[65,19448,834],{"class":154},[65,19450,19451],{"class":200},"push",[65,19453,224],{"class":204},[65,19455,29],{"class":214},[65,19457,230],{"class":154},[65,19459,7540],{"class":214},[65,19461,230],{"class":154},[65,19463,7540],{"class":214},[65,19465,230],{"class":154},[65,19467,17945],{"class":214},[65,19469,230],{"class":154},[65,19471,17945],{"class":214},[65,19473,230],{"class":154},[65,19475,7513],{"class":214},[65,19477,235],{"class":204},[65,19479,155],{"class":154},[65,19481,19482],{"class":140,"line":406},[65,19483,1171],{"class":154},[65,19485,19486],{"class":140,"line":421},[65,19487,162],{"emptyLinePlaceholder":161},[65,19489,19490,19492,19494,19496,19498,19500,19502,19504,19506,19509,19511,19513,19515,19517,19519,19521,19523],{"class":140,"line":435},[65,19491,2726],{"class":154},[65,19493,6187],{"class":214},[65,19495,858],{"class":168},[65,19497,17091],{"class":326},[65,19499,7521],{"class":168},[65,19501,1776],{"class":168},[65,19503,17091],{"class":200},[65,19505,224],{"class":204},[65,19507,19508],{"class":214},"edges",[65,19510,1713],{"class":204},[65,19512,797],{"class":168},[65,19514,1776],{"class":168},[65,19516,6194],{"class":200},[65,19518,224],{"class":204},[65,19520,19508],{"class":214},[65,19522,235],{"class":204},[65,19524,155],{"class":154},[65,19526,19527],{"class":140,"line":447},[65,19528,243],{"class":154},[15,19530,19531,19532,19535,19536,19539,19540,3062,19543,19546],{},"wireframeモードで描画するには、",[124,19533,19534],{},"drawElements","の第一引数を",[124,19537,19538],{},"gl.LINES","に変更する必要があるので、",[124,19541,19542],{},"Mesh",[124,19544,19545],{},"draw","メソッドを次のように変更します。",[129,19548,19551],{"className":131,"code":19549,"filename":19550,"language":134,"meta":135,"style":135},"export class Mesh extends Scene {\n // ...\n draw({ camera }: { camera?: Camera }) {\n // ...\n const mode = geometry.attributes.wireframe ? gl.LINES : gl.TRIANGLES;\n\n // ...\n gl.drawElements(mode, geometry.indexCount, gl.UNSIGNED_SHORT, 0);\n }\n}\n","Mesh.ts",[124,19552,19553,19567,19571,19598,19602,19641,19645,19649,19688,19692],{"__ignoreMap":135},[65,19554,19555,19557,19559,19561,19563,19565],{"class":140,"line":141},[65,19556,284],{"class":154},[65,19558,774],{"class":168},[65,19560,3302],{"class":326},[65,19562,5810],{"class":168},[65,19564,3326],{"class":302},[65,19566,418],{"class":154},[65,19568,19569],{"class":140,"line":158},[65,19570,783],{"class":278},[65,19572,19573,19576,19579,19581,19583,19585,19587,19589,19591,19593,19596],{"class":140,"line":165},[65,19574,19575],{"class":200}," draw",[65,19577,19578],{"class":154},"({",[65,19580,3552],{"class":793},[65,19582,293],{"class":154},[65,19584,797],{"class":168},[65,19586,287],{"class":154},[65,19588,3552],{"class":144},[65,19590,427],{"class":168},[65,19592,3297],{"class":326},[65,19594,19595],{"class":154}," })",[65,19597,418],{"class":154},[65,19599,19600],{"class":140,"line":180},[65,19601,1572],{"class":278},[65,19603,19604,19606,19609,19611,19613,19615,19617,19619,19621,19623,19625,19627,19630,19632,19634,19636,19639],{"class":140,"line":194},[65,19605,848],{"class":168},[65,19607,19608],{"class":214}," mode",[65,19610,218],{"class":168},[65,19612,3903],{"class":214},[65,19614,834],{"class":154},[65,19616,9141],{"class":214},[65,19618,834],{"class":154},[65,19620,15582],{"class":214},[65,19622,7521],{"class":168},[65,19624,841],{"class":214},[65,19626,834],{"class":154},[65,19628,19629],{"class":214},"LINES",[65,19631,7529],{"class":168},[65,19633,841],{"class":214},[65,19635,834],{"class":154},[65,19637,19638],{"class":214},"TRIANGLES",[65,19640,155],{"class":154},[65,19642,19643],{"class":140,"line":211},[65,19644,162],{"emptyLinePlaceholder":161},[65,19646,19647],{"class":140,"line":240},[65,19648,1572],{"class":278},[65,19650,19651,19653,19655,19657,19659,19662,19664,19666,19668,19671,19673,19675,19677,19680,19682,19684,19686],{"class":140,"line":391},[65,19652,1295],{"class":214},[65,19654,834],{"class":154},[65,19656,19534],{"class":200},[65,19658,224],{"class":204},[65,19660,19661],{"class":214},"mode",[65,19663,230],{"class":154},[65,19665,3903],{"class":214},[65,19667,834],{"class":154},[65,19669,19670],{"class":214},"indexCount",[65,19672,230],{"class":154},[65,19674,841],{"class":214},[65,19676,834],{"class":154},[65,19678,19679],{"class":214},"UNSIGNED_SHORT",[65,19681,230],{"class":154},[65,19683,1142],{"class":793},[65,19685,235],{"class":204},[65,19687,155],{"class":154},[65,19689,19690],{"class":140,"line":401},[65,19691,1171],{"class":154},[65,19693,19694],{"class":140,"line":406},[65,19695,243],{"class":154},[15,19697,19698],{},"これで、wireframeモードで描画することができるようになります。",[11,19700,15638],{"id":15637},[15,19702,19703],{},"最後に、作成した頂点座標、uv、インデックスをGeometryクラスへ渡していきましょう。",[129,19705,19707],{"className":131,"code":19706,"filename":16480,"language":134,"meta":135,"style":135},"export class Plane extends Geometry {\n constructor(gl: WebGL2RenderingContext, options?: Partial\u003CPlaneOptions>) {\n // ...\n Object.assign(attributes, {\n position: { size: 3, data: position },\n normal: { size: 3, data: normal },\n uv: { size: 2, data: uv },\n index: { data: index },\n wireframe,\n });\n\n super(gl, attributes);\n }\n}\n",[124,19708,19709,19723,19751,19755,19771,19795,19819,19843,19859,19865,19873,19877,19893,19897],{"__ignoreMap":135},[65,19710,19711,19713,19715,19717,19719,19721],{"class":140,"line":141},[65,19712,284],{"class":154},[65,19714,774],{"class":168},[65,19716,3312],{"class":326},[65,19718,5810],{"class":168},[65,19720,5645],{"class":302},[65,19722,418],{"class":154},[65,19724,19725,19727,19729,19731,19733,19735,19737,19739,19741,19743,19745,19747,19749],{"class":140,"line":158},[65,19726,788],{"class":168},[65,19728,224],{"class":154},[65,19730,794],{"class":793},[65,19732,797],{"class":168},[65,19734,800],{"class":326},[65,19736,230],{"class":154},[65,19738,814],{"class":793},[65,19740,427],{"class":168},[65,19742,5835],{"class":326},[65,19744,1830],{"class":154},[65,19746,16778],{"class":326},[65,19748,5843],{"class":154},[65,19750,418],{"class":154},[65,19752,19753],{"class":140,"line":165},[65,19754,1572],{"class":278},[65,19756,19757,19759,19761,19763,19765,19767,19769],{"class":140,"line":180},[65,19758,15701],{"class":214},[65,19760,834],{"class":154},[65,19762,15706],{"class":200},[65,19764,224],{"class":204},[65,19766,9141],{"class":214},[65,19768,230],{"class":154},[65,19770,418],{"class":154},[65,19772,19773,19775,19777,19779,19781,19783,19785,19787,19789,19791,19793],{"class":140,"line":194},[65,19774,6289],{"class":204},[65,19776,797],{"class":154},[65,19778,287],{"class":154},[65,19780,5854],{"class":204},[65,19782,797],{"class":154},[65,19784,3739],{"class":793},[65,19786,230],{"class":154},[65,19788,6304],{"class":204},[65,19790,797],{"class":154},[65,19792,10964],{"class":214},[65,19794,3858],{"class":154},[65,19796,19797,19799,19801,19803,19805,19807,19809,19811,19813,19815,19817],{"class":140,"line":211},[65,19798,9768],{"class":204},[65,19800,797],{"class":154},[65,19802,287],{"class":154},[65,19804,5854],{"class":204},[65,19806,797],{"class":154},[65,19808,3739],{"class":793},[65,19810,230],{"class":154},[65,19812,6304],{"class":204},[65,19814,797],{"class":154},[65,19816,10975],{"class":214},[65,19818,3858],{"class":154},[65,19820,19821,19823,19825,19827,19829,19831,19833,19835,19837,19839,19841],{"class":140,"line":240},[65,19822,15767],{"class":204},[65,19824,797],{"class":154},[65,19826,287],{"class":154},[65,19828,5854],{"class":204},[65,19830,797],{"class":154},[65,19832,3748],{"class":793},[65,19834,230],{"class":154},[65,19836,6304],{"class":204},[65,19838,797],{"class":154},[65,19840,15268],{"class":214},[65,19842,3858],{"class":154},[65,19844,19845,19847,19849,19851,19853,19855,19857],{"class":140,"line":391},[65,19846,6240],{"class":204},[65,19848,797],{"class":154},[65,19850,287],{"class":154},[65,19852,6304],{"class":204},[65,19854,797],{"class":154},[65,19856,6187],{"class":214},[65,19858,3858],{"class":154},[65,19860,19861,19863],{"class":140,"line":401},[65,19862,6331],{"class":214},[65,19864,3820],{"class":154},[65,19866,19867,19869,19871],{"class":140,"line":406},[65,19868,6341],{"class":154},[65,19870,235],{"class":204},[65,19872,155],{"class":154},[65,19874,19875],{"class":140,"line":421},[65,19876,162],{"emptyLinePlaceholder":161},[65,19878,19879,19881,19883,19885,19887,19889,19891],{"class":140,"line":435},[65,19880,6510],{"class":830},[65,19882,224],{"class":204},[65,19884,794],{"class":214},[65,19886,230],{"class":154},[65,19888,15834],{"class":214},[65,19890,235],{"class":204},[65,19892,155],{"class":154},[65,19894,19895],{"class":140,"line":447},[65,19896,1171],{"class":154},[65,19898,19899],{"class":140,"line":459},[65,19900,243],{"class":154},[15,19902,19903],{},"このPlaneクラスを使用して、平面を描画することができるようになりました。",[129,19905,19907],{"className":131,"code":19906,"filename":3244,"language":134,"meta":135,"style":135},"const PARAMS = {\n wireframe: false,\n width: 1,\n height: 1,\n widthSegments: 1,\n heightSegments: 1,\n};\n\nconst planeGeometry = new Plane(gl, PARAMS);\n\nconst program = new Program(gl, {\n vertex,\n fragment,\n uniforms: {\n uTime: { value: 0 },\n },\n});\n\nconst plane = new Mesh(gl, { geometry: planeGeometry, program });\nscene.add(plane);\n",[124,19908,19909,19919,19929,19939,19949,19959,19969,19973,19977,20001,20005,20025,20031,20037,20045,20061,20065,20073,20077,20113],{"__ignoreMap":135},[65,19910,19911,19913,19915,19917],{"class":140,"line":141},[65,19912,1769],{"class":168},[65,19914,14317],{"class":144},[65,19916,218],{"class":168},[65,19918,418],{"class":154},[65,19920,19921,19923,19925,19927],{"class":140,"line":158},[65,19922,8466],{"class":204},[65,19924,797],{"class":154},[65,19926,1039],{"class":793},[65,19928,3820],{"class":154},[65,19930,19931,19933,19935,19937],{"class":140,"line":165},[65,19932,546],{"class":204},[65,19934,797],{"class":154},[65,19936,3137],{"class":793},[65,19938,3820],{"class":154},[65,19940,19941,19943,19945,19947],{"class":140,"line":180},[65,19942,558],{"class":204},[65,19944,797],{"class":154},[65,19946,3137],{"class":793},[65,19948,3820],{"class":154},[65,19950,19951,19953,19955,19957],{"class":140,"line":194},[65,19952,14379],{"class":204},[65,19954,797],{"class":154},[65,19956,3137],{"class":793},[65,19958,3820],{"class":154},[65,19960,19961,19963,19965,19967],{"class":140,"line":211},[65,19962,14393],{"class":204},[65,19964,797],{"class":154},[65,19966,3137],{"class":793},[65,19968,3820],{"class":154},[65,19970,19971],{"class":140,"line":240},[65,19972,4731],{"class":154},[65,19974,19975],{"class":140,"line":391},[65,19976,162],{"emptyLinePlaceholder":161},[65,19978,19979,19981,19983,19985,19987,19989,19991,19993,19995,19997,19999],{"class":140,"line":401},[65,19980,1769],{"class":168},[65,19982,3718],{"class":144},[65,19984,218],{"class":168},[65,19986,1776],{"class":168},[65,19988,3312],{"class":200},[65,19990,224],{"class":204},[65,19992,794],{"class":144},[65,19994,230],{"class":154},[65,19996,14317],{"class":144},[65,19998,235],{"class":204},[65,20000,155],{"class":154},[65,20002,20003],{"class":140,"line":406},[65,20004,162],{"emptyLinePlaceholder":161},[65,20006,20007,20009,20011,20013,20015,20017,20019,20021,20023],{"class":140,"line":421},[65,20008,1769],{"class":168},[65,20010,3797],{"class":144},[65,20012,218],{"class":168},[65,20014,1776],{"class":168},[65,20016,3081],{"class":200},[65,20018,224],{"class":204},[65,20020,794],{"class":144},[65,20022,230],{"class":154},[65,20024,418],{"class":154},[65,20026,20027,20029],{"class":140,"line":435},[65,20028,4839],{"class":144},[65,20030,3820],{"class":154},[65,20032,20033,20035],{"class":140,"line":447},[65,20034,4846],{"class":144},[65,20036,3820],{"class":154},[65,20038,20039,20041,20043],{"class":140,"line":459},[65,20040,4853],{"class":204},[65,20042,797],{"class":154},[65,20044,418],{"class":154},[65,20046,20047,20049,20051,20053,20055,20057,20059],{"class":140,"line":471},[65,20048,16015],{"class":204},[65,20050,797],{"class":154},[65,20052,287],{"class":154},[65,20054,3851],{"class":204},[65,20056,797],{"class":154},[65,20058,1142],{"class":793},[65,20060,3858],{"class":154},[65,20062,20063],{"class":140,"line":63},[65,20064,4879],{"class":154},[65,20066,20067,20069,20071],{"class":140,"line":495},[65,20068,2899],{"class":154},[65,20070,235],{"class":204},[65,20072,155],{"class":154},[65,20074,20075],{"class":140,"line":507},[65,20076,162],{"emptyLinePlaceholder":161},[65,20078,20079,20081,20083,20085,20087,20089,20091,20093,20095,20097,20099,20101,20103,20105,20107,20109,20111],{"class":140,"line":519},[65,20080,1769],{"class":168},[65,20082,3886],{"class":144},[65,20084,218],{"class":168},[65,20086,1776],{"class":168},[65,20088,3302],{"class":200},[65,20090,224],{"class":204},[65,20092,794],{"class":144},[65,20094,230],{"class":154},[65,20096,287],{"class":154},[65,20098,3903],{"class":204},[65,20100,797],{"class":154},[65,20102,3718],{"class":144},[65,20104,230],{"class":154},[65,20106,3797],{"class":144},[65,20108,293],{"class":154},[65,20110,235],{"class":204},[65,20112,155],{"class":154},[65,20114,20115,20117,20119,20121,20123,20125,20127],{"class":140,"line":531},[65,20116,4932],{"class":144},[65,20118,834],{"class":154},[65,20120,3962],{"class":200},[65,20122,224],{"class":204},[65,20124,3967],{"class":144},[65,20126,235],{"class":204},[65,20128,155],{"class":154},[15,20130,20131],{},[57,20132],{"alt":14720,"src":20133,"title":14720},"https://res.cloudinary.com/dy8ftemi0/image/upload/v1779322569/webgl-plane-geometry-01_konw5b.jpg",[3226,20135],{"href":20136},"https://nono-k.github.io/webgl-study-note/webgl/plane/",[11,20138,5299],{"id":5299},[15,20140,20141],{},"今回は、WebGLで平面(Plane)ジオメトリを描画する方法を解説しました。分割数を設定できるようにすることで、より細かい平面を作成することができるようになりました。また、wireframeモードで描画する方法も解説しました。",[15,20143,20144],{},"次回は、作成したPlaneクラスを使用して立方体の作成を解説していきます。",[19,20146],{":items":5364},[5313,20148,20149],{},"html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .s9qRY, html code.shiki .s9qRY{--shiki-default:#FF5370;--shiki-default-font-style:italic}",{"title":135,"searchDepth":165,"depth":165,"links":20151},[20152,20153,20154,20163,20164,20165],{"id":13,"depth":158,"text":13},{"id":16201,"depth":158,"text":16202},{"id":16470,"depth":158,"text":16471,"children":20155},[20156,20157,20158,20159],{"id":14735,"depth":165,"text":14735},{"id":16947,"depth":165,"text":16947},{"id":16986,"depth":165,"text":16987},{"id":17191,"depth":165,"text":17192,"children":20160},[20161,20162],{"id":18197,"depth":180,"text":18198},{"id":18244,"depth":180,"text":18244},{"id":19236,"depth":158,"text":19236},{"id":15637,"depth":158,"text":15638},{"id":5299,"depth":158,"text":5299},"2026-05-22T00:00:00.000Z","今回は、Three.jsでいうPlaneGeometry(平面)の作成をWebGLで行っていきます。widthとheightを設定できるのはもちろん、分割数も設定できるようにしていきます。","/images/blog/webgl-plane-geometry.jpg",{},"/blog/webgl-plane-geometry",{"title":16147,"description":20167},"blog/webgl-plane-geometry",[20174,19236],"WebGLで平面(Plane)ジオメトリを描画する方法",[5350],"B2hJqKPuLeTRHfuBwY_sVwfR1I4APUCZVa6j733DkK4",{"id":20178,"title":20179,"body":20180,"date":26970,"description":26971,"draft":5339,"extension":5340,"image":26972,"meta":26973,"navigation":161,"path":26974,"seo":26975,"stem":26976,"summaryList":26977,"summaryText":5348,"tags":26981,"__hash__":26982},"blog/blog/webgl-multiple-triangle.md","【WebGL】MVP行列の理解と複数の三角形を描画する",{"type":8,"value":20181,"toc":26950},[20182,20184,20187,20190,20193,20195,20222,20228,20232,20235,20242,20268,20274,20277,20281,20284,20322,20325,20359,20366,20369,20416,20438,20441,20446,20449,20459,20462,20473,21129,21132,21157,21165,21168,21193,21207,21212,21216,21291,21302,21306,21567,21572,21601,21606,21610,21633,21639,21643,21673,21676,21718,21721,21725,21800,21808,21811,21814,21824,21867,21870,21899,21902,21905,22767,22769,22775,23271,23274,23434,23440,23443,23526,23529,23533,23570,23573,23593,23597,23654,23660,23666,23676,23678,23688,24086,24089,24092,24098,25634,25640,25643,25685,25696,25699,25702,25708,26774,26780,26783,26934,26937,26939,26942,26945,26947],[11,20183,13],{"id":13},[15,20185,20186],{},"前回は、素のWebGLで三角形を描画するまで行いました。",[19,20188],{":items":20189},"[{\"title\":\"WebGLで三角形を描画する\",\"link\":\"/blog/webgl-triangle/\",\"image\":\"/images/blog/webgl-triangle.jpg\",\"description\":\"今回から、ライブラリなどを使わない素のWebGLの解説を行っていきます。目標は、シリーズを通して自作のWebGLライブラリを作っていく方針です。初回は、WebGLで三角形を描画するまでをみていきます。\"}]",[15,20191,20192],{},"今回は、MVP行列について理解を深め、Cameraクラスを作成して、一つの頂点バッファで複数の三角形を描画する方法を解説します。",[15,20194,27],{},[29,20196,34,20198,34,20216],{"className":20197,"href":33},[32],[36,20199,40,20201,40,20204,40,20207,34],{"className":20200},[39],[36,20202,45],{"className":20203},[44],[36,20205,50],{"className":20206},[49],[36,20208,55,20210,55,20213,40],{"className":20209},[54],[57,20211],{"className":20212,"src":61,"alt":62,"width":63,"height":63},[60],[65,20214,69],{"className":20215},[68],[36,20217,55,20219,40],{"className":20218},[73],[57,20220],{"className":20221,"src":78,"alt":45},[77],[15,20223,16192,20224,16198],{},[29,20225,16197],{"href":20226,"rel":20227,"target":3049},"https://github.com/nono-k/webgl-study-note/commit/bf5d8cb22c8d69ddc4cd4f32c4a0a667dc028d5f",[3048],[20229,20230],"note",{"text":20231},"WebGL JavaScript APIには行列操作を実現する独自のメソッドはありません。一般的にはglMatrixなどの外部ライブラリを導入しますが、このサイトでは学習のためにOGlを参考にした独自の行列演算クラスを使用しています。使い方を詳しくは解説しませんが、コードは\u003Ca href=\"https://github.com/nono-k/webgl-study-note/tree/main/src/lib/webgl/math\" target=\"_blank\">ここ\u003C/a>のmathフォルダで公開しているので確認してみてください",[11,20233,20234],{"id":20234},"前回のクリップ空間での描画の問題点",[15,20236,20237,20238,20241],{},"前回は、",[124,20239,20240],{},"vertex shader","で下記のようにクリップ空間(-1~1)で三角形を描画していました。",[129,20243,20246],{"className":131,"code":20244,"filename":20245,"language":134,"meta":135,"style":135},"gl_Position = vec4(position, 1.0);\n","index.vert",[124,20247,20248],{"__ignoreMap":135},[65,20249,20250,20252,20254,20256,20258,20260,20262,20264,20266],{"class":140,"line":141},[65,20251,11281],{"class":144},[65,20253,218],{"class":168},[65,20255,186],{"class":200},[65,20257,224],{"class":204},[65,20259,3610],{"class":144},[65,20261,230],{"class":154},[65,20263,3507],{"class":793},[65,20265,235],{"class":204},[65,20267,155],{"class":154},[15,20269,20270,20271,20273],{},"この方法では、複数の三角形を描画するたびに、描画する三角形の座標を全部書く必要があります。",[5467,20272],{},"\nまた、カメラもワールドも存在しないため、移動・回転・拡大縮小などの操作もできません。",[15,20275,20276],{},"そこで、MVP行列を使って、これらの問題を解決していきます。",[11,20278,20280],{"id":20279},"mvp行列の役割","MVP行列の役割",[15,20282,20283],{},"MVP行列は、Model（モデル）、View（ビュー）、Projection（投影）の3つの行列を組み合わせたもので、3D空間の座標をスクリーン上に正しく描画するために使用されます。役割としては次のようになります。",[583,20285,20286,20296],{},[586,20287,20288],{},[589,20289,20290,20293],{},[592,20291,20292],{},"行列",[592,20294,20295],{},"役割",[602,20297,20298,20306,20314],{},[589,20299,20300,20303],{},[607,20301,20302],{},"Model",[607,20304,20305],{},"モデルの位置・回転・拡大縮小",[589,20307,20308,20311],{},[607,20309,20310],{},"View",[607,20312,20313],{},"カメラの位置",[589,20315,20316,20319],{},[607,20317,20318],{},"Projection",[607,20320,20321],{},"投影(透視・正射影)",[15,20323,20324],{},"最終的にvertex shaderでは次のようにMVP行列を使って、頂点の座標を変換して描画します。",[129,20326,20328],{"className":131,"code":20327,"filename":20245,"language":134,"meta":135,"style":135},"gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n",[124,20329,20330],{"__ignoreMap":135},[65,20331,20332,20334,20336,20338,20340,20343,20345,20347,20349,20351,20353,20355,20357],{"class":140,"line":141},[65,20333,11281],{"class":144},[65,20335,218],{"class":168},[65,20337,11013],{"class":144},[65,20339,5933],{"class":168},[65,20341,20342],{"class":144}," modelViewMatrix",[65,20344,5933],{"class":168},[65,20346,186],{"class":200},[65,20348,224],{"class":204},[65,20350,3610],{"class":144},[65,20352,230],{"class":154},[65,20354,3507],{"class":793},[65,20356,235],{"class":204},[65,20358,155],{"class":154},[15,20360,20361,20362,20365],{},"この記事では、ModelとViewをまとめて",[124,20363,20364],{},"modelViewMatrix","とします。",[15,20367,20368],{},"実際にWebGL内で頂点の変換をどのように実装するかの流れは次のようになります。",[129,20370,20372],{"className":16211,"code":20371,"language":16214,"meta":135,"style":135},"オブジェクト座標\n ↓\nモデルビュー行列\n ↓\n投影行列\n ↓\ngl.viewport\n ↓\nビューポート座標\n",[124,20373,20374,20379,20384,20389,20393,20398,20402,20407,20411],{"__ignoreMap":135},[65,20375,20376],{"class":140,"line":141},[65,20377,20378],{"class":326},"オブジェクト座標\n",[65,20380,20381],{"class":140,"line":158},[65,20382,20383],{"class":326}," ↓\n",[65,20385,20386],{"class":140,"line":165},[65,20387,20388],{"class":326},"モデルビュー行列\n",[65,20390,20391],{"class":140,"line":180},[65,20392,20383],{"class":326},[65,20394,20395],{"class":140,"line":194},[65,20396,20397],{"class":326},"投影行列\n",[65,20399,20400],{"class":140,"line":211},[65,20401,20383],{"class":326},[65,20403,20404],{"class":140,"line":240},[65,20405,20406],{"class":326},"gl.viewport\n",[65,20408,20409],{"class":140,"line":391},[65,20410,20383],{"class":326},[65,20412,20413],{"class":140,"line":401},[65,20414,20415],{"class":326},"ビューポート座標\n",[89,20417,20418,20425,20431],{},[92,20419,20420,20424],{},[20421,20422,20423],"strong",{},"モデルビュー","行列は先述のとおりモデル変換とビュー変換をひとつにまとめたものです。この行列と頂点座標を掛け合わせることで、ビュー座標が得られます。",[92,20426,20427,20430],{},[20421,20428,20429],{},"投影行列","は投影変換と透視分割をひとつにまとめたものです。適用すると正規化デバイス座標(NDC)が得られます。",[92,20432,20433,20434,20437],{},"最後に",[124,20435,20436],{},"gl.viewport","操作を使用してNDCとビューポート座標を紐づけます。ビューポート座標の原点はcanvasの左下です。",[11,20439,20440],{"id":20440},"複数の三角形を描画",[15,20442,20443],{},[57,20444],{"alt":20440,"src":20445,"title":20440},"https://res.cloudinary.com/dy8ftemi0/image/upload/v1775319162/webgl-multiple-triangle-01_a63hzy.jpg",[3226,20447],{"href":20448},"https://nono-k.github.io/webgl-study-note/webgl/multiple-triangle/",[15,20450,20451,20452,20454,20455,20458],{},"それでは、前回の記事のコードを修正して、複数の三角形を描画していきましょう。",[5467,20453],{},"\nまずは",[124,20456,20457],{},"Transform","クラスを作成していきます。",[1177,20460,20457],{"id":20461},"transform",[15,20463,20464,20466,20467,20469,20470,20472],{},[124,20465,20457],{},"クラスは、オブジェクトの位置・回転・拡大縮小を管理するクラスになります。",[5467,20468],{},"\nまた、シーングラフ(親子関係)も管理しています。",[5467,20471],{},"\nこの記事では、位置だけを使用するので、回転・拡大縮小の機能は後ほど実装します。",[129,20474,20477],{"className":131,"code":20475,"filename":20476,"language":134,"meta":135,"style":135},"import { Mat4 } from '../math/Mat4';\nimport { Vec3 } from '../math/Vec3';\n\nexport class Transform {\n parent: Transform | null = null;\n children: Transform[] = [];\n\n matrix: Mat4;\n worldMatrix: Mat4;\n\n matrixAutoUpdate: boolean;\n worldMatrixNeedsUpdate: boolean;\n\n position: Vec3;\n\n constructor() {\n this.parent = null;\n this.children = [];\n\n this.matrix = new Mat4();\n this.worldMatrix = new Mat4();\n this.matrixAutoUpdate = true;\n this.worldMatrixNeedsUpdate = false;\n\n this.position = new Vec3();\n }\n\n updateMatrixWorld(force?: boolean) {\n if (this.matrixAutoUpdate) this.updateMatrix();\n\n if (this.worldMatrixNeedsUpdate || force) {\n if (this.parent === null) {\n this.worldMatrix.copy(this.matrix);\n } else {\n this.worldMatrix.multiply(this.parent.worldMatrix, this.matrix);\n }\n\n this.worldMatrixNeedsUpdate = false;\n }\n\n for (let i = 0; i \u003C this.children.length; i++) {\n this.children[i].updateMatrixWorld(force);\n }\n }\n\n updateMatrix() {\n this.matrix.identity();\n this.matrix.translate(this.position);\n\n this.worldMatrixNeedsUpdate = true;\n }\n}\n","Transform.ts",[124,20478,20479,20501,20522,20526,20537,20557,20574,20578,20589,20600,20604,20615,20626,20630,20640,20644,20652,20667,20682,20686,20705,20723,20738,20753,20757,20775,20779,20783,20801,20826,20830,20851,20871,20897,20906,20942,20946,20950,20965,20969,20973,21013,21040,21044,21048,21052,21061,21078,21103,21107,21121,21125],{"__ignoreMap":135},[65,20480,20481,20483,20485,20488,20490,20492,20494,20497,20499],{"class":140,"line":141},[65,20482,3251],{"class":154},[65,20484,287],{"class":154},[65,20486,20487],{"class":214}," Mat4",[65,20489,293],{"class":154},[65,20491,296],{"class":154},[65,20493,299],{"class":154},[65,20495,20496],{"class":302},"../math/Mat4",[65,20498,306],{"class":154},[65,20500,155],{"class":154},[65,20502,20503,20505,20507,20509,20511,20513,20515,20518,20520],{"class":140,"line":158},[65,20504,3251],{"class":154},[65,20506,287],{"class":154},[65,20508,5488],{"class":214},[65,20510,293],{"class":154},[65,20512,296],{"class":154},[65,20514,299],{"class":154},[65,20516,20517],{"class":302},"../math/Vec3",[65,20519,306],{"class":154},[65,20521,155],{"class":154},[65,20523,20524],{"class":140,"line":165},[65,20525,162],{"emptyLinePlaceholder":161},[65,20527,20528,20530,20532,20535],{"class":140,"line":180},[65,20529,284],{"class":154},[65,20531,774],{"class":168},[65,20533,20534],{"class":326}," Transform",[65,20536,418],{"class":154},[65,20538,20539,20542,20544,20546,20548,20551,20553,20555],{"class":140,"line":194},[65,20540,20541],{"class":144}," parent",[65,20543,797],{"class":168},[65,20545,20534],{"class":326},[65,20547,11880],{"class":168},[65,20549,20550],{"class":340}," null",[65,20552,218],{"class":168},[65,20554,20550],{"class":793},[65,20556,155],{"class":154},[65,20558,20559,20562,20564,20566,20568,20570,20572],{"class":140,"line":211},[65,20560,20561],{"class":144}," children",[65,20563,797],{"class":168},[65,20565,20534],{"class":326},[65,20567,19326],{"class":204},[65,20569,6252],{"class":168},[65,20571,19331],{"class":204},[65,20573,155],{"class":154},[65,20575,20576],{"class":140,"line":240},[65,20577,162],{"emptyLinePlaceholder":161},[65,20579,20580,20583,20585,20587],{"class":140,"line":391},[65,20581,20582],{"class":144}," matrix",[65,20584,797],{"class":168},[65,20586,20487],{"class":326},[65,20588,155],{"class":154},[65,20590,20591,20594,20596,20598],{"class":140,"line":401},[65,20592,20593],{"class":144}," worldMatrix",[65,20595,797],{"class":168},[65,20597,20487],{"class":326},[65,20599,155],{"class":154},[65,20601,20602],{"class":140,"line":406},[65,20603,162],{"emptyLinePlaceholder":161},[65,20605,20606,20609,20611,20613],{"class":140,"line":421},[65,20607,20608],{"class":144}," matrixAutoUpdate",[65,20610,797],{"class":168},[65,20612,479],{"class":340},[65,20614,155],{"class":154},[65,20616,20617,20620,20622,20624],{"class":140,"line":435},[65,20618,20619],{"class":144}," worldMatrixNeedsUpdate",[65,20621,797],{"class":168},[65,20623,479],{"class":340},[65,20625,155],{"class":154},[65,20627,20628],{"class":140,"line":447},[65,20629,162],{"emptyLinePlaceholder":161},[65,20631,20632,20634,20636,20638],{"class":140,"line":459},[65,20633,8393],{"class":144},[65,20635,797],{"class":168},[65,20637,5488],{"class":326},[65,20639,155],{"class":154},[65,20641,20642],{"class":140,"line":471},[65,20643,162],{"emptyLinePlaceholder":161},[65,20645,20646,20648,20650],{"class":140,"line":63},[65,20647,788],{"class":168},[65,20649,1269],{"class":154},[65,20651,418],{"class":154},[65,20653,20654,20656,20658,20661,20663,20665],{"class":140,"line":495},[65,20655,831],{"class":830},[65,20657,834],{"class":154},[65,20659,20660],{"class":214},"parent",[65,20662,218],{"class":168},[65,20664,20550],{"class":793},[65,20666,155],{"class":154},[65,20668,20669,20671,20673,20676,20678,20680],{"class":140,"line":507},[65,20670,831],{"class":830},[65,20672,834],{"class":154},[65,20674,20675],{"class":214},"children",[65,20677,218],{"class":168},[65,20679,19331],{"class":204},[65,20681,155],{"class":154},[65,20683,20684],{"class":140,"line":519},[65,20685,162],{"emptyLinePlaceholder":161},[65,20687,20688,20690,20692,20695,20697,20699,20701,20703],{"class":140,"line":531},[65,20689,831],{"class":830},[65,20691,834],{"class":154},[65,20693,20694],{"class":214},"matrix",[65,20696,218],{"class":168},[65,20698,1776],{"class":168},[65,20700,20487],{"class":200},[65,20702,1269],{"class":204},[65,20704,155],{"class":154},[65,20706,20707,20709,20711,20713,20715,20717,20719,20721],{"class":140,"line":543},[65,20708,831],{"class":830},[65,20710,834],{"class":154},[65,20712,10060],{"class":214},[65,20714,218],{"class":168},[65,20716,1776],{"class":168},[65,20718,20487],{"class":200},[65,20720,1269],{"class":204},[65,20722,155],{"class":154},[65,20724,20725,20727,20729,20732,20734,20736],{"class":140,"line":555},[65,20726,831],{"class":830},[65,20728,834],{"class":154},[65,20730,20731],{"class":214},"matrixAutoUpdate",[65,20733,218],{"class":168},[65,20735,1016],{"class":793},[65,20737,155],{"class":154},[65,20739,20740,20742,20744,20747,20749,20751],{"class":140,"line":567},[65,20741,831],{"class":830},[65,20743,834],{"class":154},[65,20745,20746],{"class":214},"worldMatrixNeedsUpdate",[65,20748,218],{"class":168},[65,20750,1039],{"class":793},[65,20752,155],{"class":154},[65,20754,20755],{"class":140,"line":3757},[65,20756,162],{"emptyLinePlaceholder":161},[65,20758,20759,20761,20763,20765,20767,20769,20771,20773],{"class":140,"line":3787},[65,20760,831],{"class":830},[65,20762,834],{"class":154},[65,20764,3610],{"class":214},[65,20766,218],{"class":168},[65,20768,1776],{"class":168},[65,20770,5488],{"class":200},[65,20772,1269],{"class":204},[65,20774,155],{"class":154},[65,20776,20777],{"class":140,"line":3792},[65,20778,1171],{"class":154},[65,20780,20781],{"class":140,"line":3814},[65,20782,162],{"emptyLinePlaceholder":161},[65,20784,20785,20788,20790,20793,20795,20797,20799],{"class":140,"line":3823},[65,20786,20787],{"class":200}," updateMatrixWorld",[65,20789,224],{"class":154},[65,20791,20792],{"class":793},"force",[65,20794,427],{"class":168},[65,20796,479],{"class":340},[65,20798,235],{"class":154},[65,20800,418],{"class":154},[65,20802,20803,20805,20807,20809,20811,20813,20815,20817,20819,20822,20824],{"class":140,"line":3831},[65,20804,3105],{"class":154},[65,20806,1696],{"class":204},[65,20808,2004],{"class":830},[65,20810,834],{"class":154},[65,20812,20731],{"class":214},[65,20814,1713],{"class":204},[65,20816,2004],{"class":830},[65,20818,834],{"class":154},[65,20820,20821],{"class":200},"updateMatrix",[65,20823,1269],{"class":204},[65,20825,155],{"class":154},[65,20827,20828],{"class":140,"line":3841},[65,20829,162],{"emptyLinePlaceholder":161},[65,20831,20832,20834,20836,20838,20840,20842,20844,20847,20849],{"class":140,"line":3861},[65,20833,3105],{"class":154},[65,20835,1696],{"class":204},[65,20837,2004],{"class":830},[65,20839,834],{"class":154},[65,20841,20746],{"class":214},[65,20843,2269],{"class":168},[65,20845,20846],{"class":214}," force",[65,20848,1713],{"class":204},[65,20850,208],{"class":154},[65,20852,20853,20855,20857,20859,20861,20863,20865,20867,20869],{"class":140,"line":3867},[65,20854,17840],{"class":154},[65,20856,1696],{"class":204},[65,20858,2004],{"class":830},[65,20860,834],{"class":154},[65,20862,20660],{"class":214},[65,20864,1704],{"class":168},[65,20866,20550],{"class":793},[65,20868,1713],{"class":204},[65,20870,208],{"class":154},[65,20872,20873,20876,20878,20880,20882,20885,20887,20889,20891,20893,20895],{"class":140,"line":3876},[65,20874,20875],{"class":830}," this",[65,20877,834],{"class":154},[65,20879,10060],{"class":214},[65,20881,834],{"class":154},[65,20883,20884],{"class":200},"copy",[65,20886,224],{"class":204},[65,20888,2004],{"class":830},[65,20890,834],{"class":154},[65,20892,20694],{"class":214},[65,20894,235],{"class":204},[65,20896,155],{"class":154},[65,20898,20899,20902,20904],{"class":140,"line":3881},[65,20900,20901],{"class":154}," }",[65,20903,2115],{"class":154},[65,20905,418],{"class":154},[65,20907,20908,20910,20912,20914,20916,20918,20920,20922,20924,20926,20928,20930,20932,20934,20936,20938,20940],{"class":140,"line":3920},[65,20909,20875],{"class":830},[65,20911,834],{"class":154},[65,20913,10060],{"class":214},[65,20915,834],{"class":154},[65,20917,12379],{"class":200},[65,20919,224],{"class":204},[65,20921,2004],{"class":830},[65,20923,834],{"class":154},[65,20925,20660],{"class":214},[65,20927,834],{"class":154},[65,20929,10060],{"class":214},[65,20931,230],{"class":154},[65,20933,1434],{"class":830},[65,20935,834],{"class":154},[65,20937,20694],{"class":214},[65,20939,235],{"class":204},[65,20941,155],{"class":154},[65,20943,20944],{"class":140,"line":3954},[65,20945,6413],{"class":154},[65,20947,20948],{"class":140,"line":3974},[65,20949,162],{"emptyLinePlaceholder":161},[65,20951,20952,20955,20957,20959,20961,20963],{"class":140,"line":3979},[65,20953,20954],{"class":830}," this",[65,20956,834],{"class":154},[65,20958,20746],{"class":214},[65,20960,218],{"class":168},[65,20962,1039],{"class":793},[65,20964,155],{"class":154},[65,20966,20967],{"class":140,"line":4031},[65,20968,3204],{"class":154},[65,20970,20971],{"class":140,"line":4036},[65,20972,162],{"emptyLinePlaceholder":161},[65,20974,20975,20977,20979,20981,20983,20985,20987,20989,20991,20993,20995,20997,20999,21001,21003,21005,21007,21009,21011],{"class":140,"line":4070},[65,20976,5990],{"class":154},[65,20978,1696],{"class":204},[65,20980,5995],{"class":168},[65,20982,5998],{"class":214},[65,20984,218],{"class":168},[65,20986,1142],{"class":793},[65,20988,6005],{"class":154},[65,20990,5998],{"class":214},[65,20992,6223],{"class":168},[65,20994,1434],{"class":830},[65,20996,834],{"class":154},[65,20998,20675],{"class":214},[65,21000,834],{"class":154},[65,21002,9685],{"class":204},[65,21004,6005],{"class":154},[65,21006,5998],{"class":214},[65,21008,6019],{"class":168},[65,21010,1713],{"class":204},[65,21012,208],{"class":154},[65,21014,21015,21017,21019,21021,21023,21025,21027,21029,21032,21034,21036,21038],{"class":140,"line":4086},[65,21016,20954],{"class":830},[65,21018,834],{"class":154},[65,21020,20675],{"class":214},[65,21022,6243],{"class":204},[65,21024,6246],{"class":214},[65,21026,6106],{"class":204},[65,21028,834],{"class":154},[65,21030,21031],{"class":200},"updateMatrixWorld",[65,21033,224],{"class":204},[65,21035,20792],{"class":214},[65,21037,235],{"class":204},[65,21039,155],{"class":154},[65,21041,21042],{"class":140,"line":4102},[65,21043,3204],{"class":154},[65,21045,21046],{"class":140,"line":4118},[65,21047,1171],{"class":154},[65,21049,21050],{"class":140,"line":4149},[65,21051,162],{"emptyLinePlaceholder":161},[65,21053,21054,21057,21059],{"class":140,"line":4163},[65,21055,21056],{"class":200}," updateMatrix",[65,21058,1269],{"class":154},[65,21060,418],{"class":154},[65,21062,21063,21065,21067,21069,21071,21074,21076],{"class":140,"line":4168},[65,21064,831],{"class":830},[65,21066,834],{"class":154},[65,21068,20694],{"class":214},[65,21070,834],{"class":154},[65,21072,21073],{"class":200},"identity",[65,21075,1269],{"class":204},[65,21077,155],{"class":154},[65,21079,21080,21082,21084,21086,21088,21091,21093,21095,21097,21099,21101],{"class":140,"line":4194},[65,21081,831],{"class":830},[65,21083,834],{"class":154},[65,21085,20694],{"class":214},[65,21087,834],{"class":154},[65,21089,21090],{"class":200},"translate",[65,21092,224],{"class":204},[65,21094,2004],{"class":830},[65,21096,834],{"class":154},[65,21098,3610],{"class":214},[65,21100,235],{"class":204},[65,21102,155],{"class":154},[65,21104,21105],{"class":140,"line":4199},[65,21106,162],{"emptyLinePlaceholder":161},[65,21108,21109,21111,21113,21115,21117,21119],{"class":140,"line":4221},[65,21110,831],{"class":830},[65,21112,834],{"class":154},[65,21114,20746],{"class":214},[65,21116,218],{"class":168},[65,21118,1016],{"class":793},[65,21120,155],{"class":154},[65,21122,21123],{"class":140,"line":4228},[65,21124,1171],{"class":154},[65,21126,21127],{"class":140,"line":4235},[65,21128,243],{"class":154},[2418,21130,21131],{"id":21131},"行列関連",[129,21133,21135],{"className":131,"code":21134,"language":134,"meta":135,"style":135},"matrix: Mat4;\nworldMatrix: Mat4;\n",[124,21136,21137,21147],{"__ignoreMap":135},[65,21138,21139,21141,21143,21145],{"class":140,"line":141},[65,21140,20694],{"class":326},[65,21142,797],{"class":154},[65,21144,20487],{"class":144},[65,21146,155],{"class":154},[65,21148,21149,21151,21153,21155],{"class":140,"line":158},[65,21150,10060],{"class":326},[65,21152,797],{"class":154},[65,21154,20487],{"class":144},[65,21156,155],{"class":154},[15,21158,21159,21161,21162,21164],{},[124,21160,20694],{},"はローカル空間での変換行列になります。",[124,21163,10060],{},"はワールド空間での変換行列になり親の影響込みの最終的な変換行列になります。",[2418,21166,21167],{"id":21167},"更新制御フラグ",[129,21169,21171],{"className":131,"code":21170,"language":134,"meta":135,"style":135},"matrixAutoUpdate: boolean;\nworldMatrixNeedsUpdate: boolean;\n",[124,21172,21173,21183],{"__ignoreMap":135},[65,21174,21175,21177,21179,21181],{"class":140,"line":141},[65,21176,20731],{"class":326},[65,21178,797],{"class":154},[65,21180,479],{"class":144},[65,21182,155],{"class":154},[65,21184,21185,21187,21189,21191],{"class":140,"line":158},[65,21186,20746],{"class":326},[65,21188,797],{"class":154},[65,21190,479],{"class":144},[65,21192,155],{"class":154},[15,21194,21195,21197,21198,21200,21201,21203,21204,21206],{},[124,21196,20731],{},"は、",[124,21199,667],{},"の場合、毎回",[124,21202,20821],{},"が呼び出されるようになります。",[124,21205,692],{},"の場合は、手動制御になり最適化用に使用します。",[15,21208,21209,21211],{},[124,21210,20746],{},"は、再計算が必要化のフラグになります。無駄な計算を防ぐためのキャッシュの役割になります。",[2418,21213,21215],{"id":21214},"updatematrixの役割","updateMatrixの役割",[129,21217,21219],{"className":131,"code":21218,"filename":20821,"language":134,"meta":135,"style":135},"updateMatrix() {\n this.matrix.identity();\n this.matrix.translate(this.position);\n\n this.worldMatrixNeedsUpdate = true;\n}\n",[124,21220,21221,21229,21245,21269,21273,21287],{"__ignoreMap":135},[65,21222,21223,21225,21227],{"class":140,"line":141},[65,21224,20821],{"class":200},[65,21226,205],{"class":204},[65,21228,208],{"class":154},[65,21230,21231,21233,21235,21237,21239,21241,21243],{"class":140,"line":158},[65,21232,1720],{"class":830},[65,21234,834],{"class":154},[65,21236,20694],{"class":214},[65,21238,834],{"class":154},[65,21240,21073],{"class":200},[65,21242,1269],{"class":204},[65,21244,155],{"class":154},[65,21246,21247,21249,21251,21253,21255,21257,21259,21261,21263,21265,21267],{"class":140,"line":165},[65,21248,1720],{"class":830},[65,21250,834],{"class":154},[65,21252,20694],{"class":214},[65,21254,834],{"class":154},[65,21256,21090],{"class":200},[65,21258,224],{"class":204},[65,21260,2004],{"class":830},[65,21262,834],{"class":154},[65,21264,3610],{"class":214},[65,21266,235],{"class":204},[65,21268,155],{"class":154},[65,21270,21271],{"class":140,"line":180},[65,21272,162],{"emptyLinePlaceholder":161},[65,21274,21275,21277,21279,21281,21283,21285],{"class":140,"line":194},[65,21276,1720],{"class":830},[65,21278,834],{"class":154},[65,21280,20746],{"class":214},[65,21282,218],{"class":168},[65,21284,1016],{"class":793},[65,21286,155],{"class":154},[65,21288,21289],{"class":140,"line":211},[65,21290,243],{"class":154},[15,21292,21293,21295,21296,21298,21299,21301],{},[124,21294,20821],{},"は、ローカル空間での変換行列を更新するメソッドになります。流れとしては、",[124,21297,21073],{},"で単位行列に初期化してから、",[124,21300,21090],{},"で平行移動を行い、位置を反映させています。最後にワールド更新のフラグをtrueにします。",[2418,21303,21305],{"id":21304},"updatematrixworldの役割","updateMatrixWorldの役割",[129,21307,21309],{"className":131,"code":21308,"filename":21031,"language":134,"meta":135,"style":135},"updateMatrixWorld(force?: boolean) {\n if (this.matrixAutoUpdate) this.updateMatrix();\n\n if (this.worldMatrixNeedsUpdate || force) {\n if (this.parent === null) {\n this.worldMatrix.copy(this.matrix);\n } else {\n this.worldMatrix.multiply(this.parent.worldMatrix, this.matrix);\n }\n\n this.worldMatrixNeedsUpdate = false;\n }\n\n for (let i = 0; i \u003C this.children.length; i++) {\n this.children[i].updateMatrixWorld(force);\n }\n}\n",[124,21310,21311,21327,21351,21355,21375,21395,21419,21427,21463,21467,21471,21485,21489,21493,21533,21559,21563],{"__ignoreMap":135},[65,21312,21313,21315,21317,21319,21321,21323,21325],{"class":140,"line":141},[65,21314,21031],{"class":200},[65,21316,224],{"class":204},[65,21318,20792],{"class":144},[65,21320,427],{"class":168},[65,21322,479],{"class":144},[65,21324,1713],{"class":204},[65,21326,208],{"class":154},[65,21328,21329,21331,21333,21335,21337,21339,21341,21343,21345,21347,21349],{"class":140,"line":158},[65,21330,2064],{"class":154},[65,21332,1696],{"class":204},[65,21334,2004],{"class":830},[65,21336,834],{"class":154},[65,21338,20731],{"class":214},[65,21340,1713],{"class":204},[65,21342,2004],{"class":830},[65,21344,834],{"class":154},[65,21346,20821],{"class":200},[65,21348,1269],{"class":204},[65,21350,155],{"class":154},[65,21352,21353],{"class":140,"line":165},[65,21354,162],{"emptyLinePlaceholder":161},[65,21356,21357,21359,21361,21363,21365,21367,21369,21371,21373],{"class":140,"line":180},[65,21358,2064],{"class":154},[65,21360,1696],{"class":204},[65,21362,2004],{"class":830},[65,21364,834],{"class":154},[65,21366,20746],{"class":214},[65,21368,2269],{"class":168},[65,21370,20846],{"class":214},[65,21372,1713],{"class":204},[65,21374,208],{"class":154},[65,21376,21377,21379,21381,21383,21385,21387,21389,21391,21393],{"class":140,"line":194},[65,21378,3105],{"class":154},[65,21380,1696],{"class":204},[65,21382,2004],{"class":830},[65,21384,834],{"class":154},[65,21386,20660],{"class":214},[65,21388,1704],{"class":168},[65,21390,20550],{"class":793},[65,21392,1713],{"class":204},[65,21394,208],{"class":154},[65,21396,21397,21399,21401,21403,21405,21407,21409,21411,21413,21415,21417],{"class":140,"line":211},[65,21398,20954],{"class":830},[65,21400,834],{"class":154},[65,21402,10060],{"class":214},[65,21404,834],{"class":154},[65,21406,20884],{"class":200},[65,21408,224],{"class":204},[65,21410,2004],{"class":830},[65,21412,834],{"class":154},[65,21414,20694],{"class":214},[65,21416,235],{"class":204},[65,21418,155],{"class":154},[65,21420,21421,21423,21425],{"class":140,"line":240},[65,21422,6341],{"class":154},[65,21424,2115],{"class":154},[65,21426,418],{"class":154},[65,21428,21429,21431,21433,21435,21437,21439,21441,21443,21445,21447,21449,21451,21453,21455,21457,21459,21461],{"class":140,"line":391},[65,21430,20954],{"class":830},[65,21432,834],{"class":154},[65,21434,10060],{"class":214},[65,21436,834],{"class":154},[65,21438,12379],{"class":200},[65,21440,224],{"class":204},[65,21442,2004],{"class":830},[65,21444,834],{"class":154},[65,21446,20660],{"class":214},[65,21448,834],{"class":154},[65,21450,10060],{"class":214},[65,21452,230],{"class":154},[65,21454,1434],{"class":830},[65,21456,834],{"class":154},[65,21458,20694],{"class":214},[65,21460,235],{"class":204},[65,21462,155],{"class":154},[65,21464,21465],{"class":140,"line":401},[65,21466,3204],{"class":154},[65,21468,21469],{"class":140,"line":406},[65,21470,162],{"emptyLinePlaceholder":161},[65,21472,21473,21475,21477,21479,21481,21483],{"class":140,"line":421},[65,21474,831],{"class":830},[65,21476,834],{"class":154},[65,21478,20746],{"class":214},[65,21480,218],{"class":168},[65,21482,1039],{"class":793},[65,21484,155],{"class":154},[65,21486,21487],{"class":140,"line":435},[65,21488,1171],{"class":154},[65,21490,21491],{"class":140,"line":447},[65,21492,162],{"emptyLinePlaceholder":161},[65,21494,21495,21497,21499,21501,21503,21505,21507,21509,21511,21513,21515,21517,21519,21521,21523,21525,21527,21529,21531],{"class":140,"line":459},[65,21496,17470],{"class":154},[65,21498,1696],{"class":204},[65,21500,5995],{"class":168},[65,21502,5998],{"class":214},[65,21504,218],{"class":168},[65,21506,1142],{"class":793},[65,21508,6005],{"class":154},[65,21510,5998],{"class":214},[65,21512,6223],{"class":168},[65,21514,1434],{"class":830},[65,21516,834],{"class":154},[65,21518,20675],{"class":214},[65,21520,834],{"class":154},[65,21522,9685],{"class":204},[65,21524,6005],{"class":154},[65,21526,5998],{"class":214},[65,21528,6019],{"class":168},[65,21530,1713],{"class":204},[65,21532,208],{"class":154},[65,21534,21535,21537,21539,21541,21543,21545,21547,21549,21551,21553,21555,21557],{"class":140,"line":471},[65,21536,831],{"class":830},[65,21538,834],{"class":154},[65,21540,20675],{"class":214},[65,21542,6243],{"class":204},[65,21544,6246],{"class":214},[65,21546,6106],{"class":204},[65,21548,834],{"class":154},[65,21550,21031],{"class":200},[65,21552,224],{"class":204},[65,21554,20792],{"class":214},[65,21556,235],{"class":204},[65,21558,155],{"class":154},[65,21560,21561],{"class":140,"line":63},[65,21562,1171],{"class":154},[65,21564,21565],{"class":140,"line":495},[65,21566,243],{"class":154},[21568,21569,21571],"h5",{"id":21570},"ステップ1ローカル更新","ステップ1：ローカル更新",[129,21573,21575],{"className":131,"code":21574,"language":134,"meta":135,"style":135},"if (this.matrixAutoUpdate) this.updateMatrix();\n",[124,21576,21577],{"__ignoreMap":135},[65,21578,21579,21581,21583,21585,21587,21589,21591,21593,21595,21597,21599],{"class":140,"line":141},[65,21580,1693],{"class":154},[65,21582,1696],{"class":204},[65,21584,2004],{"class":830},[65,21586,834],{"class":154},[65,21588,20731],{"class":144},[65,21590,1713],{"class":204},[65,21592,2004],{"class":830},[65,21594,834],{"class":154},[65,21596,20821],{"class":200},[65,21598,1269],{"class":204},[65,21600,155],{"class":154},[15,21602,21603,21605],{},[124,21604,20731],{},"の自動更新が有効の場合は、毎回ローカルの変換行列を更新します。",[21568,21607,21609],{"id":21608},"ステップ2ワールド行列の更新判定","ステップ2：ワールド行列の更新判定",[129,21611,21613],{"className":131,"code":21612,"language":134,"meta":135,"style":135},"if (this.worldMatrixNeedsUpdate || force)\n",[124,21614,21615],{"__ignoreMap":135},[65,21616,21617,21619,21621,21623,21625,21627,21629,21631],{"class":140,"line":141},[65,21618,1693],{"class":154},[65,21620,1696],{"class":204},[65,21622,2004],{"class":830},[65,21624,834],{"class":154},[65,21626,20746],{"class":144},[65,21628,2269],{"class":168},[65,21630,20846],{"class":144},[65,21632,12359],{"class":204},[15,21634,21635,21636,21638],{},"必要な場合のみワールド行列を更新します。",[124,21637,20792],{},"は強制的に更新するためのフラグになります。",[21568,21640,21642],{"id":21641},"ステップ3親との合成","ステップ3：親との合成",[129,21644,21647],{"className":131,"code":21645,"filename":21646,"language":134,"meta":135,"style":135},"this.worldMatrix.copy(this.matrix);\n","parentがいない場合(ルート)",[124,21648,21649],{"__ignoreMap":135},[65,21650,21651,21653,21655,21657,21659,21661,21663,21665,21667,21669,21671],{"class":140,"line":141},[65,21652,2004],{"class":830},[65,21654,834],{"class":154},[65,21656,10060],{"class":144},[65,21658,834],{"class":154},[65,21660,20884],{"class":200},[65,21662,224],{"class":204},[65,21664,2004],{"class":830},[65,21666,834],{"class":154},[65,21668,20694],{"class":144},[65,21670,235],{"class":204},[65,21672,155],{"class":154},[15,21674,21675],{},"parent(親)がいない場合(ルート)は、ローカル行列をワールド行列にコピーします。",[129,21677,21680],{"className":131,"code":21678,"filename":21679,"language":134,"meta":135,"style":135},"this.worldMatrix.multiply(this.parent.worldMatrix, this.matrix);\n","parentがいる場合",[124,21681,21682],{"__ignoreMap":135},[65,21683,21684,21686,21688,21690,21692,21694,21696,21698,21700,21702,21704,21706,21708,21710,21712,21714,21716],{"class":140,"line":141},[65,21685,2004],{"class":830},[65,21687,834],{"class":154},[65,21689,10060],{"class":144},[65,21691,834],{"class":154},[65,21693,12379],{"class":200},[65,21695,224],{"class":204},[65,21697,2004],{"class":830},[65,21699,834],{"class":154},[65,21701,20660],{"class":144},[65,21703,834],{"class":154},[65,21705,10060],{"class":144},[65,21707,230],{"class":154},[65,21709,1434],{"class":830},[65,21711,834],{"class":154},[65,21713,20694],{"class":144},[65,21715,235],{"class":204},[65,21717,155],{"class":154},[15,21719,21720],{},"parent(親)がいる場合は、親のワールド行列とローカル行列を掛け合わせてワールド行列を更新します。",[21568,21722,21724],{"id":21723},"ステップ4子ノードへの伝播","ステップ4：子ノードへの伝播",[129,21726,21728],{"className":131,"code":21727,"language":134,"meta":135,"style":135},"for (let i = 0; i \u003C this.children.length; i++) {\n this.children[i].updateMatrixWorld(force);\n}\n",[124,21729,21730,21770,21796],{"__ignoreMap":135},[65,21731,21732,21734,21736,21738,21740,21742,21744,21746,21748,21750,21752,21754,21756,21758,21760,21762,21764,21766,21768],{"class":140,"line":141},[65,21733,6643],{"class":154},[65,21735,1696],{"class":204},[65,21737,5995],{"class":168},[65,21739,5998],{"class":144},[65,21741,218],{"class":168},[65,21743,1142],{"class":793},[65,21745,6005],{"class":154},[65,21747,5998],{"class":144},[65,21749,6223],{"class":168},[65,21751,1434],{"class":830},[65,21753,834],{"class":154},[65,21755,20675],{"class":144},[65,21757,834],{"class":154},[65,21759,9685],{"class":204},[65,21761,6005],{"class":154},[65,21763,5998],{"class":144},[65,21765,6019],{"class":168},[65,21767,1713],{"class":204},[65,21769,208],{"class":154},[65,21771,21772,21774,21776,21778,21780,21782,21784,21786,21788,21790,21792,21794],{"class":140,"line":158},[65,21773,1720],{"class":830},[65,21775,834],{"class":154},[65,21777,20675],{"class":214},[65,21779,6243],{"class":204},[65,21781,6246],{"class":214},[65,21783,6106],{"class":204},[65,21785,834],{"class":154},[65,21787,21031],{"class":200},[65,21789,224],{"class":204},[65,21791,20792],{"class":214},[65,21793,235],{"class":204},[65,21795,155],{"class":154},[65,21797,21798],{"class":140,"line":165},[65,21799,243],{"class":154},[15,21801,21802,21803,21805,21807],{},"最後に、再帰的に子ノードのワールド行列も更新します。",[5467,21804],{},[124,21806,20457],{},"クラスの変更は以上になります。",[15,21809,21810],{},"続いては、Meshクラスを修正していきます。",[1177,21812,19542],{"id":21813},"mesh",[15,21815,21816,21817,21819,21820,21823],{},"まずは、",[124,21818,19542],{},"クラスに",[124,21821,21822],{},"Scene","クラスを継承させます。",[129,21825,21827],{"className":131,"code":21826,"filename":19550,"language":134,"meta":135,"style":135},"import { Scene } from './Scene';\n\nexport class Mesh extends Scene\n",[124,21828,21829,21850,21854],{"__ignoreMap":135},[65,21830,21831,21833,21835,21837,21839,21841,21843,21846,21848],{"class":140,"line":141},[65,21832,3251],{"class":154},[65,21834,287],{"class":154},[65,21836,3326],{"class":214},[65,21838,293],{"class":154},[65,21840,296],{"class":154},[65,21842,299],{"class":154},[65,21844,21845],{"class":302},"./Scene",[65,21847,306],{"class":154},[65,21849,155],{"class":154},[65,21851,21852],{"class":140,"line":158},[65,21853,162],{"emptyLinePlaceholder":161},[65,21855,21856,21858,21860,21862,21864],{"class":140,"line":165},[65,21857,284],{"class":154},[65,21859,774],{"class":168},[65,21861,3302],{"class":326},[65,21863,5810],{"class":168},[65,21865,21866],{"class":302}," Scene\n",[15,21868,21869],{},"処理の流れとしては次のようになってます。",[129,21871,21873],{"className":16211,"code":21872,"language":16214,"meta":135,"style":135},"Transform（座標・行列）\n ↓\nScene（親子構造）\n ↓\nMesh（描画）\n",[124,21874,21875,21880,21885,21890,21894],{"__ignoreMap":135},[65,21876,21877],{"class":140,"line":141},[65,21878,21879],{"class":326},"Transform（座標・行列）\n",[65,21881,21882],{"class":140,"line":158},[65,21883,21884],{"class":326}," ↓\n",[65,21886,21887],{"class":140,"line":165},[65,21888,21889],{"class":326},"Scene（親子構造）\n",[65,21891,21892],{"class":140,"line":180},[65,21893,21884],{"class":326},[65,21895,21896],{"class":140,"line":194},[65,21897,21898],{"class":326},"Mesh（描画）\n",[15,21900,21901],{},"Meshクラスはすでに、ローカル変換とワールド行列、親子構造を持っているので、あとは描画の部分を実装していくだけになります。",[15,21903,21904],{},"全体のコードは次のようになります。",[129,21906,21908],{"className":131,"code":21907,"filename":19550,"language":134,"meta":135,"style":135},"import type { Camera } from './Camera';\nimport type { Geometry } from './Geometry';\nimport type { Program } from './Program';\n\nimport { Mat4 } from '../math/Mat4';\nimport { Scene } from './Scene';\n\ntype MeshRenderCallback = (renderInfo: { mesh: Mesh; camera?: Camera }) => void;\n\nexport class Mesh extends Scene {\n gl: WebGL2RenderingContext;\n geometry: Geometry;\n program: Program;\n\n modelViewMatrix: Mat4;\n\n constructor(gl: WebGL2RenderingContext, { geometry, program }: { geometry: Geometry; program: Program }) {\n super();\n this.gl = gl;\n this.geometry = geometry;\n this.program = program;\n\n this.modelViewMatrix = new Mat4();\n }\n\n draw({ camera }: { camera?: Camera }) {\n const program = this.program;\n const geometry = this.geometry;\n const gl = this.gl;\n\n if (camera) {\n if (!program.uniforms.modelMatrix) {\n Object.assign(program.uniforms, {\n modelMatrix: { value: null },\n viewMatrix: { value: null },\n modelViewMatrix: { value: null },\n projectionMatrix: { value: null },\n cameraPosition: { value: null },\n });\n }\n\n program.uniforms.projectionMatrix.value = camera.projectionMatrix;\n program.uniforms.cameraPosition.value = camera.worldPosition;\n program.uniforms.viewMatrix.value = camera.viewMatrix;\n this.modelViewMatrix.multiply(camera.viewMatrix, this.worldMatrix);\n program.uniforms.modelMatrix.value = this.worldMatrix;\n program.uniforms.modelViewMatrix.value = this.modelViewMatrix;\n }\n\n program.use();\n geometry.bind(program);\n gl.drawElements(gl.TRIANGLES, geometry.indexCount, gl.UNSIGNED_SHORT, 0);\n geometry.unbind();\n }\n}\n",[124,21909,21910,21933,21956,21979,21983,22003,22023,22027,22069,22073,22087,22097,22108,22119,22123,22134,22138,22184,22192,22206,22220,22235,22239,22257,22261,22265,22289,22305,22321,22337,22341,22353,22377,22398,22415,22432,22449,22466,22483,22492,22496,22500,22528,22556,22583,22615,22641,22667,22671,22675,22689,22706,22746,22759,22763],{"__ignoreMap":135},[65,21911,21912,21914,21916,21918,21920,21922,21924,21926,21929,21931],{"class":140,"line":141},[65,21913,3251],{"class":154},[65,21915,323],{"class":154},[65,21917,287],{"class":154},[65,21919,3297],{"class":214},[65,21921,293],{"class":154},[65,21923,296],{"class":154},[65,21925,299],{"class":154},[65,21927,21928],{"class":302},"./Camera",[65,21930,306],{"class":154},[65,21932,155],{"class":154},[65,21934,21935,21937,21939,21941,21943,21945,21947,21949,21952,21954],{"class":140,"line":158},[65,21936,3251],{"class":154},[65,21938,323],{"class":154},[65,21940,287],{"class":154},[65,21942,5645],{"class":214},[65,21944,293],{"class":154},[65,21946,296],{"class":154},[65,21948,299],{"class":154},[65,21950,21951],{"class":302},"./Geometry",[65,21953,306],{"class":154},[65,21955,155],{"class":154},[65,21957,21958,21960,21962,21964,21966,21968,21970,21972,21975,21977],{"class":140,"line":165},[65,21959,3251],{"class":154},[65,21961,323],{"class":154},[65,21963,287],{"class":154},[65,21965,3081],{"class":214},[65,21967,293],{"class":154},[65,21969,296],{"class":154},[65,21971,299],{"class":154},[65,21973,21974],{"class":302},"./Program",[65,21976,306],{"class":154},[65,21978,155],{"class":154},[65,21980,21981],{"class":140,"line":180},[65,21982,162],{"emptyLinePlaceholder":161},[65,21984,21985,21987,21989,21991,21993,21995,21997,21999,22001],{"class":140,"line":194},[65,21986,3251],{"class":154},[65,21988,287],{"class":154},[65,21990,20487],{"class":214},[65,21992,293],{"class":154},[65,21994,296],{"class":154},[65,21996,299],{"class":154},[65,21998,20496],{"class":302},[65,22000,306],{"class":154},[65,22002,155],{"class":154},[65,22004,22005,22007,22009,22011,22013,22015,22017,22019,22021],{"class":140,"line":211},[65,22006,3251],{"class":154},[65,22008,287],{"class":154},[65,22010,3326],{"class":214},[65,22012,293],{"class":154},[65,22014,296],{"class":154},[65,22016,299],{"class":154},[65,22018,21845],{"class":302},[65,22020,306],{"class":154},[65,22022,155],{"class":154},[65,22024,22025],{"class":140,"line":240},[65,22026,162],{"emptyLinePlaceholder":161},[65,22028,22029,22031,22034,22036,22038,22041,22043,22045,22048,22050,22052,22054,22056,22058,22060,22062,22064,22067],{"class":140,"line":391},[65,22030,722],{"class":168},[65,22032,22033],{"class":326}," MeshRenderCallback",[65,22035,218],{"class":168},[65,22037,1696],{"class":154},[65,22039,22040],{"class":793},"renderInfo",[65,22042,797],{"class":168},[65,22044,287],{"class":154},[65,22046,22047],{"class":144}," mesh",[65,22049,797],{"class":168},[65,22051,3302],{"class":326},[65,22053,6005],{"class":154},[65,22055,3552],{"class":144},[65,22057,427],{"class":168},[65,22059,3297],{"class":326},[65,22061,19595],{"class":154},[65,22063,1862],{"class":168},[65,22065,22066],{"class":340}," void",[65,22068,155],{"class":154},[65,22070,22071],{"class":140,"line":401},[65,22072,162],{"emptyLinePlaceholder":161},[65,22074,22075,22077,22079,22081,22083,22085],{"class":140,"line":406},[65,22076,284],{"class":154},[65,22078,774],{"class":168},[65,22080,3302],{"class":326},[65,22082,5810],{"class":168},[65,22084,3326],{"class":302},[65,22086,418],{"class":154},[65,22088,22089,22091,22093,22095],{"class":140,"line":421},[65,22090,2350],{"class":144},[65,22092,797],{"class":168},[65,22094,800],{"class":326},[65,22096,155],{"class":154},[65,22098,22099,22102,22104,22106],{"class":140,"line":435},[65,22100,22101],{"class":144}," geometry",[65,22103,797],{"class":168},[65,22105,5645],{"class":326},[65,22107,155],{"class":154},[65,22109,22110,22113,22115,22117],{"class":140,"line":447},[65,22111,22112],{"class":144}," program",[65,22114,797],{"class":168},[65,22116,3081],{"class":326},[65,22118,155],{"class":154},[65,22120,22121],{"class":140,"line":459},[65,22122,162],{"emptyLinePlaceholder":161},[65,22124,22125,22128,22130,22132],{"class":140,"line":471},[65,22126,22127],{"class":144}," modelViewMatrix",[65,22129,797],{"class":168},[65,22131,20487],{"class":326},[65,22133,155],{"class":154},[65,22135,22136],{"class":140,"line":63},[65,22137,162],{"emptyLinePlaceholder":161},[65,22139,22140,22142,22144,22146,22148,22150,22152,22154,22156,22158,22160,22162,22164,22166,22168,22170,22172,22174,22176,22178,22180,22182],{"class":140,"line":495},[65,22141,788],{"class":168},[65,22143,224],{"class":154},[65,22145,794],{"class":793},[65,22147,797],{"class":168},[65,22149,800],{"class":326},[65,22151,230],{"class":154},[65,22153,287],{"class":154},[65,22155,3903],{"class":793},[65,22157,230],{"class":154},[65,22159,3797],{"class":793},[65,22161,293],{"class":154},[65,22163,797],{"class":168},[65,22165,287],{"class":154},[65,22167,3903],{"class":144},[65,22169,797],{"class":168},[65,22171,5645],{"class":326},[65,22173,6005],{"class":154},[65,22175,3797],{"class":144},[65,22177,797],{"class":168},[65,22179,3081],{"class":326},[65,22181,19595],{"class":154},[65,22183,418],{"class":154},[65,22185,22186,22188,22190],{"class":140,"line":507},[65,22187,6510],{"class":830},[65,22189,1269],{"class":204},[65,22191,155],{"class":154},[65,22193,22194,22196,22198,22200,22202,22204],{"class":140,"line":519},[65,22195,831],{"class":830},[65,22197,834],{"class":154},[65,22199,794],{"class":214},[65,22201,218],{"class":168},[65,22203,841],{"class":214},[65,22205,155],{"class":154},[65,22207,22208,22210,22212,22214,22216,22218],{"class":140,"line":531},[65,22209,831],{"class":830},[65,22211,834],{"class":154},[65,22213,9136],{"class":214},[65,22215,218],{"class":168},[65,22217,3903],{"class":214},[65,22219,155],{"class":154},[65,22221,22222,22224,22226,22229,22231,22233],{"class":140,"line":543},[65,22223,831],{"class":830},[65,22225,834],{"class":154},[65,22227,22228],{"class":214},"program",[65,22230,218],{"class":168},[65,22232,3797],{"class":214},[65,22234,155],{"class":154},[65,22236,22237],{"class":140,"line":555},[65,22238,162],{"emptyLinePlaceholder":161},[65,22240,22241,22243,22245,22247,22249,22251,22253,22255],{"class":140,"line":567},[65,22242,831],{"class":830},[65,22244,834],{"class":154},[65,22246,20364],{"class":214},[65,22248,218],{"class":168},[65,22250,1776],{"class":168},[65,22252,20487],{"class":200},[65,22254,1269],{"class":204},[65,22256,155],{"class":154},[65,22258,22259],{"class":140,"line":3757},[65,22260,1171],{"class":154},[65,22262,22263],{"class":140,"line":3787},[65,22264,162],{"emptyLinePlaceholder":161},[65,22266,22267,22269,22271,22273,22275,22277,22279,22281,22283,22285,22287],{"class":140,"line":3792},[65,22268,19575],{"class":200},[65,22270,19578],{"class":154},[65,22272,3552],{"class":793},[65,22274,293],{"class":154},[65,22276,797],{"class":168},[65,22278,287],{"class":154},[65,22280,3552],{"class":144},[65,22282,427],{"class":168},[65,22284,3297],{"class":326},[65,22286,19595],{"class":154},[65,22288,418],{"class":154},[65,22290,22291,22293,22295,22297,22299,22301,22303],{"class":140,"line":3814},[65,22292,848],{"class":168},[65,22294,3797],{"class":214},[65,22296,218],{"class":168},[65,22298,1434],{"class":830},[65,22300,834],{"class":154},[65,22302,22228],{"class":214},[65,22304,155],{"class":154},[65,22306,22307,22309,22311,22313,22315,22317,22319],{"class":140,"line":3823},[65,22308,848],{"class":168},[65,22310,3903],{"class":214},[65,22312,218],{"class":168},[65,22314,1434],{"class":830},[65,22316,834],{"class":154},[65,22318,9136],{"class":214},[65,22320,155],{"class":154},[65,22322,22323,22325,22327,22329,22331,22333,22335],{"class":140,"line":3831},[65,22324,848],{"class":168},[65,22326,841],{"class":214},[65,22328,218],{"class":168},[65,22330,1434],{"class":830},[65,22332,834],{"class":154},[65,22334,794],{"class":214},[65,22336,155],{"class":154},[65,22338,22339],{"class":140,"line":3841},[65,22340,162],{"emptyLinePlaceholder":161},[65,22342,22343,22345,22347,22349,22351],{"class":140,"line":3861},[65,22344,3105],{"class":154},[65,22346,1696],{"class":204},[65,22348,3682],{"class":214},[65,22350,1713],{"class":204},[65,22352,208],{"class":154},[65,22354,22355,22357,22359,22361,22363,22365,22368,22370,22373,22375],{"class":140,"line":3867},[65,22356,17840],{"class":154},[65,22358,1696],{"class":204},[65,22360,2264],{"class":168},[65,22362,22228],{"class":214},[65,22364,834],{"class":154},[65,22366,22367],{"class":214},"uniforms",[65,22369,834],{"class":154},[65,22371,22372],{"class":214},"modelMatrix",[65,22374,1713],{"class":204},[65,22376,208],{"class":154},[65,22378,22379,22382,22384,22386,22388,22390,22392,22394,22396],{"class":140,"line":3876},[65,22380,22381],{"class":214}," Object",[65,22383,834],{"class":154},[65,22385,15706],{"class":200},[65,22387,224],{"class":204},[65,22389,22228],{"class":214},[65,22391,834],{"class":154},[65,22393,22367],{"class":214},[65,22395,230],{"class":154},[65,22397,418],{"class":154},[65,22399,22400,22403,22405,22407,22409,22411,22413],{"class":140,"line":3881},[65,22401,22402],{"class":204}," modelMatrix",[65,22404,797],{"class":154},[65,22406,287],{"class":154},[65,22408,3851],{"class":204},[65,22410,797],{"class":154},[65,22412,20550],{"class":793},[65,22414,3858],{"class":154},[65,22416,22417,22420,22422,22424,22426,22428,22430],{"class":140,"line":3920},[65,22418,22419],{"class":204}," viewMatrix",[65,22421,797],{"class":154},[65,22423,287],{"class":154},[65,22425,3851],{"class":204},[65,22427,797],{"class":154},[65,22429,20550],{"class":793},[65,22431,3858],{"class":154},[65,22433,22434,22437,22439,22441,22443,22445,22447],{"class":140,"line":3954},[65,22435,22436],{"class":204}," modelViewMatrix",[65,22438,797],{"class":154},[65,22440,287],{"class":154},[65,22442,3851],{"class":204},[65,22444,797],{"class":154},[65,22446,20550],{"class":793},[65,22448,3858],{"class":154},[65,22450,22451,22454,22456,22458,22460,22462,22464],{"class":140,"line":3974},[65,22452,22453],{"class":204}," projectionMatrix",[65,22455,797],{"class":154},[65,22457,287],{"class":154},[65,22459,3851],{"class":204},[65,22461,797],{"class":154},[65,22463,20550],{"class":793},[65,22465,3858],{"class":154},[65,22467,22468,22471,22473,22475,22477,22479,22481],{"class":140,"line":3979},[65,22469,22470],{"class":204}," cameraPosition",[65,22472,797],{"class":154},[65,22474,287],{"class":154},[65,22476,3851],{"class":204},[65,22478,797],{"class":154},[65,22480,20550],{"class":793},[65,22482,3858],{"class":154},[65,22484,22485,22488,22490],{"class":140,"line":4031},[65,22486,22487],{"class":154}," }",[65,22489,235],{"class":204},[65,22491,155],{"class":154},[65,22493,22494],{"class":140,"line":4036},[65,22495,6413],{"class":154},[65,22497,22498],{"class":140,"line":4070},[65,22499,162],{"emptyLinePlaceholder":161},[65,22501,22502,22505,22507,22509,22511,22514,22516,22518,22520,22522,22524,22526],{"class":140,"line":4086},[65,22503,22504],{"class":214}," program",[65,22506,834],{"class":154},[65,22508,22367],{"class":214},[65,22510,834],{"class":154},[65,22512,22513],{"class":214},"projectionMatrix",[65,22515,834],{"class":154},[65,22517,3114],{"class":214},[65,22519,218],{"class":168},[65,22521,3552],{"class":214},[65,22523,834],{"class":154},[65,22525,22513],{"class":214},[65,22527,155],{"class":154},[65,22529,22530,22532,22534,22536,22538,22541,22543,22545,22547,22549,22551,22554],{"class":140,"line":4102},[65,22531,22504],{"class":214},[65,22533,834],{"class":154},[65,22535,22367],{"class":214},[65,22537,834],{"class":154},[65,22539,22540],{"class":214},"cameraPosition",[65,22542,834],{"class":154},[65,22544,3114],{"class":214},[65,22546,218],{"class":168},[65,22548,3552],{"class":214},[65,22550,834],{"class":154},[65,22552,22553],{"class":214},"worldPosition",[65,22555,155],{"class":154},[65,22557,22558,22560,22562,22564,22566,22569,22571,22573,22575,22577,22579,22581],{"class":140,"line":4118},[65,22559,22504],{"class":214},[65,22561,834],{"class":154},[65,22563,22367],{"class":214},[65,22565,834],{"class":154},[65,22567,22568],{"class":214},"viewMatrix",[65,22570,834],{"class":154},[65,22572,3114],{"class":214},[65,22574,218],{"class":168},[65,22576,3552],{"class":214},[65,22578,834],{"class":154},[65,22580,22568],{"class":214},[65,22582,155],{"class":154},[65,22584,22585,22587,22589,22591,22593,22595,22597,22599,22601,22603,22605,22607,22609,22611,22613],{"class":140,"line":4149},[65,22586,20954],{"class":830},[65,22588,834],{"class":154},[65,22590,20364],{"class":214},[65,22592,834],{"class":154},[65,22594,12379],{"class":200},[65,22596,224],{"class":204},[65,22598,3682],{"class":214},[65,22600,834],{"class":154},[65,22602,22568],{"class":214},[65,22604,230],{"class":154},[65,22606,1434],{"class":830},[65,22608,834],{"class":154},[65,22610,10060],{"class":214},[65,22612,235],{"class":204},[65,22614,155],{"class":154},[65,22616,22617,22619,22621,22623,22625,22627,22629,22631,22633,22635,22637,22639],{"class":140,"line":4163},[65,22618,22504],{"class":214},[65,22620,834],{"class":154},[65,22622,22367],{"class":214},[65,22624,834],{"class":154},[65,22626,22372],{"class":214},[65,22628,834],{"class":154},[65,22630,3114],{"class":214},[65,22632,218],{"class":168},[65,22634,1434],{"class":830},[65,22636,834],{"class":154},[65,22638,10060],{"class":214},[65,22640,155],{"class":154},[65,22642,22643,22645,22647,22649,22651,22653,22655,22657,22659,22661,22663,22665],{"class":140,"line":4168},[65,22644,22504],{"class":214},[65,22646,834],{"class":154},[65,22648,22367],{"class":214},[65,22650,834],{"class":154},[65,22652,20364],{"class":214},[65,22654,834],{"class":154},[65,22656,3114],{"class":214},[65,22658,218],{"class":168},[65,22660,1434],{"class":830},[65,22662,834],{"class":154},[65,22664,20364],{"class":214},[65,22666,155],{"class":154},[65,22668,22669],{"class":140,"line":4194},[65,22670,3204],{"class":154},[65,22672,22673],{"class":140,"line":4199},[65,22674,162],{"emptyLinePlaceholder":161},[65,22676,22677,22680,22682,22685,22687],{"class":140,"line":4221},[65,22678,22679],{"class":214}," program",[65,22681,834],{"class":154},[65,22683,22684],{"class":200},"use",[65,22686,1269],{"class":204},[65,22688,155],{"class":154},[65,22690,22691,22694,22696,22698,22700,22702,22704],{"class":140,"line":4228},[65,22692,22693],{"class":214}," geometry",[65,22695,834],{"class":154},[65,22697,2226],{"class":200},[65,22699,224],{"class":204},[65,22701,22228],{"class":214},[65,22703,235],{"class":204},[65,22705,155],{"class":154},[65,22707,22708,22710,22712,22714,22716,22718,22720,22722,22724,22726,22728,22730,22732,22734,22736,22738,22740,22742,22744],{"class":140,"line":4235},[65,22709,1295],{"class":214},[65,22711,834],{"class":154},[65,22713,19534],{"class":200},[65,22715,224],{"class":204},[65,22717,794],{"class":214},[65,22719,834],{"class":154},[65,22721,19638],{"class":214},[65,22723,230],{"class":154},[65,22725,3903],{"class":214},[65,22727,834],{"class":154},[65,22729,19670],{"class":214},[65,22731,230],{"class":154},[65,22733,841],{"class":214},[65,22735,834],{"class":154},[65,22737,19679],{"class":214},[65,22739,230],{"class":154},[65,22741,1142],{"class":793},[65,22743,235],{"class":204},[65,22745,155],{"class":154},[65,22747,22748,22750,22752,22755,22757],{"class":140,"line":4244},[65,22749,22693],{"class":214},[65,22751,834],{"class":154},[65,22753,22754],{"class":200},"unbind",[65,22756,1269],{"class":204},[65,22758,155],{"class":154},[65,22760,22761],{"class":140,"line":4261},[65,22762,1171],{"class":154},[65,22764,22765],{"class":140,"line":4266},[65,22766,243],{"class":154},[2418,22768,19545],{"id":19545},[15,22770,22771,22772,22774],{},"Meshで描画する",[124,22773,19545],{},"メソッドをみていきます。",[129,22776,22778],{"className":131,"code":22777,"filename":19545,"language":134,"meta":135,"style":135},"draw({ camera }: { camera?: Camera }) {\n const program = this.program;\n const geometry = this.geometry;\n const gl = this.gl;\n\n if (camera) {\n if (!program.uniforms.modelMatrix) {\n Object.assign(program.uniforms, {\n modelMatrix: { value: null },\n viewMatrix: { value: null },\n modelViewMatrix: { value: null },\n projectionMatrix: { value: null },\n cameraPosition: { value: null },\n });\n }\n\n program.uniforms.projectionMatrix.value = camera.projectionMatrix;\n program.uniforms.cameraPosition.value = camera.worldPosition;\n program.uniforms.viewMatrix.value = camera.viewMatrix;\n this.modelViewMatrix.multiply(camera.viewMatrix, this.worldMatrix);\n program.uniforms.modelMatrix.value = this.worldMatrix;\n program.uniforms.modelViewMatrix.value = this.modelViewMatrix;\n }\n\n program.use();\n geometry.bind(program);\n gl.drawElements(gl.TRIANGLES, geometry.indexCount, gl.UNSIGNED_SHORT, 0);\n geometry.unbind();\n}\n",[124,22779,22780,22809,22825,22841,22857,22861,22873,22895,22916,22933,22950,22967,22984,23001,23009,23013,23017,23043,23069,23095,23127,23153,23179,23183,23187,23199,23215,23255,23267],{"__ignoreMap":135},[65,22781,22782,22784,22786,22788,22790,22792,22794,22796,22799,22801,22803,22805,22807],{"class":140,"line":141},[65,22783,19545],{"class":200},[65,22785,224],{"class":204},[65,22787,4508],{"class":154},[65,22789,3552],{"class":144},[65,22791,293],{"class":154},[65,22793,1819],{"class":204},[65,22795,4508],{"class":154},[65,22797,22798],{"class":204}," camera?",[65,22800,797],{"class":154},[65,22802,3297],{"class":144},[65,22804,293],{"class":154},[65,22806,1713],{"class":204},[65,22808,208],{"class":154},[65,22810,22811,22813,22815,22817,22819,22821,22823],{"class":140,"line":158},[65,22812,2243],{"class":168},[65,22814,3797],{"class":214},[65,22816,218],{"class":168},[65,22818,1434],{"class":830},[65,22820,834],{"class":154},[65,22822,22228],{"class":214},[65,22824,155],{"class":154},[65,22826,22827,22829,22831,22833,22835,22837,22839],{"class":140,"line":165},[65,22828,2243],{"class":168},[65,22830,3903],{"class":214},[65,22832,218],{"class":168},[65,22834,1434],{"class":830},[65,22836,834],{"class":154},[65,22838,9136],{"class":214},[65,22840,155],{"class":154},[65,22842,22843,22845,22847,22849,22851,22853,22855],{"class":140,"line":180},[65,22844,2243],{"class":168},[65,22846,841],{"class":214},[65,22848,218],{"class":168},[65,22850,1434],{"class":830},[65,22852,834],{"class":154},[65,22854,794],{"class":214},[65,22856,155],{"class":154},[65,22858,22859],{"class":140,"line":194},[65,22860,162],{"emptyLinePlaceholder":161},[65,22862,22863,22865,22867,22869,22871],{"class":140,"line":211},[65,22864,2064],{"class":154},[65,22866,1696],{"class":204},[65,22868,3682],{"class":214},[65,22870,1713],{"class":204},[65,22872,208],{"class":154},[65,22874,22875,22877,22879,22881,22883,22885,22887,22889,22891,22893],{"class":140,"line":240},[65,22876,3105],{"class":154},[65,22878,1696],{"class":204},[65,22880,2264],{"class":168},[65,22882,22228],{"class":214},[65,22884,834],{"class":154},[65,22886,22367],{"class":214},[65,22888,834],{"class":154},[65,22890,22372],{"class":214},[65,22892,1713],{"class":204},[65,22894,208],{"class":154},[65,22896,22897,22900,22902,22904,22906,22908,22910,22912,22914],{"class":140,"line":391},[65,22898,22899],{"class":214}," Object",[65,22901,834],{"class":154},[65,22903,15706],{"class":200},[65,22905,224],{"class":204},[65,22907,22228],{"class":214},[65,22909,834],{"class":154},[65,22911,22367],{"class":214},[65,22913,230],{"class":154},[65,22915,418],{"class":154},[65,22917,22918,22921,22923,22925,22927,22929,22931],{"class":140,"line":401},[65,22919,22920],{"class":204}," modelMatrix",[65,22922,797],{"class":154},[65,22924,287],{"class":154},[65,22926,3851],{"class":204},[65,22928,797],{"class":154},[65,22930,20550],{"class":793},[65,22932,3858],{"class":154},[65,22934,22935,22938,22940,22942,22944,22946,22948],{"class":140,"line":406},[65,22936,22937],{"class":204}," viewMatrix",[65,22939,797],{"class":154},[65,22941,287],{"class":154},[65,22943,3851],{"class":204},[65,22945,797],{"class":154},[65,22947,20550],{"class":793},[65,22949,3858],{"class":154},[65,22951,22952,22955,22957,22959,22961,22963,22965],{"class":140,"line":421},[65,22953,22954],{"class":204}," modelViewMatrix",[65,22956,797],{"class":154},[65,22958,287],{"class":154},[65,22960,3851],{"class":204},[65,22962,797],{"class":154},[65,22964,20550],{"class":793},[65,22966,3858],{"class":154},[65,22968,22969,22972,22974,22976,22978,22980,22982],{"class":140,"line":435},[65,22970,22971],{"class":204}," projectionMatrix",[65,22973,797],{"class":154},[65,22975,287],{"class":154},[65,22977,3851],{"class":204},[65,22979,797],{"class":154},[65,22981,20550],{"class":793},[65,22983,3858],{"class":154},[65,22985,22986,22989,22991,22993,22995,22997,22999],{"class":140,"line":447},[65,22987,22988],{"class":204}," cameraPosition",[65,22990,797],{"class":154},[65,22992,287],{"class":154},[65,22994,3851],{"class":204},[65,22996,797],{"class":154},[65,22998,20550],{"class":793},[65,23000,3858],{"class":154},[65,23002,23003,23005,23007],{"class":140,"line":459},[65,23004,20901],{"class":154},[65,23006,235],{"class":204},[65,23008,155],{"class":154},[65,23010,23011],{"class":140,"line":471},[65,23012,3204],{"class":154},[65,23014,23015],{"class":140,"line":63},[65,23016,162],{"emptyLinePlaceholder":161},[65,23018,23019,23021,23023,23025,23027,23029,23031,23033,23035,23037,23039,23041],{"class":140,"line":495},[65,23020,22679],{"class":214},[65,23022,834],{"class":154},[65,23024,22367],{"class":214},[65,23026,834],{"class":154},[65,23028,22513],{"class":214},[65,23030,834],{"class":154},[65,23032,3114],{"class":214},[65,23034,218],{"class":168},[65,23036,3552],{"class":214},[65,23038,834],{"class":154},[65,23040,22513],{"class":214},[65,23042,155],{"class":154},[65,23044,23045,23047,23049,23051,23053,23055,23057,23059,23061,23063,23065,23067],{"class":140,"line":507},[65,23046,22679],{"class":214},[65,23048,834],{"class":154},[65,23050,22367],{"class":214},[65,23052,834],{"class":154},[65,23054,22540],{"class":214},[65,23056,834],{"class":154},[65,23058,3114],{"class":214},[65,23060,218],{"class":168},[65,23062,3552],{"class":214},[65,23064,834],{"class":154},[65,23066,22553],{"class":214},[65,23068,155],{"class":154},[65,23070,23071,23073,23075,23077,23079,23081,23083,23085,23087,23089,23091,23093],{"class":140,"line":519},[65,23072,22679],{"class":214},[65,23074,834],{"class":154},[65,23076,22367],{"class":214},[65,23078,834],{"class":154},[65,23080,22568],{"class":214},[65,23082,834],{"class":154},[65,23084,3114],{"class":214},[65,23086,218],{"class":168},[65,23088,3552],{"class":214},[65,23090,834],{"class":154},[65,23092,22568],{"class":214},[65,23094,155],{"class":154},[65,23096,23097,23099,23101,23103,23105,23107,23109,23111,23113,23115,23117,23119,23121,23123,23125],{"class":140,"line":531},[65,23098,831],{"class":830},[65,23100,834],{"class":154},[65,23102,20364],{"class":214},[65,23104,834],{"class":154},[65,23106,12379],{"class":200},[65,23108,224],{"class":204},[65,23110,3682],{"class":214},[65,23112,834],{"class":154},[65,23114,22568],{"class":214},[65,23116,230],{"class":154},[65,23118,1434],{"class":830},[65,23120,834],{"class":154},[65,23122,10060],{"class":214},[65,23124,235],{"class":204},[65,23126,155],{"class":154},[65,23128,23129,23131,23133,23135,23137,23139,23141,23143,23145,23147,23149,23151],{"class":140,"line":543},[65,23130,22679],{"class":214},[65,23132,834],{"class":154},[65,23134,22367],{"class":214},[65,23136,834],{"class":154},[65,23138,22372],{"class":214},[65,23140,834],{"class":154},[65,23142,3114],{"class":214},[65,23144,218],{"class":168},[65,23146,1434],{"class":830},[65,23148,834],{"class":154},[65,23150,10060],{"class":214},[65,23152,155],{"class":154},[65,23154,23155,23157,23159,23161,23163,23165,23167,23169,23171,23173,23175,23177],{"class":140,"line":555},[65,23156,22679],{"class":214},[65,23158,834],{"class":154},[65,23160,22367],{"class":214},[65,23162,834],{"class":154},[65,23164,20364],{"class":214},[65,23166,834],{"class":154},[65,23168,3114],{"class":214},[65,23170,218],{"class":168},[65,23172,1434],{"class":830},[65,23174,834],{"class":154},[65,23176,20364],{"class":214},[65,23178,155],{"class":154},[65,23180,23181],{"class":140,"line":567},[65,23182,1171],{"class":154},[65,23184,23185],{"class":140,"line":3757},[65,23186,162],{"emptyLinePlaceholder":161},[65,23188,23189,23191,23193,23195,23197],{"class":140,"line":3787},[65,23190,22112],{"class":214},[65,23192,834],{"class":154},[65,23194,22684],{"class":200},[65,23196,1269],{"class":204},[65,23198,155],{"class":154},[65,23200,23201,23203,23205,23207,23209,23211,23213],{"class":140,"line":3792},[65,23202,22101],{"class":214},[65,23204,834],{"class":154},[65,23206,2226],{"class":200},[65,23208,224],{"class":204},[65,23210,22228],{"class":214},[65,23212,235],{"class":204},[65,23214,155],{"class":154},[65,23216,23217,23219,23221,23223,23225,23227,23229,23231,23233,23235,23237,23239,23241,23243,23245,23247,23249,23251,23253],{"class":140,"line":3814},[65,23218,2350],{"class":214},[65,23220,834],{"class":154},[65,23222,19534],{"class":200},[65,23224,224],{"class":204},[65,23226,794],{"class":214},[65,23228,834],{"class":154},[65,23230,19638],{"class":214},[65,23232,230],{"class":154},[65,23234,3903],{"class":214},[65,23236,834],{"class":154},[65,23238,19670],{"class":214},[65,23240,230],{"class":154},[65,23242,841],{"class":214},[65,23244,834],{"class":154},[65,23246,19679],{"class":214},[65,23248,230],{"class":154},[65,23250,1142],{"class":793},[65,23252,235],{"class":204},[65,23254,155],{"class":154},[65,23256,23257,23259,23261,23263,23265],{"class":140,"line":3823},[65,23258,22101],{"class":214},[65,23260,834],{"class":154},[65,23262,22754],{"class":200},[65,23264,1269],{"class":204},[65,23266,155],{"class":154},[65,23268,23269],{"class":140,"line":3831},[65,23270,243],{"class":154},[21568,23272,23273],{"id":23273},"uniformの初期化",[129,23275,23277],{"className":131,"code":23276,"language":134,"meta":135,"style":135},"if (camera) {\n if (!program.uniforms.modelMatrix) {\n Object.assign(program.uniforms, {\n modelMatrix: { value: null },\n viewMatrix: { value: null },\n modelViewMatrix: { value: null },\n projectionMatrix: { value: null },\n cameraPosition: { value: null },\n });\n }\n}\n",[124,23278,23279,23291,23313,23333,23350,23367,23384,23401,23418,23426,23430],{"__ignoreMap":135},[65,23280,23281,23283,23285,23287,23289],{"class":140,"line":141},[65,23282,1693],{"class":154},[65,23284,1696],{"class":204},[65,23286,3682],{"class":144},[65,23288,1713],{"class":204},[65,23290,208],{"class":154},[65,23292,23293,23295,23297,23299,23301,23303,23305,23307,23309,23311],{"class":140,"line":158},[65,23294,2064],{"class":154},[65,23296,1696],{"class":204},[65,23298,2264],{"class":168},[65,23300,22228],{"class":214},[65,23302,834],{"class":154},[65,23304,22367],{"class":214},[65,23306,834],{"class":154},[65,23308,22372],{"class":214},[65,23310,1713],{"class":204},[65,23312,208],{"class":154},[65,23314,23315,23317,23319,23321,23323,23325,23327,23329,23331],{"class":140,"line":165},[65,23316,15701],{"class":214},[65,23318,834],{"class":154},[65,23320,15706],{"class":200},[65,23322,224],{"class":204},[65,23324,22228],{"class":214},[65,23326,834],{"class":154},[65,23328,22367],{"class":214},[65,23330,230],{"class":154},[65,23332,418],{"class":154},[65,23334,23335,23338,23340,23342,23344,23346,23348],{"class":140,"line":180},[65,23336,23337],{"class":204}," modelMatrix",[65,23339,797],{"class":154},[65,23341,287],{"class":154},[65,23343,3851],{"class":204},[65,23345,797],{"class":154},[65,23347,20550],{"class":793},[65,23349,3858],{"class":154},[65,23351,23352,23355,23357,23359,23361,23363,23365],{"class":140,"line":194},[65,23353,23354],{"class":204}," viewMatrix",[65,23356,797],{"class":154},[65,23358,287],{"class":154},[65,23360,3851],{"class":204},[65,23362,797],{"class":154},[65,23364,20550],{"class":793},[65,23366,3858],{"class":154},[65,23368,23369,23372,23374,23376,23378,23380,23382],{"class":140,"line":211},[65,23370,23371],{"class":204}," modelViewMatrix",[65,23373,797],{"class":154},[65,23375,287],{"class":154},[65,23377,3851],{"class":204},[65,23379,797],{"class":154},[65,23381,20550],{"class":793},[65,23383,3858],{"class":154},[65,23385,23386,23389,23391,23393,23395,23397,23399],{"class":140,"line":240},[65,23387,23388],{"class":204}," projectionMatrix",[65,23390,797],{"class":154},[65,23392,287],{"class":154},[65,23394,3851],{"class":204},[65,23396,797],{"class":154},[65,23398,20550],{"class":793},[65,23400,3858],{"class":154},[65,23402,23403,23406,23408,23410,23412,23414,23416],{"class":140,"line":391},[65,23404,23405],{"class":204}," cameraPosition",[65,23407,797],{"class":154},[65,23409,287],{"class":154},[65,23411,3851],{"class":204},[65,23413,797],{"class":154},[65,23415,20550],{"class":793},[65,23417,3858],{"class":154},[65,23419,23420,23422,23424],{"class":140,"line":401},[65,23421,6341],{"class":154},[65,23423,235],{"class":204},[65,23425,155],{"class":154},[65,23427,23428],{"class":140,"line":406},[65,23429,1171],{"class":154},[65,23431,23432],{"class":140,"line":421},[65,23433,243],{"class":154},[15,23435,23436,23437,23439],{},"カメラが存在する場合と、uniformsに",[124,23438,22372],{},"が存在しない場合は、uniformsにMVP行列関連のuniformの初期化を行います。",[21568,23441,23442],{"id":23442},"カメラ情報の反映",[129,23444,23446],{"className":131,"code":23445,"language":134,"meta":135,"style":135},"program.uniforms.projectionMatrix.value = camera.projectionMatrix;\nprogram.uniforms.cameraPosition.value = camera.worldPosition;\nprogram.uniforms.viewMatrix.value = camera.viewMatrix;\n",[124,23447,23448,23474,23500],{"__ignoreMap":135},[65,23449,23450,23452,23454,23456,23458,23460,23462,23464,23466,23468,23470,23472],{"class":140,"line":141},[65,23451,22228],{"class":144},[65,23453,834],{"class":154},[65,23455,22367],{"class":144},[65,23457,834],{"class":154},[65,23459,22513],{"class":144},[65,23461,834],{"class":154},[65,23463,3114],{"class":144},[65,23465,218],{"class":168},[65,23467,3552],{"class":144},[65,23469,834],{"class":154},[65,23471,22513],{"class":144},[65,23473,155],{"class":154},[65,23475,23476,23478,23480,23482,23484,23486,23488,23490,23492,23494,23496,23498],{"class":140,"line":158},[65,23477,22228],{"class":144},[65,23479,834],{"class":154},[65,23481,22367],{"class":144},[65,23483,834],{"class":154},[65,23485,22540],{"class":144},[65,23487,834],{"class":154},[65,23489,3114],{"class":144},[65,23491,218],{"class":168},[65,23493,3552],{"class":144},[65,23495,834],{"class":154},[65,23497,22553],{"class":144},[65,23499,155],{"class":154},[65,23501,23502,23504,23506,23508,23510,23512,23514,23516,23518,23520,23522,23524],{"class":140,"line":165},[65,23503,22228],{"class":144},[65,23505,834],{"class":154},[65,23507,22367],{"class":144},[65,23509,834],{"class":154},[65,23511,22568],{"class":144},[65,23513,834],{"class":154},[65,23515,3114],{"class":144},[65,23517,218],{"class":168},[65,23519,3552],{"class":144},[65,23521,834],{"class":154},[65,23523,22568],{"class":144},[65,23525,155],{"class":154},[15,23527,23528],{},"カメラの投影行列、ワールド位置、ビュー行列をuniformに反映させます。",[21568,23530,23532],{"id":23531},"modelview行列の計算","ModelView行列の計算",[129,23534,23536],{"className":131,"code":23535,"language":134,"meta":135,"style":135},"this.modelViewMatrix.multiply(camera.viewMatrix, this.worldMatrix);\n",[124,23537,23538],{"__ignoreMap":135},[65,23539,23540,23542,23544,23546,23548,23550,23552,23554,23556,23558,23560,23562,23564,23566,23568],{"class":140,"line":141},[65,23541,2004],{"class":830},[65,23543,834],{"class":154},[65,23545,20364],{"class":144},[65,23547,834],{"class":154},[65,23549,12379],{"class":200},[65,23551,224],{"class":204},[65,23553,3682],{"class":144},[65,23555,834],{"class":154},[65,23557,22568],{"class":144},[65,23559,230],{"class":154},[65,23561,1434],{"class":830},[65,23563,834],{"class":154},[65,23565,10060],{"class":144},[65,23567,235],{"class":204},[65,23569,155],{"class":154},[15,23571,23572],{},"ModelView行列は、ビュー行列とワールド行列を掛け合わせて計算します。",[129,23574,23576],{"className":131,"code":23575,"language":134,"meta":135,"style":135},"MV = V x M\n",[124,23577,23578],{"__ignoreMap":135},[65,23579,23580,23583,23585,23588,23590],{"class":140,"line":141},[65,23581,23582],{"class":144},"MV",[65,23584,218],{"class":168},[65,23586,23587],{"class":144}," V",[65,23589,15507],{"class":144},[65,23591,23592],{"class":144}," M\n",[21568,23594,23596],{"id":23595},"model行列とmodelview行列の反映","Model行列とModelView行列の反映",[129,23598,23600],{"className":131,"code":23599,"language":134,"meta":135,"style":135},"program.uniforms.modelMatrix.value = this.worldMatrix;\nprogram.uniforms.modelViewMatrix.value = this.modelViewMatrix;\n",[124,23601,23602,23628],{"__ignoreMap":135},[65,23603,23604,23606,23608,23610,23612,23614,23616,23618,23620,23622,23624,23626],{"class":140,"line":141},[65,23605,22228],{"class":144},[65,23607,834],{"class":154},[65,23609,22367],{"class":144},[65,23611,834],{"class":154},[65,23613,22372],{"class":144},[65,23615,834],{"class":154},[65,23617,3114],{"class":144},[65,23619,218],{"class":168},[65,23621,1434],{"class":830},[65,23623,834],{"class":154},[65,23625,10060],{"class":144},[65,23627,155],{"class":154},[65,23629,23630,23632,23634,23636,23638,23640,23642,23644,23646,23648,23650,23652],{"class":140,"line":158},[65,23631,22228],{"class":144},[65,23633,834],{"class":154},[65,23635,22367],{"class":144},[65,23637,834],{"class":154},[65,23639,20364],{"class":144},[65,23641,834],{"class":154},[65,23643,3114],{"class":144},[65,23645,218],{"class":168},[65,23647,1434],{"class":830},[65,23649,834],{"class":154},[65,23651,20364],{"class":144},[65,23653,155],{"class":154},[15,23655,23656,23657,23659],{},"Model行列とModelView行列をuniformに反映させます。",[5467,23658],{},"\nカメラがある場合は上記のような処理になります。",[15,23661,20433,23662,23665],{},[124,23663,23664],{},"program.use()","を呼び出してシェーダープログラムを有効化し、ジオメトリをバインドして描画します。",[15,23667,23668,23669,23671,23672,23675],{},"次に、このMeshの",[124,23670,19545],{},"メソッドを呼び出す、",[124,23673,23674],{},"Render","クラスを修正します。",[1177,23677,23674],{"id":4503},[15,23679,23680,3062,23682,23684,23685,23687],{},[124,23681,23674],{},[124,23683,4503],{},"メソッドで、シーンとカメラがある場合は、",[124,23686,21031],{},"を呼び出して、シーン内の全てのノードのワールド行列を更新するようにします。",[129,23689,23692],{"className":131,"code":23690,"filename":23691,"language":134,"meta":135,"style":135},"import type { Camera } from './Camera';\nimport { Mesh } from './Mesh';\nimport type { Scene } from './Scene';\n\nexport class Render {\n // ...\n render(\n options: Partial\u003C{\n scene: Scene;\n camera: Camera;\n }>,\n ) {\n const { scene, camera } = options;\n const gl = this.gl;\n gl.viewport(0, 0, this.canvas.width, this.canvas.height);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n if (scene) {\n scene.updateMatrixWorld();\n }\n\n if (camera) {\n camera.updateMatrixWorld();\n }\n\n scene?.traverse(node => {\n if (node instanceof Mesh) {\n node.draw({ camera });\n }\n });\n }\n}\n","Render.ts",[124,23693,23694,23716,23737,23759,23763,23773,23777,23783,23795,23806,23817,23822,23829,23849,23865,23910,23941,23945,23957,23969,23973,23977,23989,24001,24005,24009,24029,24045,24066,24070,24078,24082],{"__ignoreMap":135},[65,23695,23696,23698,23700,23702,23704,23706,23708,23710,23712,23714],{"class":140,"line":141},[65,23697,3251],{"class":154},[65,23699,323],{"class":154},[65,23701,287],{"class":154},[65,23703,3297],{"class":214},[65,23705,293],{"class":154},[65,23707,296],{"class":154},[65,23709,299],{"class":154},[65,23711,21928],{"class":302},[65,23713,306],{"class":154},[65,23715,155],{"class":154},[65,23717,23718,23720,23722,23724,23726,23728,23730,23733,23735],{"class":140,"line":158},[65,23719,3251],{"class":154},[65,23721,287],{"class":154},[65,23723,3302],{"class":214},[65,23725,293],{"class":154},[65,23727,296],{"class":154},[65,23729,299],{"class":154},[65,23731,23732],{"class":302},"./Mesh",[65,23734,306],{"class":154},[65,23736,155],{"class":154},[65,23738,23739,23741,23743,23745,23747,23749,23751,23753,23755,23757],{"class":140,"line":165},[65,23740,3251],{"class":154},[65,23742,323],{"class":154},[65,23744,287],{"class":154},[65,23746,3326],{"class":214},[65,23748,293],{"class":154},[65,23750,296],{"class":154},[65,23752,299],{"class":154},[65,23754,21845],{"class":302},[65,23756,306],{"class":154},[65,23758,155],{"class":154},[65,23760,23761],{"class":140,"line":180},[65,23762,162],{"emptyLinePlaceholder":161},[65,23764,23765,23767,23769,23771],{"class":140,"line":194},[65,23766,284],{"class":154},[65,23768,774],{"class":168},[65,23770,3321],{"class":326},[65,23772,418],{"class":154},[65,23774,23775],{"class":140,"line":211},[65,23776,783],{"class":278},[65,23778,23779,23781],{"class":140,"line":240},[65,23780,3463],{"class":200},[65,23782,15023],{"class":154},[65,23784,23785,23788,23790,23792],{"class":140,"line":391},[65,23786,23787],{"class":793}," options",[65,23789,797],{"class":168},[65,23791,5835],{"class":326},[65,23793,23794],{"class":154},"\u003C{\n",[65,23796,23797,23800,23802,23804],{"class":140,"line":401},[65,23798,23799],{"class":144}," scene",[65,23801,797],{"class":168},[65,23803,3326],{"class":326},[65,23805,155],{"class":154},[65,23807,23808,23811,23813,23815],{"class":140,"line":406},[65,23809,23810],{"class":144}," camera",[65,23812,797],{"class":168},[65,23814,3297],{"class":326},[65,23816,155],{"class":154},[65,23818,23819],{"class":140,"line":421},[65,23820,23821],{"class":154}," }>,\n",[65,23823,23824,23827],{"class":140,"line":435},[65,23825,23826],{"class":154}," )",[65,23828,418],{"class":154},[65,23830,23831,23833,23835,23837,23839,23841,23843,23845,23847],{"class":140,"line":447},[65,23832,848],{"class":168},[65,23834,287],{"class":154},[65,23836,3697],{"class":214},[65,23838,230],{"class":154},[65,23840,3552],{"class":214},[65,23842,293],{"class":154},[65,23844,218],{"class":168},[65,23846,814],{"class":214},[65,23848,155],{"class":154},[65,23850,23851,23853,23855,23857,23859,23861,23863],{"class":140,"line":459},[65,23852,848],{"class":168},[65,23854,841],{"class":214},[65,23856,218],{"class":168},[65,23858,1434],{"class":830},[65,23860,834],{"class":154},[65,23862,794],{"class":214},[65,23864,155],{"class":154},[65,23866,23867,23869,23871,23874,23876,23878,23880,23882,23884,23886,23888,23890,23892,23894,23896,23898,23900,23902,23904,23906,23908],{"class":140,"line":471},[65,23868,1295],{"class":214},[65,23870,834],{"class":154},[65,23872,23873],{"class":200},"viewport",[65,23875,224],{"class":204},[65,23877,743],{"class":793},[65,23879,230],{"class":154},[65,23881,1142],{"class":793},[65,23883,230],{"class":154},[65,23885,1434],{"class":830},[65,23887,834],{"class":154},[65,23889,3454],{"class":214},[65,23891,834],{"class":154},[65,23893,735],{"class":214},[65,23895,230],{"class":154},[65,23897,1434],{"class":830},[65,23899,834],{"class":154},[65,23901,3454],{"class":214},[65,23903,834],{"class":154},[65,23905,748],{"class":214},[65,23907,235],{"class":204},[65,23909,155],{"class":154},[65,23911,23912,23914,23916,23919,23921,23923,23925,23928,23930,23932,23934,23937,23939],{"class":140,"line":63},[65,23913,1295],{"class":214},[65,23915,834],{"class":154},[65,23917,23918],{"class":200},"clear",[65,23920,224],{"class":204},[65,23922,794],{"class":214},[65,23924,834],{"class":154},[65,23926,23927],{"class":214},"COLOR_BUFFER_BIT",[65,23929,11880],{"class":168},[65,23931,841],{"class":214},[65,23933,834],{"class":154},[65,23935,23936],{"class":214},"DEPTH_BUFFER_BIT",[65,23938,235],{"class":204},[65,23940,155],{"class":154},[65,23942,23943],{"class":140,"line":495},[65,23944,162],{"emptyLinePlaceholder":161},[65,23946,23947,23949,23951,23953,23955],{"class":140,"line":507},[65,23948,3105],{"class":154},[65,23950,1696],{"class":204},[65,23952,4932],{"class":214},[65,23954,1713],{"class":204},[65,23956,208],{"class":154},[65,23958,23959,23961,23963,23965,23967],{"class":140,"line":519},[65,23960,23799],{"class":214},[65,23962,834],{"class":154},[65,23964,21031],{"class":200},[65,23966,1269],{"class":204},[65,23968,155],{"class":154},[65,23970,23971],{"class":140,"line":531},[65,23972,3204],{"class":154},[65,23974,23975],{"class":140,"line":543},[65,23976,162],{"emptyLinePlaceholder":161},[65,23978,23979,23981,23983,23985,23987],{"class":140,"line":555},[65,23980,3105],{"class":154},[65,23982,1696],{"class":204},[65,23984,3682],{"class":214},[65,23986,1713],{"class":204},[65,23988,208],{"class":154},[65,23990,23991,23993,23995,23997,23999],{"class":140,"line":567},[65,23992,23810],{"class":214},[65,23994,834],{"class":154},[65,23996,21031],{"class":200},[65,23998,1269],{"class":204},[65,24000,155],{"class":154},[65,24002,24003],{"class":140,"line":3757},[65,24004,3204],{"class":154},[65,24006,24007],{"class":140,"line":3787},[65,24008,162],{"emptyLinePlaceholder":161},[65,24010,24011,24014,24017,24020,24022,24025,24027],{"class":140,"line":3792},[65,24012,24013],{"class":214}," scene",[65,24015,24016],{"class":154},"?.",[65,24018,24019],{"class":200},"traverse",[65,24021,224],{"class":204},[65,24023,24024],{"class":793},"node",[65,24026,1862],{"class":168},[65,24028,418],{"class":154},[65,24030,24031,24033,24035,24037,24039,24041,24043],{"class":140,"line":3814},[65,24032,17840],{"class":154},[65,24034,1696],{"class":204},[65,24036,24024],{"class":214},[65,24038,858],{"class":168},[65,24040,3302],{"class":326},[65,24042,1713],{"class":204},[65,24044,208],{"class":154},[65,24046,24047,24050,24052,24054,24056,24058,24060,24062,24064],{"class":140,"line":3823},[65,24048,24049],{"class":214}," node",[65,24051,834],{"class":154},[65,24053,19545],{"class":200},[65,24055,224],{"class":204},[65,24057,4508],{"class":154},[65,24059,3552],{"class":214},[65,24061,293],{"class":154},[65,24063,235],{"class":204},[65,24065,155],{"class":154},[65,24067,24068],{"class":140,"line":3831},[65,24069,6413],{"class":154},[65,24071,24072,24074,24076],{"class":140,"line":3841},[65,24073,6341],{"class":154},[65,24075,235],{"class":204},[65,24077,155],{"class":154},[65,24079,24080],{"class":140,"line":3861},[65,24081,1171],{"class":154},[65,24083,24084],{"class":140,"line":3867},[65,24085,243],{"class":154},[15,24087,24088],{},"最後に、Cameraクラスを作成していきます。",[1177,24090,24091],{"id":3682},"Camera",[15,24093,24094,24095,24097],{},"今回、新規に作成する",[124,24096,24091],{},"クラスは次のようになります。",[129,24099,24102],{"className":131,"code":24100,"filename":24101,"language":134,"meta":135,"style":135},"import { Mat4 } from '../math/Mat4';\nimport { Vec3 } from '../math/Vec3';\nimport { Transform } from './Transform';\n\ninterface CameraOptions {\n near: number;\n far: number;\n fov: number;\n aspect: number;\n left: number;\n right: number;\n bottom: number;\n top: number;\n zoom: number;\n}\n\ninterface PerspectiveOptions extends Pick\u003CCameraOptions, 'near' | 'far' | 'fov' | 'aspect'> {}\n\ntype CameraType = 'perspective' | 'orthographic';\n\nexport class Camera extends Transform {\n projectionMatrix: Mat4;\n viewMatrix: Mat4;\n projectionViewMatrix: Mat4;\n worldPosition: Vec3;\n\n type: CameraType;\n\n near: number;\n far: number;\n fov: number;\n aspect: number;\n left?: number;\n right?: number;\n bottom?: number;\n top?: number;\n zoom: number;\n\n constructor(gl: WebGL2RenderingContext, options?: Partial\u003CCameraOptions>) {\n super();\n\n const { near = 0.1, far = 100, fov = 45, aspect = 1, left, right, bottom, top, zoom = 1 } = options || {};\n\n this.near = near;\n this.far = far;\n this.fov = fov;\n this.aspect = aspect;\n this.left = left;\n this.right = right;\n this.bottom = bottom;\n this.top = top;\n this.zoom = zoom;\n\n this.projectionMatrix = new Mat4();\n this.viewMatrix = new Mat4();\n this.projectionViewMatrix = new Mat4();\n this.worldPosition = new Vec3();\n\n this.type = left || right ? 'orthographic' : 'perspective';\n\n if (this.type === 'orthographic') {\n this.orthographic();\n } else {\n this.perspective();\n }\n }\n\n perspective(options?: Partial\u003CPerspectiveOptions>) {\n const { near = this.near, far = this.far, fov = this.fov, aspect = this.aspect } = options || {};\n\n Object.assign(this, { near, far, fov, aspect });\n this.projectionMatrix.fromPerspective({ fov: fov * (Math.PI / 180), aspect, near, far });\n this.type = 'perspective';\n return this;\n }\n\n orthographic({\n near = this.near,\n far = this.far,\n left = this.left || -1,\n right = this.right || 1,\n bottom = this.bottom || -1,\n top = this.top || 1,\n zoom = this.zoom,\n } = {}) {\n Object.assign(this, { near, far, left, right, bottom, top, zoom });\n left /= zoom;\n right /= zoom;\n bottom /= zoom;\n top /= zoom;\n this.projectionMatrix.fromOrthogonal({ left, right, bottom, top, near, far });\n this.type = 'orthographic';\n return this;\n }\n\n updateMatrixWorld() {\n super.updateMatrixWorld();\n this.viewMatrix.inverse(this.worldMatrix);\n this.worldMatrix.getTranslation(this.worldPosition);\n\n this.projectionViewMatrix.multiply(this.projectionMatrix, this.viewMatrix);\n return this;\n }\n}\n","Camera.ts",[124,24103,24104,24124,24144,24165,24169,24178,24189,24200,24211,24222,24233,24244,24255,24266,24277,24281,24285,24343,24347,24373,24377,24391,24402,24413,24424,24435,24439,24449,24453,24463,24473,24483,24493,24503,24513,24523,24533,24543,24547,24575,24583,24587,24662,24666,24680,24694,24708,24722,24737,24752,24767,24782,24797,24801,24819,24837,24856,24874,24878,24912,24916,24940,24952,24960,24972,24976,24980,24984,25007,25069,25073,25109,25167,25185,25193,25197,25201,25209,25224,25239,25260,25279,25300,25319,25334,25344,25392,25403,25413,25423,25433,25478,25496,25504,25508,25512,25520,25532,25557,25582,25586,25618,25626,25630],{"__ignoreMap":135},[65,24105,24106,24108,24110,24112,24114,24116,24118,24120,24122],{"class":140,"line":141},[65,24107,3251],{"class":154},[65,24109,287],{"class":154},[65,24111,20487],{"class":214},[65,24113,293],{"class":154},[65,24115,296],{"class":154},[65,24117,299],{"class":154},[65,24119,20496],{"class":302},[65,24121,306],{"class":154},[65,24123,155],{"class":154},[65,24125,24126,24128,24130,24132,24134,24136,24138,24140,24142],{"class":140,"line":158},[65,24127,3251],{"class":154},[65,24129,287],{"class":154},[65,24131,5488],{"class":214},[65,24133,293],{"class":154},[65,24135,296],{"class":154},[65,24137,299],{"class":154},[65,24139,20517],{"class":302},[65,24141,306],{"class":154},[65,24143,155],{"class":154},[65,24145,24146,24148,24150,24152,24154,24156,24158,24161,24163],{"class":140,"line":165},[65,24147,3251],{"class":154},[65,24149,287],{"class":154},[65,24151,20534],{"class":214},[65,24153,293],{"class":154},[65,24155,296],{"class":154},[65,24157,299],{"class":154},[65,24159,24160],{"class":302},"./Transform",[65,24162,306],{"class":154},[65,24164,155],{"class":154},[65,24166,24167],{"class":140,"line":180},[65,24168,162],{"emptyLinePlaceholder":161},[65,24170,24171,24173,24176],{"class":140,"line":194},[65,24172,14463],{"class":168},[65,24174,24175],{"class":326}," CameraOptions",[65,24177,418],{"class":154},[65,24179,24180,24183,24185,24187],{"class":140,"line":211},[65,24181,24182],{"class":144}," near",[65,24184,797],{"class":168},[65,24186,430],{"class":340},[65,24188,155],{"class":154},[65,24190,24191,24194,24196,24198],{"class":140,"line":240},[65,24192,24193],{"class":144}," far",[65,24195,797],{"class":168},[65,24197,430],{"class":340},[65,24199,155],{"class":154},[65,24201,24202,24205,24207,24209],{"class":140,"line":391},[65,24203,24204],{"class":144}," fov",[65,24206,797],{"class":168},[65,24208,430],{"class":340},[65,24210,155],{"class":154},[65,24212,24213,24216,24218,24220],{"class":140,"line":401},[65,24214,24215],{"class":144}," aspect",[65,24217,797],{"class":168},[65,24219,430],{"class":340},[65,24221,155],{"class":154},[65,24223,24224,24227,24229,24231],{"class":140,"line":406},[65,24225,24226],{"class":144}," left",[65,24228,797],{"class":168},[65,24230,430],{"class":340},[65,24232,155],{"class":154},[65,24234,24235,24238,24240,24242],{"class":140,"line":421},[65,24236,24237],{"class":144}," right",[65,24239,797],{"class":168},[65,24241,430],{"class":340},[65,24243,155],{"class":154},[65,24245,24246,24249,24251,24253],{"class":140,"line":435},[65,24247,24248],{"class":144}," bottom",[65,24250,797],{"class":168},[65,24252,430],{"class":340},[65,24254,155],{"class":154},[65,24256,24257,24260,24262,24264],{"class":140,"line":447},[65,24258,24259],{"class":144}," top",[65,24261,797],{"class":168},[65,24263,430],{"class":340},[65,24265,155],{"class":154},[65,24267,24268,24271,24273,24275],{"class":140,"line":459},[65,24269,24270],{"class":144}," zoom",[65,24272,797],{"class":168},[65,24274,430],{"class":340},[65,24276,155],{"class":154},[65,24278,24279],{"class":140,"line":471},[65,24280,243],{"class":154},[65,24282,24283],{"class":140,"line":63},[65,24284,162],{"emptyLinePlaceholder":161},[65,24286,24287,24289,24292,24294,24297,24299,24302,24304,24306,24309,24311,24313,24315,24318,24320,24322,24324,24327,24329,24331,24333,24336,24338,24340],{"class":140,"line":495},[65,24288,14463],{"class":168},[65,24290,24291],{"class":326}," PerspectiveOptions",[65,24293,5810],{"class":168},[65,24295,24296],{"class":302}," Pick",[65,24298,1830],{"class":154},[65,24300,24301],{"class":326},"CameraOptions",[65,24303,230],{"class":154},[65,24305,299],{"class":154},[65,24307,24308],{"class":302},"near",[65,24310,306],{"class":154},[65,24312,11880],{"class":168},[65,24314,299],{"class":154},[65,24316,24317],{"class":302},"far",[65,24319,306],{"class":154},[65,24321,11880],{"class":168},[65,24323,299],{"class":154},[65,24325,24326],{"class":302},"fov",[65,24328,306],{"class":154},[65,24330,11880],{"class":168},[65,24332,299],{"class":154},[65,24334,24335],{"class":302},"aspect",[65,24337,306],{"class":154},[65,24339,1836],{"class":154},[65,24341,24342],{"class":154}," {}\n",[65,24344,24345],{"class":140,"line":507},[65,24346,162],{"emptyLinePlaceholder":161},[65,24348,24349,24351,24354,24356,24358,24360,24362,24364,24366,24369,24371],{"class":140,"line":519},[65,24350,722],{"class":168},[65,24352,24353],{"class":326}," CameraType",[65,24355,218],{"class":168},[65,24357,299],{"class":154},[65,24359,4645],{"class":302},[65,24361,306],{"class":154},[65,24363,11880],{"class":168},[65,24365,299],{"class":154},[65,24367,24368],{"class":302},"orthographic",[65,24370,306],{"class":154},[65,24372,155],{"class":154},[65,24374,24375],{"class":140,"line":531},[65,24376,162],{"emptyLinePlaceholder":161},[65,24378,24379,24381,24383,24385,24387,24389],{"class":140,"line":543},[65,24380,284],{"class":154},[65,24382,774],{"class":168},[65,24384,3297],{"class":326},[65,24386,5810],{"class":168},[65,24388,20534],{"class":302},[65,24390,418],{"class":154},[65,24392,24393,24396,24398,24400],{"class":140,"line":555},[65,24394,24395],{"class":144}," projectionMatrix",[65,24397,797],{"class":168},[65,24399,20487],{"class":326},[65,24401,155],{"class":154},[65,24403,24404,24407,24409,24411],{"class":140,"line":567},[65,24405,24406],{"class":144}," viewMatrix",[65,24408,797],{"class":168},[65,24410,20487],{"class":326},[65,24412,155],{"class":154},[65,24414,24415,24418,24420,24422],{"class":140,"line":3757},[65,24416,24417],{"class":144}," projectionViewMatrix",[65,24419,797],{"class":168},[65,24421,20487],{"class":326},[65,24423,155],{"class":154},[65,24425,24426,24429,24431,24433],{"class":140,"line":3787},[65,24427,24428],{"class":144}," worldPosition",[65,24430,797],{"class":168},[65,24432,5488],{"class":326},[65,24434,155],{"class":154},[65,24436,24437],{"class":140,"line":3792},[65,24438,162],{"emptyLinePlaceholder":161},[65,24440,24441,24443,24445,24447],{"class":140,"line":3814},[65,24442,534],{"class":144},[65,24444,797],{"class":168},[65,24446,24353],{"class":326},[65,24448,155],{"class":154},[65,24450,24451],{"class":140,"line":3823},[65,24452,162],{"emptyLinePlaceholder":161},[65,24454,24455,24457,24459,24461],{"class":140,"line":3831},[65,24456,24182],{"class":144},[65,24458,797],{"class":168},[65,24460,430],{"class":340},[65,24462,155],{"class":154},[65,24464,24465,24467,24469,24471],{"class":140,"line":3841},[65,24466,24193],{"class":144},[65,24468,797],{"class":168},[65,24470,430],{"class":340},[65,24472,155],{"class":154},[65,24474,24475,24477,24479,24481],{"class":140,"line":3861},[65,24476,24204],{"class":144},[65,24478,797],{"class":168},[65,24480,430],{"class":340},[65,24482,155],{"class":154},[65,24484,24485,24487,24489,24491],{"class":140,"line":3867},[65,24486,24215],{"class":144},[65,24488,797],{"class":168},[65,24490,430],{"class":340},[65,24492,155],{"class":154},[65,24494,24495,24497,24499,24501],{"class":140,"line":3876},[65,24496,24226],{"class":144},[65,24498,427],{"class":168},[65,24500,430],{"class":340},[65,24502,155],{"class":154},[65,24504,24505,24507,24509,24511],{"class":140,"line":3881},[65,24506,24237],{"class":144},[65,24508,427],{"class":168},[65,24510,430],{"class":340},[65,24512,155],{"class":154},[65,24514,24515,24517,24519,24521],{"class":140,"line":3920},[65,24516,24248],{"class":144},[65,24518,427],{"class":168},[65,24520,430],{"class":340},[65,24522,155],{"class":154},[65,24524,24525,24527,24529,24531],{"class":140,"line":3954},[65,24526,24259],{"class":144},[65,24528,427],{"class":168},[65,24530,430],{"class":340},[65,24532,155],{"class":154},[65,24534,24535,24537,24539,24541],{"class":140,"line":3974},[65,24536,24270],{"class":144},[65,24538,797],{"class":168},[65,24540,430],{"class":340},[65,24542,155],{"class":154},[65,24544,24545],{"class":140,"line":3979},[65,24546,162],{"emptyLinePlaceholder":161},[65,24548,24549,24551,24553,24555,24557,24559,24561,24563,24565,24567,24569,24571,24573],{"class":140,"line":4031},[65,24550,788],{"class":168},[65,24552,224],{"class":154},[65,24554,794],{"class":793},[65,24556,797],{"class":168},[65,24558,800],{"class":326},[65,24560,230],{"class":154},[65,24562,814],{"class":793},[65,24564,427],{"class":168},[65,24566,5835],{"class":326},[65,24568,1830],{"class":154},[65,24570,24301],{"class":326},[65,24572,5843],{"class":154},[65,24574,418],{"class":154},[65,24576,24577,24579,24581],{"class":140,"line":4036},[65,24578,6510],{"class":830},[65,24580,1269],{"class":204},[65,24582,155],{"class":154},[65,24584,24585],{"class":140,"line":4070},[65,24586,162],{"emptyLinePlaceholder":161},[65,24588,24589,24591,24593,24595,24597,24599,24601,24603,24605,24607,24609,24611,24613,24615,24617,24619,24621,24623,24625,24628,24630,24633,24635,24638,24640,24643,24645,24648,24650,24652,24654,24656,24658,24660],{"class":140,"line":4086},[65,24590,848],{"class":168},[65,24592,287],{"class":154},[65,24594,3579],{"class":214},[65,24596,218],{"class":168},[65,24598,3584],{"class":793},[65,24600,230],{"class":154},[65,24602,3589],{"class":214},[65,24604,218],{"class":168},[65,24606,3594],{"class":793},[65,24608,230],{"class":154},[65,24610,3569],{"class":214},[65,24612,218],{"class":168},[65,24614,3574],{"class":793},[65,24616,230],{"class":154},[65,24618,4652],{"class":214},[65,24620,218],{"class":168},[65,24622,3137],{"class":793},[65,24624,230],{"class":154},[65,24626,24627],{"class":214}," left",[65,24629,230],{"class":154},[65,24631,24632],{"class":214}," right",[65,24634,230],{"class":154},[65,24636,24637],{"class":214}," bottom",[65,24639,230],{"class":154},[65,24641,24642],{"class":214}," top",[65,24644,230],{"class":154},[65,24646,24647],{"class":214}," zoom",[65,24649,218],{"class":168},[65,24651,3137],{"class":793},[65,24653,293],{"class":154},[65,24655,218],{"class":168},[65,24657,814],{"class":214},[65,24659,2269],{"class":168},[65,24661,5905],{"class":154},[65,24663,24664],{"class":140,"line":4102},[65,24665,162],{"emptyLinePlaceholder":161},[65,24667,24668,24670,24672,24674,24676,24678],{"class":140,"line":4118},[65,24669,831],{"class":830},[65,24671,834],{"class":154},[65,24673,24308],{"class":214},[65,24675,218],{"class":168},[65,24677,3579],{"class":214},[65,24679,155],{"class":154},[65,24681,24682,24684,24686,24688,24690,24692],{"class":140,"line":4149},[65,24683,831],{"class":830},[65,24685,834],{"class":154},[65,24687,24317],{"class":214},[65,24689,218],{"class":168},[65,24691,3589],{"class":214},[65,24693,155],{"class":154},[65,24695,24696,24698,24700,24702,24704,24706],{"class":140,"line":4163},[65,24697,831],{"class":830},[65,24699,834],{"class":154},[65,24701,24326],{"class":214},[65,24703,218],{"class":168},[65,24705,3569],{"class":214},[65,24707,155],{"class":154},[65,24709,24710,24712,24714,24716,24718,24720],{"class":140,"line":4168},[65,24711,831],{"class":830},[65,24713,834],{"class":154},[65,24715,24335],{"class":214},[65,24717,218],{"class":168},[65,24719,4652],{"class":214},[65,24721,155],{"class":154},[65,24723,24724,24726,24728,24731,24733,24735],{"class":140,"line":4194},[65,24725,831],{"class":830},[65,24727,834],{"class":154},[65,24729,24730],{"class":214},"left",[65,24732,218],{"class":168},[65,24734,24627],{"class":214},[65,24736,155],{"class":154},[65,24738,24739,24741,24743,24746,24748,24750],{"class":140,"line":4199},[65,24740,831],{"class":830},[65,24742,834],{"class":154},[65,24744,24745],{"class":214},"right",[65,24747,218],{"class":168},[65,24749,24632],{"class":214},[65,24751,155],{"class":154},[65,24753,24754,24756,24758,24761,24763,24765],{"class":140,"line":4221},[65,24755,831],{"class":830},[65,24757,834],{"class":154},[65,24759,24760],{"class":214},"bottom",[65,24762,218],{"class":168},[65,24764,24637],{"class":214},[65,24766,155],{"class":154},[65,24768,24769,24771,24773,24776,24778,24780],{"class":140,"line":4228},[65,24770,831],{"class":830},[65,24772,834],{"class":154},[65,24774,24775],{"class":214},"top",[65,24777,218],{"class":168},[65,24779,24642],{"class":214},[65,24781,155],{"class":154},[65,24783,24784,24786,24788,24791,24793,24795],{"class":140,"line":4235},[65,24785,831],{"class":830},[65,24787,834],{"class":154},[65,24789,24790],{"class":214},"zoom",[65,24792,218],{"class":168},[65,24794,24647],{"class":214},[65,24796,155],{"class":154},[65,24798,24799],{"class":140,"line":4244},[65,24800,162],{"emptyLinePlaceholder":161},[65,24802,24803,24805,24807,24809,24811,24813,24815,24817],{"class":140,"line":4261},[65,24804,831],{"class":830},[65,24806,834],{"class":154},[65,24808,22513],{"class":214},[65,24810,218],{"class":168},[65,24812,1776],{"class":168},[65,24814,20487],{"class":200},[65,24816,1269],{"class":204},[65,24818,155],{"class":154},[65,24820,24821,24823,24825,24827,24829,24831,24833,24835],{"class":140,"line":4266},[65,24822,831],{"class":830},[65,24824,834],{"class":154},[65,24826,22568],{"class":214},[65,24828,218],{"class":168},[65,24830,1776],{"class":168},[65,24832,20487],{"class":200},[65,24834,1269],{"class":204},[65,24836,155],{"class":154},[65,24838,24839,24841,24843,24846,24848,24850,24852,24854],{"class":140,"line":4275},[65,24840,831],{"class":830},[65,24842,834],{"class":154},[65,24844,24845],{"class":214},"projectionViewMatrix",[65,24847,218],{"class":168},[65,24849,1776],{"class":168},[65,24851,20487],{"class":200},[65,24853,1269],{"class":204},[65,24855,155],{"class":154},[65,24857,24858,24860,24862,24864,24866,24868,24870,24872],{"class":140,"line":4280},[65,24859,831],{"class":830},[65,24861,834],{"class":154},[65,24863,22553],{"class":214},[65,24865,218],{"class":168},[65,24867,1776],{"class":168},[65,24869,5488],{"class":200},[65,24871,1269],{"class":204},[65,24873,155],{"class":154},[65,24875,24876],{"class":140,"line":4322},[65,24877,162],{"emptyLinePlaceholder":161},[65,24879,24880,24882,24884,24886,24888,24890,24892,24894,24896,24898,24900,24902,24904,24906,24908,24910],{"class":140,"line":4375},[65,24881,831],{"class":830},[65,24883,834],{"class":154},[65,24885,722],{"class":214},[65,24887,218],{"class":168},[65,24889,24627],{"class":214},[65,24891,2269],{"class":168},[65,24893,24632],{"class":214},[65,24895,7521],{"class":168},[65,24897,299],{"class":154},[65,24899,24368],{"class":302},[65,24901,306],{"class":154},[65,24903,7529],{"class":168},[65,24905,299],{"class":154},[65,24907,4645],{"class":302},[65,24909,306],{"class":154},[65,24911,155],{"class":154},[65,24913,24914],{"class":140,"line":4408},[65,24915,162],{"emptyLinePlaceholder":161},[65,24917,24918,24920,24922,24924,24926,24928,24930,24932,24934,24936,24938],{"class":140,"line":4426},[65,24919,3105],{"class":154},[65,24921,1696],{"class":204},[65,24923,2004],{"class":830},[65,24925,834],{"class":154},[65,24927,722],{"class":214},[65,24929,1704],{"class":168},[65,24931,299],{"class":154},[65,24933,24368],{"class":302},[65,24935,306],{"class":154},[65,24937,1713],{"class":204},[65,24939,208],{"class":154},[65,24941,24942,24944,24946,24948,24950],{"class":140,"line":4431},[65,24943,20954],{"class":830},[65,24945,834],{"class":154},[65,24947,24368],{"class":200},[65,24949,1269],{"class":204},[65,24951,155],{"class":154},[65,24953,24954,24956,24958],{"class":140,"line":4447},[65,24955,6341],{"class":154},[65,24957,2115],{"class":154},[65,24959,418],{"class":154},[65,24961,24962,24964,24966,24968,24970],{"class":140,"line":4470},[65,24963,20954],{"class":830},[65,24965,834],{"class":154},[65,24967,4645],{"class":200},[65,24969,1269],{"class":204},[65,24971,155],{"class":154},[65,24973,24974],{"class":140,"line":4490},[65,24975,3204],{"class":154},[65,24977,24978],{"class":140,"line":4495},[65,24979,1171],{"class":154},[65,24981,24982],{"class":140,"line":4523},[65,24983,162],{"emptyLinePlaceholder":161},[65,24985,24986,24989,24991,24994,24996,24998,25000,25003,25005],{"class":140,"line":4528},[65,24987,24988],{"class":200}," perspective",[65,24990,224],{"class":154},[65,24992,24993],{"class":793},"options",[65,24995,427],{"class":168},[65,24997,5835],{"class":326},[65,24999,1830],{"class":154},[65,25001,25002],{"class":326},"PerspectiveOptions",[65,25004,5843],{"class":154},[65,25006,418],{"class":154},[65,25008,25009,25011,25013,25015,25017,25019,25021,25023,25025,25027,25029,25031,25033,25035,25037,25039,25041,25043,25045,25047,25049,25051,25053,25055,25057,25059,25061,25063,25065,25067],{"class":140,"line":4542},[65,25010,848],{"class":168},[65,25012,287],{"class":154},[65,25014,3579],{"class":214},[65,25016,218],{"class":168},[65,25018,1434],{"class":830},[65,25020,834],{"class":154},[65,25022,24308],{"class":214},[65,25024,230],{"class":154},[65,25026,3589],{"class":214},[65,25028,218],{"class":168},[65,25030,1434],{"class":830},[65,25032,834],{"class":154},[65,25034,24317],{"class":214},[65,25036,230],{"class":154},[65,25038,3569],{"class":214},[65,25040,218],{"class":168},[65,25042,1434],{"class":830},[65,25044,834],{"class":154},[65,25046,24326],{"class":214},[65,25048,230],{"class":154},[65,25050,4652],{"class":214},[65,25052,218],{"class":168},[65,25054,1434],{"class":830},[65,25056,834],{"class":154},[65,25058,24335],{"class":214},[65,25060,293],{"class":154},[65,25062,218],{"class":168},[65,25064,814],{"class":214},[65,25066,2269],{"class":168},[65,25068,5905],{"class":154},[65,25070,25071],{"class":140,"line":4547},[65,25072,162],{"emptyLinePlaceholder":161},[65,25074,25075,25077,25079,25081,25083,25085,25087,25089,25091,25093,25095,25097,25099,25101,25103,25105,25107],{"class":140,"line":4561},[65,25076,15701],{"class":214},[65,25078,834],{"class":154},[65,25080,15706],{"class":200},[65,25082,224],{"class":204},[65,25084,2004],{"class":830},[65,25086,230],{"class":154},[65,25088,287],{"class":154},[65,25090,3579],{"class":214},[65,25092,230],{"class":154},[65,25094,3589],{"class":214},[65,25096,230],{"class":154},[65,25098,3569],{"class":214},[65,25100,230],{"class":154},[65,25102,4652],{"class":214},[65,25104,293],{"class":154},[65,25106,235],{"class":204},[65,25108,155],{"class":154},[65,25110,25111,25113,25115,25117,25119,25122,25124,25126,25128,25130,25132,25134,25136,25138,25140,25142,25144,25147,25149,25151,25153,25155,25157,25159,25161,25163,25165],{"class":140,"line":4567},[65,25112,831],{"class":830},[65,25114,834],{"class":154},[65,25116,22513],{"class":214},[65,25118,834],{"class":154},[65,25120,25121],{"class":200},"fromPerspective",[65,25123,224],{"class":204},[65,25125,4508],{"class":154},[65,25127,3569],{"class":204},[65,25129,797],{"class":154},[65,25131,3569],{"class":214},[65,25133,5933],{"class":168},[65,25135,1696],{"class":204},[65,25137,4341],{"class":214},[65,25139,834],{"class":154},[65,25141,4346],{"class":214},[65,25143,4349],{"class":168},[65,25145,25146],{"class":793}," 180",[65,25148,235],{"class":204},[65,25150,230],{"class":154},[65,25152,4652],{"class":214},[65,25154,230],{"class":154},[65,25156,3579],{"class":214},[65,25158,230],{"class":154},[65,25160,3589],{"class":214},[65,25162,293],{"class":154},[65,25164,235],{"class":204},[65,25166,155],{"class":154},[65,25168,25169,25171,25173,25175,25177,25179,25181,25183],{"class":140,"line":4572},[65,25170,831],{"class":830},[65,25172,834],{"class":154},[65,25174,722],{"class":214},[65,25176,218],{"class":168},[65,25178,299],{"class":154},[65,25180,4645],{"class":302},[65,25182,306],{"class":154},[65,25184,155],{"class":154},[65,25186,25187,25189,25191],{"class":140,"line":4582},[65,25188,2684],{"class":154},[65,25190,1434],{"class":830},[65,25192,155],{"class":154},[65,25194,25195],{"class":140,"line":4587},[65,25196,1171],{"class":154},[65,25198,25199],{"class":140,"line":4603},[65,25200,162],{"emptyLinePlaceholder":161},[65,25202,25203,25206],{"class":140,"line":4637},[65,25204,25205],{"class":200}," orthographic",[65,25207,25208],{"class":154},"({\n",[65,25210,25211,25214,25216,25218,25220,25222],{"class":140,"line":4685},[65,25212,25213],{"class":793}," near",[65,25215,218],{"class":168},[65,25217,1434],{"class":830},[65,25219,834],{"class":154},[65,25221,24308],{"class":144},[65,25223,3820],{"class":154},[65,25225,25226,25229,25231,25233,25235,25237],{"class":140,"line":4690},[65,25227,25228],{"class":793}," far",[65,25230,218],{"class":168},[65,25232,1434],{"class":830},[65,25234,834],{"class":154},[65,25236,24317],{"class":144},[65,25238,3820],{"class":154},[65,25240,25241,25244,25246,25248,25250,25252,25254,25256,25258],{"class":140,"line":4718},[65,25242,25243],{"class":793}," left",[65,25245,218],{"class":168},[65,25247,1434],{"class":830},[65,25249,834],{"class":154},[65,25251,24730],{"class":144},[65,25253,2269],{"class":168},[65,25255,4399],{"class":168},[65,25257,3620],{"class":793},[65,25259,3820],{"class":154},[65,25261,25262,25265,25267,25269,25271,25273,25275,25277],{"class":140,"line":4728},[65,25263,25264],{"class":793}," right",[65,25266,218],{"class":168},[65,25268,1434],{"class":830},[65,25270,834],{"class":154},[65,25272,24745],{"class":144},[65,25274,2269],{"class":168},[65,25276,3137],{"class":793},[65,25278,3820],{"class":154},[65,25280,25281,25284,25286,25288,25290,25292,25294,25296,25298],{"class":140,"line":10019},[65,25282,25283],{"class":793}," bottom",[65,25285,218],{"class":168},[65,25287,1434],{"class":830},[65,25289,834],{"class":154},[65,25291,24760],{"class":144},[65,25293,2269],{"class":168},[65,25295,4399],{"class":168},[65,25297,3620],{"class":793},[65,25299,3820],{"class":154},[65,25301,25302,25305,25307,25309,25311,25313,25315,25317],{"class":140,"line":10042},[65,25303,25304],{"class":793}," top",[65,25306,218],{"class":168},[65,25308,1434],{"class":830},[65,25310,834],{"class":154},[65,25312,24775],{"class":144},[65,25314,2269],{"class":168},[65,25316,3137],{"class":793},[65,25318,3820],{"class":154},[65,25320,25321,25324,25326,25328,25330,25332],{"class":140,"line":10065},[65,25322,25323],{"class":793}," zoom",[65,25325,218],{"class":168},[65,25327,1434],{"class":830},[65,25329,834],{"class":154},[65,25331,24790],{"class":144},[65,25333,3820],{"class":154},[65,25335,25336,25338,25340,25342],{"class":140,"line":10070},[65,25337,1977],{"class":154},[65,25339,218],{"class":168},[65,25341,823],{"class":154},[65,25343,418],{"class":154},[65,25345,25346,25348,25350,25352,25354,25356,25358,25360,25362,25364,25366,25368,25370,25372,25374,25376,25378,25380,25382,25384,25386,25388,25390],{"class":140,"line":10079},[65,25347,15701],{"class":214},[65,25349,834],{"class":154},[65,25351,15706],{"class":200},[65,25353,224],{"class":204},[65,25355,2004],{"class":830},[65,25357,230],{"class":154},[65,25359,287],{"class":154},[65,25361,3579],{"class":214},[65,25363,230],{"class":154},[65,25365,3589],{"class":214},[65,25367,230],{"class":154},[65,25369,24627],{"class":214},[65,25371,230],{"class":154},[65,25373,24632],{"class":214},[65,25375,230],{"class":154},[65,25377,24637],{"class":214},[65,25379,230],{"class":154},[65,25381,24642],{"class":214},[65,25383,230],{"class":154},[65,25385,24647],{"class":214},[65,25387,293],{"class":154},[65,25389,235],{"class":204},[65,25391,155],{"class":154},[65,25393,25394,25396,25399,25401],{"class":140,"line":10084},[65,25395,25243],{"class":214},[65,25397,25398],{"class":168}," /=",[65,25400,24647],{"class":214},[65,25402,155],{"class":154},[65,25404,25405,25407,25409,25411],{"class":140,"line":10109},[65,25406,25264],{"class":214},[65,25408,25398],{"class":168},[65,25410,24647],{"class":214},[65,25412,155],{"class":154},[65,25414,25415,25417,25419,25421],{"class":140,"line":10114},[65,25416,25283],{"class":214},[65,25418,25398],{"class":168},[65,25420,24647],{"class":214},[65,25422,155],{"class":154},[65,25424,25425,25427,25429,25431],{"class":140,"line":12945},[65,25426,25304],{"class":214},[65,25428,25398],{"class":168},[65,25430,24647],{"class":214},[65,25432,155],{"class":154},[65,25434,25435,25437,25439,25441,25443,25446,25448,25450,25452,25454,25456,25458,25460,25462,25464,25466,25468,25470,25472,25474,25476],{"class":140,"line":12950},[65,25436,831],{"class":830},[65,25438,834],{"class":154},[65,25440,22513],{"class":214},[65,25442,834],{"class":154},[65,25444,25445],{"class":200},"fromOrthogonal",[65,25447,224],{"class":204},[65,25449,4508],{"class":154},[65,25451,24627],{"class":214},[65,25453,230],{"class":154},[65,25455,24632],{"class":214},[65,25457,230],{"class":154},[65,25459,24637],{"class":214},[65,25461,230],{"class":154},[65,25463,24642],{"class":214},[65,25465,230],{"class":154},[65,25467,3579],{"class":214},[65,25469,230],{"class":154},[65,25471,3589],{"class":214},[65,25473,293],{"class":154},[65,25475,235],{"class":204},[65,25477,155],{"class":154},[65,25479,25480,25482,25484,25486,25488,25490,25492,25494],{"class":140,"line":12955},[65,25481,831],{"class":830},[65,25483,834],{"class":154},[65,25485,722],{"class":214},[65,25487,218],{"class":168},[65,25489,299],{"class":154},[65,25491,24368],{"class":302},[65,25493,306],{"class":154},[65,25495,155],{"class":154},[65,25497,25498,25500,25502],{"class":140,"line":12960},[65,25499,2684],{"class":154},[65,25501,1434],{"class":830},[65,25503,155],{"class":154},[65,25505,25506],{"class":140,"line":12965},[65,25507,1171],{"class":154},[65,25509,25510],{"class":140,"line":12972},[65,25511,162],{"emptyLinePlaceholder":161},[65,25513,25514,25516,25518],{"class":140,"line":12981},[65,25515,20787],{"class":200},[65,25517,1269],{"class":154},[65,25519,418],{"class":154},[65,25521,25522,25524,25526,25528,25530],{"class":140,"line":12998},[65,25523,6510],{"class":830},[65,25525,834],{"class":154},[65,25527,21031],{"class":200},[65,25529,1269],{"class":204},[65,25531,155],{"class":154},[65,25533,25534,25536,25538,25540,25542,25545,25547,25549,25551,25553,25555],{"class":140,"line":13019},[65,25535,831],{"class":830},[65,25537,834],{"class":154},[65,25539,22568],{"class":214},[65,25541,834],{"class":154},[65,25543,25544],{"class":200},"inverse",[65,25546,224],{"class":204},[65,25548,2004],{"class":830},[65,25550,834],{"class":154},[65,25552,10060],{"class":214},[65,25554,235],{"class":204},[65,25556,155],{"class":154},[65,25558,25559,25561,25563,25565,25567,25570,25572,25574,25576,25578,25580],{"class":140,"line":13040},[65,25560,831],{"class":830},[65,25562,834],{"class":154},[65,25564,10060],{"class":214},[65,25566,834],{"class":154},[65,25568,25569],{"class":200},"getTranslation",[65,25571,224],{"class":204},[65,25573,2004],{"class":830},[65,25575,834],{"class":154},[65,25577,22553],{"class":214},[65,25579,235],{"class":204},[65,25581,155],{"class":154},[65,25583,25584],{"class":140,"line":13045},[65,25585,162],{"emptyLinePlaceholder":161},[65,25587,25588,25590,25592,25594,25596,25598,25600,25602,25604,25606,25608,25610,25612,25614,25616],{"class":140,"line":13054},[65,25589,831],{"class":830},[65,25591,834],{"class":154},[65,25593,24845],{"class":214},[65,25595,834],{"class":154},[65,25597,12379],{"class":200},[65,25599,224],{"class":204},[65,25601,2004],{"class":830},[65,25603,834],{"class":154},[65,25605,22513],{"class":214},[65,25607,230],{"class":154},[65,25609,1434],{"class":830},[65,25611,834],{"class":154},[65,25613,22568],{"class":214},[65,25615,235],{"class":204},[65,25617,155],{"class":154},[65,25619,25620,25622,25624],{"class":140,"line":13059},[65,25621,2684],{"class":154},[65,25623,1434],{"class":830},[65,25625,155],{"class":154},[65,25627,25628],{"class":140,"line":13084},[65,25629,1171],{"class":154},[65,25631,25632],{"class":140,"line":13089},[65,25633,243],{"class":154},[15,25635,25636,25637,25639],{},"このクラスは、",[124,25638,20457],{},"クラスを継承しているため、位置や行列の管理ができるようになっています。",[15,25641,25642],{},"また、カメラ特有のプロパティやメソッドも追加しています。",[89,25644,25645,25650,25655,25660,25665,25670,25675,25680],{},[92,25646,25647,25649],{},[124,25648,22513],{},": 投影行列を格納するプロパティ",[92,25651,25652,25654],{},[124,25653,22568],{},": ビュー行列を格納するプロパティ",[92,25656,25657,25659],{},[124,25658,24845],{},": 投影行列とビュー行列を掛け合わせた行列を格納するプロパティ",[92,25661,25662,25664],{},[124,25663,22553],{},": ワールド空間でのカメラの位置を格納するプロパティ",[92,25666,25667,25669],{},[124,25668,722],{},": カメラのタイプを格納するプロパティ（透視投影か正射影か）",[92,25671,25672,25674],{},[124,25673,4645],{},": 透視投影を設定するメソッド",[92,25676,25677,25679],{},[124,25678,24368],{},": 正射影を設定するメソッド",[92,25681,25682,25684],{},[124,25683,21031],{},": ワールド行列を更新する際に、ビュー行列や投影ビュー行列も更新するようにオーバーライドしたメソッド になります。",[15,25686,25687,10345,25689,25691,25692,25695],{},[124,25688,25121],{},[124,25690,25445],{},"は、投影行列を計算するために自前で実装したメソッドになります。これらのメソッドは、",[124,25693,25694],{},"Mat4","クラスの中に実装しているので、そちらを確認してみてください。",[15,25697,25698],{},"これで、Cameraクラスの実装は以上になります。",[1177,25700,25701],{"id":25701},"使用方法",[15,25703,25704,25705,25707],{},"一つの頂点バッファで複数の三角形を描画する方法の準備が整ったので、実際に描画してみましょう。",[5467,25706],{},"\n全体のコードは次のようになります。",[129,25709,25711],{"className":131,"code":25710,"filename":263,"language":134,"meta":135,"style":135},"import { Camera, Geometry, Mesh, Program, Render, Scene } from '@/lib/webgl';\n\nimport fragment from './index.frag?raw';\nimport vertex from './index.vert?raw';\n\nexport const onload = () => {\n const canvas = document.getElementById('webgl-canvas') as HTMLCanvasElement;\n const render = new Render(canvas);\n render.fitScreen();\n const gl = render.gl;\n gl.clearColor(1.0, 1.0, 1.0, 1.0);\n\n const camera = new Camera(gl, { fov: 45, near: 0.1, far: 100 });\n camera.position.z = 3;\n\n const scene = new Scene();\n\n const positions = new Float32Array([0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0]);\n const uvs = new Float32Array([0, 0, 1, 0, 0, 1]);\n const indices = new Uint16Array([0, 1, 2]);\n\n const geometry = new Geometry(gl, {\n position: { size: 3, data: positions },\n uv: { size: 2, data: uvs },\n index: { size: 1, data: indices },\n });\n\n const program = new Program(gl, {\n vertex,\n fragment,\n uniforms: {\n uTime: { value: 0 },\n },\n });\n\n const triangle1 = new Mesh(gl, { geometry, program });\n triangle1.position.x = -0.5;\n triangle1.position.y = -0.5;\n scene.add(triangle1);\n\n const triangle2 = new Mesh(gl, { geometry, program });\n triangle2.position.x = 0.5;\n triangle2.position.y = -0.5;\n scene.add(triangle2);\n\n const triangle3 = new Mesh(gl, { geometry, program });\n triangle3.position.y = 0.5;\n scene.add(triangle3);\n\n const update = () => {\n render.render({ scene, camera });\n\n requestAnimationFrame(update);\n };\n\n update();\n\n const resize = () => {\n render.setSize(window.innerWidth, window.innerHeight);\n camera.perspective({ aspect: gl.canvas.width / gl.canvas.height });\n };\n window.addEventListener('resize', resize);\n};\n",[124,25712,25713,25753,25757,25773,25789,25793,25809,25839,25859,25871,25887,25915,25919,25967,25986,25990,26006,26010,26071,26112,26140,26144,26164,26188,26212,26236,26244,26248,26268,26274,26280,26288,26305,26309,26317,26321,26354,26375,26395,26412,26416,26449,26468,26488,26505,26509,26542,26561,26578,26582,26596,26620,26624,26636,26640,26644,26652,26656,26670,26698,26742,26746,26770],{"__ignoreMap":135},[65,25714,25715,25717,25719,25721,25723,25725,25727,25729,25731,25733,25735,25737,25739,25741,25743,25745,25747,25749,25751],{"class":140,"line":141},[65,25716,3251],{"class":154},[65,25718,287],{"class":154},[65,25720,3297],{"class":214},[65,25722,230],{"class":154},[65,25724,5645],{"class":214},[65,25726,230],{"class":154},[65,25728,3302],{"class":214},[65,25730,230],{"class":154},[65,25732,3081],{"class":214},[65,25734,230],{"class":154},[65,25736,3321],{"class":214},[65,25738,230],{"class":154},[65,25740,3326],{"class":214},[65,25742,293],{"class":154},[65,25744,296],{"class":154},[65,25746,299],{"class":154},[65,25748,3339],{"class":302},[65,25750,306],{"class":154},[65,25752,155],{"class":154},[65,25754,25755],{"class":140,"line":158},[65,25756,162],{"emptyLinePlaceholder":161},[65,25758,25759,25761,25763,25765,25767,25769,25771],{"class":140,"line":165},[65,25760,3251],{"class":154},[65,25762,3350],{"class":144},[65,25764,296],{"class":154},[65,25766,299],{"class":154},[65,25768,3357],{"class":302},[65,25770,306],{"class":154},[65,25772,155],{"class":154},[65,25774,25775,25777,25779,25781,25783,25785,25787],{"class":140,"line":180},[65,25776,3251],{"class":154},[65,25778,3368],{"class":144},[65,25780,296],{"class":154},[65,25782,299],{"class":154},[65,25784,3375],{"class":302},[65,25786,306],{"class":154},[65,25788,155],{"class":154},[65,25790,25791],{"class":140,"line":194},[65,25792,162],{"emptyLinePlaceholder":161},[65,25794,25795,25797,25799,25801,25803,25805,25807],{"class":140,"line":211},[65,25796,284],{"class":154},[65,25798,3390],{"class":168},[65,25800,3393],{"class":200},[65,25802,218],{"class":168},[65,25804,1932],{"class":154},[65,25806,1862],{"class":168},[65,25808,418],{"class":154},[65,25810,25811,25813,25815,25817,25819,25821,25823,25825,25827,25829,25831,25833,25835,25837],{"class":140,"line":240},[65,25812,2243],{"class":168},[65,25814,3408],{"class":214},[65,25816,218],{"class":168},[65,25818,3413],{"class":214},[65,25820,834],{"class":154},[65,25822,3418],{"class":200},[65,25824,224],{"class":204},[65,25826,306],{"class":154},[65,25828,3425],{"class":302},[65,25830,306],{"class":154},[65,25832,1713],{"class":204},[65,25834,3432],{"class":154},[65,25836,368],{"class":326},[65,25838,155],{"class":154},[65,25840,25841,25843,25845,25847,25849,25851,25853,25855,25857],{"class":140,"line":391},[65,25842,2243],{"class":168},[65,25844,3443],{"class":214},[65,25846,218],{"class":168},[65,25848,1776],{"class":168},[65,25850,3321],{"class":200},[65,25852,224],{"class":204},[65,25854,3454],{"class":214},[65,25856,235],{"class":204},[65,25858,155],{"class":154},[65,25860,25861,25863,25865,25867,25869],{"class":140,"line":401},[65,25862,3463],{"class":214},[65,25864,834],{"class":154},[65,25866,3468],{"class":200},[65,25868,1269],{"class":204},[65,25870,155],{"class":154},[65,25872,25873,25875,25877,25879,25881,25883,25885],{"class":140,"line":406},[65,25874,2243],{"class":168},[65,25876,841],{"class":214},[65,25878,218],{"class":168},[65,25880,3443],{"class":214},[65,25882,834],{"class":154},[65,25884,794],{"class":214},[65,25886,155],{"class":154},[65,25888,25889,25891,25893,25895,25897,25899,25901,25903,25905,25907,25909,25911,25913],{"class":140,"line":421},[65,25890,2350],{"class":214},[65,25892,834],{"class":154},[65,25894,3497],{"class":200},[65,25896,224],{"class":204},[65,25898,3502],{"class":793},[65,25900,230],{"class":154},[65,25902,3507],{"class":793},[65,25904,230],{"class":154},[65,25906,3507],{"class":793},[65,25908,230],{"class":154},[65,25910,3507],{"class":793},[65,25912,235],{"class":204},[65,25914,155],{"class":154},[65,25916,25917],{"class":140,"line":435},[65,25918,162],{"emptyLinePlaceholder":161},[65,25920,25921,25923,25925,25927,25929,25931,25933,25935,25937,25939,25941,25943,25945,25947,25949,25951,25953,25955,25957,25959,25961,25963,25965],{"class":140,"line":447},[65,25922,2243],{"class":168},[65,25924,3552],{"class":214},[65,25926,218],{"class":168},[65,25928,1776],{"class":168},[65,25930,3297],{"class":200},[65,25932,224],{"class":204},[65,25934,794],{"class":214},[65,25936,230],{"class":154},[65,25938,287],{"class":154},[65,25940,3569],{"class":204},[65,25942,797],{"class":154},[65,25944,3574],{"class":793},[65,25946,230],{"class":154},[65,25948,3579],{"class":204},[65,25950,797],{"class":154},[65,25952,3584],{"class":793},[65,25954,230],{"class":154},[65,25956,3589],{"class":204},[65,25958,797],{"class":154},[65,25960,3594],{"class":793},[65,25962,293],{"class":154},[65,25964,235],{"class":204},[65,25966,155],{"class":154},[65,25968,25969,25971,25973,25975,25977,25980,25982,25984],{"class":140,"line":459},[65,25970,3605],{"class":214},[65,25972,834],{"class":154},[65,25974,3610],{"class":214},[65,25976,834],{"class":154},[65,25978,25979],{"class":214},"z",[65,25981,218],{"class":168},[65,25983,3739],{"class":793},[65,25985,155],{"class":154},[65,25987,25988],{"class":140,"line":471},[65,25989,162],{"emptyLinePlaceholder":161},[65,25991,25992,25994,25996,25998,26000,26002,26004],{"class":140,"line":63},[65,25993,2243],{"class":168},[65,25995,3697],{"class":214},[65,25997,218],{"class":168},[65,25999,1776],{"class":168},[65,26001,3326],{"class":200},[65,26003,1269],{"class":204},[65,26005,155],{"class":154},[65,26007,26008],{"class":140,"line":495},[65,26009,162],{"emptyLinePlaceholder":161},[65,26011,26012,26014,26017,26019,26021,26023,26025,26028,26030,26032,26034,26037,26039,26041,26043,26045,26047,26049,26051,26053,26055,26057,26059,26061,26063,26065,26067,26069],{"class":140,"line":507},[65,26013,2243],{"class":168},[65,26015,26016],{"class":214}," positions",[65,26018,218],{"class":168},[65,26020,1776],{"class":168},[65,26022,5951],{"class":200},[65,26024,3645],{"class":204},[65,26026,26027],{"class":793},"0.0",[65,26029,230],{"class":154},[65,26031,5559],{"class":793},[65,26033,230],{"class":154},[65,26035,26036],{"class":793}," 0.0",[65,26038,230],{"class":154},[65,26040,4399],{"class":168},[65,26042,5554],{"class":793},[65,26044,230],{"class":154},[65,26046,4399],{"class":168},[65,26048,5554],{"class":793},[65,26050,230],{"class":154},[65,26052,26036],{"class":793},[65,26054,230],{"class":154},[65,26056,5559],{"class":793},[65,26058,230],{"class":154},[65,26060,4399],{"class":168},[65,26062,5554],{"class":793},[65,26064,230],{"class":154},[65,26066,26036],{"class":793},[65,26068,3658],{"class":204},[65,26070,155],{"class":154},[65,26072,26073,26075,26078,26080,26082,26084,26086,26088,26090,26092,26094,26096,26098,26100,26102,26104,26106,26108,26110],{"class":140,"line":519},[65,26074,2243],{"class":168},[65,26076,26077],{"class":214}," uvs",[65,26079,218],{"class":168},[65,26081,1776],{"class":168},[65,26083,5951],{"class":200},[65,26085,3645],{"class":204},[65,26087,743],{"class":793},[65,26089,230],{"class":154},[65,26091,1142],{"class":793},[65,26093,230],{"class":154},[65,26095,3137],{"class":793},[65,26097,230],{"class":154},[65,26099,1142],{"class":793},[65,26101,230],{"class":154},[65,26103,1142],{"class":793},[65,26105,230],{"class":154},[65,26107,3137],{"class":793},[65,26109,3658],{"class":204},[65,26111,155],{"class":154},[65,26113,26114,26116,26118,26120,26122,26124,26126,26128,26130,26132,26134,26136,26138],{"class":140,"line":531},[65,26115,2243],{"class":168},[65,26117,16416],{"class":214},[65,26119,218],{"class":168},[65,26121,1776],{"class":168},[65,26123,6194],{"class":200},[65,26125,3645],{"class":204},[65,26127,743],{"class":793},[65,26129,230],{"class":154},[65,26131,3137],{"class":793},[65,26133,230],{"class":154},[65,26135,3748],{"class":793},[65,26137,3658],{"class":204},[65,26139,155],{"class":154},[65,26141,26142],{"class":140,"line":543},[65,26143,162],{"emptyLinePlaceholder":161},[65,26145,26146,26148,26150,26152,26154,26156,26158,26160,26162],{"class":140,"line":555},[65,26147,2243],{"class":168},[65,26149,3903],{"class":214},[65,26151,218],{"class":168},[65,26153,1776],{"class":168},[65,26155,5645],{"class":200},[65,26157,224],{"class":204},[65,26159,794],{"class":214},[65,26161,230],{"class":154},[65,26163,418],{"class":154},[65,26165,26166,26168,26170,26172,26174,26176,26178,26180,26182,26184,26186],{"class":140,"line":567},[65,26167,18379],{"class":204},[65,26169,797],{"class":154},[65,26171,287],{"class":154},[65,26173,5854],{"class":204},[65,26175,797],{"class":154},[65,26177,3739],{"class":793},[65,26179,230],{"class":154},[65,26181,6304],{"class":204},[65,26183,797],{"class":154},[65,26185,26016],{"class":214},[65,26187,3858],{"class":154},[65,26189,26190,26192,26194,26196,26198,26200,26202,26204,26206,26208,26210],{"class":140,"line":3757},[65,26191,18559],{"class":204},[65,26193,797],{"class":154},[65,26195,287],{"class":154},[65,26197,5854],{"class":204},[65,26199,797],{"class":154},[65,26201,3748],{"class":793},[65,26203,230],{"class":154},[65,26205,6304],{"class":204},[65,26207,797],{"class":154},[65,26209,26077],{"class":214},[65,26211,3858],{"class":154},[65,26213,26214,26216,26218,26220,26222,26224,26226,26228,26230,26232,26234],{"class":140,"line":3787},[65,26215,18804],{"class":204},[65,26217,797],{"class":154},[65,26219,287],{"class":154},[65,26221,5854],{"class":204},[65,26223,797],{"class":154},[65,26225,3137],{"class":793},[65,26227,230],{"class":154},[65,26229,6304],{"class":204},[65,26231,797],{"class":154},[65,26233,16416],{"class":214},[65,26235,3858],{"class":154},[65,26237,26238,26240,26242],{"class":140,"line":3792},[65,26239,1977],{"class":154},[65,26241,235],{"class":204},[65,26243,155],{"class":154},[65,26245,26246],{"class":140,"line":3814},[65,26247,162],{"emptyLinePlaceholder":161},[65,26249,26250,26252,26254,26256,26258,26260,26262,26264,26266],{"class":140,"line":3823},[65,26251,2243],{"class":168},[65,26253,3797],{"class":214},[65,26255,218],{"class":168},[65,26257,1776],{"class":168},[65,26259,3081],{"class":200},[65,26261,224],{"class":204},[65,26263,794],{"class":214},[65,26265,230],{"class":154},[65,26267,418],{"class":154},[65,26269,26270,26272],{"class":140,"line":3831},[65,26271,3817],{"class":214},[65,26273,3820],{"class":154},[65,26275,26276,26278],{"class":140,"line":3841},[65,26277,3826],{"class":214},[65,26279,3820],{"class":154},[65,26281,26282,26284,26286],{"class":140,"line":3861},[65,26283,3834],{"class":204},[65,26285,797],{"class":154},[65,26287,418],{"class":154},[65,26289,26290,26293,26295,26297,26299,26301,26303],{"class":140,"line":3867},[65,26291,26292],{"class":204}," uTime",[65,26294,797],{"class":154},[65,26296,287],{"class":154},[65,26298,3851],{"class":204},[65,26300,797],{"class":154},[65,26302,1142],{"class":793},[65,26304,3858],{"class":154},[65,26306,26307],{"class":140,"line":3876},[65,26308,3864],{"class":154},[65,26310,26311,26313,26315],{"class":140,"line":3881},[65,26312,1977],{"class":154},[65,26314,235],{"class":204},[65,26316,155],{"class":154},[65,26318,26319],{"class":140,"line":3920},[65,26320,162],{"emptyLinePlaceholder":161},[65,26322,26323,26325,26328,26330,26332,26334,26336,26338,26340,26342,26344,26346,26348,26350,26352],{"class":140,"line":3954},[65,26324,2243],{"class":168},[65,26326,26327],{"class":214}," triangle1",[65,26329,218],{"class":168},[65,26331,1776],{"class":168},[65,26333,3302],{"class":200},[65,26335,224],{"class":204},[65,26337,794],{"class":214},[65,26339,230],{"class":154},[65,26341,287],{"class":154},[65,26343,3903],{"class":214},[65,26345,230],{"class":154},[65,26347,3797],{"class":214},[65,26349,293],{"class":154},[65,26351,235],{"class":204},[65,26353,155],{"class":154},[65,26355,26356,26359,26361,26363,26365,26367,26369,26371,26373],{"class":140,"line":3974},[65,26357,26358],{"class":214}," triangle1",[65,26360,834],{"class":154},[65,26362,3610],{"class":214},[65,26364,834],{"class":154},[65,26366,4481],{"class":214},[65,26368,218],{"class":168},[65,26370,4399],{"class":168},[65,26372,5554],{"class":793},[65,26374,155],{"class":154},[65,26376,26377,26379,26381,26383,26385,26387,26389,26391,26393],{"class":140,"line":3979},[65,26378,26358],{"class":214},[65,26380,834],{"class":154},[65,26382,3610],{"class":214},[65,26384,834],{"class":154},[65,26386,4459],{"class":214},[65,26388,218],{"class":168},[65,26390,4399],{"class":168},[65,26392,5554],{"class":793},[65,26394,155],{"class":154},[65,26396,26397,26399,26401,26403,26405,26408,26410],{"class":140,"line":4031},[65,26398,3957],{"class":214},[65,26400,834],{"class":154},[65,26402,3962],{"class":200},[65,26404,224],{"class":204},[65,26406,26407],{"class":214},"triangle1",[65,26409,235],{"class":204},[65,26411,155],{"class":154},[65,26413,26414],{"class":140,"line":4036},[65,26415,162],{"emptyLinePlaceholder":161},[65,26417,26418,26420,26423,26425,26427,26429,26431,26433,26435,26437,26439,26441,26443,26445,26447],{"class":140,"line":4070},[65,26419,2243],{"class":168},[65,26421,26422],{"class":214}," triangle2",[65,26424,218],{"class":168},[65,26426,1776],{"class":168},[65,26428,3302],{"class":200},[65,26430,224],{"class":204},[65,26432,794],{"class":214},[65,26434,230],{"class":154},[65,26436,287],{"class":154},[65,26438,3903],{"class":214},[65,26440,230],{"class":154},[65,26442,3797],{"class":214},[65,26444,293],{"class":154},[65,26446,235],{"class":204},[65,26448,155],{"class":154},[65,26450,26451,26454,26456,26458,26460,26462,26464,26466],{"class":140,"line":4086},[65,26452,26453],{"class":214}," triangle2",[65,26455,834],{"class":154},[65,26457,3610],{"class":214},[65,26459,834],{"class":154},[65,26461,4481],{"class":214},[65,26463,218],{"class":168},[65,26465,5559],{"class":793},[65,26467,155],{"class":154},[65,26469,26470,26472,26474,26476,26478,26480,26482,26484,26486],{"class":140,"line":4102},[65,26471,26453],{"class":214},[65,26473,834],{"class":154},[65,26475,3610],{"class":214},[65,26477,834],{"class":154},[65,26479,4459],{"class":214},[65,26481,218],{"class":168},[65,26483,4399],{"class":168},[65,26485,5554],{"class":793},[65,26487,155],{"class":154},[65,26489,26490,26492,26494,26496,26498,26501,26503],{"class":140,"line":4118},[65,26491,3957],{"class":214},[65,26493,834],{"class":154},[65,26495,3962],{"class":200},[65,26497,224],{"class":204},[65,26499,26500],{"class":214},"triangle2",[65,26502,235],{"class":204},[65,26504,155],{"class":154},[65,26506,26507],{"class":140,"line":4149},[65,26508,162],{"emptyLinePlaceholder":161},[65,26510,26511,26513,26516,26518,26520,26522,26524,26526,26528,26530,26532,26534,26536,26538,26540],{"class":140,"line":4163},[65,26512,2243],{"class":168},[65,26514,26515],{"class":214}," triangle3",[65,26517,218],{"class":168},[65,26519,1776],{"class":168},[65,26521,3302],{"class":200},[65,26523,224],{"class":204},[65,26525,794],{"class":214},[65,26527,230],{"class":154},[65,26529,287],{"class":154},[65,26531,3903],{"class":214},[65,26533,230],{"class":154},[65,26535,3797],{"class":214},[65,26537,293],{"class":154},[65,26539,235],{"class":204},[65,26541,155],{"class":154},[65,26543,26544,26547,26549,26551,26553,26555,26557,26559],{"class":140,"line":4168},[65,26545,26546],{"class":214}," triangle3",[65,26548,834],{"class":154},[65,26550,3610],{"class":214},[65,26552,834],{"class":154},[65,26554,4459],{"class":214},[65,26556,218],{"class":168},[65,26558,5559],{"class":793},[65,26560,155],{"class":154},[65,26562,26563,26565,26567,26569,26571,26574,26576],{"class":140,"line":4194},[65,26564,3957],{"class":214},[65,26566,834],{"class":154},[65,26568,3962],{"class":200},[65,26570,224],{"class":204},[65,26572,26573],{"class":214},"triangle3",[65,26575,235],{"class":204},[65,26577,155],{"class":154},[65,26579,26580],{"class":140,"line":4199},[65,26581,162],{"emptyLinePlaceholder":161},[65,26583,26584,26586,26588,26590,26592,26594],{"class":140,"line":4221},[65,26585,2243],{"class":168},[65,26587,4436],{"class":200},[65,26589,218],{"class":168},[65,26591,1932],{"class":154},[65,26593,1862],{"class":168},[65,26595,418],{"class":154},[65,26597,26598,26600,26602,26604,26606,26608,26610,26612,26614,26616,26618],{"class":140,"line":4228},[65,26599,4498],{"class":214},[65,26601,834],{"class":154},[65,26603,4503],{"class":200},[65,26605,224],{"class":204},[65,26607,4508],{"class":154},[65,26609,3697],{"class":214},[65,26611,230],{"class":154},[65,26613,3552],{"class":214},[65,26615,293],{"class":154},[65,26617,235],{"class":204},[65,26619,155],{"class":154},[65,26621,26622],{"class":140,"line":4235},[65,26623,162],{"emptyLinePlaceholder":161},[65,26625,26626,26628,26630,26632,26634],{"class":140,"line":4244},[65,26627,4550],{"class":200},[65,26629,224],{"class":204},[65,26631,2163],{"class":214},[65,26633,235],{"class":204},[65,26635,155],{"class":154},[65,26637,26638],{"class":140,"line":4261},[65,26639,4564],{"class":154},[65,26641,26642],{"class":140,"line":4266},[65,26643,162],{"emptyLinePlaceholder":161},[65,26645,26646,26648,26650],{"class":140,"line":4275},[65,26647,4575],{"class":200},[65,26649,1269],{"class":204},[65,26651,155],{"class":154},[65,26653,26654],{"class":140,"line":4280},[65,26655,162],{"emptyLinePlaceholder":161},[65,26657,26658,26660,26662,26664,26666,26668],{"class":140,"line":4322},[65,26659,2243],{"class":168},[65,26661,4592],{"class":200},[65,26663,218],{"class":168},[65,26665,1932],{"class":154},[65,26667,1862],{"class":168},[65,26669,418],{"class":154},[65,26671,26672,26674,26676,26678,26680,26682,26684,26686,26688,26690,26692,26694,26696],{"class":140,"line":4375},[65,26673,4498],{"class":214},[65,26675,834],{"class":154},[65,26677,4610],{"class":200},[65,26679,224],{"class":204},[65,26681,4615],{"class":214},[65,26683,834],{"class":154},[65,26685,4620],{"class":214},[65,26687,230],{"class":154},[65,26689,4625],{"class":214},[65,26691,834],{"class":154},[65,26693,4630],{"class":214},[65,26695,235],{"class":204},[65,26697,155],{"class":154},[65,26699,26700,26702,26704,26706,26708,26710,26712,26714,26716,26718,26720,26722,26724,26726,26728,26730,26732,26734,26736,26738,26740],{"class":140,"line":4408},[65,26701,4640],{"class":214},[65,26703,834],{"class":154},[65,26705,4645],{"class":200},[65,26707,224],{"class":204},[65,26709,4508],{"class":154},[65,26711,4652],{"class":204},[65,26713,797],{"class":154},[65,26715,841],{"class":214},[65,26717,834],{"class":154},[65,26719,3454],{"class":214},[65,26721,834],{"class":154},[65,26723,735],{"class":214},[65,26725,4349],{"class":168},[65,26727,841],{"class":214},[65,26729,834],{"class":154},[65,26731,3454],{"class":214},[65,26733,834],{"class":154},[65,26735,748],{"class":214},[65,26737,293],{"class":154},[65,26739,235],{"class":204},[65,26741,155],{"class":154},[65,26743,26744],{"class":140,"line":4426},[65,26745,4564],{"class":154},[65,26747,26748,26750,26752,26754,26756,26758,26760,26762,26764,26766,26768],{"class":140,"line":4431},[65,26749,4693],{"class":214},[65,26751,834],{"class":154},[65,26753,4698],{"class":200},[65,26755,224],{"class":204},[65,26757,306],{"class":154},[65,26759,4705],{"class":302},[65,26761,306],{"class":154},[65,26763,230],{"class":154},[65,26765,4592],{"class":214},[65,26767,235],{"class":204},[65,26769,155],{"class":154},[65,26771,26772],{"class":140,"line":4447},[65,26773,4731],{"class":154},[15,26775,26776,26777,26779],{},"OGLやThree.jsなどを参考にしているので、おおむね同じようなコード構成になっていると思います。複数の三角形を描画するために、同じジオメトリとプログラムを使用して、Meshクラスのインスタンスを複数作成し、位置を変更して",[124,26778,21822],{},"に追加しています。",[15,26781,26782],{},"最後にVertex Shaderのコードをみていきましょう。",[129,26784,26787],{"className":131,"code":26785,"filename":26786,"language":134,"meta":135,"style":135},"#version 300 es\nprecision mediump float;\n\nin vec3 position;\nin vec2 uv;\n\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\n\nout vec2 vUv;\n\nvoid main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n","index.frag",[124,26788,26789,26803,26815,26819,26829,26839,26843,26853,26863,26867,26877,26881,26891,26902,26930],{"__ignoreMap":135},[65,26790,26791,26794,26797,26800],{"class":140,"line":141},[65,26792,26793],{"class":204},"#",[65,26795,26796],{"class":144},"version",[65,26798,26799],{"class":793}," 300",[65,26801,26802],{"class":144}," es\n",[65,26804,26805,26808,26811,26813],{"class":140,"line":158},[65,26806,26807],{"class":144},"precision",[65,26809,26810],{"class":144}," mediump",[65,26812,10984],{"class":144},[65,26814,155],{"class":154},[65,26816,26817],{"class":140,"line":165},[65,26818,162],{"emptyLinePlaceholder":161},[65,26820,26821,26823,26825,26827],{"class":140,"line":180},[65,26822,169],{"class":168},[65,26824,10961],{"class":144},[65,26826,10964],{"class":144},[65,26828,155],{"class":154},[65,26830,26831,26833,26835,26837],{"class":140,"line":194},[65,26832,169],{"class":168},[65,26834,172],{"class":144},[65,26836,15268],{"class":144},[65,26838,155],{"class":154},[65,26840,26841],{"class":140,"line":211},[65,26842,162],{"emptyLinePlaceholder":161},[65,26844,26845,26847,26849,26851],{"class":140,"line":240},[65,26846,145],{"class":144},[65,26848,10999],{"class":144},[65,26850,20342],{"class":144},[65,26852,155],{"class":154},[65,26854,26855,26857,26859,26861],{"class":140,"line":391},[65,26856,145],{"class":144},[65,26858,10999],{"class":144},[65,26860,11013],{"class":144},[65,26862,155],{"class":154},[65,26864,26865],{"class":140,"line":401},[65,26866,162],{"emptyLinePlaceholder":161},[65,26868,26869,26871,26873,26875],{"class":140,"line":406},[65,26870,183],{"class":144},[65,26872,172],{"class":144},[65,26874,175],{"class":144},[65,26876,155],{"class":154},[65,26878,26879],{"class":140,"line":421},[65,26880,162],{"emptyLinePlaceholder":161},[65,26882,26883,26885,26887,26889],{"class":140,"line":435},[65,26884,197],{"class":168},[65,26886,201],{"class":200},[65,26888,205],{"class":204},[65,26890,208],{"class":154},[65,26892,26893,26896,26898,26900],{"class":140,"line":447},[65,26894,26895],{"class":214}," vUv",[65,26897,218],{"class":168},[65,26899,15268],{"class":214},[65,26901,155],{"class":154},[65,26903,26904,26906,26908,26910,26912,26914,26916,26918,26920,26922,26924,26926,26928],{"class":140,"line":459},[65,26905,11123],{"class":214},[65,26907,218],{"class":168},[65,26909,11013],{"class":214},[65,26911,5933],{"class":168},[65,26913,20342],{"class":214},[65,26915,5933],{"class":168},[65,26917,186],{"class":200},[65,26919,224],{"class":204},[65,26921,3610],{"class":214},[65,26923,230],{"class":154},[65,26925,3507],{"class":793},[65,26927,235],{"class":204},[65,26929,155],{"class":154},[65,26931,26932],{"class":140,"line":471},[65,26933,243],{"class":154},[15,26935,26936],{},"以上を実行すると、サムネのような複数の三角形が描画されるようになります。",[11,26938,5299],{"id":5299},[15,26940,26941],{},"一つの頂点バッファで複数の三角形を描画するために、MVP行列の紹介と諸々の実装をしてきました。記事内だと詳しく解説できてない部分もあるので、実際にコードを見ながら理解してみてください。",[15,26943,26944],{},"次回は、WebGLで平面ジオメトリを作成して描画する方法を解説していきます。",[19,26946],{":items":14178},[5313,26948,26949],{},"html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .s9qRY, html code.shiki .s9qRY{--shiki-default:#FF5370;--shiki-default-font-style:italic}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}",{"title":135,"searchDepth":165,"depth":165,"links":26951},[26952,26953,26954,26955,26969],{"id":13,"depth":158,"text":13},{"id":20234,"depth":158,"text":20234},{"id":20279,"depth":158,"text":20280},{"id":20440,"depth":158,"text":20440,"children":26956},[26957,26963,26966,26967,26968],{"id":20461,"depth":165,"text":20457,"children":26958},[26959,26960,26961,26962],{"id":21131,"depth":180,"text":21131},{"id":21167,"depth":180,"text":21167},{"id":21214,"depth":180,"text":21215},{"id":21304,"depth":180,"text":21305},{"id":21813,"depth":165,"text":19542,"children":26964},[26965],{"id":19545,"depth":180,"text":19545},{"id":4503,"depth":165,"text":23674},{"id":3682,"depth":165,"text":24091},{"id":25701,"depth":165,"text":25701},{"id":5299,"depth":158,"text":5299},"2026-04-08T00:00:00.000Z","今回は、WebGLやCGでの3次元描画をする上で必要な知識となるMVP行列を紹介します。そしてCameraクラスを作成し、一つの頂点バッファでサムネの画像にあるような複数の三角形を描画する方法まで解説します。","/images/blog/webgl-multiple-triangle.jpg",{},"/blog/webgl-multiple-triangle",{"title":20179,"description":26971},"blog/webgl-multiple-triangle",[26978,26979,26980],"MVP行列の理解","Cameraクラスの作成","WebGLで一つの頂点バッファで複数の三角形の描画する方法",[5350],"o7Cw1GKeLl6Wu7DqP5Pz11gIbjz5Ua1n89zAIGDI-kg",{"id":26984,"title":26985,"body":26986,"date":34728,"description":34729,"draft":5339,"extension":5340,"image":34730,"meta":34731,"navigation":161,"path":34732,"seo":34733,"stem":34734,"summaryList":34735,"summaryText":5348,"tags":34738,"__hash__":34739},"blog/blog/webgl-triangle.md","WebGLで三角形を描画する",{"type":8,"value":26987,"toc":34702},[26988,26991,26994,27003,27006,27008,27035,27038,27041,27162,27172,27213,27217,27223,27901,27907,27911,27919,28240,28248,28251,28273,28408,28414,28418,28429,28700,28712,28749,28753,28759,28864,28873,28877,29550,29574,29616,29619,29629,29675,29685,29699,30005,30020,30023,30093,30105,30109,30114,30260,30271,30275,31071,31074,31081,31186,31206,31211,31533,31542,31553,31562,31566,31571,31624,31629,31978,31994,32006,32009,32016,32089,32094,32278,32288,32293,32801,32804,32900,32903,32911,33321,33332,33503,33513,33516,33522,33581,33589,33792,33802,33916,33919,33922,33926,33929,34053,34056,34059,34092,34098,34179,34193,34196,34199,34202,34313,34326,34341,34344,34351,34455,34465,34469,34472,34517,34523,34672,34675,34680,34683,34686,34688,34691,34694,34697,34699],[11,26989,26990],{"id":26990},"このシリーズの目標",[15,26992,26993],{},"ふだんは、Three.jsなどのWebGLライブラリを使用してましたが、もう少し深いところまで理解したいと思い素のWebGLの勉強をしていました。このシリーズを通して、自作のオレオレWebGLライブラリを作りあげていきたいと思います。",[15,26995,26996,26997,27002],{},"この自作のWebGLライブラリは、",[29,26998,27001],{"href":26999,"rel":27000,"target":3049},"https://github.com/oframe/ogl/tree/master",[3048],"OGL","を参考にしてます。定型的なWebGLコードはライブラリ側で行って、それ以外の部分はなるべく触っていけるような方針です。",[15,27004,27005],{},"また、WebGLのコードをエディタの予測変換なしに書いていくのはつらいので、TypeScriptを導入しています。著者はTypeScriptの知識はあまりないので、もっといい方法などがありましたら教えていただきたいです。",[15,27007,27],{},[29,27009,34,27011,34,27029],{"className":27010,"href":33},[32],[36,27012,40,27014,40,27017,40,27020,34],{"className":27013},[39],[36,27015,45],{"className":27016},[44],[36,27018,50],{"className":27019},[49],[36,27021,55,27023,55,27026,40],{"className":27022},[54],[57,27024],{"className":27025,"src":61,"alt":62,"width":63,"height":63},[60],[65,27027,69],{"className":27028},[68],[36,27030,55,27032,40],{"className":27031},[73],[57,27033],{"className":27034,"src":78,"alt":45},[77],[11,27036,27037],{"id":27037},"ディレクトリ構成",[15,27039,27040],{},"Three.jsやOGLを参考にし、ディレクトリ構成の例は次のようにしてます。",[129,27042,27044],{"className":16211,"code":27043,"filename":27037,"language":16214,"meta":135,"style":135},"webgl\n├── core\n│ ├── Camera.ts\n│ ├── Geometry.ts\n│ ├── Mesh.ts\n│ ├── Program.ts\n│ ├── Renderer.ts\n│ ├── Scene.ts\n│ ├── Texture.ts\n│ └── Transform.ts\n├── extras (拡張)\n├── math (数学演算)\n└── index.ts\n",[124,27045,27046,27051,27059,27070,27079,27088,27097,27106,27115,27124,27134,27144,27154],{"__ignoreMap":135},[65,27047,27048],{"class":140,"line":141},[65,27049,27050],{"class":326},"webgl\n",[65,27052,27053,27056],{"class":140,"line":158},[65,27054,27055],{"class":326},"├──",[65,27057,27058],{"class":302}," core\n",[65,27060,27061,27064,27067],{"class":140,"line":165},[65,27062,27063],{"class":326},"│",[65,27065,27066],{"class":302}," ├──",[65,27068,27069],{"class":302}," Camera.ts\n",[65,27071,27072,27074,27076],{"class":140,"line":180},[65,27073,27063],{"class":326},[65,27075,27066],{"class":302},[65,27077,27078],{"class":302}," Geometry.ts\n",[65,27080,27081,27083,27085],{"class":140,"line":194},[65,27082,27063],{"class":326},[65,27084,27066],{"class":302},[65,27086,27087],{"class":302}," Mesh.ts\n",[65,27089,27090,27092,27094],{"class":140,"line":211},[65,27091,27063],{"class":326},[65,27093,27066],{"class":302},[65,27095,27096],{"class":302}," Program.ts\n",[65,27098,27099,27101,27103],{"class":140,"line":240},[65,27100,27063],{"class":326},[65,27102,27066],{"class":302},[65,27104,27105],{"class":302}," Renderer.ts\n",[65,27107,27108,27110,27112],{"class":140,"line":391},[65,27109,27063],{"class":326},[65,27111,27066],{"class":302},[65,27113,27114],{"class":302}," Scene.ts\n",[65,27116,27117,27119,27121],{"class":140,"line":401},[65,27118,27063],{"class":326},[65,27120,27066],{"class":302},[65,27122,27123],{"class":302}," Texture.ts\n",[65,27125,27126,27128,27131],{"class":140,"line":406},[65,27127,27063],{"class":326},[65,27129,27130],{"class":302}," └──",[65,27132,27133],{"class":302}," Transform.ts\n",[65,27135,27136,27138,27141],{"class":140,"line":421},[65,27137,27055],{"class":326},[65,27139,27140],{"class":302}," extras",[65,27142,27143],{"class":204}," (拡張)\n",[65,27145,27146,27148,27151],{"class":140,"line":435},[65,27147,27055],{"class":326},[65,27149,27150],{"class":302}," math",[65,27152,27153],{"class":204}," (数学演算)\n",[65,27155,27156,27159],{"class":140,"line":447},[65,27157,27158],{"class":326},"└──",[65,27160,27161],{"class":302}," index.ts\n",[15,27163,27164,27167,27168,27171],{},[124,27165,27166],{},"webgl/index.ts","ですべてエクスポートしているので、使用する場合は次のように",[124,27169,27170],{},"webgl","からインポートするだけで大丈夫です。",[129,27173,27175],{"className":131,"code":27174,"language":134,"meta":135,"style":135},"import { Geometry, Mesh, Program, Render, Scene } from 'webgl';\n",[124,27176,27177],{"__ignoreMap":135},[65,27178,27179,27181,27183,27185,27187,27189,27191,27193,27195,27197,27199,27201,27203,27205,27207,27209,27211],{"class":140,"line":141},[65,27180,3251],{"class":154},[65,27182,287],{"class":154},[65,27184,5645],{"class":214},[65,27186,230],{"class":154},[65,27188,3302],{"class":214},[65,27190,230],{"class":154},[65,27192,3081],{"class":214},[65,27194,230],{"class":154},[65,27196,3321],{"class":214},[65,27198,230],{"class":154},[65,27200,3326],{"class":214},[65,27202,293],{"class":154},[65,27204,296],{"class":154},[65,27206,299],{"class":154},[65,27208,27170],{"class":302},[65,27210,306],{"class":154},[65,27212,155],{"class":154},[11,27214,27216],{"id":27215},"webglで三角形を描画するコード","WebGLで三角形を描画するコード",[15,27218,27219,27220,27222],{},"WebGLのコアな部分は後で解説するとして、三角形を描画する全コードは次のようになります。Three.jsやOGLを参考にしているので、似ている部分はあるでしょう。",[5467,27221],{},"\nこのシリーズではシェーダーのコードは別ファイルで管理してインポートすることとします。",[129,27224,27226],{"className":131,"code":27225,"language":134,"meta":135,"style":135},"import { Geometry, Mesh, Program, Render, Scene } from '@/lib/webgl';\n\nimport fragment from './index.frag?raw';\nimport vertex from './index.vert?raw';\n\nconst canvas = document.getElementById('webgl-canvas') as HTMLCanvasElement;\nconst render = new Render(canvas);\nrender.fitScreen();\nconst gl = render.gl;\ngl.clearColor(1.0, 1.0, 1.0, 1.0);\n\nconst scene = new Scene();\n\nconst positions = new Float32Array([-0.5, -0.5, 0, 0.5, -0.5, 0, 0, 0.5, 0]);\nconst uvs = new Float32Array([0, 0, 1, 0, 1, 1]);\nconst indices = new Uint16Array([0, 1, 2]);\n\nconst geometry = new Geometry(gl, {\n position: { size: 3, data: positions },\n uv: { size: 2, data: uvs },\n index: { size: 1, data: indices },\n});\n\nconst program = new Program(gl, { vertex, fragment });\n\nconst mesh = new Mesh(gl, { geometry, program });\n\nscene.add(mesh);\n\nconst update = () => {\n render.render({ scene });\n\n requestAnimationFrame(update);\n};\n\nupdate();\n\nconst resize = () => {\n render.setSize(window.innerWidth, window.innerHeight);\n};\nwindow.addEventListener('resize', resize);\n",[124,27227,27228,27264,27268,27284,27300,27304,27334,27354,27366,27382,27410,27414,27430,27434,27492,27532,27560,27564,27584,27608,27632,27656,27664,27668,27700,27704,27736,27740,27756,27760,27774,27794,27798,27811,27815,27819,27827,27831,27845,27873,27877],{"__ignoreMap":135},[65,27229,27230,27232,27234,27236,27238,27240,27242,27244,27246,27248,27250,27252,27254,27256,27258,27260,27262],{"class":140,"line":141},[65,27231,3251],{"class":154},[65,27233,287],{"class":154},[65,27235,5645],{"class":214},[65,27237,230],{"class":154},[65,27239,3302],{"class":214},[65,27241,230],{"class":154},[65,27243,3081],{"class":214},[65,27245,230],{"class":154},[65,27247,3321],{"class":214},[65,27249,230],{"class":154},[65,27251,3326],{"class":214},[65,27253,293],{"class":154},[65,27255,296],{"class":154},[65,27257,299],{"class":154},[65,27259,3339],{"class":302},[65,27261,306],{"class":154},[65,27263,155],{"class":154},[65,27265,27266],{"class":140,"line":158},[65,27267,162],{"emptyLinePlaceholder":161},[65,27269,27270,27272,27274,27276,27278,27280,27282],{"class":140,"line":165},[65,27271,3251],{"class":154},[65,27273,3350],{"class":144},[65,27275,296],{"class":154},[65,27277,299],{"class":154},[65,27279,3357],{"class":302},[65,27281,306],{"class":154},[65,27283,155],{"class":154},[65,27285,27286,27288,27290,27292,27294,27296,27298],{"class":140,"line":180},[65,27287,3251],{"class":154},[65,27289,3368],{"class":144},[65,27291,296],{"class":154},[65,27293,299],{"class":154},[65,27295,3375],{"class":302},[65,27297,306],{"class":154},[65,27299,155],{"class":154},[65,27301,27302],{"class":140,"line":194},[65,27303,162],{"emptyLinePlaceholder":161},[65,27305,27306,27308,27310,27312,27314,27316,27318,27320,27322,27324,27326,27328,27330,27332],{"class":140,"line":211},[65,27307,1769],{"class":168},[65,27309,3408],{"class":144},[65,27311,218],{"class":168},[65,27313,3413],{"class":144},[65,27315,834],{"class":154},[65,27317,3418],{"class":200},[65,27319,224],{"class":204},[65,27321,306],{"class":154},[65,27323,3425],{"class":302},[65,27325,306],{"class":154},[65,27327,1713],{"class":204},[65,27329,3432],{"class":154},[65,27331,368],{"class":326},[65,27333,155],{"class":154},[65,27335,27336,27338,27340,27342,27344,27346,27348,27350,27352],{"class":140,"line":240},[65,27337,1769],{"class":168},[65,27339,3443],{"class":144},[65,27341,218],{"class":168},[65,27343,1776],{"class":168},[65,27345,3321],{"class":200},[65,27347,224],{"class":204},[65,27349,3454],{"class":144},[65,27351,235],{"class":204},[65,27353,155],{"class":154},[65,27355,27356,27358,27360,27362,27364],{"class":140,"line":391},[65,27357,4503],{"class":144},[65,27359,834],{"class":154},[65,27361,3468],{"class":200},[65,27363,1269],{"class":204},[65,27365,155],{"class":154},[65,27367,27368,27370,27372,27374,27376,27378,27380],{"class":140,"line":401},[65,27369,1769],{"class":168},[65,27371,841],{"class":144},[65,27373,218],{"class":168},[65,27375,3443],{"class":144},[65,27377,834],{"class":154},[65,27379,794],{"class":144},[65,27381,155],{"class":154},[65,27383,27384,27386,27388,27390,27392,27394,27396,27398,27400,27402,27404,27406,27408],{"class":140,"line":406},[65,27385,794],{"class":144},[65,27387,834],{"class":154},[65,27389,3497],{"class":200},[65,27391,224],{"class":204},[65,27393,3502],{"class":793},[65,27395,230],{"class":154},[65,27397,3507],{"class":793},[65,27399,230],{"class":154},[65,27401,3507],{"class":793},[65,27403,230],{"class":154},[65,27405,3507],{"class":793},[65,27407,235],{"class":204},[65,27409,155],{"class":154},[65,27411,27412],{"class":140,"line":421},[65,27413,162],{"emptyLinePlaceholder":161},[65,27415,27416,27418,27420,27422,27424,27426,27428],{"class":140,"line":435},[65,27417,1769],{"class":168},[65,27419,3697],{"class":144},[65,27421,218],{"class":168},[65,27423,1776],{"class":168},[65,27425,3326],{"class":200},[65,27427,1269],{"class":204},[65,27429,155],{"class":154},[65,27431,27432],{"class":140,"line":447},[65,27433,162],{"emptyLinePlaceholder":161},[65,27435,27436,27438,27440,27442,27444,27446,27448,27450,27452,27454,27456,27458,27460,27462,27464,27466,27468,27470,27472,27474,27476,27478,27480,27482,27484,27486,27488,27490],{"class":140,"line":459},[65,27437,1769],{"class":168},[65,27439,26016],{"class":144},[65,27441,218],{"class":168},[65,27443,1776],{"class":168},[65,27445,5951],{"class":200},[65,27447,3645],{"class":204},[65,27449,3936],{"class":168},[65,27451,5554],{"class":793},[65,27453,230],{"class":154},[65,27455,4399],{"class":168},[65,27457,5554],{"class":793},[65,27459,230],{"class":154},[65,27461,1142],{"class":793},[65,27463,230],{"class":154},[65,27465,5559],{"class":793},[65,27467,230],{"class":154},[65,27469,4399],{"class":168},[65,27471,5554],{"class":793},[65,27473,230],{"class":154},[65,27475,1142],{"class":793},[65,27477,230],{"class":154},[65,27479,1142],{"class":793},[65,27481,230],{"class":154},[65,27483,5559],{"class":793},[65,27485,230],{"class":154},[65,27487,1142],{"class":793},[65,27489,3658],{"class":204},[65,27491,155],{"class":154},[65,27493,27494,27496,27498,27500,27502,27504,27506,27508,27510,27512,27514,27516,27518,27520,27522,27524,27526,27528,27530],{"class":140,"line":471},[65,27495,1769],{"class":168},[65,27497,26077],{"class":144},[65,27499,218],{"class":168},[65,27501,1776],{"class":168},[65,27503,5951],{"class":200},[65,27505,3645],{"class":204},[65,27507,743],{"class":793},[65,27509,230],{"class":154},[65,27511,1142],{"class":793},[65,27513,230],{"class":154},[65,27515,3137],{"class":793},[65,27517,230],{"class":154},[65,27519,1142],{"class":793},[65,27521,230],{"class":154},[65,27523,3137],{"class":793},[65,27525,230],{"class":154},[65,27527,3137],{"class":793},[65,27529,3658],{"class":204},[65,27531,155],{"class":154},[65,27533,27534,27536,27538,27540,27542,27544,27546,27548,27550,27552,27554,27556,27558],{"class":140,"line":63},[65,27535,1769],{"class":168},[65,27537,16416],{"class":144},[65,27539,218],{"class":168},[65,27541,1776],{"class":168},[65,27543,6194],{"class":200},[65,27545,3645],{"class":204},[65,27547,743],{"class":793},[65,27549,230],{"class":154},[65,27551,3137],{"class":793},[65,27553,230],{"class":154},[65,27555,3748],{"class":793},[65,27557,3658],{"class":204},[65,27559,155],{"class":154},[65,27561,27562],{"class":140,"line":495},[65,27563,162],{"emptyLinePlaceholder":161},[65,27565,27566,27568,27570,27572,27574,27576,27578,27580,27582],{"class":140,"line":507},[65,27567,1769],{"class":168},[65,27569,3903],{"class":144},[65,27571,218],{"class":168},[65,27573,1776],{"class":168},[65,27575,5645],{"class":200},[65,27577,224],{"class":204},[65,27579,794],{"class":144},[65,27581,230],{"class":154},[65,27583,418],{"class":154},[65,27585,27586,27588,27590,27592,27594,27596,27598,27600,27602,27604,27606],{"class":140,"line":519},[65,27587,8393],{"class":204},[65,27589,797],{"class":154},[65,27591,287],{"class":154},[65,27593,5854],{"class":204},[65,27595,797],{"class":154},[65,27597,3739],{"class":793},[65,27599,230],{"class":154},[65,27601,6304],{"class":204},[65,27603,797],{"class":154},[65,27605,26016],{"class":144},[65,27607,3858],{"class":154},[65,27609,27610,27612,27614,27616,27618,27620,27622,27624,27626,27628,27630],{"class":140,"line":531},[65,27611,15048],{"class":204},[65,27613,797],{"class":154},[65,27615,287],{"class":154},[65,27617,5854],{"class":204},[65,27619,797],{"class":154},[65,27621,3748],{"class":793},[65,27623,230],{"class":154},[65,27625,6304],{"class":204},[65,27627,797],{"class":154},[65,27629,26077],{"class":144},[65,27631,3858],{"class":154},[65,27633,27634,27636,27638,27640,27642,27644,27646,27648,27650,27652,27654],{"class":140,"line":543},[65,27635,6899],{"class":204},[65,27637,797],{"class":154},[65,27639,287],{"class":154},[65,27641,5854],{"class":204},[65,27643,797],{"class":154},[65,27645,3137],{"class":793},[65,27647,230],{"class":154},[65,27649,6304],{"class":204},[65,27651,797],{"class":154},[65,27653,16416],{"class":144},[65,27655,3858],{"class":154},[65,27657,27658,27660,27662],{"class":140,"line":555},[65,27659,2899],{"class":154},[65,27661,235],{"class":204},[65,27663,155],{"class":154},[65,27665,27666],{"class":140,"line":567},[65,27667,162],{"emptyLinePlaceholder":161},[65,27669,27670,27672,27674,27676,27678,27680,27682,27684,27686,27688,27690,27692,27694,27696,27698],{"class":140,"line":3757},[65,27671,1769],{"class":168},[65,27673,3797],{"class":144},[65,27675,218],{"class":168},[65,27677,1776],{"class":168},[65,27679,3081],{"class":200},[65,27681,224],{"class":204},[65,27683,794],{"class":144},[65,27685,230],{"class":154},[65,27687,287],{"class":154},[65,27689,3368],{"class":144},[65,27691,230],{"class":154},[65,27693,3350],{"class":144},[65,27695,293],{"class":154},[65,27697,235],{"class":204},[65,27699,155],{"class":154},[65,27701,27702],{"class":140,"line":3787},[65,27703,162],{"emptyLinePlaceholder":161},[65,27705,27706,27708,27710,27712,27714,27716,27718,27720,27722,27724,27726,27728,27730,27732,27734],{"class":140,"line":3792},[65,27707,1769],{"class":168},[65,27709,22047],{"class":144},[65,27711,218],{"class":168},[65,27713,1776],{"class":168},[65,27715,3302],{"class":200},[65,27717,224],{"class":204},[65,27719,794],{"class":144},[65,27721,230],{"class":154},[65,27723,287],{"class":154},[65,27725,3903],{"class":144},[65,27727,230],{"class":154},[65,27729,3797],{"class":144},[65,27731,293],{"class":154},[65,27733,235],{"class":204},[65,27735,155],{"class":154},[65,27737,27738],{"class":140,"line":3814},[65,27739,162],{"emptyLinePlaceholder":161},[65,27741,27742,27744,27746,27748,27750,27752,27754],{"class":140,"line":3823},[65,27743,4932],{"class":144},[65,27745,834],{"class":154},[65,27747,3962],{"class":200},[65,27749,224],{"class":204},[65,27751,21813],{"class":144},[65,27753,235],{"class":204},[65,27755,155],{"class":154},[65,27757,27758],{"class":140,"line":3831},[65,27759,162],{"emptyLinePlaceholder":161},[65,27761,27762,27764,27766,27768,27770,27772],{"class":140,"line":3841},[65,27763,1769],{"class":168},[65,27765,4436],{"class":200},[65,27767,218],{"class":168},[65,27769,1932],{"class":154},[65,27771,1862],{"class":168},[65,27773,418],{"class":154},[65,27775,27776,27778,27780,27782,27784,27786,27788,27790,27792],{"class":140,"line":3861},[65,27777,3463],{"class":214},[65,27779,834],{"class":154},[65,27781,4503],{"class":200},[65,27783,224],{"class":204},[65,27785,4508],{"class":154},[65,27787,3697],{"class":214},[65,27789,293],{"class":154},[65,27791,235],{"class":204},[65,27793,155],{"class":154},[65,27795,27796],{"class":140,"line":3867},[65,27797,162],{"emptyLinePlaceholder":161},[65,27799,27800,27803,27805,27807,27809],{"class":140,"line":3876},[65,27801,27802],{"class":200}," requestAnimationFrame",[65,27804,224],{"class":204},[65,27806,2163],{"class":214},[65,27808,235],{"class":204},[65,27810,155],{"class":154},[65,27812,27813],{"class":140,"line":3881},[65,27814,4731],{"class":154},[65,27816,27817],{"class":140,"line":3920},[65,27818,162],{"emptyLinePlaceholder":161},[65,27820,27821,27823,27825],{"class":140,"line":3954},[65,27822,2163],{"class":200},[65,27824,1269],{"class":204},[65,27826,155],{"class":154},[65,27828,27829],{"class":140,"line":3974},[65,27830,162],{"emptyLinePlaceholder":161},[65,27832,27833,27835,27837,27839,27841,27843],{"class":140,"line":3979},[65,27834,1769],{"class":168},[65,27836,4592],{"class":200},[65,27838,218],{"class":168},[65,27840,1932],{"class":154},[65,27842,1862],{"class":168},[65,27844,418],{"class":154},[65,27846,27847,27849,27851,27853,27855,27857,27859,27861,27863,27865,27867,27869,27871],{"class":140,"line":4031},[65,27848,3463],{"class":214},[65,27850,834],{"class":154},[65,27852,4610],{"class":200},[65,27854,224],{"class":204},[65,27856,4615],{"class":214},[65,27858,834],{"class":154},[65,27860,4620],{"class":214},[65,27862,230],{"class":154},[65,27864,4625],{"class":214},[65,27866,834],{"class":154},[65,27868,4630],{"class":214},[65,27870,235],{"class":204},[65,27872,155],{"class":154},[65,27874,27875],{"class":140,"line":4036},[65,27876,4731],{"class":154},[65,27878,27879,27881,27883,27885,27887,27889,27891,27893,27895,27897,27899],{"class":140,"line":4070},[65,27880,4615],{"class":144},[65,27882,834],{"class":154},[65,27884,4698],{"class":200},[65,27886,224],{"class":204},[65,27888,306],{"class":154},[65,27890,4705],{"class":302},[65,27892,306],{"class":154},[65,27894,230],{"class":154},[65,27896,4592],{"class":144},[65,27898,235],{"class":204},[65,27900,155],{"class":154},[15,27902,27903,27904,27906],{},"それでは、WebGLレンダリングコンテキストを取得したりする",[124,27905,23674],{},"クラスから説明していきます。",[11,27908,27910],{"id":27909},"renderクラス","Renderクラス",[15,27912,27913,27915,27916,27918],{},[124,27914,23674],{},"クラスでは、WebGLレンダリングコンテキストを取得したり、画面のサイズを調整したりする機能を提供しています。引数に",[124,27917,3454],{},"を渡すことで、レンダリングコンテキストを取得することができます。",[129,27920,27922],{"className":131,"code":27921,"filename":23674,"language":134,"meta":135,"style":135},"export class Render {\n readonly canvas: HTMLCanvasElement;\n readonly gl: WebGL2RenderingContext;\n\n constructor(canvas: HTMLCanvasElement, options?: WebGLContextAttributes) {\n this.canvas = canvas;\n const gl = canvas.getContext('webgl2', options);\n\n if (!gl) {\n throw new Error('WebGL2 not supported');\n }\n\n this.gl = gl;\n }\n\n setSize(width: number, height: number) {\n this.canvas.width = width;\n this.canvas.height = height;\n }\n\n // canvasを画面サイズに合わせる\n fitScreen() {\n this.canvas.width = window.innerWidth;\n this.canvas.height = window.innerHeight;\n }\n}\n",[124,27923,27924,27934,27947,27959,27963,27988,28002,28034,28038,28052,28075,28079,28083,28097,28101,28105,28130,28148,28166,28170,28174,28179,28188,28210,28232,28236],{"__ignoreMap":135},[65,27925,27926,27928,27930,27932],{"class":140,"line":141},[65,27927,284],{"class":154},[65,27929,774],{"class":168},[65,27931,3321],{"class":326},[65,27933,418],{"class":154},[65,27935,27936,27939,27941,27943,27945],{"class":140,"line":158},[65,27937,27938],{"class":168}," readonly",[65,27940,3408],{"class":144},[65,27942,797],{"class":168},[65,27944,368],{"class":326},[65,27946,155],{"class":154},[65,27948,27949,27951,27953,27955,27957],{"class":140,"line":165},[65,27950,27938],{"class":168},[65,27952,841],{"class":144},[65,27954,797],{"class":168},[65,27956,800],{"class":326},[65,27958,155],{"class":154},[65,27960,27961],{"class":140,"line":180},[65,27962,162],{"emptyLinePlaceholder":161},[65,27964,27965,27967,27969,27971,27973,27975,27977,27979,27981,27984,27986],{"class":140,"line":194},[65,27966,788],{"class":168},[65,27968,224],{"class":154},[65,27970,3454],{"class":793},[65,27972,797],{"class":168},[65,27974,368],{"class":326},[65,27976,230],{"class":154},[65,27978,814],{"class":793},[65,27980,427],{"class":168},[65,27982,27983],{"class":326}," WebGLContextAttributes",[65,27985,235],{"class":154},[65,27987,418],{"class":154},[65,27989,27990,27992,27994,27996,27998,28000],{"class":140,"line":211},[65,27991,831],{"class":830},[65,27993,834],{"class":154},[65,27995,3454],{"class":214},[65,27997,218],{"class":168},[65,27999,3408],{"class":214},[65,28001,155],{"class":154},[65,28003,28004,28006,28008,28010,28012,28014,28017,28019,28021,28024,28026,28028,28030,28032],{"class":140,"line":240},[65,28005,848],{"class":168},[65,28007,841],{"class":214},[65,28009,218],{"class":168},[65,28011,3408],{"class":214},[65,28013,834],{"class":154},[65,28015,28016],{"class":200},"getContext",[65,28018,224],{"class":204},[65,28020,306],{"class":154},[65,28022,28023],{"class":302},"webgl2",[65,28025,306],{"class":154},[65,28027,230],{"class":154},[65,28029,814],{"class":214},[65,28031,235],{"class":204},[65,28033,155],{"class":154},[65,28035,28036],{"class":140,"line":391},[65,28037,162],{"emptyLinePlaceholder":161},[65,28039,28040,28042,28044,28046,28048,28050],{"class":140,"line":401},[65,28041,3105],{"class":154},[65,28043,1696],{"class":204},[65,28045,2264],{"class":168},[65,28047,794],{"class":214},[65,28049,1713],{"class":204},[65,28051,208],{"class":154},[65,28053,28054,28057,28059,28062,28064,28066,28069,28071,28073],{"class":140,"line":406},[65,28055,28056],{"class":154}," throw",[65,28058,1776],{"class":168},[65,28060,28061],{"class":200}," Error",[65,28063,224],{"class":204},[65,28065,306],{"class":154},[65,28067,28068],{"class":302},"WebGL2 not supported",[65,28070,306],{"class":154},[65,28072,235],{"class":204},[65,28074,155],{"class":154},[65,28076,28077],{"class":140,"line":421},[65,28078,3204],{"class":154},[65,28080,28081],{"class":140,"line":435},[65,28082,162],{"emptyLinePlaceholder":161},[65,28084,28085,28087,28089,28091,28093,28095],{"class":140,"line":447},[65,28086,831],{"class":830},[65,28088,834],{"class":154},[65,28090,794],{"class":214},[65,28092,218],{"class":168},[65,28094,841],{"class":214},[65,28096,155],{"class":154},[65,28098,28099],{"class":140,"line":459},[65,28100,1171],{"class":154},[65,28102,28103],{"class":140,"line":471},[65,28104,162],{"emptyLinePlaceholder":161},[65,28106,28107,28110,28112,28114,28116,28118,28120,28122,28124,28126,28128],{"class":140,"line":63},[65,28108,28109],{"class":200}," setSize",[65,28111,224],{"class":154},[65,28113,735],{"class":793},[65,28115,797],{"class":168},[65,28117,430],{"class":340},[65,28119,230],{"class":154},[65,28121,2603],{"class":793},[65,28123,797],{"class":168},[65,28125,430],{"class":340},[65,28127,235],{"class":154},[65,28129,418],{"class":154},[65,28131,28132,28134,28136,28138,28140,28142,28144,28146],{"class":140,"line":495},[65,28133,831],{"class":830},[65,28135,834],{"class":154},[65,28137,3454],{"class":214},[65,28139,834],{"class":154},[65,28141,735],{"class":214},[65,28143,218],{"class":168},[65,28145,2598],{"class":214},[65,28147,155],{"class":154},[65,28149,28150,28152,28154,28156,28158,28160,28162,28164],{"class":140,"line":507},[65,28151,831],{"class":830},[65,28153,834],{"class":154},[65,28155,3454],{"class":214},[65,28157,834],{"class":154},[65,28159,748],{"class":214},[65,28161,218],{"class":168},[65,28163,2603],{"class":214},[65,28165,155],{"class":154},[65,28167,28168],{"class":140,"line":519},[65,28169,1171],{"class":154},[65,28171,28172],{"class":140,"line":531},[65,28173,162],{"emptyLinePlaceholder":161},[65,28175,28176],{"class":140,"line":543},[65,28177,28178],{"class":278}," // canvasを画面サイズに合わせる\n",[65,28180,28181,28184,28186],{"class":140,"line":555},[65,28182,28183],{"class":200}," fitScreen",[65,28185,1269],{"class":154},[65,28187,418],{"class":154},[65,28189,28190,28192,28194,28196,28198,28200,28202,28204,28206,28208],{"class":140,"line":567},[65,28191,831],{"class":830},[65,28193,834],{"class":154},[65,28195,3454],{"class":214},[65,28197,834],{"class":154},[65,28199,735],{"class":214},[65,28201,218],{"class":168},[65,28203,4625],{"class":214},[65,28205,834],{"class":154},[65,28207,4620],{"class":214},[65,28209,155],{"class":154},[65,28211,28212,28214,28216,28218,28220,28222,28224,28226,28228,28230],{"class":140,"line":3757},[65,28213,831],{"class":830},[65,28215,834],{"class":154},[65,28217,3454],{"class":214},[65,28219,834],{"class":154},[65,28221,748],{"class":214},[65,28223,218],{"class":168},[65,28225,4625],{"class":214},[65,28227,834],{"class":154},[65,28229,4630],{"class":214},[65,28231,155],{"class":154},[65,28233,28234],{"class":140,"line":3787},[65,28235,1171],{"class":154},[65,28237,28238],{"class":140,"line":3792},[65,28239,243],{"class":154},[15,28241,28242,28244,28245,28247],{},[124,28243,28016],{},"に引数を与えることで、WebGLレンダリングコンテキストを取得できます。このシリーズではWebGL2を対象にしているので、",[124,28246,28023],{},"を指定しています。取得に失敗した場合はコンソールにエラーを出力してプログラムを停止します。",[1177,28249,28250],{"id":28250},"使い方",[15,28252,28253,28255,28256,28258,28259,28261,28262,28265,28266,28269,28270,28272],{},[124,28254,23674],{},"クラスは、",[124,28257,3454],{},"要素をコンストラクタに渡して使用します。変数を",[124,28260,4503],{},"として、",[124,28263,28264],{},"fitScreen()","メソッドを呼び出して画面サイズに合わせます。また、",[124,28267,28268],{},".gl","がWebGLレンダリングコンテキストになるので、変数",[124,28271,794],{},"として使用します。",[129,28274,28276],{"className":131,"code":28275,"language":134,"meta":135,"style":135},"// canvas要素を取得\nconst canvas = document.getElementById('webgl-canvas') as HTMLCanvasElement;\n\nconst render = new Render(canvas);\n// 画面サイズいっぱいにする\nrender.fitScreen();\n// レンダリングコンテキストを取得\nconst gl = render.gl;\n// 画面をクリアする\ngl.clearColor(0, 0, 0, 1);\n",[124,28277,28278,28283,28313,28317,28337,28342,28354,28359,28375,28380],{"__ignoreMap":135},[65,28279,28280],{"class":140,"line":141},[65,28281,28282],{"class":278},"// canvas要素を取得\n",[65,28284,28285,28287,28289,28291,28293,28295,28297,28299,28301,28303,28305,28307,28309,28311],{"class":140,"line":158},[65,28286,1769],{"class":168},[65,28288,3408],{"class":144},[65,28290,218],{"class":168},[65,28292,3413],{"class":144},[65,28294,834],{"class":154},[65,28296,3418],{"class":200},[65,28298,224],{"class":204},[65,28300,306],{"class":154},[65,28302,3425],{"class":302},[65,28304,306],{"class":154},[65,28306,1713],{"class":204},[65,28308,3432],{"class":154},[65,28310,368],{"class":326},[65,28312,155],{"class":154},[65,28314,28315],{"class":140,"line":165},[65,28316,162],{"emptyLinePlaceholder":161},[65,28318,28319,28321,28323,28325,28327,28329,28331,28333,28335],{"class":140,"line":180},[65,28320,1769],{"class":168},[65,28322,3443],{"class":144},[65,28324,218],{"class":168},[65,28326,1776],{"class":168},[65,28328,3321],{"class":200},[65,28330,224],{"class":204},[65,28332,3454],{"class":144},[65,28334,235],{"class":204},[65,28336,155],{"class":154},[65,28338,28339],{"class":140,"line":194},[65,28340,28341],{"class":278},"// 画面サイズいっぱいにする\n",[65,28343,28344,28346,28348,28350,28352],{"class":140,"line":211},[65,28345,4503],{"class":144},[65,28347,834],{"class":154},[65,28349,3468],{"class":200},[65,28351,1269],{"class":204},[65,28353,155],{"class":154},[65,28355,28356],{"class":140,"line":240},[65,28357,28358],{"class":278},"// レンダリングコンテキストを取得\n",[65,28360,28361,28363,28365,28367,28369,28371,28373],{"class":140,"line":391},[65,28362,1769],{"class":168},[65,28364,841],{"class":144},[65,28366,218],{"class":168},[65,28368,3443],{"class":144},[65,28370,834],{"class":154},[65,28372,794],{"class":144},[65,28374,155],{"class":154},[65,28376,28377],{"class":140,"line":401},[65,28378,28379],{"class":278},"// 画面をクリアする\n",[65,28381,28382,28384,28386,28388,28390,28392,28394,28396,28398,28400,28402,28404,28406],{"class":140,"line":406},[65,28383,794],{"class":144},[65,28385,834],{"class":154},[65,28387,3497],{"class":200},[65,28389,224],{"class":204},[65,28391,743],{"class":793},[65,28393,230],{"class":154},[65,28395,1142],{"class":793},[65,28397,230],{"class":154},[65,28399,1142],{"class":793},[65,28401,230],{"class":154},[65,28403,3137],{"class":793},[65,28405,235],{"class":204},[65,28407,155],{"class":154},[15,28409,28410,28411,28413],{},"続いては、WebGLのシーンを管理する",[124,28412,21822],{},"クラスについて説明します。",[11,28415,28417],{"id":28416},"sceneクラス","Sceneクラス",[15,28419,28420,28421,28424,28425,28428],{},"このクラスの役割は、Three.jsを考えれば分かりやすいでしょう。Three.jsと同等に、シーンに物体などのメッシュを",[124,28422,28423],{},"scene.add()","で追加できるようにします。また、",[124,28426,28427],{},"scene.remove()","でメッシュを削除することもできます。",[129,28430,28432],{"className":131,"code":28431,"filename":21822,"language":134,"meta":135,"style":135},"export class Scene {\n parent: Scene | null = null;\n children: Scene[] = [];\n\n // 追加\n add(child: Scene) {\n if (child.parent) child.parent.remove(child);\n child.parent = this;\n this.children.push(child);\n }\n\n // 削除\n remove(child: Scene) {\n const i = this.children.indexOf(child);\n if (i !== -1) {\n child.parent = null;\n this.children.splice(i, 1);\n }\n }\n}\n",[124,28433,28434,28444,28462,28478,28482,28487,28505,28538,28553,28573,28577,28581,28586,28603,28630,28648,28663,28688,28692,28696],{"__ignoreMap":135},[65,28435,28436,28438,28440,28442],{"class":140,"line":141},[65,28437,284],{"class":154},[65,28439,774],{"class":168},[65,28441,3326],{"class":326},[65,28443,418],{"class":154},[65,28445,28446,28448,28450,28452,28454,28456,28458,28460],{"class":140,"line":158},[65,28447,20541],{"class":144},[65,28449,797],{"class":168},[65,28451,3326],{"class":326},[65,28453,11880],{"class":168},[65,28455,20550],{"class":340},[65,28457,218],{"class":168},[65,28459,20550],{"class":793},[65,28461,155],{"class":154},[65,28463,28464,28466,28468,28470,28472,28474,28476],{"class":140,"line":165},[65,28465,20561],{"class":144},[65,28467,797],{"class":168},[65,28469,3326],{"class":326},[65,28471,19326],{"class":204},[65,28473,6252],{"class":168},[65,28475,19331],{"class":204},[65,28477,155],{"class":154},[65,28479,28480],{"class":140,"line":180},[65,28481,162],{"emptyLinePlaceholder":161},[65,28483,28484],{"class":140,"line":194},[65,28485,28486],{"class":278}," // 追加\n",[65,28488,28489,28492,28494,28497,28499,28501,28503],{"class":140,"line":211},[65,28490,28491],{"class":200}," add",[65,28493,224],{"class":154},[65,28495,28496],{"class":793},"child",[65,28498,797],{"class":168},[65,28500,3326],{"class":326},[65,28502,235],{"class":154},[65,28504,418],{"class":154},[65,28506,28507,28509,28511,28513,28515,28517,28519,28521,28523,28525,28527,28530,28532,28534,28536],{"class":140,"line":240},[65,28508,3105],{"class":154},[65,28510,1696],{"class":204},[65,28512,28496],{"class":214},[65,28514,834],{"class":154},[65,28516,20660],{"class":214},[65,28518,1713],{"class":204},[65,28520,28496],{"class":214},[65,28522,834],{"class":154},[65,28524,20660],{"class":214},[65,28526,834],{"class":154},[65,28528,28529],{"class":200},"remove",[65,28531,224],{"class":204},[65,28533,28496],{"class":214},[65,28535,235],{"class":204},[65,28537,155],{"class":154},[65,28539,28540,28543,28545,28547,28549,28551],{"class":140,"line":391},[65,28541,28542],{"class":214}," child",[65,28544,834],{"class":154},[65,28546,20660],{"class":214},[65,28548,218],{"class":168},[65,28550,1434],{"class":830},[65,28552,155],{"class":154},[65,28554,28555,28557,28559,28561,28563,28565,28567,28569,28571],{"class":140,"line":401},[65,28556,831],{"class":830},[65,28558,834],{"class":154},[65,28560,20675],{"class":214},[65,28562,834],{"class":154},[65,28564,19451],{"class":200},[65,28566,224],{"class":204},[65,28568,28496],{"class":214},[65,28570,235],{"class":204},[65,28572,155],{"class":154},[65,28574,28575],{"class":140,"line":406},[65,28576,1171],{"class":154},[65,28578,28579],{"class":140,"line":421},[65,28580,162],{"emptyLinePlaceholder":161},[65,28582,28583],{"class":140,"line":435},[65,28584,28585],{"class":278}," // 削除\n",[65,28587,28588,28591,28593,28595,28597,28599,28601],{"class":140,"line":447},[65,28589,28590],{"class":200}," remove",[65,28592,224],{"class":154},[65,28594,28496],{"class":793},[65,28596,797],{"class":168},[65,28598,3326],{"class":326},[65,28600,235],{"class":154},[65,28602,418],{"class":154},[65,28604,28605,28607,28609,28611,28613,28615,28617,28619,28622,28624,28626,28628],{"class":140,"line":459},[65,28606,848],{"class":168},[65,28608,5998],{"class":214},[65,28610,218],{"class":168},[65,28612,1434],{"class":830},[65,28614,834],{"class":154},[65,28616,20675],{"class":214},[65,28618,834],{"class":154},[65,28620,28621],{"class":200},"indexOf",[65,28623,224],{"class":204},[65,28625,28496],{"class":214},[65,28627,235],{"class":204},[65,28629,155],{"class":154},[65,28631,28632,28634,28636,28638,28640,28642,28644,28646],{"class":140,"line":471},[65,28633,3105],{"class":154},[65,28635,1696],{"class":204},[65,28637,6246],{"class":214},[65,28639,2791],{"class":168},[65,28641,4399],{"class":168},[65,28643,3620],{"class":793},[65,28645,1713],{"class":204},[65,28647,208],{"class":154},[65,28649,28650,28653,28655,28657,28659,28661],{"class":140,"line":63},[65,28651,28652],{"class":214}," child",[65,28654,834],{"class":154},[65,28656,20660],{"class":214},[65,28658,218],{"class":168},[65,28660,20550],{"class":793},[65,28662,155],{"class":154},[65,28664,28665,28667,28669,28671,28673,28676,28678,28680,28682,28684,28686],{"class":140,"line":495},[65,28666,20954],{"class":830},[65,28668,834],{"class":154},[65,28670,20675],{"class":214},[65,28672,834],{"class":154},[65,28674,28675],{"class":200},"splice",[65,28677,224],{"class":204},[65,28679,6246],{"class":214},[65,28681,230],{"class":154},[65,28683,3137],{"class":793},[65,28685,235],{"class":204},[65,28687,155],{"class":154},[65,28689,28690],{"class":140,"line":507},[65,28691,3204],{"class":154},[65,28693,28694],{"class":140,"line":519},[65,28695,1171],{"class":154},[65,28697,28698],{"class":140,"line":531},[65,28699,243],{"class":154},[15,28701,28702,28703,2177,28705,28707,28708,28711],{},"使い方としては、変数",[124,28704,4932],{},[124,28706,21822],{},"クラスのインスタンスとして使用し、",[124,28709,28710],{},"add()","メソッドでメッシュを追加します。",[129,28713,28715],{"className":131,"code":28714,"language":134,"meta":135,"style":135},"const scene = new Scene();\nscene.add(mesh);\n",[124,28716,28717,28733],{"__ignoreMap":135},[65,28718,28719,28721,28723,28725,28727,28729,28731],{"class":140,"line":141},[65,28720,1769],{"class":168},[65,28722,3697],{"class":144},[65,28724,218],{"class":168},[65,28726,1776],{"class":168},[65,28728,3326],{"class":200},[65,28730,1269],{"class":204},[65,28732,155],{"class":154},[65,28734,28735,28737,28739,28741,28743,28745,28747],{"class":140,"line":158},[65,28736,4932],{"class":144},[65,28738,834],{"class":154},[65,28740,3962],{"class":200},[65,28742,224],{"class":204},[65,28744,21813],{"class":144},[65,28746,235],{"class":204},[65,28748,155],{"class":154},[11,28750,28752],{"id":28751},"geometryクラス","Geometryクラス",[15,28754,28755,28758],{},[124,28756,28757],{},"Geometry","クラスは、バッファの生成などを行います。このクラスは、Three.jsと同等に、頂点データやインデックスデータ、uvを管理できます。使用例としては次のようになります。",[129,28760,28762],{"className":131,"code":28761,"language":134,"meta":135,"style":135},"const geometry = new Geometry(gl, {\n position: { size: 3, data: positions },\n uv: { size: 2, data: uvs },\n index: { size: 1, data: indices },\n});\n",[124,28763,28764,28784,28808,28832,28856],{"__ignoreMap":135},[65,28765,28766,28768,28770,28772,28774,28776,28778,28780,28782],{"class":140,"line":141},[65,28767,1769],{"class":168},[65,28769,3903],{"class":144},[65,28771,218],{"class":168},[65,28773,1776],{"class":168},[65,28775,5645],{"class":200},[65,28777,224],{"class":204},[65,28779,794],{"class":144},[65,28781,230],{"class":154},[65,28783,418],{"class":154},[65,28785,28786,28788,28790,28792,28794,28796,28798,28800,28802,28804,28806],{"class":140,"line":158},[65,28787,8393],{"class":204},[65,28789,797],{"class":154},[65,28791,287],{"class":154},[65,28793,5854],{"class":204},[65,28795,797],{"class":154},[65,28797,3739],{"class":793},[65,28799,230],{"class":154},[65,28801,6304],{"class":204},[65,28803,797],{"class":154},[65,28805,26016],{"class":144},[65,28807,3858],{"class":154},[65,28809,28810,28812,28814,28816,28818,28820,28822,28824,28826,28828,28830],{"class":140,"line":165},[65,28811,15048],{"class":204},[65,28813,797],{"class":154},[65,28815,287],{"class":154},[65,28817,5854],{"class":204},[65,28819,797],{"class":154},[65,28821,3748],{"class":793},[65,28823,230],{"class":154},[65,28825,6304],{"class":204},[65,28827,797],{"class":154},[65,28829,26077],{"class":144},[65,28831,3858],{"class":154},[65,28833,28834,28836,28838,28840,28842,28844,28846,28848,28850,28852,28854],{"class":140,"line":180},[65,28835,6899],{"class":204},[65,28837,797],{"class":154},[65,28839,287],{"class":154},[65,28841,5854],{"class":204},[65,28843,797],{"class":154},[65,28845,3137],{"class":793},[65,28847,230],{"class":154},[65,28849,6304],{"class":204},[65,28851,797],{"class":154},[65,28853,16416],{"class":144},[65,28855,3858],{"class":154},[65,28857,28858,28860,28862],{"class":140,"line":194},[65,28859,2899],{"class":154},[65,28861,235],{"class":204},[65,28863,155],{"class":154},[15,28865,28866,28867,28869,28870,28872],{},"第1引数にWebGLレンダリングコンテキストを渡し、第2引数に頂点データやインデックスデータ、uvをサイズを指定して、dataに",[124,28868,6613],{},"または",[124,28871,19304],{},"で指定します。",[15,28874,28875,24097],{},[124,28876,28757],{},[129,28878,28880],{"className":131,"code":28879,"filename":28757,"language":134,"meta":135,"style":135},"interface Attribute {\n size: number;\n data: Float32Array | Uint16Array;\n}\n\nexport class Geometry {\n gl: WebGL2RenderingContext;\n attributes: Record\u003Cstring, Attribute>;\n vao: WebGLVertexArrayObject;\n vbos: Record\u003Cstring, WebGLBuffer> = {};\n ibo: WebGLBuffer | null = null;\n indexCount = 0;\n vertexCount = 0;\n\n constructor(gl: WebGL2RenderingContext, attributes: Record\u003Cstring, Attribute>) {\n this.gl = gl;\n this.attributes = attributes;\n\n this.vao = gl.createVertexArray();\n gl.bindVertexArray(this.vao);\n\n for (const name in attributes) {\n const attr = attributes[name];\n const { data } = attr;\n\n if (name === 'index') {\n // --- index buffer (EBO) ---\n this.ibo = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo);\n gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);\n this.indexCount = (data as Uint16Array).length;\n } else {\n // --- vertex attribute buffer ---\n const buf = gl.createBuffer();\n this.vbos[name] = buf;\n gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);\n }\n }\n\n gl.bindVertexArray(null);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n }\n}\n",[124,28881,28882,28891,28901,28916,28920,28924,28934,28944,28964,28976,29000,29019,29030,29041,29045,29077,29091,29105,29109,29131,29152,29156,29176,29196,29212,29216,29236,29241,29263,29294,29328,29354,29362,29367,29387,29408,29433,29465,29469,29473,29477,29494,29518,29542,29546],{"__ignoreMap":135},[65,28883,28884,28886,28889],{"class":140,"line":141},[65,28885,14463],{"class":168},[65,28887,28888],{"class":326}," Attribute",[65,28890,418],{"class":154},[65,28892,28893,28895,28897,28899],{"class":140,"line":158},[65,28894,5520],{"class":144},[65,28896,797],{"class":168},[65,28898,430],{"class":340},[65,28900,155],{"class":154},[65,28902,28903,28906,28908,28910,28912,28914],{"class":140,"line":165},[65,28904,28905],{"class":144}," data",[65,28907,797],{"class":168},[65,28909,5951],{"class":326},[65,28911,11880],{"class":168},[65,28913,6194],{"class":326},[65,28915,155],{"class":154},[65,28917,28918],{"class":140,"line":180},[65,28919,243],{"class":154},[65,28921,28922],{"class":140,"line":194},[65,28923,162],{"emptyLinePlaceholder":161},[65,28925,28926,28928,28930,28932],{"class":140,"line":211},[65,28927,284],{"class":154},[65,28929,774],{"class":168},[65,28931,5645],{"class":326},[65,28933,418],{"class":154},[65,28935,28936,28938,28940,28942],{"class":140,"line":240},[65,28937,2350],{"class":144},[65,28939,797],{"class":168},[65,28941,800],{"class":326},[65,28943,155],{"class":154},[65,28945,28946,28948,28950,28953,28955,28957,28959,28961],{"class":140,"line":391},[65,28947,14543],{"class":144},[65,28949,797],{"class":168},[65,28951,28952],{"class":326}," Record",[65,28954,1830],{"class":154},[65,28956,341],{"class":340},[65,28958,230],{"class":154},[65,28960,28888],{"class":326},[65,28962,28963],{"class":154},">;\n",[65,28965,28966,28969,28971,28974],{"class":140,"line":401},[65,28967,28968],{"class":144}," vao",[65,28970,797],{"class":168},[65,28972,28973],{"class":326}," WebGLVertexArrayObject",[65,28975,155],{"class":154},[65,28977,28978,28981,28983,28985,28987,28989,28991,28994,28996,28998],{"class":140,"line":406},[65,28979,28980],{"class":144}," vbos",[65,28982,797],{"class":168},[65,28984,28952],{"class":326},[65,28986,1830],{"class":154},[65,28988,341],{"class":340},[65,28990,230],{"class":154},[65,28992,28993],{"class":326}," WebGLBuffer",[65,28995,1836],{"class":154},[65,28997,218],{"class":168},[65,28999,5905],{"class":154},[65,29001,29002,29005,29007,29009,29011,29013,29015,29017],{"class":140,"line":421},[65,29003,29004],{"class":144}," ibo",[65,29006,797],{"class":168},[65,29008,28993],{"class":326},[65,29010,11880],{"class":168},[65,29012,20550],{"class":340},[65,29014,218],{"class":168},[65,29016,20550],{"class":793},[65,29018,155],{"class":154},[65,29020,29021,29024,29026,29028],{"class":140,"line":435},[65,29022,29023],{"class":144}," indexCount",[65,29025,218],{"class":168},[65,29027,1142],{"class":793},[65,29029,155],{"class":154},[65,29031,29032,29035,29037,29039],{"class":140,"line":447},[65,29033,29034],{"class":144}," vertexCount",[65,29036,218],{"class":168},[65,29038,1142],{"class":793},[65,29040,155],{"class":154},[65,29042,29043],{"class":140,"line":459},[65,29044,162],{"emptyLinePlaceholder":161},[65,29046,29047,29049,29051,29053,29055,29057,29059,29061,29063,29065,29067,29069,29071,29073,29075],{"class":140,"line":471},[65,29048,788],{"class":168},[65,29050,224],{"class":154},[65,29052,794],{"class":793},[65,29054,797],{"class":168},[65,29056,800],{"class":326},[65,29058,230],{"class":154},[65,29060,15834],{"class":793},[65,29062,797],{"class":168},[65,29064,28952],{"class":326},[65,29066,1830],{"class":154},[65,29068,341],{"class":340},[65,29070,230],{"class":154},[65,29072,28888],{"class":326},[65,29074,5843],{"class":154},[65,29076,418],{"class":154},[65,29078,29079,29081,29083,29085,29087,29089],{"class":140,"line":63},[65,29080,831],{"class":830},[65,29082,834],{"class":154},[65,29084,794],{"class":214},[65,29086,218],{"class":168},[65,29088,841],{"class":214},[65,29090,155],{"class":154},[65,29092,29093,29095,29097,29099,29101,29103],{"class":140,"line":495},[65,29094,831],{"class":830},[65,29096,834],{"class":154},[65,29098,9141],{"class":214},[65,29100,218],{"class":168},[65,29102,15834],{"class":214},[65,29104,155],{"class":154},[65,29106,29107],{"class":140,"line":507},[65,29108,162],{"emptyLinePlaceholder":161},[65,29110,29111,29113,29115,29118,29120,29122,29124,29127,29129],{"class":140,"line":519},[65,29112,831],{"class":830},[65,29114,834],{"class":154},[65,29116,29117],{"class":214},"vao",[65,29119,218],{"class":168},[65,29121,841],{"class":214},[65,29123,834],{"class":154},[65,29125,29126],{"class":200},"createVertexArray",[65,29128,1269],{"class":204},[65,29130,155],{"class":154},[65,29132,29133,29135,29137,29140,29142,29144,29146,29148,29150],{"class":140,"line":531},[65,29134,1295],{"class":214},[65,29136,834],{"class":154},[65,29138,29139],{"class":200},"bindVertexArray",[65,29141,224],{"class":204},[65,29143,2004],{"class":830},[65,29145,834],{"class":154},[65,29147,29117],{"class":214},[65,29149,235],{"class":204},[65,29151,155],{"class":154},[65,29153,29154],{"class":140,"line":543},[65,29155,162],{"emptyLinePlaceholder":161},[65,29157,29158,29160,29162,29164,29167,29170,29172,29174],{"class":140,"line":555},[65,29159,5990],{"class":154},[65,29161,1696],{"class":204},[65,29163,1769],{"class":168},[65,29165,29166],{"class":214}," name",[65,29168,29169],{"class":168}," in",[65,29171,15834],{"class":214},[65,29173,1713],{"class":204},[65,29175,208],{"class":154},[65,29177,29178,29180,29183,29185,29187,29189,29192,29194],{"class":140,"line":567},[65,29179,6028],{"class":168},[65,29181,29182],{"class":214}," attr",[65,29184,218],{"class":168},[65,29186,15834],{"class":214},[65,29188,6243],{"class":204},[65,29190,29191],{"class":214},"name",[65,29193,6106],{"class":204},[65,29195,155],{"class":154},[65,29197,29198,29200,29202,29204,29206,29208,29210],{"class":140,"line":3757},[65,29199,6028],{"class":168},[65,29201,287],{"class":154},[65,29203,6304],{"class":214},[65,29205,293],{"class":154},[65,29207,218],{"class":168},[65,29209,29182],{"class":214},[65,29211,155],{"class":154},[65,29213,29214],{"class":140,"line":3787},[65,29215,162],{"emptyLinePlaceholder":161},[65,29217,29218,29220,29222,29224,29226,29228,29230,29232,29234],{"class":140,"line":3792},[65,29219,17840],{"class":154},[65,29221,1696],{"class":204},[65,29223,29191],{"class":214},[65,29225,1704],{"class":168},[65,29227,299],{"class":154},[65,29229,11865],{"class":302},[65,29231,306],{"class":154},[65,29233,1713],{"class":204},[65,29235,208],{"class":154},[65,29237,29238],{"class":140,"line":3814},[65,29239,29240],{"class":278}," // --- index buffer (EBO) ---\n",[65,29242,29243,29245,29247,29250,29252,29254,29256,29259,29261],{"class":140,"line":3823},[65,29244,20875],{"class":830},[65,29246,834],{"class":154},[65,29248,29249],{"class":214},"ibo",[65,29251,218],{"class":168},[65,29253,841],{"class":214},[65,29255,834],{"class":154},[65,29257,29258],{"class":200},"createBuffer",[65,29260,1269],{"class":204},[65,29262,155],{"class":154},[65,29264,29265,29268,29270,29273,29275,29277,29279,29282,29284,29286,29288,29290,29292],{"class":140,"line":3831},[65,29266,29267],{"class":214}," gl",[65,29269,834],{"class":154},[65,29271,29272],{"class":200},"bindBuffer",[65,29274,224],{"class":204},[65,29276,794],{"class":214},[65,29278,834],{"class":154},[65,29280,29281],{"class":214},"ELEMENT_ARRAY_BUFFER",[65,29283,230],{"class":154},[65,29285,1434],{"class":830},[65,29287,834],{"class":154},[65,29289,29249],{"class":214},[65,29291,235],{"class":204},[65,29293,155],{"class":154},[65,29295,29296,29298,29300,29303,29305,29307,29309,29311,29313,29315,29317,29319,29321,29324,29326],{"class":140,"line":3841},[65,29297,29267],{"class":214},[65,29299,834],{"class":154},[65,29301,29302],{"class":200},"bufferData",[65,29304,224],{"class":204},[65,29306,794],{"class":214},[65,29308,834],{"class":154},[65,29310,29281],{"class":214},[65,29312,230],{"class":154},[65,29314,6304],{"class":214},[65,29316,230],{"class":154},[65,29318,841],{"class":214},[65,29320,834],{"class":154},[65,29322,29323],{"class":214},"STATIC_DRAW",[65,29325,235],{"class":204},[65,29327,155],{"class":154},[65,29329,29330,29332,29334,29336,29338,29340,29342,29344,29346,29348,29350,29352],{"class":140,"line":3861},[65,29331,20875],{"class":830},[65,29333,834],{"class":154},[65,29335,19670],{"class":214},[65,29337,218],{"class":168},[65,29339,1696],{"class":204},[65,29341,9164],{"class":214},[65,29343,9167],{"class":154},[65,29345,6194],{"class":326},[65,29347,235],{"class":204},[65,29349,834],{"class":154},[65,29351,9685],{"class":204},[65,29353,155],{"class":154},[65,29355,29356,29358,29360],{"class":140,"line":3867},[65,29357,20901],{"class":154},[65,29359,2115],{"class":154},[65,29361,418],{"class":154},[65,29363,29364],{"class":140,"line":3876},[65,29365,29366],{"class":278}," // --- vertex attribute buffer ---\n",[65,29368,29369,29372,29375,29377,29379,29381,29383,29385],{"class":140,"line":3881},[65,29370,29371],{"class":168}," const",[65,29373,29374],{"class":214}," buf",[65,29376,218],{"class":168},[65,29378,841],{"class":214},[65,29380,834],{"class":154},[65,29382,29258],{"class":200},[65,29384,1269],{"class":204},[65,29386,155],{"class":154},[65,29388,29389,29391,29393,29396,29398,29400,29402,29404,29406],{"class":140,"line":3920},[65,29390,20875],{"class":830},[65,29392,834],{"class":154},[65,29394,29395],{"class":214},"vbos",[65,29397,6243],{"class":204},[65,29399,29191],{"class":214},[65,29401,6249],{"class":204},[65,29403,6252],{"class":168},[65,29405,29374],{"class":214},[65,29407,155],{"class":154},[65,29409,29410,29412,29414,29416,29418,29420,29422,29425,29427,29429,29431],{"class":140,"line":3954},[65,29411,29267],{"class":214},[65,29413,834],{"class":154},[65,29415,29272],{"class":200},[65,29417,224],{"class":204},[65,29419,794],{"class":214},[65,29421,834],{"class":154},[65,29423,29424],{"class":214},"ARRAY_BUFFER",[65,29426,230],{"class":154},[65,29428,29374],{"class":214},[65,29430,235],{"class":204},[65,29432,155],{"class":154},[65,29434,29435,29437,29439,29441,29443,29445,29447,29449,29451,29453,29455,29457,29459,29461,29463],{"class":140,"line":3974},[65,29436,29267],{"class":214},[65,29438,834],{"class":154},[65,29440,29302],{"class":200},[65,29442,224],{"class":204},[65,29444,794],{"class":214},[65,29446,834],{"class":154},[65,29448,29424],{"class":214},[65,29450,230],{"class":154},[65,29452,6304],{"class":214},[65,29454,230],{"class":154},[65,29456,841],{"class":214},[65,29458,834],{"class":154},[65,29460,29323],{"class":214},[65,29462,235],{"class":204},[65,29464,155],{"class":154},[65,29466,29467],{"class":140,"line":3979},[65,29468,6413],{"class":154},[65,29470,29471],{"class":140,"line":4031},[65,29472,3204],{"class":154},[65,29474,29475],{"class":140,"line":4036},[65,29476,162],{"emptyLinePlaceholder":161},[65,29478,29479,29481,29483,29485,29487,29490,29492],{"class":140,"line":4070},[65,29480,1295],{"class":214},[65,29482,834],{"class":154},[65,29484,29139],{"class":200},[65,29486,224],{"class":204},[65,29488,29489],{"class":793},"null",[65,29491,235],{"class":204},[65,29493,155],{"class":154},[65,29495,29496,29498,29500,29502,29504,29506,29508,29510,29512,29514,29516],{"class":140,"line":4086},[65,29497,1295],{"class":214},[65,29499,834],{"class":154},[65,29501,29272],{"class":200},[65,29503,224],{"class":204},[65,29505,794],{"class":214},[65,29507,834],{"class":154},[65,29509,29424],{"class":214},[65,29511,230],{"class":154},[65,29513,20550],{"class":793},[65,29515,235],{"class":204},[65,29517,155],{"class":154},[65,29519,29520,29522,29524,29526,29528,29530,29532,29534,29536,29538,29540],{"class":140,"line":4102},[65,29521,1295],{"class":214},[65,29523,834],{"class":154},[65,29525,29272],{"class":200},[65,29527,224],{"class":204},[65,29529,794],{"class":214},[65,29531,834],{"class":154},[65,29533,29281],{"class":214},[65,29535,230],{"class":154},[65,29537,20550],{"class":793},[65,29539,235],{"class":204},[65,29541,155],{"class":154},[65,29543,29544],{"class":140,"line":4118},[65,29545,1171],{"class":154},[65,29547,29548],{"class":140,"line":4149},[65,29549,243],{"class":154},[15,29551,29552,29553,2765,29555,29557,29558,29561,29562,29564,29565,13737,29567,29564,29569,28869,29571,29573],{},"ひとまず第2引数には、頂点データとインデックスデータ、uvの",[124,29554,7526],{},[124,29556,9164],{},"が含まれるので、interfaceで",[124,29559,29560],{},"Attribute","を定義します。ここに入る型は、",[124,29563,7526],{},"は",[124,29566,15078],{},[124,29568,9164],{},[124,29570,6613],{},[124,29572,19304],{},"です。",[129,29575,29578],{"className":131,"code":29576,"filename":29577,"language":134,"meta":135,"style":135},"interface Attribute {\n size: number;\n data: Float32Array | Uint16Array;\n}\n","Attributeの定義",[124,29579,29580,29588,29598,29612],{"__ignoreMap":135},[65,29581,29582,29584,29586],{"class":140,"line":141},[65,29583,14463],{"class":168},[65,29585,28888],{"class":326},[65,29587,418],{"class":154},[65,29589,29590,29592,29594,29596],{"class":140,"line":158},[65,29591,5520],{"class":144},[65,29593,797],{"class":168},[65,29595,430],{"class":340},[65,29597,155],{"class":154},[65,29599,29600,29602,29604,29606,29608,29610],{"class":140,"line":165},[65,29601,28905],{"class":144},[65,29603,797],{"class":168},[65,29605,5951],{"class":326},[65,29607,11880],{"class":168},[65,29609,6194],{"class":326},[65,29611,155],{"class":154},[65,29613,29614],{"class":140,"line":180},[65,29615,243],{"class":154},[1177,29617,29618],{"id":29618},"バッファの作成",[15,29620,29621,29622,29624,29625,29628],{},"続いてバッファの作成をみていきます。",[5467,29623],{},"\n最初に頂点配列オブジェクト(Vertex Array Object: ",[20421,29626,29627],{},"VAO",")を作成します。",[129,29630,29633],{"className":131,"code":29631,"filename":29632,"language":134,"meta":135,"style":135},"this.vao = gl.createVertexArray();\ngl.bindVertexArray(this.vao);\n","VAOの作成",[124,29634,29635,29655],{"__ignoreMap":135},[65,29636,29637,29639,29641,29643,29645,29647,29649,29651,29653],{"class":140,"line":141},[65,29638,2004],{"class":830},[65,29640,834],{"class":154},[65,29642,29117],{"class":144},[65,29644,218],{"class":168},[65,29646,841],{"class":144},[65,29648,834],{"class":154},[65,29650,29126],{"class":200},[65,29652,1269],{"class":204},[65,29654,155],{"class":154},[65,29656,29657,29659,29661,29663,29665,29667,29669,29671,29673],{"class":140,"line":158},[65,29658,794],{"class":144},[65,29660,834],{"class":154},[65,29662,29139],{"class":200},[65,29664,224],{"class":204},[65,29666,2004],{"class":830},[65,29668,834],{"class":154},[65,29670,29117],{"class":144},[65,29672,235],{"class":204},[65,29674,155],{"class":154},[15,29676,29677,29680,29681,29684],{},[124,29678,29679],{},"createVertexArray()","でVAOインスタンスを作成し、",[124,29682,29683],{},"bindVertexArray()","でバインドすることができます。VAOは、頂点属性の設定を一括で管理するためのもので、一度設定すれば、同じ設定を複数の描画コールで使用することができます。",[15,29686,29687,29688,29691,29692,29695,29696,29698],{},"次に、頂点バッファオブジェクト(Vertex Buffer Object: ",[20421,29689,29690],{},"VBO",")とインデックスバッファオブジェクト(Index Buffer Object: ",[20421,29693,29694],{},"IBO",")を作成します。これは",[124,29697,9141],{},"に含まれているのでループして作成します。",[129,29700,29703],{"className":131,"code":29701,"filename":29702,"language":134,"meta":135,"style":135},"for (const name in attributes) {\n const attr = attributes[name];\n const { data } = attr;\n\n if (name === 'index') {\n // --- index buffer (EBO) ---\n this.ibo = gl.createBuffer();\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo);\n gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);\n this.indexCount = (data as Uint16Array).length;\n } else {\n // --- vertex attribute buffer ---\n const buf = gl.createBuffer();\n this.vbos[name] = buf;\n gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);\n }\n }\n","VBOとIBOの作成",[124,29704,29705,29723,29741,29757,29761,29781,29785,29805,29833,29865,29891,29899,29903,29921,29941,29965,29997,30001],{"__ignoreMap":135},[65,29706,29707,29709,29711,29713,29715,29717,29719,29721],{"class":140,"line":141},[65,29708,6643],{"class":154},[65,29710,1696],{"class":204},[65,29712,1769],{"class":168},[65,29714,29166],{"class":144},[65,29716,29169],{"class":168},[65,29718,15834],{"class":144},[65,29720,1713],{"class":204},[65,29722,208],{"class":154},[65,29724,29725,29727,29729,29731,29733,29735,29737,29739],{"class":140,"line":158},[65,29726,6028],{"class":168},[65,29728,29182],{"class":214},[65,29730,218],{"class":168},[65,29732,15834],{"class":214},[65,29734,6243],{"class":204},[65,29736,29191],{"class":214},[65,29738,6106],{"class":204},[65,29740,155],{"class":154},[65,29742,29743,29745,29747,29749,29751,29753,29755],{"class":140,"line":165},[65,29744,6028],{"class":168},[65,29746,287],{"class":154},[65,29748,6304],{"class":214},[65,29750,293],{"class":154},[65,29752,218],{"class":168},[65,29754,29182],{"class":214},[65,29756,155],{"class":154},[65,29758,29759],{"class":140,"line":180},[65,29760,162],{"emptyLinePlaceholder":161},[65,29762,29763,29765,29767,29769,29771,29773,29775,29777,29779],{"class":140,"line":194},[65,29764,17840],{"class":154},[65,29766,1696],{"class":204},[65,29768,29191],{"class":214},[65,29770,1704],{"class":168},[65,29772,299],{"class":154},[65,29774,11865],{"class":302},[65,29776,306],{"class":154},[65,29778,1713],{"class":204},[65,29780,208],{"class":154},[65,29782,29783],{"class":140,"line":211},[65,29784,29240],{"class":278},[65,29786,29787,29789,29791,29793,29795,29797,29799,29801,29803],{"class":140,"line":240},[65,29788,20875],{"class":830},[65,29790,834],{"class":154},[65,29792,29249],{"class":214},[65,29794,218],{"class":168},[65,29796,841],{"class":214},[65,29798,834],{"class":154},[65,29800,29258],{"class":200},[65,29802,1269],{"class":204},[65,29804,155],{"class":154},[65,29806,29807,29809,29811,29813,29815,29817,29819,29821,29823,29825,29827,29829,29831],{"class":140,"line":391},[65,29808,29267],{"class":214},[65,29810,834],{"class":154},[65,29812,29272],{"class":200},[65,29814,224],{"class":204},[65,29816,794],{"class":214},[65,29818,834],{"class":154},[65,29820,29281],{"class":214},[65,29822,230],{"class":154},[65,29824,1434],{"class":830},[65,29826,834],{"class":154},[65,29828,29249],{"class":214},[65,29830,235],{"class":204},[65,29832,155],{"class":154},[65,29834,29835,29837,29839,29841,29843,29845,29847,29849,29851,29853,29855,29857,29859,29861,29863],{"class":140,"line":401},[65,29836,29267],{"class":214},[65,29838,834],{"class":154},[65,29840,29302],{"class":200},[65,29842,224],{"class":204},[65,29844,794],{"class":214},[65,29846,834],{"class":154},[65,29848,29281],{"class":214},[65,29850,230],{"class":154},[65,29852,6304],{"class":214},[65,29854,230],{"class":154},[65,29856,841],{"class":214},[65,29858,834],{"class":154},[65,29860,29323],{"class":214},[65,29862,235],{"class":204},[65,29864,155],{"class":154},[65,29866,29867,29869,29871,29873,29875,29877,29879,29881,29883,29885,29887,29889],{"class":140,"line":406},[65,29868,20875],{"class":830},[65,29870,834],{"class":154},[65,29872,19670],{"class":214},[65,29874,218],{"class":168},[65,29876,1696],{"class":204},[65,29878,9164],{"class":214},[65,29880,9167],{"class":154},[65,29882,6194],{"class":326},[65,29884,235],{"class":204},[65,29886,834],{"class":154},[65,29888,9685],{"class":204},[65,29890,155],{"class":154},[65,29892,29893,29895,29897],{"class":140,"line":421},[65,29894,20901],{"class":154},[65,29896,2115],{"class":154},[65,29898,418],{"class":154},[65,29900,29901],{"class":140,"line":435},[65,29902,29366],{"class":278},[65,29904,29905,29907,29909,29911,29913,29915,29917,29919],{"class":140,"line":447},[65,29906,29371],{"class":168},[65,29908,29374],{"class":214},[65,29910,218],{"class":168},[65,29912,841],{"class":214},[65,29914,834],{"class":154},[65,29916,29258],{"class":200},[65,29918,1269],{"class":204},[65,29920,155],{"class":154},[65,29922,29923,29925,29927,29929,29931,29933,29935,29937,29939],{"class":140,"line":459},[65,29924,20875],{"class":830},[65,29926,834],{"class":154},[65,29928,29395],{"class":214},[65,29930,6243],{"class":204},[65,29932,29191],{"class":214},[65,29934,6249],{"class":204},[65,29936,6252],{"class":168},[65,29938,29374],{"class":214},[65,29940,155],{"class":154},[65,29942,29943,29945,29947,29949,29951,29953,29955,29957,29959,29961,29963],{"class":140,"line":471},[65,29944,29267],{"class":214},[65,29946,834],{"class":154},[65,29948,29272],{"class":200},[65,29950,224],{"class":204},[65,29952,794],{"class":214},[65,29954,834],{"class":154},[65,29956,29424],{"class":214},[65,29958,230],{"class":154},[65,29960,29374],{"class":214},[65,29962,235],{"class":204},[65,29964,155],{"class":154},[65,29966,29967,29969,29971,29973,29975,29977,29979,29981,29983,29985,29987,29989,29991,29993,29995],{"class":140,"line":63},[65,29968,29267],{"class":214},[65,29970,834],{"class":154},[65,29972,29302],{"class":200},[65,29974,224],{"class":204},[65,29976,794],{"class":214},[65,29978,834],{"class":154},[65,29980,29424],{"class":214},[65,29982,230],{"class":154},[65,29984,6304],{"class":214},[65,29986,230],{"class":154},[65,29988,841],{"class":214},[65,29990,834],{"class":154},[65,29992,29323],{"class":214},[65,29994,235],{"class":204},[65,29996,155],{"class":154},[65,29998,29999],{"class":140,"line":495},[65,30000,6413],{"class":154},[65,30002,30003],{"class":140,"line":507},[65,30004,3204],{"class":154},[15,30006,30007,30008,230,30010,230,30012,30014,30015,8078,30017,30019],{},"このデモの場合、nameは",[124,30009,3610],{},[124,30011,19137],{},[124,30013,11865],{},"のいずれかになるので、",[124,30016,29191],{},[124,30018,11865],{},"の場合はIBOを作成し、それ以外の場合はVBOを作成します。",[15,30021,30022],{},"最後に利用が終わったバッファはバインドを削除したほうがいいので、次のように削除します。",[129,30024,30027],{"className":131,"code":30025,"filename":30026,"language":134,"meta":135,"style":135},"gl.bindVertexArray(null);\ngl.bindBuffer(gl.ARRAY_BUFFER, null);\ngl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);\n","バッファの削除",[124,30028,30029,30045,30069],{"__ignoreMap":135},[65,30030,30031,30033,30035,30037,30039,30041,30043],{"class":140,"line":141},[65,30032,794],{"class":144},[65,30034,834],{"class":154},[65,30036,29139],{"class":200},[65,30038,224],{"class":204},[65,30040,29489],{"class":793},[65,30042,235],{"class":204},[65,30044,155],{"class":154},[65,30046,30047,30049,30051,30053,30055,30057,30059,30061,30063,30065,30067],{"class":140,"line":158},[65,30048,794],{"class":144},[65,30050,834],{"class":154},[65,30052,29272],{"class":200},[65,30054,224],{"class":204},[65,30056,794],{"class":144},[65,30058,834],{"class":154},[65,30060,29424],{"class":144},[65,30062,230],{"class":154},[65,30064,20550],{"class":793},[65,30066,235],{"class":204},[65,30068,155],{"class":154},[65,30070,30071,30073,30075,30077,30079,30081,30083,30085,30087,30089,30091],{"class":140,"line":165},[65,30072,794],{"class":144},[65,30074,834],{"class":154},[65,30076,29272],{"class":200},[65,30078,224],{"class":204},[65,30080,794],{"class":144},[65,30082,834],{"class":154},[65,30084,29281],{"class":144},[65,30086,230],{"class":154},[65,30088,20550],{"class":793},[65,30090,235],{"class":204},[65,30092,155],{"class":154},[15,30094,30095,30096,30098,30099,30101,30102,30104],{},"作成したバッファの使用は",[124,30097,19542],{},"クラスで行うので、あとで解説します。",[5467,30100],{},"\n次は",[124,30103,3061],{},"クラスの作成について説明します。",[11,30106,30108],{"id":30107},"programクラス","Programクラス",[15,30110,30111,30113],{},[124,30112,3061],{},"クラスでは、頂点シェーダーとフラグメントシェーダーのソースコードを読み込み、コンパイルし、リンクします。使い方としては次のようになります。",[129,30115,30117],{"className":131,"code":30116,"language":134,"meta":135,"style":135},"// シェーダーのインポート\nimport fragment from './index.frag?raw';\nimport vertex from './index.vert?raw';\n\n---\n\nconst program = new Program(gl, { \n vertex, \n fragment,\n uniforms: {\n uResolution: { value: [canvas.width, canvas.height ]}\n }\n});\n",[124,30118,30119,30124,30140,30156,30160,30165,30169,30191,30199,30205,30213,30248,30252],{"__ignoreMap":135},[65,30120,30121],{"class":140,"line":141},[65,30122,30123],{"class":278},"// シェーダーのインポート\n",[65,30125,30126,30128,30130,30132,30134,30136,30138],{"class":140,"line":158},[65,30127,3251],{"class":154},[65,30129,3350],{"class":144},[65,30131,296],{"class":154},[65,30133,299],{"class":154},[65,30135,3357],{"class":302},[65,30137,306],{"class":154},[65,30139,155],{"class":154},[65,30141,30142,30144,30146,30148,30150,30152,30154],{"class":140,"line":165},[65,30143,3251],{"class":154},[65,30145,3368],{"class":144},[65,30147,296],{"class":154},[65,30149,299],{"class":154},[65,30151,3375],{"class":302},[65,30153,306],{"class":154},[65,30155,155],{"class":154},[65,30157,30158],{"class":140,"line":180},[65,30159,162],{"emptyLinePlaceholder":161},[65,30161,30162],{"class":140,"line":194},[65,30163,30164],{"class":168},"---\n",[65,30166,30167],{"class":140,"line":211},[65,30168,162],{"emptyLinePlaceholder":161},[65,30170,30171,30173,30175,30177,30179,30181,30183,30185,30187,30189],{"class":140,"line":240},[65,30172,1769],{"class":168},[65,30174,3797],{"class":144},[65,30176,218],{"class":168},[65,30178,1776],{"class":168},[65,30180,3081],{"class":200},[65,30182,224],{"class":204},[65,30184,794],{"class":144},[65,30186,230],{"class":154},[65,30188,287],{"class":154},[65,30190,332],{"class":204},[65,30192,30193,30195,30197],{"class":140,"line":391},[65,30194,4839],{"class":144},[65,30196,230],{"class":154},[65,30198,332],{"class":204},[65,30200,30201,30203],{"class":140,"line":401},[65,30202,4846],{"class":144},[65,30204,3820],{"class":154},[65,30206,30207,30209,30211],{"class":140,"line":406},[65,30208,4853],{"class":204},[65,30210,797],{"class":154},[65,30212,418],{"class":154},[65,30214,30215,30218,30220,30222,30224,30226,30229,30231,30233,30235,30237,30239,30241,30243,30246],{"class":140,"line":421},[65,30216,30217],{"class":204}," uResolution",[65,30219,797],{"class":154},[65,30221,287],{"class":154},[65,30223,3851],{"class":204},[65,30225,797],{"class":154},[65,30227,30228],{"class":204}," [",[65,30230,3454],{"class":144},[65,30232,834],{"class":154},[65,30234,735],{"class":144},[65,30236,230],{"class":154},[65,30238,3408],{"class":144},[65,30240,834],{"class":154},[65,30242,748],{"class":144},[65,30244,30245],{"class":204}," ]",[65,30247,243],{"class":154},[65,30249,30250],{"class":140,"line":435},[65,30251,1171],{"class":154},[65,30253,30254,30256,30258],{"class":140,"line":447},[65,30255,2899],{"class":154},[65,30257,235],{"class":204},[65,30259,155],{"class":154},[15,30261,30262,30263,30265,30266,14717,30268,30270],{},"先述のとおり、頂点シェーダーとフラグメントシェーダーは別ファイルで用意するので、importで読み込みます。読み込んだシェーダーコードを",[124,30264,3061],{},"クラスの第2引数に渡して使用します。また、今回は使用しませんが、",[124,30267,22367],{},[124,30269,3061],{},"クラスに渡せるようにします。",[15,30272,30273,24097],{},[124,30274,3061],{},[129,30276,30278],{"className":131,"code":30277,"filename":3061,"language":134,"meta":135,"style":135},"export type ProgramOptions = {\n vertex: string;\n fragment: string;\n uniforms?: Record\u003Cstring, any>;\n};\n\nexport class Program {\n gl: WebGL2RenderingContext;\n program: WebGLProgram;\n uniforms: Record\u003Cstring, any>;\n\n constructor(gl: WebGL2RenderingContext, opts: ProgramOptions) {\n this.gl = gl;\n this.program = this.createProgram(opts.vertex, opts.fragment);\n this.uniforms = opts.uniforms ?? {};\n }\n\n private compile(type: number, source: string) {\n const gl = this.gl;\n const s = gl.createShader(type) as WebGLShader;\n gl.shaderSource(s, source);\n gl.compileShader(s);\n if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {\n const info = gl.getShaderInfoLog(s);\n gl.deleteShader(s);\n throw new Error(`Shader compile error: ${info}`);\n }\n return s;\n }\n\n private createProgram(vertexSrc: string, fragSrc: string) {\n const gl = this.gl;\n const v = this.compile(gl.VERTEX_SHADER, vertexSrc);\n const f = this.compile(gl.FRAGMENT_SHADER, fragSrc);\n const p = gl.createProgram();\n gl.attachShader(p, v);\n gl.attachShader(p, f);\n gl.linkProgram(p);\n if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {\n const info = gl.getProgramInfoLog(p);\n gl.deleteProgram(p);\n throw new Error(`Program link error: ${info}`);\n }\n gl.deleteShader(v);\n gl.deleteShader(f);\n return p;\n }\n}\n",[124,30279,30280,30293,30303,30313,30332,30336,30340,30350,30360,30371,30389,30393,30418,30432,30471,30491,30495,30499,30527,30543,30572,30594,30611,30644,30668,30686,30715,30719,30727,30731,30735,30764,30780,30813,30845,30863,30884,30904,30921,30953,30976,30993,31018,31022,31038,31055,31063,31067],{"__ignoreMap":135},[65,30281,30282,30284,30286,30289,30291],{"class":140,"line":141},[65,30283,284],{"class":154},[65,30285,323],{"class":168},[65,30287,30288],{"class":326}," ProgramOptions",[65,30290,218],{"class":168},[65,30292,418],{"class":154},[65,30294,30295,30297,30299,30301],{"class":140,"line":158},[65,30296,4839],{"class":144},[65,30298,797],{"class":168},[65,30300,2657],{"class":340},[65,30302,155],{"class":154},[65,30304,30305,30307,30309,30311],{"class":140,"line":165},[65,30306,4846],{"class":144},[65,30308,797],{"class":168},[65,30310,2657],{"class":340},[65,30312,155],{"class":154},[65,30314,30315,30317,30319,30321,30323,30325,30327,30330],{"class":140,"line":180},[65,30316,4853],{"class":144},[65,30318,427],{"class":168},[65,30320,28952],{"class":326},[65,30322,1830],{"class":154},[65,30324,341],{"class":340},[65,30326,230],{"class":154},[65,30328,30329],{"class":340}," any",[65,30331,28963],{"class":154},[65,30333,30334],{"class":140,"line":194},[65,30335,4731],{"class":154},[65,30337,30338],{"class":140,"line":211},[65,30339,162],{"emptyLinePlaceholder":161},[65,30341,30342,30344,30346,30348],{"class":140,"line":240},[65,30343,284],{"class":154},[65,30345,774],{"class":168},[65,30347,3081],{"class":326},[65,30349,418],{"class":154},[65,30351,30352,30354,30356,30358],{"class":140,"line":391},[65,30353,2350],{"class":144},[65,30355,797],{"class":168},[65,30357,800],{"class":326},[65,30359,155],{"class":154},[65,30361,30362,30364,30366,30369],{"class":140,"line":401},[65,30363,22112],{"class":144},[65,30365,797],{"class":168},[65,30367,30368],{"class":326}," WebGLProgram",[65,30370,155],{"class":154},[65,30372,30373,30375,30377,30379,30381,30383,30385,30387],{"class":140,"line":406},[65,30374,4853],{"class":144},[65,30376,797],{"class":168},[65,30378,28952],{"class":326},[65,30380,1830],{"class":154},[65,30382,341],{"class":340},[65,30384,230],{"class":154},[65,30386,30329],{"class":340},[65,30388,28963],{"class":154},[65,30390,30391],{"class":140,"line":421},[65,30392,162],{"emptyLinePlaceholder":161},[65,30394,30395,30397,30399,30401,30403,30405,30407,30410,30412,30414,30416],{"class":140,"line":435},[65,30396,788],{"class":168},[65,30398,224],{"class":154},[65,30400,794],{"class":793},[65,30402,797],{"class":168},[65,30404,800],{"class":326},[65,30406,230],{"class":154},[65,30408,30409],{"class":793}," opts",[65,30411,797],{"class":168},[65,30413,30288],{"class":326},[65,30415,235],{"class":154},[65,30417,418],{"class":154},[65,30419,30420,30422,30424,30426,30428,30430],{"class":140,"line":447},[65,30421,831],{"class":830},[65,30423,834],{"class":154},[65,30425,794],{"class":214},[65,30427,218],{"class":168},[65,30429,841],{"class":214},[65,30431,155],{"class":154},[65,30433,30434,30436,30438,30440,30442,30444,30446,30449,30451,30454,30456,30458,30460,30462,30464,30467,30469],{"class":140,"line":459},[65,30435,831],{"class":830},[65,30437,834],{"class":154},[65,30439,22228],{"class":214},[65,30441,218],{"class":168},[65,30443,1434],{"class":830},[65,30445,834],{"class":154},[65,30447,30448],{"class":200},"createProgram",[65,30450,224],{"class":204},[65,30452,30453],{"class":214},"opts",[65,30455,834],{"class":154},[65,30457,10951],{"class":214},[65,30459,230],{"class":154},[65,30461,30409],{"class":214},[65,30463,834],{"class":154},[65,30465,30466],{"class":214},"fragment",[65,30468,235],{"class":204},[65,30470,155],{"class":154},[65,30472,30473,30475,30477,30479,30481,30483,30485,30487,30489],{"class":140,"line":471},[65,30474,831],{"class":830},[65,30476,834],{"class":154},[65,30478,22367],{"class":214},[65,30480,218],{"class":168},[65,30482,30409],{"class":214},[65,30484,834],{"class":154},[65,30486,22367],{"class":214},[65,30488,881],{"class":168},[65,30490,5905],{"class":154},[65,30492,30493],{"class":140,"line":63},[65,30494,1171],{"class":154},[65,30496,30497],{"class":140,"line":495},[65,30498,162],{"emptyLinePlaceholder":161},[65,30500,30501,30504,30507,30509,30511,30513,30515,30517,30519,30521,30523,30525],{"class":140,"line":507},[65,30502,30503],{"class":168}," private",[65,30505,30506],{"class":200}," compile",[65,30508,224],{"class":154},[65,30510,722],{"class":793},[65,30512,797],{"class":168},[65,30514,430],{"class":340},[65,30516,230],{"class":154},[65,30518,805],{"class":793},[65,30520,797],{"class":168},[65,30522,2657],{"class":340},[65,30524,235],{"class":154},[65,30526,418],{"class":154},[65,30528,30529,30531,30533,30535,30537,30539,30541],{"class":140,"line":519},[65,30530,848],{"class":168},[65,30532,841],{"class":214},[65,30534,218],{"class":168},[65,30536,1434],{"class":830},[65,30538,834],{"class":154},[65,30540,794],{"class":214},[65,30542,155],{"class":154},[65,30544,30545,30547,30550,30552,30554,30556,30559,30561,30563,30565,30567,30570],{"class":140,"line":531},[65,30546,848],{"class":168},[65,30548,30549],{"class":214}," s",[65,30551,218],{"class":168},[65,30553,841],{"class":214},[65,30555,834],{"class":154},[65,30557,30558],{"class":200},"createShader",[65,30560,224],{"class":204},[65,30562,722],{"class":214},[65,30564,1713],{"class":204},[65,30566,3432],{"class":154},[65,30568,30569],{"class":326}," WebGLShader",[65,30571,155],{"class":154},[65,30573,30574,30576,30578,30581,30583,30586,30588,30590,30592],{"class":140,"line":543},[65,30575,1295],{"class":214},[65,30577,834],{"class":154},[65,30579,30580],{"class":200},"shaderSource",[65,30582,224],{"class":204},[65,30584,30585],{"class":214},"s",[65,30587,230],{"class":154},[65,30589,805],{"class":214},[65,30591,235],{"class":204},[65,30593,155],{"class":154},[65,30595,30596,30598,30600,30603,30605,30607,30609],{"class":140,"line":555},[65,30597,1295],{"class":214},[65,30599,834],{"class":154},[65,30601,30602],{"class":200},"compileShader",[65,30604,224],{"class":204},[65,30606,30585],{"class":214},[65,30608,235],{"class":204},[65,30610,155],{"class":154},[65,30612,30613,30615,30617,30619,30621,30623,30626,30628,30630,30632,30634,30636,30639,30642],{"class":140,"line":567},[65,30614,3105],{"class":154},[65,30616,1696],{"class":204},[65,30618,2264],{"class":168},[65,30620,794],{"class":214},[65,30622,834],{"class":154},[65,30624,30625],{"class":200},"getShaderParameter",[65,30627,224],{"class":204},[65,30629,30585],{"class":214},[65,30631,230],{"class":154},[65,30633,841],{"class":214},[65,30635,834],{"class":154},[65,30637,30638],{"class":214},"COMPILE_STATUS",[65,30640,30641],{"class":204},")) ",[65,30643,208],{"class":154},[65,30645,30646,30648,30651,30653,30655,30657,30660,30662,30664,30666],{"class":140,"line":3757},[65,30647,6028],{"class":168},[65,30649,30650],{"class":214}," info",[65,30652,218],{"class":168},[65,30654,841],{"class":214},[65,30656,834],{"class":154},[65,30658,30659],{"class":200},"getShaderInfoLog",[65,30661,224],{"class":204},[65,30663,30585],{"class":214},[65,30665,235],{"class":204},[65,30667,155],{"class":154},[65,30669,30670,30673,30675,30678,30680,30682,30684],{"class":140,"line":3787},[65,30671,30672],{"class":214}," gl",[65,30674,834],{"class":154},[65,30676,30677],{"class":200},"deleteShader",[65,30679,224],{"class":204},[65,30681,30585],{"class":214},[65,30683,235],{"class":204},[65,30685,155],{"class":154},[65,30687,30688,30690,30692,30694,30696,30699,30702,30705,30708,30711,30713],{"class":140,"line":3792},[65,30689,28056],{"class":154},[65,30691,1776],{"class":168},[65,30693,28061],{"class":200},[65,30695,224],{"class":204},[65,30697,30698],{"class":154},"`",[65,30700,30701],{"class":302},"Shader compile error: ",[65,30703,30704],{"class":154},"${",[65,30706,30707],{"class":214},"info",[65,30709,30710],{"class":154},"}`",[65,30712,235],{"class":204},[65,30714,155],{"class":154},[65,30716,30717],{"class":140,"line":3814},[65,30718,3204],{"class":154},[65,30720,30721,30723,30725],{"class":140,"line":3823},[65,30722,2684],{"class":154},[65,30724,30549],{"class":214},[65,30726,155],{"class":154},[65,30728,30729],{"class":140,"line":3831},[65,30730,1171],{"class":154},[65,30732,30733],{"class":140,"line":3841},[65,30734,162],{"emptyLinePlaceholder":161},[65,30736,30737,30739,30742,30744,30747,30749,30751,30753,30756,30758,30760,30762],{"class":140,"line":3861},[65,30738,30503],{"class":168},[65,30740,30741],{"class":200}," createProgram",[65,30743,224],{"class":154},[65,30745,30746],{"class":793},"vertexSrc",[65,30748,797],{"class":168},[65,30750,2657],{"class":340},[65,30752,230],{"class":154},[65,30754,30755],{"class":793}," fragSrc",[65,30757,797],{"class":168},[65,30759,2657],{"class":340},[65,30761,235],{"class":154},[65,30763,418],{"class":154},[65,30765,30766,30768,30770,30772,30774,30776,30778],{"class":140,"line":3867},[65,30767,848],{"class":168},[65,30769,841],{"class":214},[65,30771,218],{"class":168},[65,30773,1434],{"class":830},[65,30775,834],{"class":154},[65,30777,794],{"class":214},[65,30779,155],{"class":154},[65,30781,30782,30784,30786,30788,30790,30792,30795,30797,30799,30801,30804,30806,30809,30811],{"class":140,"line":3876},[65,30783,848],{"class":168},[65,30785,17638],{"class":214},[65,30787,218],{"class":168},[65,30789,1434],{"class":830},[65,30791,834],{"class":154},[65,30793,30794],{"class":200},"compile",[65,30796,224],{"class":204},[65,30798,794],{"class":214},[65,30800,834],{"class":154},[65,30802,30803],{"class":214},"VERTEX_SHADER",[65,30805,230],{"class":154},[65,30807,30808],{"class":214}," vertexSrc",[65,30810,235],{"class":204},[65,30812,155],{"class":154},[65,30814,30815,30817,30820,30822,30824,30826,30828,30830,30832,30834,30837,30839,30841,30843],{"class":140,"line":3881},[65,30816,848],{"class":168},[65,30818,30819],{"class":214}," f",[65,30821,218],{"class":168},[65,30823,1434],{"class":830},[65,30825,834],{"class":154},[65,30827,30794],{"class":200},[65,30829,224],{"class":204},[65,30831,794],{"class":214},[65,30833,834],{"class":154},[65,30835,30836],{"class":214},"FRAGMENT_SHADER",[65,30838,230],{"class":154},[65,30840,30755],{"class":214},[65,30842,235],{"class":204},[65,30844,155],{"class":154},[65,30846,30847,30849,30851,30853,30855,30857,30859,30861],{"class":140,"line":3920},[65,30848,848],{"class":168},[65,30850,11089],{"class":214},[65,30852,218],{"class":168},[65,30854,841],{"class":214},[65,30856,834],{"class":154},[65,30858,30448],{"class":200},[65,30860,1269],{"class":204},[65,30862,155],{"class":154},[65,30864,30865,30867,30869,30872,30874,30876,30878,30880,30882],{"class":140,"line":3954},[65,30866,1295],{"class":214},[65,30868,834],{"class":154},[65,30870,30871],{"class":200},"attachShader",[65,30873,224],{"class":204},[65,30875,15],{"class":214},[65,30877,230],{"class":154},[65,30879,17638],{"class":214},[65,30881,235],{"class":204},[65,30883,155],{"class":154},[65,30885,30886,30888,30890,30892,30894,30896,30898,30900,30902],{"class":140,"line":3974},[65,30887,1295],{"class":214},[65,30889,834],{"class":154},[65,30891,30871],{"class":200},[65,30893,224],{"class":204},[65,30895,15],{"class":214},[65,30897,230],{"class":154},[65,30899,30819],{"class":214},[65,30901,235],{"class":204},[65,30903,155],{"class":154},[65,30905,30906,30908,30910,30913,30915,30917,30919],{"class":140,"line":3979},[65,30907,1295],{"class":214},[65,30909,834],{"class":154},[65,30911,30912],{"class":200},"linkProgram",[65,30914,224],{"class":204},[65,30916,15],{"class":214},[65,30918,235],{"class":204},[65,30920,155],{"class":154},[65,30922,30923,30925,30927,30929,30931,30933,30936,30938,30940,30942,30944,30946,30949,30951],{"class":140,"line":4031},[65,30924,3105],{"class":154},[65,30926,1696],{"class":204},[65,30928,2264],{"class":168},[65,30930,794],{"class":214},[65,30932,834],{"class":154},[65,30934,30935],{"class":200},"getProgramParameter",[65,30937,224],{"class":204},[65,30939,15],{"class":214},[65,30941,230],{"class":154},[65,30943,841],{"class":214},[65,30945,834],{"class":154},[65,30947,30948],{"class":214},"LINK_STATUS",[65,30950,30641],{"class":204},[65,30952,208],{"class":154},[65,30954,30955,30957,30959,30961,30963,30965,30968,30970,30972,30974],{"class":140,"line":4036},[65,30956,6028],{"class":168},[65,30958,30650],{"class":214},[65,30960,218],{"class":168},[65,30962,841],{"class":214},[65,30964,834],{"class":154},[65,30966,30967],{"class":200},"getProgramInfoLog",[65,30969,224],{"class":204},[65,30971,15],{"class":214},[65,30973,235],{"class":204},[65,30975,155],{"class":154},[65,30977,30978,30980,30982,30985,30987,30989,30991],{"class":140,"line":4070},[65,30979,30672],{"class":214},[65,30981,834],{"class":154},[65,30983,30984],{"class":200},"deleteProgram",[65,30986,224],{"class":204},[65,30988,15],{"class":214},[65,30990,235],{"class":204},[65,30992,155],{"class":154},[65,30994,30995,30997,30999,31001,31003,31005,31008,31010,31012,31014,31016],{"class":140,"line":4086},[65,30996,28056],{"class":154},[65,30998,1776],{"class":168},[65,31000,28061],{"class":200},[65,31002,224],{"class":204},[65,31004,30698],{"class":154},[65,31006,31007],{"class":302},"Program link error: ",[65,31009,30704],{"class":154},[65,31011,30707],{"class":214},[65,31013,30710],{"class":154},[65,31015,235],{"class":204},[65,31017,155],{"class":154},[65,31019,31020],{"class":140,"line":4102},[65,31021,3204],{"class":154},[65,31023,31024,31026,31028,31030,31032,31034,31036],{"class":140,"line":4118},[65,31025,1295],{"class":214},[65,31027,834],{"class":154},[65,31029,30677],{"class":200},[65,31031,224],{"class":204},[65,31033,15490],{"class":214},[65,31035,235],{"class":204},[65,31037,155],{"class":154},[65,31039,31040,31042,31044,31046,31048,31051,31053],{"class":140,"line":4149},[65,31041,1295],{"class":214},[65,31043,834],{"class":154},[65,31045,30677],{"class":200},[65,31047,224],{"class":204},[65,31049,31050],{"class":214},"f",[65,31052,235],{"class":204},[65,31054,155],{"class":154},[65,31056,31057,31059,31061],{"class":140,"line":4163},[65,31058,2684],{"class":154},[65,31060,11089],{"class":214},[65,31062,155],{"class":154},[65,31064,31065],{"class":140,"line":4168},[65,31066,1171],{"class":154},[65,31068,31069],{"class":140,"line":4194},[65,31070,243],{"class":154},[1177,31072,31073],{"id":31073},"シェーダーのコンパイルとリンク",[15,31075,31076,31077,31080],{},"シェーダーのコンパイルとリンクする処理をみていきます。",[124,31078,31079],{},"constructor","は次のようになってます。",[129,31082,31084],{"className":131,"code":31083,"language":134,"meta":135,"style":135},"constructor(gl: WebGL2RenderingContext, opts: ProgramOptions) {\n this.gl = gl;\n this.program = this.createProgram(opts.vertex, opts.fragment);\n this.uniforms = opts.uniforms ?? {};\n}\n",[124,31085,31086,31112,31126,31162,31182],{"__ignoreMap":135},[65,31087,31088,31090,31092,31094,31096,31099,31101,31103,31105,31108,31110],{"class":140,"line":141},[65,31089,31079],{"class":200},[65,31091,224],{"class":204},[65,31093,794],{"class":144},[65,31095,1819],{"class":204},[65,31097,31098],{"class":144},"WebGL2RenderingContext",[65,31100,230],{"class":154},[65,31102,30409],{"class":144},[65,31104,1819],{"class":204},[65,31106,31107],{"class":144},"ProgramOptions",[65,31109,1713],{"class":204},[65,31111,208],{"class":154},[65,31113,31114,31116,31118,31120,31122,31124],{"class":140,"line":158},[65,31115,1720],{"class":830},[65,31117,834],{"class":154},[65,31119,794],{"class":214},[65,31121,218],{"class":168},[65,31123,841],{"class":214},[65,31125,155],{"class":154},[65,31127,31128,31130,31132,31134,31136,31138,31140,31142,31144,31146,31148,31150,31152,31154,31156,31158,31160],{"class":140,"line":165},[65,31129,1720],{"class":830},[65,31131,834],{"class":154},[65,31133,22228],{"class":214},[65,31135,218],{"class":168},[65,31137,1434],{"class":830},[65,31139,834],{"class":154},[65,31141,30448],{"class":200},[65,31143,224],{"class":204},[65,31145,30453],{"class":214},[65,31147,834],{"class":154},[65,31149,10951],{"class":214},[65,31151,230],{"class":154},[65,31153,30409],{"class":214},[65,31155,834],{"class":154},[65,31157,30466],{"class":214},[65,31159,235],{"class":204},[65,31161,155],{"class":154},[65,31163,31164,31166,31168,31170,31172,31174,31176,31178,31180],{"class":140,"line":180},[65,31165,1720],{"class":830},[65,31167,834],{"class":154},[65,31169,22367],{"class":214},[65,31171,218],{"class":168},[65,31173,30409],{"class":214},[65,31175,834],{"class":154},[65,31177,22367],{"class":214},[65,31179,881],{"class":168},[65,31181,5905],{"class":154},[65,31183,31184],{"class":140,"line":194},[65,31185,243],{"class":154},[15,31187,31188,31190,31191,2765,31193,31195,31196,31198,31199,31201,31202,31205],{},[124,31189,30453],{},"には",[124,31192,10951],{},[124,31194,30466],{},"が含まれています。これらのコンパイルとリンクする処理",[124,31197,30448],{},"メソッドに渡します。",[124,31200,22367],{},"に関してはあとで説明しますが、ひとまず",[124,31203,31204],{},"this.uniforms","に入れておきます。",[15,31207,31208,31210],{},[124,31209,30448],{},"メソッドは次のようになります。",[129,31212,31214],{"className":131,"code":31213,"language":134,"meta":135,"style":135},"private createProgram(vertexSrc: string, fragSrc: string) {\n const gl = this.gl;\n const v = this.compile(gl.VERTEX_SHADER, vertexSrc);\n const f = this.compile(gl.FRAGMENT_SHADER, fragSrc);\n const p = gl.createProgram();\n gl.attachShader(p, v);\n gl.attachShader(p, f);\n gl.linkProgram(p);\n if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {\n const info = gl.getProgramInfoLog(p);\n gl.deleteProgram(p);\n throw new Error(`Program link error: ${info}`);\n }\n gl.deleteShader(v);\n gl.deleteShader(f);\n return p;\n}\n",[124,31215,31216,31242,31258,31288,31318,31336,31356,31376,31392,31422,31444,31460,31485,31489,31505,31521,31529],{"__ignoreMap":135},[65,31217,31218,31220,31222,31224,31226,31228,31230,31232,31234,31236,31238,31240],{"class":140,"line":141},[65,31219,1808],{"class":144},[65,31221,30741],{"class":200},[65,31223,224],{"class":204},[65,31225,30746],{"class":144},[65,31227,1819],{"class":204},[65,31229,341],{"class":144},[65,31231,230],{"class":154},[65,31233,30755],{"class":144},[65,31235,1819],{"class":204},[65,31237,341],{"class":144},[65,31239,1713],{"class":204},[65,31241,208],{"class":154},[65,31243,31244,31246,31248,31250,31252,31254,31256],{"class":140,"line":158},[65,31245,2243],{"class":168},[65,31247,841],{"class":214},[65,31249,218],{"class":168},[65,31251,1434],{"class":830},[65,31253,834],{"class":154},[65,31255,794],{"class":214},[65,31257,155],{"class":154},[65,31259,31260,31262,31264,31266,31268,31270,31272,31274,31276,31278,31280,31282,31284,31286],{"class":140,"line":165},[65,31261,2243],{"class":168},[65,31263,17638],{"class":214},[65,31265,218],{"class":168},[65,31267,1434],{"class":830},[65,31269,834],{"class":154},[65,31271,30794],{"class":200},[65,31273,224],{"class":204},[65,31275,794],{"class":214},[65,31277,834],{"class":154},[65,31279,30803],{"class":214},[65,31281,230],{"class":154},[65,31283,30808],{"class":214},[65,31285,235],{"class":204},[65,31287,155],{"class":154},[65,31289,31290,31292,31294,31296,31298,31300,31302,31304,31306,31308,31310,31312,31314,31316],{"class":140,"line":180},[65,31291,2243],{"class":168},[65,31293,30819],{"class":214},[65,31295,218],{"class":168},[65,31297,1434],{"class":830},[65,31299,834],{"class":154},[65,31301,30794],{"class":200},[65,31303,224],{"class":204},[65,31305,794],{"class":214},[65,31307,834],{"class":154},[65,31309,30836],{"class":214},[65,31311,230],{"class":154},[65,31313,30755],{"class":214},[65,31315,235],{"class":204},[65,31317,155],{"class":154},[65,31319,31320,31322,31324,31326,31328,31330,31332,31334],{"class":140,"line":194},[65,31321,2243],{"class":168},[65,31323,11089],{"class":214},[65,31325,218],{"class":168},[65,31327,841],{"class":214},[65,31329,834],{"class":154},[65,31331,30448],{"class":200},[65,31333,1269],{"class":204},[65,31335,155],{"class":154},[65,31337,31338,31340,31342,31344,31346,31348,31350,31352,31354],{"class":140,"line":211},[65,31339,2350],{"class":214},[65,31341,834],{"class":154},[65,31343,30871],{"class":200},[65,31345,224],{"class":204},[65,31347,15],{"class":214},[65,31349,230],{"class":154},[65,31351,17638],{"class":214},[65,31353,235],{"class":204},[65,31355,155],{"class":154},[65,31357,31358,31360,31362,31364,31366,31368,31370,31372,31374],{"class":140,"line":240},[65,31359,2350],{"class":214},[65,31361,834],{"class":154},[65,31363,30871],{"class":200},[65,31365,224],{"class":204},[65,31367,15],{"class":214},[65,31369,230],{"class":154},[65,31371,30819],{"class":214},[65,31373,235],{"class":204},[65,31375,155],{"class":154},[65,31377,31378,31380,31382,31384,31386,31388,31390],{"class":140,"line":391},[65,31379,2350],{"class":214},[65,31381,834],{"class":154},[65,31383,30912],{"class":200},[65,31385,224],{"class":204},[65,31387,15],{"class":214},[65,31389,235],{"class":204},[65,31391,155],{"class":154},[65,31393,31394,31396,31398,31400,31402,31404,31406,31408,31410,31412,31414,31416,31418,31420],{"class":140,"line":401},[65,31395,2064],{"class":154},[65,31397,1696],{"class":204},[65,31399,2264],{"class":168},[65,31401,794],{"class":214},[65,31403,834],{"class":154},[65,31405,30935],{"class":200},[65,31407,224],{"class":204},[65,31409,15],{"class":214},[65,31411,230],{"class":154},[65,31413,841],{"class":214},[65,31415,834],{"class":154},[65,31417,30948],{"class":214},[65,31419,30641],{"class":204},[65,31421,208],{"class":154},[65,31423,31424,31426,31428,31430,31432,31434,31436,31438,31440,31442],{"class":140,"line":406},[65,31425,848],{"class":168},[65,31427,30650],{"class":214},[65,31429,218],{"class":168},[65,31431,841],{"class":214},[65,31433,834],{"class":154},[65,31435,30967],{"class":200},[65,31437,224],{"class":204},[65,31439,15],{"class":214},[65,31441,235],{"class":204},[65,31443,155],{"class":154},[65,31445,31446,31448,31450,31452,31454,31456,31458],{"class":140,"line":421},[65,31447,1295],{"class":214},[65,31449,834],{"class":154},[65,31451,30984],{"class":200},[65,31453,224],{"class":204},[65,31455,15],{"class":214},[65,31457,235],{"class":204},[65,31459,155],{"class":154},[65,31461,31462,31465,31467,31469,31471,31473,31475,31477,31479,31481,31483],{"class":140,"line":435},[65,31463,31464],{"class":154}," throw",[65,31466,1776],{"class":168},[65,31468,28061],{"class":200},[65,31470,224],{"class":204},[65,31472,30698],{"class":154},[65,31474,31007],{"class":302},[65,31476,30704],{"class":154},[65,31478,30707],{"class":214},[65,31480,30710],{"class":154},[65,31482,235],{"class":204},[65,31484,155],{"class":154},[65,31486,31487],{"class":140,"line":447},[65,31488,1171],{"class":154},[65,31490,31491,31493,31495,31497,31499,31501,31503],{"class":140,"line":459},[65,31492,2350],{"class":214},[65,31494,834],{"class":154},[65,31496,30677],{"class":200},[65,31498,224],{"class":204},[65,31500,15490],{"class":214},[65,31502,235],{"class":204},[65,31504,155],{"class":154},[65,31506,31507,31509,31511,31513,31515,31517,31519],{"class":140,"line":471},[65,31508,2350],{"class":214},[65,31510,834],{"class":154},[65,31512,30677],{"class":200},[65,31514,224],{"class":204},[65,31516,31050],{"class":214},[65,31518,235],{"class":204},[65,31520,155],{"class":154},[65,31522,31523,31525,31527],{"class":140,"line":63},[65,31524,2726],{"class":154},[65,31526,11089],{"class":214},[65,31528,155],{"class":154},[65,31530,31531],{"class":140,"line":495},[65,31532,243],{"class":154},[15,31534,31535,31536,31538,31539,31541],{},"頂点・フラグメント両方を",[124,31537,30794],{},"メソッドでコンパイルします。この",[124,31540,30794],{},"メソッドはコードを見て分かる通り、コンパイル失敗時にはエラー内容をthrowして知らせます。",[15,31543,31544,31546,31547,31549,31550,31552],{},[124,31545,30448],{},"でプログラムを生成し、頂点・フラグメント両方を",[124,31548,30871],{},"でアタッチし、",[124,31551,30912],{},"でリンクします。ここでもリンクエラーはthrowして知らせるようにします。",[15,31554,31555,31556,31558,31559,31561],{},"使い終わったシェーダーは",[124,31557,30677],{},"で削除します。以上の処理が",[124,31560,30448],{},"メソッドで完了します。",[11,31563,31565],{"id":31564},"meshクラス","Meshクラス",[15,31567,31568,31570],{},[124,31569,19542],{},"クラスは、Three.jsのようにGeometry(頂点バッファ)とProgram(シェーダー)をまとめたクラスになります。使い方は次のようになります。",[129,31572,31574],{"className":131,"code":31573,"language":134,"meta":135,"style":135},"const mesh = new Mesh(gl, { geometry, program });\nscene.add(mesh);\n",[124,31575,31576,31608],{"__ignoreMap":135},[65,31577,31578,31580,31582,31584,31586,31588,31590,31592,31594,31596,31598,31600,31602,31604,31606],{"class":140,"line":141},[65,31579,1769],{"class":168},[65,31581,22047],{"class":144},[65,31583,218],{"class":168},[65,31585,1776],{"class":168},[65,31587,3302],{"class":200},[65,31589,224],{"class":204},[65,31591,794],{"class":144},[65,31593,230],{"class":154},[65,31595,287],{"class":154},[65,31597,3903],{"class":144},[65,31599,230],{"class":154},[65,31601,3797],{"class":144},[65,31603,293],{"class":154},[65,31605,235],{"class":204},[65,31607,155],{"class":154},[65,31609,31610,31612,31614,31616,31618,31620,31622],{"class":140,"line":158},[65,31611,4932],{"class":144},[65,31613,834],{"class":154},[65,31615,3962],{"class":200},[65,31617,224],{"class":204},[65,31619,21813],{"class":144},[65,31621,235],{"class":204},[65,31623,155],{"class":154},[15,31625,31626,31628],{},[124,31627,19542],{},"クラスのコードは次のようになります。",[129,31630,31632],{"className":131,"code":31631,"filename":19542,"language":134,"meta":135,"style":135},"import type { Geometry } from './Geometry';\nimport type { Program } from './Program';\nimport { Scene } from './Scene';\n\nexport class Mesh extends Scene {\n geometry: Geometry;\n program: Program;\n\n constructor(gl: WebGL2RenderingContext, { geometry, program }: { geometry: Geometry; program: Program }) {\n super();\n this.geometry = geometry;\n this.program = program;\n }\n\n draw(gl: WebGL2RenderingContext) {\n const program = this.program;\n const geometry = this.geometry;\n\n program.use();\n geometry.bind(program);\n\n gl.drawElements(gl.TRIANGLES, geometry.indexCount, gl.UNSIGNED_SHORT, 0);\n\n geometry.unbind();\n }\n}\n",[124,31633,31634,31656,31678,31698,31702,31716,31726,31736,31740,31786,31794,31808,31822,31826,31830,31846,31862,31878,31882,31894,31910,31914,31954,31958,31970,31974],{"__ignoreMap":135},[65,31635,31636,31638,31640,31642,31644,31646,31648,31650,31652,31654],{"class":140,"line":141},[65,31637,3251],{"class":154},[65,31639,323],{"class":154},[65,31641,287],{"class":154},[65,31643,5645],{"class":214},[65,31645,293],{"class":154},[65,31647,296],{"class":154},[65,31649,299],{"class":154},[65,31651,21951],{"class":302},[65,31653,306],{"class":154},[65,31655,155],{"class":154},[65,31657,31658,31660,31662,31664,31666,31668,31670,31672,31674,31676],{"class":140,"line":158},[65,31659,3251],{"class":154},[65,31661,323],{"class":154},[65,31663,287],{"class":154},[65,31665,3081],{"class":214},[65,31667,293],{"class":154},[65,31669,296],{"class":154},[65,31671,299],{"class":154},[65,31673,21974],{"class":302},[65,31675,306],{"class":154},[65,31677,155],{"class":154},[65,31679,31680,31682,31684,31686,31688,31690,31692,31694,31696],{"class":140,"line":165},[65,31681,3251],{"class":154},[65,31683,287],{"class":154},[65,31685,3326],{"class":214},[65,31687,293],{"class":154},[65,31689,296],{"class":154},[65,31691,299],{"class":154},[65,31693,21845],{"class":302},[65,31695,306],{"class":154},[65,31697,155],{"class":154},[65,31699,31700],{"class":140,"line":180},[65,31701,162],{"emptyLinePlaceholder":161},[65,31703,31704,31706,31708,31710,31712,31714],{"class":140,"line":194},[65,31705,284],{"class":154},[65,31707,774],{"class":168},[65,31709,3302],{"class":326},[65,31711,5810],{"class":168},[65,31713,3326],{"class":302},[65,31715,418],{"class":154},[65,31717,31718,31720,31722,31724],{"class":140,"line":211},[65,31719,22101],{"class":144},[65,31721,797],{"class":168},[65,31723,5645],{"class":326},[65,31725,155],{"class":154},[65,31727,31728,31730,31732,31734],{"class":140,"line":240},[65,31729,22112],{"class":144},[65,31731,797],{"class":168},[65,31733,3081],{"class":326},[65,31735,155],{"class":154},[65,31737,31738],{"class":140,"line":391},[65,31739,162],{"emptyLinePlaceholder":161},[65,31741,31742,31744,31746,31748,31750,31752,31754,31756,31758,31760,31762,31764,31766,31768,31770,31772,31774,31776,31778,31780,31782,31784],{"class":140,"line":401},[65,31743,788],{"class":168},[65,31745,224],{"class":154},[65,31747,794],{"class":793},[65,31749,797],{"class":168},[65,31751,800],{"class":326},[65,31753,230],{"class":154},[65,31755,287],{"class":154},[65,31757,3903],{"class":793},[65,31759,230],{"class":154},[65,31761,3797],{"class":793},[65,31763,293],{"class":154},[65,31765,797],{"class":168},[65,31767,287],{"class":154},[65,31769,3903],{"class":144},[65,31771,797],{"class":168},[65,31773,5645],{"class":326},[65,31775,6005],{"class":154},[65,31777,3797],{"class":144},[65,31779,797],{"class":168},[65,31781,3081],{"class":326},[65,31783,19595],{"class":154},[65,31785,418],{"class":154},[65,31787,31788,31790,31792],{"class":140,"line":406},[65,31789,6510],{"class":830},[65,31791,1269],{"class":204},[65,31793,155],{"class":154},[65,31795,31796,31798,31800,31802,31804,31806],{"class":140,"line":421},[65,31797,831],{"class":830},[65,31799,834],{"class":154},[65,31801,9136],{"class":214},[65,31803,218],{"class":168},[65,31805,3903],{"class":214},[65,31807,155],{"class":154},[65,31809,31810,31812,31814,31816,31818,31820],{"class":140,"line":435},[65,31811,831],{"class":830},[65,31813,834],{"class":154},[65,31815,22228],{"class":214},[65,31817,218],{"class":168},[65,31819,3797],{"class":214},[65,31821,155],{"class":154},[65,31823,31824],{"class":140,"line":447},[65,31825,1171],{"class":154},[65,31827,31828],{"class":140,"line":459},[65,31829,162],{"emptyLinePlaceholder":161},[65,31831,31832,31834,31836,31838,31840,31842,31844],{"class":140,"line":471},[65,31833,19575],{"class":200},[65,31835,224],{"class":154},[65,31837,794],{"class":793},[65,31839,797],{"class":168},[65,31841,800],{"class":326},[65,31843,235],{"class":154},[65,31845,418],{"class":154},[65,31847,31848,31850,31852,31854,31856,31858,31860],{"class":140,"line":63},[65,31849,848],{"class":168},[65,31851,3797],{"class":214},[65,31853,218],{"class":168},[65,31855,1434],{"class":830},[65,31857,834],{"class":154},[65,31859,22228],{"class":214},[65,31861,155],{"class":154},[65,31863,31864,31866,31868,31870,31872,31874,31876],{"class":140,"line":495},[65,31865,848],{"class":168},[65,31867,3903],{"class":214},[65,31869,218],{"class":168},[65,31871,1434],{"class":830},[65,31873,834],{"class":154},[65,31875,9136],{"class":214},[65,31877,155],{"class":154},[65,31879,31880],{"class":140,"line":507},[65,31881,162],{"emptyLinePlaceholder":161},[65,31883,31884,31886,31888,31890,31892],{"class":140,"line":519},[65,31885,22679],{"class":214},[65,31887,834],{"class":154},[65,31889,22684],{"class":200},[65,31891,1269],{"class":204},[65,31893,155],{"class":154},[65,31895,31896,31898,31900,31902,31904,31906,31908],{"class":140,"line":531},[65,31897,22693],{"class":214},[65,31899,834],{"class":154},[65,31901,2226],{"class":200},[65,31903,224],{"class":204},[65,31905,22228],{"class":214},[65,31907,235],{"class":204},[65,31909,155],{"class":154},[65,31911,31912],{"class":140,"line":543},[65,31913,162],{"emptyLinePlaceholder":161},[65,31915,31916,31918,31920,31922,31924,31926,31928,31930,31932,31934,31936,31938,31940,31942,31944,31946,31948,31950,31952],{"class":140,"line":555},[65,31917,1295],{"class":214},[65,31919,834],{"class":154},[65,31921,19534],{"class":200},[65,31923,224],{"class":204},[65,31925,794],{"class":214},[65,31927,834],{"class":154},[65,31929,19638],{"class":214},[65,31931,230],{"class":154},[65,31933,3903],{"class":214},[65,31935,834],{"class":154},[65,31937,19670],{"class":214},[65,31939,230],{"class":154},[65,31941,841],{"class":214},[65,31943,834],{"class":154},[65,31945,19679],{"class":214},[65,31947,230],{"class":154},[65,31949,1142],{"class":793},[65,31951,235],{"class":204},[65,31953,155],{"class":154},[65,31955,31956],{"class":140,"line":567},[65,31957,162],{"emptyLinePlaceholder":161},[65,31959,31960,31962,31964,31966,31968],{"class":140,"line":3757},[65,31961,22693],{"class":214},[65,31963,834],{"class":154},[65,31965,22754],{"class":200},[65,31967,1269],{"class":204},[65,31969,155],{"class":154},[65,31971,31972],{"class":140,"line":3787},[65,31973,1171],{"class":154},[65,31975,31976],{"class":140,"line":3792},[65,31977,243],{"class":154},[15,31979,31980,31982,31983,31985,31986,31982,31988,31990,31991,31993],{},[124,31981,19542],{},"クラスは",[124,31984,21822],{},"クラスを継承しています。これにより、",[124,31987,19542],{},[124,31989,21822],{},"クラスの機能を継承し、さらに",[124,31992,19545],{},"メソッドを追加することができます。",[15,31995,31996,3062,31998,32000,32001,3062,32003,32005],{},[124,31997,3061],{},[124,31999,22684],{},"メソッドと、",[124,32002,28757],{},[124,32004,2226],{},"メソッドに付いてはまだ、説明していなかったのでこれらを見ていきましょう。",[1177,32007,32008],{"id":32008},"シェーダーの使用とユニフォーム変数の設定",[15,32010,32011,3062,32013,32015],{},[124,32012,3061],{},[124,32014,22684],{},"メソッドでは、シェーダーの使用とユニフォーム変数の設定を行います。",[129,32017,32019],{"className":131,"code":32018,"filename":3061,"language":134,"meta":135,"style":135},"export class Program {\n // ...\n use() {\n this.gl.useProgram(this.program);\n this.setUniforms();\n }\n}\n",[124,32020,32021,32031,32035,32044,32069,32081,32085],{"__ignoreMap":135},[65,32022,32023,32025,32027,32029],{"class":140,"line":141},[65,32024,284],{"class":154},[65,32026,774],{"class":168},[65,32028,3081],{"class":326},[65,32030,418],{"class":154},[65,32032,32033],{"class":140,"line":158},[65,32034,783],{"class":278},[65,32036,32037,32040,32042],{"class":140,"line":165},[65,32038,32039],{"class":200}," use",[65,32041,1269],{"class":154},[65,32043,418],{"class":154},[65,32045,32046,32048,32050,32052,32054,32057,32059,32061,32063,32065,32067],{"class":140,"line":180},[65,32047,831],{"class":830},[65,32049,834],{"class":154},[65,32051,794],{"class":214},[65,32053,834],{"class":154},[65,32055,32056],{"class":200},"useProgram",[65,32058,224],{"class":204},[65,32060,2004],{"class":830},[65,32062,834],{"class":154},[65,32064,22228],{"class":214},[65,32066,235],{"class":204},[65,32068,155],{"class":154},[65,32070,32071,32073,32075,32077,32079],{"class":140,"line":194},[65,32072,831],{"class":830},[65,32074,834],{"class":154},[65,32076,3065],{"class":200},[65,32078,1269],{"class":204},[65,32080,155],{"class":154},[65,32082,32083],{"class":140,"line":211},[65,32084,1171],{"class":154},[65,32086,32087],{"class":140,"line":240},[65,32088,243],{"class":154},[15,32090,32091,32092,31210],{},"ユニフォーム変数の設定をする",[124,32093,3065],{},[129,32095,32097],{"className":131,"code":32096,"filename":3061,"language":134,"meta":135,"style":135},"export class Program {\n // ...\n setUniforms() {\n const gl = this.gl;\n\n for (const name in this.uniforms) {\n const value = this.uniforms[name].value;\n const loc = gl.getUniformLocation(this.program, name);\n if (loc === null) continue;\n\n this.setUniform(gl, loc, value);\n }\n }\n}\n",[124,32098,32099,32109,32113,32121,32137,32141,32163,32189,32221,32238,32242,32266,32270,32274],{"__ignoreMap":135},[65,32100,32101,32103,32105,32107],{"class":140,"line":141},[65,32102,284],{"class":154},[65,32104,774],{"class":168},[65,32106,3081],{"class":326},[65,32108,418],{"class":154},[65,32110,32111],{"class":140,"line":158},[65,32112,783],{"class":278},[65,32114,32115,32117,32119],{"class":140,"line":165},[65,32116,3092],{"class":200},[65,32118,1269],{"class":154},[65,32120,418],{"class":154},[65,32122,32123,32125,32127,32129,32131,32133,32135],{"class":140,"line":180},[65,32124,848],{"class":168},[65,32126,841],{"class":214},[65,32128,218],{"class":168},[65,32130,1434],{"class":830},[65,32132,834],{"class":154},[65,32134,794],{"class":214},[65,32136,155],{"class":154},[65,32138,32139],{"class":140,"line":194},[65,32140,162],{"emptyLinePlaceholder":161},[65,32142,32143,32145,32147,32149,32151,32153,32155,32157,32159,32161],{"class":140,"line":211},[65,32144,5990],{"class":154},[65,32146,1696],{"class":204},[65,32148,1769],{"class":168},[65,32150,29166],{"class":214},[65,32152,29169],{"class":168},[65,32154,1434],{"class":830},[65,32156,834],{"class":154},[65,32158,22367],{"class":214},[65,32160,1713],{"class":204},[65,32162,208],{"class":154},[65,32164,32165,32167,32169,32171,32173,32175,32177,32179,32181,32183,32185,32187],{"class":140,"line":240},[65,32166,6028],{"class":168},[65,32168,3851],{"class":214},[65,32170,218],{"class":168},[65,32172,1434],{"class":830},[65,32174,834],{"class":154},[65,32176,22367],{"class":214},[65,32178,6243],{"class":204},[65,32180,29191],{"class":214},[65,32182,6106],{"class":204},[65,32184,834],{"class":154},[65,32186,3114],{"class":214},[65,32188,155],{"class":154},[65,32190,32191,32193,32196,32198,32200,32202,32205,32207,32209,32211,32213,32215,32217,32219],{"class":140,"line":391},[65,32192,6028],{"class":168},[65,32194,32195],{"class":214}," loc",[65,32197,218],{"class":168},[65,32199,841],{"class":214},[65,32201,834],{"class":154},[65,32203,32204],{"class":200},"getUniformLocation",[65,32206,224],{"class":204},[65,32208,2004],{"class":830},[65,32210,834],{"class":154},[65,32212,22228],{"class":214},[65,32214,230],{"class":154},[65,32216,29166],{"class":214},[65,32218,235],{"class":204},[65,32220,155],{"class":154},[65,32222,32223,32225,32227,32230,32232,32234,32236],{"class":140,"line":401},[65,32224,17840],{"class":154},[65,32226,1696],{"class":204},[65,32228,32229],{"class":214},"loc",[65,32231,1704],{"class":168},[65,32233,20550],{"class":793},[65,32235,1713],{"class":204},[65,32237,17862],{"class":154},[65,32239,32240],{"class":140,"line":406},[65,32241,162],{"emptyLinePlaceholder":161},[65,32243,32244,32246,32248,32250,32252,32254,32256,32258,32260,32262,32264],{"class":140,"line":421},[65,32245,20954],{"class":830},[65,32247,834],{"class":154},[65,32249,3173],{"class":200},[65,32251,224],{"class":204},[65,32253,794],{"class":214},[65,32255,230],{"class":154},[65,32257,32195],{"class":214},[65,32259,230],{"class":154},[65,32261,3851],{"class":214},[65,32263,235],{"class":204},[65,32265,155],{"class":154},[65,32267,32268],{"class":140,"line":435},[65,32269,3204],{"class":154},[65,32271,32272],{"class":140,"line":447},[65,32273,1171],{"class":154},[65,32275,32276],{"class":140,"line":459},[65,32277,243],{"class":154},[15,32279,32280,32282,32283,31198,32285,32287],{},[124,32281,3065],{},"メソッドでは、設定したuniformの参照(ロケーション)と値を",[124,32284,3173],{},[124,32286,32204],{},"メソッドは、現在のプログラムオブジェクト(this.program)とユニフォームの名前を受け取り、対応するユニフォームの参照を返します。",[15,32289,32290,32292],{},[124,32291,3173],{},"メソッドは、ユニフォームの値を設定するためのメソッドです。値の型に応じて、適切な関数を呼び出します。",[129,32294,32296],{"className":131,"code":32295,"filename":3061,"language":134,"meta":135,"style":135},"export class Program {\n // ...\n setUniform(gl: WebGL2RenderingContext, loc: WebGLUniformLocation, value: number | number[] | Float32Array) {\n if (typeof value === 'number') {\n if (Number.isInteger(value)) {\n gl.uniform1i(loc, value);\n } else {\n gl.uniform1f(loc, value);\n }\n } else if (Array.isArray(value)) {\n switch (value.length) {\n case 1:\n gl.uniform1f(loc, value[0]);\n break;\n case 2:\n gl.uniform2f(loc, value[0], value[1]);\n break;\n case 3:\n gl.uniform3f(loc, value[0], value[1], value[2]);\n break;\n case 4:\n gl.uniform4f(loc, value[0], value[1], value[2], value[3]);\n break;\n case 9:\n gl.uniformMatrix3fv(loc, false, value);\n break;\n case 16:\n gl.uniformMatrix4fv(loc, false, value);\n break;\n }\n }\n }\n}\n",[124,32297,32298,32308,32312,32357,32379,32401,32422,32430,32451,32455,32482,32498,32508,32533,32538,32546,32581,32585,32593,32638,32642,32650,32705,32709,32718,32743,32747,32756,32781,32785,32789,32793,32797],{"__ignoreMap":135},[65,32299,32300,32302,32304,32306],{"class":140,"line":141},[65,32301,284],{"class":154},[65,32303,774],{"class":168},[65,32305,3081],{"class":326},[65,32307,418],{"class":154},[65,32309,32310],{"class":140,"line":158},[65,32311,783],{"class":278},[65,32313,32314,32317,32319,32321,32323,32325,32327,32329,32331,32334,32336,32338,32340,32342,32344,32346,32348,32351,32353,32355],{"class":140,"line":165},[65,32315,32316],{"class":200}," setUniform",[65,32318,224],{"class":154},[65,32320,794],{"class":793},[65,32322,797],{"class":168},[65,32324,800],{"class":326},[65,32326,230],{"class":154},[65,32328,32195],{"class":793},[65,32330,797],{"class":168},[65,32332,32333],{"class":326}," WebGLUniformLocation",[65,32335,230],{"class":154},[65,32337,3851],{"class":793},[65,32339,797],{"class":168},[65,32341,430],{"class":340},[65,32343,11880],{"class":168},[65,32345,430],{"class":340},[65,32347,19326],{"class":204},[65,32349,32350],{"class":168},"|",[65,32352,5951],{"class":326},[65,32354,235],{"class":154},[65,32356,418],{"class":154},[65,32358,32359,32361,32363,32365,32367,32369,32371,32373,32375,32377],{"class":140,"line":180},[65,32360,3105],{"class":154},[65,32362,1696],{"class":204},[65,32364,1699],{"class":168},[65,32366,3851],{"class":214},[65,32368,1704],{"class":168},[65,32370,299],{"class":154},[65,32372,15078],{"class":302},[65,32374,306],{"class":154},[65,32376,1713],{"class":204},[65,32378,208],{"class":154},[65,32380,32381,32383,32385,32388,32390,32393,32395,32397,32399],{"class":140,"line":194},[65,32382,17840],{"class":154},[65,32384,1696],{"class":204},[65,32386,32387],{"class":214},"Number",[65,32389,834],{"class":154},[65,32391,32392],{"class":200},"isInteger",[65,32394,224],{"class":204},[65,32396,3114],{"class":214},[65,32398,30641],{"class":204},[65,32400,208],{"class":154},[65,32402,32403,32405,32407,32410,32412,32414,32416,32418,32420],{"class":140,"line":211},[65,32404,29267],{"class":214},[65,32406,834],{"class":154},[65,32408,32409],{"class":200},"uniform1i",[65,32411,224],{"class":204},[65,32413,32229],{"class":214},[65,32415,230],{"class":154},[65,32417,3851],{"class":214},[65,32419,235],{"class":204},[65,32421,155],{"class":154},[65,32423,32424,32426,32428],{"class":140,"line":240},[65,32425,20901],{"class":154},[65,32427,2115],{"class":154},[65,32429,418],{"class":154},[65,32431,32432,32434,32436,32439,32441,32443,32445,32447,32449],{"class":140,"line":391},[65,32433,29267],{"class":214},[65,32435,834],{"class":154},[65,32437,32438],{"class":200},"uniform1f",[65,32440,224],{"class":204},[65,32442,32229],{"class":214},[65,32444,230],{"class":154},[65,32446,3851],{"class":214},[65,32448,235],{"class":204},[65,32450,155],{"class":154},[65,32452,32453],{"class":140,"line":401},[65,32454,6413],{"class":154},[65,32456,32457,32459,32461,32464,32466,32469,32471,32474,32476,32478,32480],{"class":140,"line":406},[65,32458,6341],{"class":154},[65,32460,2115],{"class":154},[65,32462,32463],{"class":154}," if",[65,32465,1696],{"class":204},[65,32467,32468],{"class":214},"Array",[65,32470,834],{"class":154},[65,32472,32473],{"class":200},"isArray",[65,32475,224],{"class":204},[65,32477,3114],{"class":214},[65,32479,30641],{"class":204},[65,32481,208],{"class":154},[65,32483,32484,32487,32489,32491,32493,32496],{"class":140,"line":421},[65,32485,32486],{"class":154}," switch",[65,32488,1696],{"class":204},[65,32490,3114],{"class":214},[65,32492,834],{"class":154},[65,32494,32495],{"class":204},"length) ",[65,32497,208],{"class":154},[65,32499,32500,32503,32505],{"class":140,"line":435},[65,32501,32502],{"class":154}," case",[65,32504,3137],{"class":793},[65,32506,32507],{"class":154},":\n",[65,32509,32510,32513,32515,32517,32519,32521,32523,32525,32527,32529,32531],{"class":140,"line":447},[65,32511,32512],{"class":214}," gl",[65,32514,834],{"class":154},[65,32516,32438],{"class":200},[65,32518,224],{"class":204},[65,32520,32229],{"class":214},[65,32522,230],{"class":154},[65,32524,3851],{"class":214},[65,32526,6243],{"class":204},[65,32528,743],{"class":793},[65,32530,3658],{"class":204},[65,32532,155],{"class":154},[65,32534,32535],{"class":140,"line":459},[65,32536,32537],{"class":154}," break;\n",[65,32539,32540,32542,32544],{"class":140,"line":471},[65,32541,32502],{"class":154},[65,32543,3748],{"class":793},[65,32545,32507],{"class":154},[65,32547,32548,32550,32552,32555,32557,32559,32561,32563,32565,32567,32569,32571,32573,32575,32577,32579],{"class":140,"line":63},[65,32549,32512],{"class":214},[65,32551,834],{"class":154},[65,32553,32554],{"class":200},"uniform2f",[65,32556,224],{"class":204},[65,32558,32229],{"class":214},[65,32560,230],{"class":154},[65,32562,3851],{"class":214},[65,32564,6243],{"class":204},[65,32566,743],{"class":793},[65,32568,6106],{"class":204},[65,32570,230],{"class":154},[65,32572,3851],{"class":214},[65,32574,6243],{"class":204},[65,32576,3620],{"class":793},[65,32578,3658],{"class":204},[65,32580,155],{"class":154},[65,32582,32583],{"class":140,"line":495},[65,32584,32537],{"class":154},[65,32586,32587,32589,32591],{"class":140,"line":507},[65,32588,32502],{"class":154},[65,32590,3739],{"class":793},[65,32592,32507],{"class":154},[65,32594,32595,32597,32599,32602,32604,32606,32608,32610,32612,32614,32616,32618,32620,32622,32624,32626,32628,32630,32632,32634,32636],{"class":140,"line":519},[65,32596,32512],{"class":214},[65,32598,834],{"class":154},[65,32600,32601],{"class":200},"uniform3f",[65,32603,224],{"class":204},[65,32605,32229],{"class":214},[65,32607,230],{"class":154},[65,32609,3851],{"class":214},[65,32611,6243],{"class":204},[65,32613,743],{"class":793},[65,32615,6106],{"class":204},[65,32617,230],{"class":154},[65,32619,3851],{"class":214},[65,32621,6243],{"class":204},[65,32623,3620],{"class":793},[65,32625,6106],{"class":204},[65,32627,230],{"class":154},[65,32629,3851],{"class":214},[65,32631,6243],{"class":204},[65,32633,3939],{"class":793},[65,32635,3658],{"class":204},[65,32637,155],{"class":154},[65,32639,32640],{"class":140,"line":531},[65,32641,32537],{"class":154},[65,32643,32644,32646,32648],{"class":140,"line":543},[65,32645,32502],{"class":154},[65,32647,3629],{"class":793},[65,32649,32507],{"class":154},[65,32651,32652,32654,32656,32659,32661,32663,32665,32667,32669,32671,32673,32675,32677,32679,32681,32683,32685,32687,32689,32691,32693,32695,32697,32699,32701,32703],{"class":140,"line":555},[65,32653,32512],{"class":214},[65,32655,834],{"class":154},[65,32657,32658],{"class":200},"uniform4f",[65,32660,224],{"class":204},[65,32662,32229],{"class":214},[65,32664,230],{"class":154},[65,32666,3851],{"class":214},[65,32668,6243],{"class":204},[65,32670,743],{"class":793},[65,32672,6106],{"class":204},[65,32674,230],{"class":154},[65,32676,3851],{"class":214},[65,32678,6243],{"class":204},[65,32680,3620],{"class":793},[65,32682,6106],{"class":204},[65,32684,230],{"class":154},[65,32686,3851],{"class":214},[65,32688,6243],{"class":204},[65,32690,3939],{"class":793},[65,32692,6106],{"class":204},[65,32694,230],{"class":154},[65,32696,3851],{"class":214},[65,32698,6243],{"class":204},[65,32700,10249],{"class":793},[65,32702,3658],{"class":204},[65,32704,155],{"class":154},[65,32706,32707],{"class":140,"line":567},[65,32708,32537],{"class":154},[65,32710,32711,32713,32716],{"class":140,"line":3757},[65,32712,32502],{"class":154},[65,32714,32715],{"class":793}," 9",[65,32717,32507],{"class":154},[65,32719,32720,32722,32724,32727,32729,32731,32733,32735,32737,32739,32741],{"class":140,"line":3787},[65,32721,32512],{"class":214},[65,32723,834],{"class":154},[65,32725,32726],{"class":200},"uniformMatrix3fv",[65,32728,224],{"class":204},[65,32730,32229],{"class":214},[65,32732,230],{"class":154},[65,32734,1039],{"class":793},[65,32736,230],{"class":154},[65,32738,3851],{"class":214},[65,32740,235],{"class":204},[65,32742,155],{"class":154},[65,32744,32745],{"class":140,"line":3792},[65,32746,32537],{"class":154},[65,32748,32749,32751,32754],{"class":140,"line":3814},[65,32750,32502],{"class":154},[65,32752,32753],{"class":793}," 16",[65,32755,32507],{"class":154},[65,32757,32758,32760,32762,32765,32767,32769,32771,32773,32775,32777,32779],{"class":140,"line":3823},[65,32759,32512],{"class":214},[65,32761,834],{"class":154},[65,32763,32764],{"class":200},"uniformMatrix4fv",[65,32766,224],{"class":204},[65,32768,32229],{"class":214},[65,32770,230],{"class":154},[65,32772,1039],{"class":793},[65,32774,230],{"class":154},[65,32776,3851],{"class":214},[65,32778,235],{"class":204},[65,32780,155],{"class":154},[65,32782,32783],{"class":140,"line":3831},[65,32784,32537],{"class":154},[65,32786,32787],{"class":140,"line":3841},[65,32788,6413],{"class":154},[65,32790,32791],{"class":140,"line":3861},[65,32792,3204],{"class":154},[65,32794,32795],{"class":140,"line":3867},[65,32796,1171],{"class":154},[65,32798,32799],{"class":140,"line":3876},[65,32800,243],{"class":154},[15,32802,32803],{},"このメソッドは例えば、次のようなuniformsの場合はそれぞれ適切な関数を呼ぶことになります。",[129,32805,32808],{"className":131,"code":32806,"filename":32807,"language":134,"meta":135,"style":135},"uniforms: {\n uResolution: { value: [canvas.width, canvas.height ]}, // gl.uniform2f\n uIntValue: { value: 1 }, // gl.uniform1i\n uFloatValue: { value: 0.5 }, // gl.uniform1f\n}\n","uniformsの例",[124,32809,32810,32818,32855,32876,32896],{"__ignoreMap":135},[65,32811,32812,32814,32816],{"class":140,"line":141},[65,32813,22367],{"class":326},[65,32815,797],{"class":154},[65,32817,418],{"class":154},[65,32819,32820,32823,32825,32827,32829,32831,32833,32835,32837,32839,32841,32843,32845,32847,32849,32852],{"class":140,"line":158},[65,32821,32822],{"class":326}," uResolution",[65,32824,797],{"class":154},[65,32826,287],{"class":154},[65,32828,3851],{"class":326},[65,32830,797],{"class":154},[65,32832,30228],{"class":204},[65,32834,3454],{"class":214},[65,32836,834],{"class":154},[65,32838,735],{"class":214},[65,32840,230],{"class":154},[65,32842,3408],{"class":214},[65,32844,834],{"class":154},[65,32846,748],{"class":214},[65,32848,30245],{"class":204},[65,32850,32851],{"class":154},"},",[65,32853,32854],{"class":278}," // gl.uniform2f\n",[65,32856,32857,32860,32862,32864,32866,32868,32870,32873],{"class":140,"line":165},[65,32858,32859],{"class":326}," uIntValue",[65,32861,797],{"class":154},[65,32863,287],{"class":154},[65,32865,3851],{"class":326},[65,32867,797],{"class":154},[65,32869,3137],{"class":793},[65,32871,32872],{"class":154}," },",[65,32874,32875],{"class":278}," // gl.uniform1i\n",[65,32877,32878,32881,32883,32885,32887,32889,32891,32893],{"class":140,"line":180},[65,32879,32880],{"class":326}," uFloatValue",[65,32882,797],{"class":154},[65,32884,287],{"class":154},[65,32886,3851],{"class":326},[65,32888,797],{"class":154},[65,32890,5559],{"class":793},[65,32892,32872],{"class":154},[65,32894,32895],{"class":278}," // gl.uniform1f\n",[65,32897,32898],{"class":140,"line":194},[65,32899,243],{"class":154},[1177,32901,32902],{"id":32902},"バッファの有効化",[15,32904,32905,32906,3062,32908,32910],{},"残りの",[124,32907,28757],{},[124,32909,2226],{},"メソッドは、バッファを有効化するためのメソッドになります。",[129,32912,32914],{"className":131,"code":32913,"filename":28757,"language":134,"meta":135,"style":135},"import type { Program } from './Program';\n\nexport class Geometry {\n // ...\n bind(program: Program) {\n const gl = this.gl;\n gl.bindVertexArray(this.vao);\n\n for (const name in this.attributes) {\n if (name === 'index') continue;\n const attr = this.attributes[name];\n const loc = attr.location ?? gl.getAttribLocation(program.program, name);\n if (loc === -1) continue;\n\n const buf = this.vbos[name];\n gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n gl.enableVertexAttribArray(loc);\n gl.vertexAttribPointer(loc, attr.size, attr.type ?? gl.FLOAT, !!attr.normalized, 0, 0);\n }\n\n if (this.ibo) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo);\n }\n}\n",[124,32915,32916,32938,32942,32952,32956,32973,32989,33009,33013,33035,33055,33077,33117,33135,33139,33161,33185,33202,33265,33269,33273,33313,33317],{"__ignoreMap":135},[65,32917,32918,32920,32922,32924,32926,32928,32930,32932,32934,32936],{"class":140,"line":141},[65,32919,3251],{"class":154},[65,32921,323],{"class":154},[65,32923,287],{"class":154},[65,32925,3081],{"class":214},[65,32927,293],{"class":154},[65,32929,296],{"class":154},[65,32931,299],{"class":154},[65,32933,21974],{"class":302},[65,32935,306],{"class":154},[65,32937,155],{"class":154},[65,32939,32940],{"class":140,"line":158},[65,32941,162],{"emptyLinePlaceholder":161},[65,32943,32944,32946,32948,32950],{"class":140,"line":165},[65,32945,284],{"class":154},[65,32947,774],{"class":168},[65,32949,5645],{"class":326},[65,32951,418],{"class":154},[65,32953,32954],{"class":140,"line":180},[65,32955,783],{"class":278},[65,32957,32958,32961,32963,32965,32967,32969,32971],{"class":140,"line":194},[65,32959,32960],{"class":200}," bind",[65,32962,224],{"class":154},[65,32964,22228],{"class":793},[65,32966,797],{"class":168},[65,32968,3081],{"class":326},[65,32970,235],{"class":154},[65,32972,418],{"class":154},[65,32974,32975,32977,32979,32981,32983,32985,32987],{"class":140,"line":211},[65,32976,848],{"class":168},[65,32978,841],{"class":214},[65,32980,218],{"class":168},[65,32982,1434],{"class":830},[65,32984,834],{"class":154},[65,32986,794],{"class":214},[65,32988,155],{"class":154},[65,32990,32991,32993,32995,32997,32999,33001,33003,33005,33007],{"class":140,"line":240},[65,32992,1295],{"class":214},[65,32994,834],{"class":154},[65,32996,29139],{"class":200},[65,32998,224],{"class":204},[65,33000,2004],{"class":830},[65,33002,834],{"class":154},[65,33004,29117],{"class":214},[65,33006,235],{"class":204},[65,33008,155],{"class":154},[65,33010,33011],{"class":140,"line":391},[65,33012,162],{"emptyLinePlaceholder":161},[65,33014,33015,33017,33019,33021,33023,33025,33027,33029,33031,33033],{"class":140,"line":401},[65,33016,5990],{"class":154},[65,33018,1696],{"class":204},[65,33020,1769],{"class":168},[65,33022,29166],{"class":214},[65,33024,29169],{"class":168},[65,33026,1434],{"class":830},[65,33028,834],{"class":154},[65,33030,9141],{"class":214},[65,33032,1713],{"class":204},[65,33034,208],{"class":154},[65,33036,33037,33039,33041,33043,33045,33047,33049,33051,33053],{"class":140,"line":406},[65,33038,17840],{"class":154},[65,33040,1696],{"class":204},[65,33042,29191],{"class":214},[65,33044,1704],{"class":168},[65,33046,299],{"class":154},[65,33048,11865],{"class":302},[65,33050,306],{"class":154},[65,33052,1713],{"class":204},[65,33054,17862],{"class":154},[65,33056,33057,33059,33061,33063,33065,33067,33069,33071,33073,33075],{"class":140,"line":421},[65,33058,6028],{"class":168},[65,33060,29182],{"class":214},[65,33062,218],{"class":168},[65,33064,1434],{"class":830},[65,33066,834],{"class":154},[65,33068,9141],{"class":214},[65,33070,6243],{"class":204},[65,33072,29191],{"class":214},[65,33074,6106],{"class":204},[65,33076,155],{"class":154},[65,33078,33079,33081,33083,33085,33087,33089,33092,33094,33096,33098,33101,33103,33105,33107,33109,33111,33113,33115],{"class":140,"line":435},[65,33080,6028],{"class":168},[65,33082,32195],{"class":214},[65,33084,218],{"class":168},[65,33086,29182],{"class":214},[65,33088,834],{"class":154},[65,33090,33091],{"class":214},"location",[65,33093,881],{"class":168},[65,33095,841],{"class":214},[65,33097,834],{"class":154},[65,33099,33100],{"class":200},"getAttribLocation",[65,33102,224],{"class":204},[65,33104,22228],{"class":214},[65,33106,834],{"class":154},[65,33108,22228],{"class":214},[65,33110,230],{"class":154},[65,33112,29166],{"class":214},[65,33114,235],{"class":204},[65,33116,155],{"class":154},[65,33118,33119,33121,33123,33125,33127,33129,33131,33133],{"class":140,"line":447},[65,33120,17840],{"class":154},[65,33122,1696],{"class":204},[65,33124,32229],{"class":214},[65,33126,1704],{"class":168},[65,33128,4399],{"class":168},[65,33130,3620],{"class":793},[65,33132,1713],{"class":204},[65,33134,17862],{"class":154},[65,33136,33137],{"class":140,"line":459},[65,33138,162],{"emptyLinePlaceholder":161},[65,33140,33141,33143,33145,33147,33149,33151,33153,33155,33157,33159],{"class":140,"line":471},[65,33142,6028],{"class":168},[65,33144,29374],{"class":214},[65,33146,218],{"class":168},[65,33148,1434],{"class":830},[65,33150,834],{"class":154},[65,33152,29395],{"class":214},[65,33154,6243],{"class":204},[65,33156,29191],{"class":214},[65,33158,6106],{"class":204},[65,33160,155],{"class":154},[65,33162,33163,33165,33167,33169,33171,33173,33175,33177,33179,33181,33183],{"class":140,"line":63},[65,33164,30672],{"class":214},[65,33166,834],{"class":154},[65,33168,29272],{"class":200},[65,33170,224],{"class":204},[65,33172,794],{"class":214},[65,33174,834],{"class":154},[65,33176,29424],{"class":214},[65,33178,230],{"class":154},[65,33180,29374],{"class":214},[65,33182,235],{"class":204},[65,33184,155],{"class":154},[65,33186,33187,33189,33191,33194,33196,33198,33200],{"class":140,"line":495},[65,33188,30672],{"class":214},[65,33190,834],{"class":154},[65,33192,33193],{"class":200},"enableVertexAttribArray",[65,33195,224],{"class":204},[65,33197,32229],{"class":214},[65,33199,235],{"class":204},[65,33201,155],{"class":154},[65,33203,33204,33206,33208,33211,33213,33215,33217,33219,33221,33223,33225,33227,33229,33231,33233,33235,33237,33240,33242,33245,33248,33250,33253,33255,33257,33259,33261,33263],{"class":140,"line":507},[65,33205,30672],{"class":214},[65,33207,834],{"class":154},[65,33209,33210],{"class":200},"vertexAttribPointer",[65,33212,224],{"class":204},[65,33214,32229],{"class":214},[65,33216,230],{"class":154},[65,33218,29182],{"class":214},[65,33220,834],{"class":154},[65,33222,7526],{"class":214},[65,33224,230],{"class":154},[65,33226,29182],{"class":214},[65,33228,834],{"class":154},[65,33230,722],{"class":214},[65,33232,881],{"class":168},[65,33234,841],{"class":214},[65,33236,834],{"class":154},[65,33238,33239],{"class":214},"FLOAT",[65,33241,230],{"class":154},[65,33243,33244],{"class":168}," !!",[65,33246,33247],{"class":214},"attr",[65,33249,834],{"class":154},[65,33251,33252],{"class":214},"normalized",[65,33254,230],{"class":154},[65,33256,1142],{"class":793},[65,33258,230],{"class":154},[65,33260,1142],{"class":793},[65,33262,235],{"class":204},[65,33264,155],{"class":154},[65,33266,33267],{"class":140,"line":519},[65,33268,3204],{"class":154},[65,33270,33271],{"class":140,"line":531},[65,33272,162],{"emptyLinePlaceholder":161},[65,33274,33275,33277,33279,33281,33283,33285,33287,33289,33291,33293,33295,33297,33299,33301,33303,33305,33307,33309,33311],{"class":140,"line":543},[65,33276,3105],{"class":154},[65,33278,1696],{"class":204},[65,33280,2004],{"class":830},[65,33282,834],{"class":154},[65,33284,29249],{"class":214},[65,33286,1713],{"class":204},[65,33288,794],{"class":214},[65,33290,834],{"class":154},[65,33292,29272],{"class":200},[65,33294,224],{"class":204},[65,33296,794],{"class":214},[65,33298,834],{"class":154},[65,33300,29281],{"class":214},[65,33302,230],{"class":154},[65,33304,1434],{"class":830},[65,33306,834],{"class":154},[65,33308,29249],{"class":214},[65,33310,235],{"class":204},[65,33312,155],{"class":154},[65,33314,33315],{"class":140,"line":555},[65,33316,1171],{"class":154},[65,33318,33319],{"class":140,"line":567},[65,33320,243],{"class":154},[15,33322,33323,33324,3062,33326,33328,33329,33331],{},"長くなりましたが、",[124,33325,19542],{},[124,33327,19545],{},"メソッドでこれらのメソッドを呼び出してから、",[124,33330,19534],{},"メソッドを呼び出すことで、三角形を描くことができます。",[129,33333,33335],{"className":131,"code":33334,"filename":19542,"language":134,"meta":135,"style":135},"export class Mesh extends Scene {\n // ...\n draw(gl: WebGL2RenderingContext) {\n const program = this.program;\n const geometry = this.geometry;\n\n program.use();\n geometry.bind(program);\n\n gl.drawElements(gl.TRIANGLES, geometry.indexCount, gl.UNSIGNED_SHORT, 0);\n\n geometry.unbind();\n }\n}\n",[124,33336,33337,33351,33355,33371,33387,33403,33407,33419,33435,33439,33479,33483,33495,33499],{"__ignoreMap":135},[65,33338,33339,33341,33343,33345,33347,33349],{"class":140,"line":141},[65,33340,284],{"class":154},[65,33342,774],{"class":168},[65,33344,3302],{"class":326},[65,33346,5810],{"class":168},[65,33348,3326],{"class":302},[65,33350,418],{"class":154},[65,33352,33353],{"class":140,"line":158},[65,33354,783],{"class":278},[65,33356,33357,33359,33361,33363,33365,33367,33369],{"class":140,"line":165},[65,33358,19575],{"class":200},[65,33360,224],{"class":154},[65,33362,794],{"class":793},[65,33364,797],{"class":168},[65,33366,800],{"class":326},[65,33368,235],{"class":154},[65,33370,418],{"class":154},[65,33372,33373,33375,33377,33379,33381,33383,33385],{"class":140,"line":180},[65,33374,848],{"class":168},[65,33376,3797],{"class":214},[65,33378,218],{"class":168},[65,33380,1434],{"class":830},[65,33382,834],{"class":154},[65,33384,22228],{"class":214},[65,33386,155],{"class":154},[65,33388,33389,33391,33393,33395,33397,33399,33401],{"class":140,"line":194},[65,33390,848],{"class":168},[65,33392,3903],{"class":214},[65,33394,218],{"class":168},[65,33396,1434],{"class":830},[65,33398,834],{"class":154},[65,33400,9136],{"class":214},[65,33402,155],{"class":154},[65,33404,33405],{"class":140,"line":211},[65,33406,162],{"emptyLinePlaceholder":161},[65,33408,33409,33411,33413,33415,33417],{"class":140,"line":240},[65,33410,22679],{"class":214},[65,33412,834],{"class":154},[65,33414,22684],{"class":200},[65,33416,1269],{"class":204},[65,33418,155],{"class":154},[65,33420,33421,33423,33425,33427,33429,33431,33433],{"class":140,"line":391},[65,33422,22693],{"class":214},[65,33424,834],{"class":154},[65,33426,2226],{"class":200},[65,33428,224],{"class":204},[65,33430,22228],{"class":214},[65,33432,235],{"class":204},[65,33434,155],{"class":154},[65,33436,33437],{"class":140,"line":401},[65,33438,162],{"emptyLinePlaceholder":161},[65,33440,33441,33443,33445,33447,33449,33451,33453,33455,33457,33459,33461,33463,33465,33467,33469,33471,33473,33475,33477],{"class":140,"line":406},[65,33442,1295],{"class":214},[65,33444,834],{"class":154},[65,33446,19534],{"class":200},[65,33448,224],{"class":204},[65,33450,794],{"class":214},[65,33452,834],{"class":154},[65,33454,19638],{"class":214},[65,33456,230],{"class":154},[65,33458,3903],{"class":214},[65,33460,834],{"class":154},[65,33462,19670],{"class":214},[65,33464,230],{"class":154},[65,33466,841],{"class":214},[65,33468,834],{"class":154},[65,33470,19679],{"class":214},[65,33472,230],{"class":154},[65,33474,1142],{"class":793},[65,33476,235],{"class":204},[65,33478,155],{"class":154},[65,33480,33481],{"class":140,"line":421},[65,33482,162],{"emptyLinePlaceholder":161},[65,33484,33485,33487,33489,33491,33493],{"class":140,"line":435},[65,33486,22693],{"class":214},[65,33488,834],{"class":154},[65,33490,22754],{"class":200},[65,33492,1269],{"class":204},[65,33494,155],{"class":154},[65,33496,33497],{"class":140,"line":447},[65,33498,1171],{"class":154},[65,33500,33501],{"class":140,"line":459},[65,33502,243],{"class":154},[15,33504,33505,33506,33508,33509,33512],{},"このデモでは、単純な三角形を描画するだけなので、",[124,33507,19534],{},"メソッドの第1引数のmodeは、",[124,33510,33511],{},"gl.TRIANGLES","と決め打ちにします。後々の記事で、modeの変更が行えるようにもしていきます。",[11,33514,33515],{"id":33515},"更新処理",[15,33517,33518,33519,33521],{},"最後に更新処理を実装します。次のように",[124,33520,2163],{},"メソッドで行っています。",[129,33523,33525],{"className":131,"code":33524,"language":134,"meta":135,"style":135},"const update = () => {\n render.render({ scene });\n\n requestAnimationFrame(update);\n}\n",[124,33526,33527,33541,33561,33565,33577],{"__ignoreMap":135},[65,33528,33529,33531,33533,33535,33537,33539],{"class":140,"line":141},[65,33530,1769],{"class":168},[65,33532,4436],{"class":200},[65,33534,218],{"class":168},[65,33536,1932],{"class":154},[65,33538,1862],{"class":168},[65,33540,418],{"class":154},[65,33542,33543,33545,33547,33549,33551,33553,33555,33557,33559],{"class":140,"line":158},[65,33544,3463],{"class":214},[65,33546,834],{"class":154},[65,33548,4503],{"class":200},[65,33550,224],{"class":204},[65,33552,4508],{"class":154},[65,33554,3697],{"class":214},[65,33556,293],{"class":154},[65,33558,235],{"class":204},[65,33560,155],{"class":154},[65,33562,33563],{"class":140,"line":165},[65,33564,162],{"emptyLinePlaceholder":161},[65,33566,33567,33569,33571,33573,33575],{"class":140,"line":180},[65,33568,27802],{"class":200},[65,33570,224],{"class":204},[65,33572,2163],{"class":214},[65,33574,235],{"class":204},[65,33576,155],{"class":154},[65,33578,33579],{"class":140,"line":194},[65,33580,243],{"class":154},[15,33582,33583,33584,3062,33586,33588],{},"まだ実装していなかった、",[124,33585,23674],{},[124,33587,4503],{},"メソッドをみていきましょう。",[129,33590,33592],{"className":131,"code":33591,"filename":23674,"language":134,"meta":135,"style":135},"export class Render {\n // ...\n render({ scene }: { scene: Scene }) {\n const gl = this.gl;\n gl.viewport(0, 0, this.canvas.width, this.canvas.height);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n scene.traverse(node => {\n if (node instanceof Mesh) {\n node.draw(gl);\n }\n });\n }\n}\n",[124,33593,33594,33604,33608,33632,33648,33692,33720,33724,33740,33756,33772,33776,33784,33788],{"__ignoreMap":135},[65,33595,33596,33598,33600,33602],{"class":140,"line":141},[65,33597,284],{"class":154},[65,33599,774],{"class":168},[65,33601,3321],{"class":326},[65,33603,418],{"class":154},[65,33605,33606],{"class":140,"line":158},[65,33607,783],{"class":278},[65,33609,33610,33612,33614,33616,33618,33620,33622,33624,33626,33628,33630],{"class":140,"line":165},[65,33611,3463],{"class":200},[65,33613,19578],{"class":154},[65,33615,3697],{"class":793},[65,33617,293],{"class":154},[65,33619,797],{"class":168},[65,33621,287],{"class":154},[65,33623,3697],{"class":144},[65,33625,797],{"class":168},[65,33627,3326],{"class":326},[65,33629,19595],{"class":154},[65,33631,418],{"class":154},[65,33633,33634,33636,33638,33640,33642,33644,33646],{"class":140,"line":180},[65,33635,848],{"class":168},[65,33637,841],{"class":214},[65,33639,218],{"class":168},[65,33641,1434],{"class":830},[65,33643,834],{"class":154},[65,33645,794],{"class":214},[65,33647,155],{"class":154},[65,33649,33650,33652,33654,33656,33658,33660,33662,33664,33666,33668,33670,33672,33674,33676,33678,33680,33682,33684,33686,33688,33690],{"class":140,"line":194},[65,33651,1295],{"class":214},[65,33653,834],{"class":154},[65,33655,23873],{"class":200},[65,33657,224],{"class":204},[65,33659,743],{"class":793},[65,33661,230],{"class":154},[65,33663,1142],{"class":793},[65,33665,230],{"class":154},[65,33667,1434],{"class":830},[65,33669,834],{"class":154},[65,33671,3454],{"class":214},[65,33673,834],{"class":154},[65,33675,735],{"class":214},[65,33677,230],{"class":154},[65,33679,1434],{"class":830},[65,33681,834],{"class":154},[65,33683,3454],{"class":214},[65,33685,834],{"class":154},[65,33687,748],{"class":214},[65,33689,235],{"class":204},[65,33691,155],{"class":154},[65,33693,33694,33696,33698,33700,33702,33704,33706,33708,33710,33712,33714,33716,33718],{"class":140,"line":211},[65,33695,1295],{"class":214},[65,33697,834],{"class":154},[65,33699,23918],{"class":200},[65,33701,224],{"class":204},[65,33703,794],{"class":214},[65,33705,834],{"class":154},[65,33707,23927],{"class":214},[65,33709,11880],{"class":168},[65,33711,841],{"class":214},[65,33713,834],{"class":154},[65,33715,23936],{"class":214},[65,33717,235],{"class":204},[65,33719,155],{"class":154},[65,33721,33722],{"class":140,"line":240},[65,33723,162],{"emptyLinePlaceholder":161},[65,33725,33726,33728,33730,33732,33734,33736,33738],{"class":140,"line":391},[65,33727,24013],{"class":214},[65,33729,834],{"class":154},[65,33731,24019],{"class":200},[65,33733,224],{"class":204},[65,33735,24024],{"class":793},[65,33737,1862],{"class":168},[65,33739,418],{"class":154},[65,33741,33742,33744,33746,33748,33750,33752,33754],{"class":140,"line":401},[65,33743,17840],{"class":154},[65,33745,1696],{"class":204},[65,33747,24024],{"class":214},[65,33749,858],{"class":168},[65,33751,3302],{"class":326},[65,33753,1713],{"class":204},[65,33755,208],{"class":154},[65,33757,33758,33760,33762,33764,33766,33768,33770],{"class":140,"line":406},[65,33759,24049],{"class":214},[65,33761,834],{"class":154},[65,33763,19545],{"class":200},[65,33765,224],{"class":204},[65,33767,794],{"class":214},[65,33769,235],{"class":204},[65,33771,155],{"class":154},[65,33773,33774],{"class":140,"line":421},[65,33775,6413],{"class":154},[65,33777,33778,33780,33782],{"class":140,"line":435},[65,33779,6341],{"class":154},[65,33781,235],{"class":204},[65,33783,155],{"class":154},[65,33785,33786],{"class":140,"line":447},[65,33787,1171],{"class":154},[65,33789,33790],{"class":140,"line":459},[65,33791,243],{"class":154},[15,33793,33794,33796,33797,3062,33799,33801],{},[124,33795,4503],{},"メソッドは、追加したSceneの子ノードを順に処理し、Meshノードの場合はdrawメソッドを呼び出します。",[124,33798,21822],{},[124,33800,24019],{},"メソッドは、次のようにSceneツリーを深さ優先(DFS)で巡回するメソッドになります。",[129,33803,33805],{"className":131,"code":33804,"filename":21822,"language":134,"meta":135,"style":135},"export class Scene {\n // ...\n traverse(callback: (scene: Scene) => void) {\n callback(this);\n for (const child of this.children) {\n child.traverse(callback);\n }\n }\n}\n",[124,33806,33807,33817,33821,33851,33864,33888,33904,33908,33912],{"__ignoreMap":135},[65,33808,33809,33811,33813,33815],{"class":140,"line":141},[65,33810,284],{"class":154},[65,33812,774],{"class":168},[65,33814,3326],{"class":326},[65,33816,418],{"class":154},[65,33818,33819],{"class":140,"line":158},[65,33820,783],{"class":278},[65,33822,33823,33826,33828,33831,33833,33835,33837,33839,33841,33843,33845,33847,33849],{"class":140,"line":165},[65,33824,33825],{"class":200}," traverse",[65,33827,224],{"class":154},[65,33829,33830],{"class":200},"callback",[65,33832,797],{"class":168},[65,33834,1696],{"class":154},[65,33836,4932],{"class":793},[65,33838,797],{"class":168},[65,33840,3326],{"class":326},[65,33842,235],{"class":154},[65,33844,1862],{"class":168},[65,33846,22066],{"class":340},[65,33848,235],{"class":154},[65,33850,418],{"class":154},[65,33852,33853,33856,33858,33860,33862],{"class":140,"line":180},[65,33854,33855],{"class":200}," callback",[65,33857,224],{"class":204},[65,33859,2004],{"class":830},[65,33861,235],{"class":204},[65,33863,155],{"class":154},[65,33865,33866,33868,33870,33872,33875,33878,33880,33882,33884,33886],{"class":140,"line":194},[65,33867,5990],{"class":154},[65,33869,1696],{"class":204},[65,33871,1769],{"class":168},[65,33873,33874],{"class":214}," child",[65,33876,33877],{"class":168}," of",[65,33879,1434],{"class":830},[65,33881,834],{"class":154},[65,33883,20675],{"class":214},[65,33885,1713],{"class":204},[65,33887,208],{"class":154},[65,33889,33890,33892,33894,33896,33898,33900,33902],{"class":140,"line":211},[65,33891,28652],{"class":214},[65,33893,834],{"class":154},[65,33895,24019],{"class":200},[65,33897,224],{"class":204},[65,33899,33830],{"class":214},[65,33901,235],{"class":204},[65,33903,155],{"class":154},[65,33905,33906],{"class":140,"line":240},[65,33907,3204],{"class":154},[65,33909,33910],{"class":140,"line":391},[65,33911,1171],{"class":154},[65,33913,33914],{"class":140,"line":401},[65,33915,243],{"class":154},[15,33917,33918],{},"つまり、自分自身に対してcallbackを実行し、すべての子に対して再帰的にtraverseを実行します。",[15,33920,33921],{},"以上で、WebGLで三角形を描画する準備ができました。最後に三角形を描画するための頂点データ・インデックス・uvをみていきます。",[11,33923,33925],{"id":33924},"uv座標の色を描画する三角形","UV座標の色を描画する三角形",[15,33927,33928],{},"今回のデモでは、zの値が0に固定されたx-y平面上の単純な三角形を描画します。三角形を描画する頂点データは次のようになります。",[129,33930,33933],{"className":131,"code":33931,"filename":33932,"language":134,"meta":135,"style":135},"/*\n V2\n (0, 0.5, 0)\n X\n / \\\n / \\\n / \\\n X-------X\nV0 (-0.5,-0.5,0) V1 (0.5,-0.5,0)\n*/\nconst positions = new Float32Array([\n -0.5, -0.5, 0,\n 0.5, -0.5, 0,\n 0, 0.5, 0,\n]);\n","三角形の頂点データ",[124,33934,33935,33940,33945,33950,33955,33960,33965,33970,33975,33980,33985,33999,34017,34033,34047],{"__ignoreMap":135},[65,33936,33937],{"class":140,"line":141},[65,33938,33939],{"class":278},"/*\n",[65,33941,33942],{"class":140,"line":158},[65,33943,33944],{"class":278}," V2\n",[65,33946,33947],{"class":140,"line":165},[65,33948,33949],{"class":278}," (0, 0.5, 0)\n",[65,33951,33952],{"class":140,"line":180},[65,33953,33954],{"class":278}," X\n",[65,33956,33957],{"class":140,"line":194},[65,33958,33959],{"class":278}," / \\\n",[65,33961,33962],{"class":140,"line":211},[65,33963,33964],{"class":278}," / \\\n",[65,33966,33967],{"class":140,"line":240},[65,33968,33969],{"class":278}," / \\\n",[65,33971,33972],{"class":140,"line":391},[65,33973,33974],{"class":278}," X-------X\n",[65,33976,33977],{"class":140,"line":401},[65,33978,33979],{"class":278},"V0 (-0.5,-0.5,0) V1 (0.5,-0.5,0)\n",[65,33981,33982],{"class":140,"line":406},[65,33983,33984],{"class":278},"*/\n",[65,33986,33987,33989,33991,33993,33995,33997],{"class":140,"line":421},[65,33988,1769],{"class":168},[65,33990,26016],{"class":144},[65,33992,218],{"class":168},[65,33994,1776],{"class":168},[65,33996,5951],{"class":200},[65,33998,8113],{"class":204},[65,34000,34001,34003,34005,34007,34009,34011,34013,34015],{"class":140,"line":435},[65,34002,16321],{"class":168},[65,34004,5554],{"class":793},[65,34006,230],{"class":154},[65,34008,4399],{"class":168},[65,34010,5554],{"class":793},[65,34012,230],{"class":154},[65,34014,1142],{"class":793},[65,34016,3820],{"class":154},[65,34018,34019,34021,34023,34025,34027,34029,34031],{"class":140,"line":447},[65,34020,19004],{"class":793},[65,34022,230],{"class":154},[65,34024,4399],{"class":168},[65,34026,5554],{"class":793},[65,34028,230],{"class":154},[65,34030,1142],{"class":793},[65,34032,3820],{"class":154},[65,34034,34035,34037,34039,34041,34043,34045],{"class":140,"line":459},[65,34036,8156],{"class":793},[65,34038,230],{"class":154},[65,34040,5559],{"class":793},[65,34042,230],{"class":154},[65,34044,1142],{"class":793},[65,34046,3820],{"class":154},[65,34048,34049,34051],{"class":140,"line":471},[65,34050,3658],{"class":204},[65,34052,155],{"class":154},[15,34054,34055],{},"WebGLではクリップ空間座標を使います。クリップ空間の座標は、canvasの大きさに関係なく、常に-1から+1の範囲に限定されます。なので、真ん中に三角形を描画するには上記のデータになります。コードにある図をみてもらえれば分かりやすいかと思います。",[15,34057,34058],{},"頂点データの順番に従って、三角形を描くためのインデックスを指定します。インデックスは通常は反時計回りで定義されるので次のようにします。",[129,34060,34062],{"className":131,"code":34061,"filename":16407,"language":134,"meta":135,"style":135},"const indices = new Uint16Array([0, 1, 2]);\n",[124,34063,34064],{"__ignoreMap":135},[65,34065,34066,34068,34070,34072,34074,34076,34078,34080,34082,34084,34086,34088,34090],{"class":140,"line":141},[65,34067,1769],{"class":168},[65,34069,16416],{"class":144},[65,34071,218],{"class":168},[65,34073,1776],{"class":168},[65,34075,6194],{"class":200},[65,34077,3645],{"class":204},[65,34079,743],{"class":793},[65,34081,230],{"class":154},[65,34083,3137],{"class":793},[65,34085,230],{"class":154},[65,34087,3748],{"class":793},[65,34089,3658],{"class":204},[65,34091,155],{"class":154},[15,34093,34094,34095,34097],{},"これらの頂点データと、インデックスを作成した",[124,34096,28757],{},"クラスに渡せば、自動的にバッファの生成などをしてくれるようにこれまで実装してきました。",[129,34099,34101],{"className":131,"code":34100,"language":134,"meta":135,"style":135},"const geometry = new Geometry(gl, {\n position: { size: 3, data: positions },\n index: { size: 1, data: indices },\n});\n",[124,34102,34103,34123,34147,34171],{"__ignoreMap":135},[65,34104,34105,34107,34109,34111,34113,34115,34117,34119,34121],{"class":140,"line":141},[65,34106,1769],{"class":168},[65,34108,3903],{"class":144},[65,34110,218],{"class":168},[65,34112,1776],{"class":168},[65,34114,5645],{"class":200},[65,34116,224],{"class":204},[65,34118,794],{"class":144},[65,34120,230],{"class":154},[65,34122,418],{"class":154},[65,34124,34125,34127,34129,34131,34133,34135,34137,34139,34141,34143,34145],{"class":140,"line":158},[65,34126,8393],{"class":204},[65,34128,797],{"class":154},[65,34130,287],{"class":154},[65,34132,5854],{"class":204},[65,34134,797],{"class":154},[65,34136,3739],{"class":793},[65,34138,230],{"class":154},[65,34140,6304],{"class":204},[65,34142,797],{"class":154},[65,34144,26016],{"class":144},[65,34146,3858],{"class":154},[65,34148,34149,34151,34153,34155,34157,34159,34161,34163,34165,34167,34169],{"class":140,"line":165},[65,34150,6899],{"class":204},[65,34152,797],{"class":154},[65,34154,287],{"class":154},[65,34156,5854],{"class":204},[65,34158,797],{"class":154},[65,34160,3137],{"class":793},[65,34162,230],{"class":154},[65,34164,6304],{"class":204},[65,34166,797],{"class":154},[65,34168,16416],{"class":144},[65,34170,3858],{"class":154},[65,34172,34173,34175,34177],{"class":140,"line":180},[65,34174,2899],{"class":154},[65,34176,235],{"class":204},[65,34178,155],{"class":154},[15,34180,34181,34183,34184,34186,34187,34189,34190,34192],{},[124,34182,3610],{},"は3次元のベクトルデータなので、",[124,34185,7526],{},"を3に設定し、",[124,34188,11865],{},"は1次元のデータなので",[124,34191,7526],{},"を1に設定します。",[15,34194,34195],{},"UV座標の定義をする前に、シェーダーをみていきましょう。",[1177,34197,34198],{"id":34198},"頂点シェーダー",[15,34200,34201],{},"頂点シェーダーは、先ほど定義した三角形の頂点データを用いて次のようになります。",[129,34203,34205],{"className":131,"code":34204,"filename":20245,"language":134,"meta":135,"style":135},"#version 300 es\nprecision mediump float;\n\nin vec3 position;\nin vec2 uv;\n\nout vec2 vUv;\n\nvoid main() {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n}\n",[124,34206,34207,34217,34227,34231,34241,34251,34255,34265,34269,34279,34289,34309],{"__ignoreMap":135},[65,34208,34209,34211,34213,34215],{"class":140,"line":141},[65,34210,26793],{"class":204},[65,34212,26796],{"class":144},[65,34214,26799],{"class":793},[65,34216,26802],{"class":144},[65,34218,34219,34221,34223,34225],{"class":140,"line":158},[65,34220,26807],{"class":144},[65,34222,26810],{"class":144},[65,34224,10984],{"class":144},[65,34226,155],{"class":154},[65,34228,34229],{"class":140,"line":165},[65,34230,162],{"emptyLinePlaceholder":161},[65,34232,34233,34235,34237,34239],{"class":140,"line":180},[65,34234,169],{"class":168},[65,34236,10961],{"class":144},[65,34238,10964],{"class":144},[65,34240,155],{"class":154},[65,34242,34243,34245,34247,34249],{"class":140,"line":194},[65,34244,169],{"class":168},[65,34246,172],{"class":144},[65,34248,15268],{"class":144},[65,34250,155],{"class":154},[65,34252,34253],{"class":140,"line":211},[65,34254,162],{"emptyLinePlaceholder":161},[65,34256,34257,34259,34261,34263],{"class":140,"line":240},[65,34258,183],{"class":144},[65,34260,172],{"class":144},[65,34262,175],{"class":144},[65,34264,155],{"class":154},[65,34266,34267],{"class":140,"line":391},[65,34268,162],{"emptyLinePlaceholder":161},[65,34270,34271,34273,34275,34277],{"class":140,"line":401},[65,34272,197],{"class":168},[65,34274,201],{"class":200},[65,34276,205],{"class":204},[65,34278,208],{"class":154},[65,34280,34281,34283,34285,34287],{"class":140,"line":406},[65,34282,26895],{"class":214},[65,34284,218],{"class":168},[65,34286,15268],{"class":214},[65,34288,155],{"class":154},[65,34290,34291,34293,34295,34297,34299,34301,34303,34305,34307],{"class":140,"line":421},[65,34292,11123],{"class":214},[65,34294,218],{"class":168},[65,34296,186],{"class":200},[65,34298,224],{"class":204},[65,34300,3610],{"class":214},[65,34302,230],{"class":154},[65,34304,3507],{"class":793},[65,34306,235],{"class":204},[65,34308,155],{"class":154},[65,34310,34311],{"class":140,"line":435},[65,34312,243],{"class":154},[15,34314,34315,34316,34319,34320,34322,34323,34325],{},"WebGL2(OpenGL ES 3.0)を前提としているので、先頭に",[124,34317,34318],{},"#version 300 es","を記述します。",[124,34321,3610],{},"は先ほど定義した三角形を描くための頂点データとなっているので、",[124,34324,169],{},"で受け取ります。",[15,34327,14275,34328,34330,34331,34333,34334,34336,34337,34340],{},[124,34329,3610],{},"は-1から+1の範囲にあるので、そのまま最終的なクリップ空間の",[124,34332,11281],{},"に代入します。",[124,34335,19137],{},"は後ほど定義しますが、フラグメントシェーダーで使用しますので、",[124,34338,34339],{},"out vec2 vUv","として出力します。",[1177,34342,34343],{"id":34343},"フラグメントシェーダー",[15,34345,34346,34347,34350],{},"フラグメントシェーダーは、頂点シェーダーから出力した",[124,34348,34349],{},"vUv","を用いて次のようになります。",[129,34352,34354],{"className":131,"code":34353,"filename":26786,"language":134,"meta":135,"style":135},"#version 300 es\nprecision mediump float;\n\nin vec2 vUv;\nout vec4 fragColor;\n\nvoid main() {\n vec2 uv = vUv;\n fragColor = vec4(uv, 0.0, 1.0);\n}\n",[124,34355,34356,34366,34376,34380,34390,34400,34404,34414,34427,34451],{"__ignoreMap":135},[65,34357,34358,34360,34362,34364],{"class":140,"line":141},[65,34359,26793],{"class":204},[65,34361,26796],{"class":144},[65,34363,26799],{"class":793},[65,34365,26802],{"class":144},[65,34367,34368,34370,34372,34374],{"class":140,"line":158},[65,34369,26807],{"class":144},[65,34371,26810],{"class":144},[65,34373,10984],{"class":144},[65,34375,155],{"class":154},[65,34377,34378],{"class":140,"line":165},[65,34379,162],{"emptyLinePlaceholder":161},[65,34381,34382,34384,34386,34388],{"class":140,"line":180},[65,34383,169],{"class":168},[65,34385,172],{"class":144},[65,34387,175],{"class":144},[65,34389,155],{"class":154},[65,34391,34392,34394,34396,34398],{"class":140,"line":194},[65,34393,183],{"class":144},[65,34395,186],{"class":144},[65,34397,189],{"class":144},[65,34399,155],{"class":154},[65,34401,34402],{"class":140,"line":211},[65,34403,162],{"emptyLinePlaceholder":161},[65,34405,34406,34408,34410,34412],{"class":140,"line":240},[65,34407,197],{"class":168},[65,34409,201],{"class":200},[65,34411,205],{"class":204},[65,34413,208],{"class":154},[65,34415,34416,34419,34421,34423,34425],{"class":140,"line":391},[65,34417,34418],{"class":214}," vec2",[65,34420,15268],{"class":214},[65,34422,218],{"class":168},[65,34424,175],{"class":214},[65,34426,155],{"class":154},[65,34428,34429,34431,34433,34435,34437,34439,34441,34443,34445,34447,34449],{"class":140,"line":401},[65,34430,215],{"class":214},[65,34432,218],{"class":168},[65,34434,186],{"class":200},[65,34436,224],{"class":204},[65,34438,19137],{"class":214},[65,34440,230],{"class":154},[65,34442,26036],{"class":793},[65,34444,230],{"class":154},[65,34446,3507],{"class":793},[65,34448,235],{"class":204},[65,34450,155],{"class":154},[65,34452,34453],{"class":140,"line":406},[65,34454,243],{"class":154},[15,34456,34457,34458,34461,34462,34464],{},"このデモでは、UV座標の値を色として使用しますので、",[124,34459,34460],{},"fragColor","のxy座標にそのまま代入します。",[5467,34463],{},"\nそれでは最後にUV座標を定義しましょう。",[1177,34466,34468],{"id":34467},"uv座標の定義","UV座標の定義",[15,34470,34471],{},"今回のデモの頂点データとインデックス、UVの対応づけは次のようになります。",[583,34473,34474,34485],{},[586,34475,34476],{},[589,34477,34478,34480,34482],{},[592,34479,16407],{},[592,34481,16303],{},[592,34483,34484],{},"UV",[602,34486,34487,34497,34507],{},[589,34488,34489,34491,34494],{},[607,34490,743],{},[607,34492,34493],{},"(-0.5, -0.5, 0)",[607,34495,34496],{},"(0.0, 0.0) : 黒",[589,34498,34499,34501,34504],{},[607,34500,3620],{},[607,34502,34503],{},"(0.5, -0.5, 0)",[607,34505,34506],{},"(1.0, 0.0) : 赤",[589,34508,34509,34511,34514],{},[607,34510,3939],{},[607,34512,34513],{},"(0, 0.5, 0)",[607,34515,34516],{},"(0.0, 1.0) : 緑",[15,34518,34519,34520,34522],{},"三角形の左下は黒に、右下は赤に、上は緑になります。",[5467,34521],{},"\nそれでは、UV座標を次のように準備しましょう。",[129,34524,34526],{"className":131,"code":34525,"language":134,"meta":135,"style":135},"const uvs = new Float32Array([0, 0, 1, 0, 0, 1]);\n\nconst geometry = new Geometry(gl, {\n position: { size: 3, data: positions },\n uv: { size: 2, data: uvs },\n index: { size: 1, data: indices },\n});\n",[124,34527,34528,34568,34572,34592,34616,34640,34664],{"__ignoreMap":135},[65,34529,34530,34532,34534,34536,34538,34540,34542,34544,34546,34548,34550,34552,34554,34556,34558,34560,34562,34564,34566],{"class":140,"line":141},[65,34531,1769],{"class":168},[65,34533,26077],{"class":144},[65,34535,218],{"class":168},[65,34537,1776],{"class":168},[65,34539,5951],{"class":200},[65,34541,3645],{"class":204},[65,34543,743],{"class":793},[65,34545,230],{"class":154},[65,34547,1142],{"class":793},[65,34549,230],{"class":154},[65,34551,3137],{"class":793},[65,34553,230],{"class":154},[65,34555,1142],{"class":793},[65,34557,230],{"class":154},[65,34559,1142],{"class":793},[65,34561,230],{"class":154},[65,34563,3137],{"class":793},[65,34565,3658],{"class":204},[65,34567,155],{"class":154},[65,34569,34570],{"class":140,"line":158},[65,34571,162],{"emptyLinePlaceholder":161},[65,34573,34574,34576,34578,34580,34582,34584,34586,34588,34590],{"class":140,"line":165},[65,34575,1769],{"class":168},[65,34577,3903],{"class":144},[65,34579,218],{"class":168},[65,34581,1776],{"class":168},[65,34583,5645],{"class":200},[65,34585,224],{"class":204},[65,34587,794],{"class":144},[65,34589,230],{"class":154},[65,34591,418],{"class":154},[65,34593,34594,34596,34598,34600,34602,34604,34606,34608,34610,34612,34614],{"class":140,"line":180},[65,34595,8393],{"class":204},[65,34597,797],{"class":154},[65,34599,287],{"class":154},[65,34601,5854],{"class":204},[65,34603,797],{"class":154},[65,34605,3739],{"class":793},[65,34607,230],{"class":154},[65,34609,6304],{"class":204},[65,34611,797],{"class":154},[65,34613,26016],{"class":144},[65,34615,3858],{"class":154},[65,34617,34618,34620,34622,34624,34626,34628,34630,34632,34634,34636,34638],{"class":140,"line":194},[65,34619,15048],{"class":204},[65,34621,797],{"class":154},[65,34623,287],{"class":154},[65,34625,5854],{"class":204},[65,34627,797],{"class":154},[65,34629,3748],{"class":793},[65,34631,230],{"class":154},[65,34633,6304],{"class":204},[65,34635,797],{"class":154},[65,34637,26077],{"class":144},[65,34639,3858],{"class":154},[65,34641,34642,34644,34646,34648,34650,34652,34654,34656,34658,34660,34662],{"class":140,"line":211},[65,34643,6899],{"class":204},[65,34645,797],{"class":154},[65,34647,287],{"class":154},[65,34649,5854],{"class":204},[65,34651,797],{"class":154},[65,34653,3137],{"class":793},[65,34655,230],{"class":154},[65,34657,6304],{"class":204},[65,34659,797],{"class":154},[65,34661,16416],{"class":144},[65,34663,3858],{"class":154},[65,34665,34666,34668,34670],{"class":140,"line":240},[65,34667,2899],{"class":154},[65,34669,235],{"class":204},[65,34671,155],{"class":154},[15,34673,34674],{},"最終的な結果は次のようになります。",[15,34676,34677],{},[57,34678],{"alt":33925,"src":34679,"title":33925},"https://res.cloudinary.com/dy8ftemi0/image/upload/v1764458614/image_he1swo.jpg",[3226,34681],{"href":34682},"https://nono-k.github.io/webgl-study-note/webgl/triangle/",[15,34684,34685],{},"以上で、UV座標の色を描画する三角形が完成しました！",[11,34687,5299],{"id":5299},[15,34689,34690],{},"WebGLの基礎を学ぶために、まずは三角形を描画してみました。素のWebGLでは煩雑な処理が多くなるので、Three.jsやOGLを参考にして、コアな部分をクラスに分けて説明していきました。",[15,34692,34693],{},"少しでもThree.jsなどのWebGLライブラリが、どのようになっているのか理解できたら幸いです。今後はこのシリーズを通して、オレオレWebGLライブラリを育てていきたいと思います！",[15,34695,34696],{},"次回は、MVP行列の理解と、一つの頂点バッファで複数の三角形を描画する方法について解説します。",[19,34698],{":items":16157},[5313,34700,34701],{},"html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s9qRY, html code.shiki .s9qRY{--shiki-default:#FF5370;--shiki-default-font-style:italic}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}",{"title":135,"searchDepth":165,"depth":165,"links":34703},[34704,34705,34706,34707,34710,34711,34714,34717,34721,34722,34727],{"id":26990,"depth":158,"text":26990},{"id":27037,"depth":158,"text":27037},{"id":27215,"depth":158,"text":27216},{"id":27909,"depth":158,"text":27910,"children":34708},[34709],{"id":28250,"depth":165,"text":28250},{"id":28416,"depth":158,"text":28417},{"id":28751,"depth":158,"text":28752,"children":34712},[34713],{"id":29618,"depth":165,"text":29618},{"id":30107,"depth":158,"text":30108,"children":34715},[34716],{"id":31073,"depth":165,"text":31073},{"id":31564,"depth":158,"text":31565,"children":34718},[34719,34720],{"id":32008,"depth":165,"text":32008},{"id":32902,"depth":165,"text":32902},{"id":33515,"depth":158,"text":33515},{"id":33924,"depth":158,"text":33925,"children":34723},[34724,34725,34726],{"id":34198,"depth":165,"text":34198},{"id":34343,"depth":165,"text":34343},{"id":34467,"depth":165,"text":34468},{"id":5299,"depth":158,"text":5299},"2025-12-01T00:00:00.000Z","今回から、ライブラリなどを使わない素のWebGLの解説を行っていきます。目標は、シリーズを通して自作のWebGLライブラリを作っていく方針です。初回は、WebGLで三角形を描画するまでをみていきます。","/images/blog/webgl-triangle.jpg",{},"/blog/webgl-triangle",{"title":26985,"description":34729},"blog/webgl-triangle",[34736,34737],"WebGLで三角形を描画するまでの手順を理解する","WebGLの定型的なコアの実装をクラスに分ける方法",[5350],"twchx4-dvl_ZvEVYYzjhlW9amgWPDCwuX912kAabgmY",{"id":34741,"title":34742,"body":34743,"date":35239,"description":35240,"draft":5339,"extension":5340,"image":35241,"meta":35242,"navigation":161,"path":35243,"seo":35244,"stem":35245,"summaryList":35246,"summaryText":5348,"tags":35249,"__hash__":35251},"blog/blog/web-accessibility-skip-link.md","Webサイトでスキップリンクを配置してキーボード操作を補助しよう。スキップリンクの実装方法解説【アクセシビリティ対応】",{"type":8,"value":34744,"toc":35229},[34745,34749,34752,34762,34769,34773,34776,34790,34793,34796,34808,34814,34819,34823,34826,34959,34965,34979,34982,34986,35152,35167,35185,35190,35192,35198,35206,35209,35212,35215,35226],[11,34746,34748],{"id":34747},"スキップリンクとは","スキップリンクとは？",[15,34750,34751],{},"スキップリンク（Skip Link）とは、ページの先頭に配置される「本文へスキップ」「メインコンテンツへ移動」などのリンクのことです。",[15,34753,34754,34755,34757,34758,29573],{},"通常、Webページの上部にはナビゲーションやロゴ、ヘッダー要素が並んでいます。",[5467,34756],{},"\nしかし、キーボード操作やスクリーンリーダーを使って操作するユーザーにとっては、",[34759,34760,34761],"marker",{},"毎回同じナビゲーションを読み上げたり、Tabキーで飛ばしたりするのは大変",[15,34763,34764,34765,34768],{},"そこでスキップリンクをページの先頭に設置することで、",[34759,34766,34767],{},"ページの主要コンテンツへ素早く移動","できるようになります。",[11,34770,34772],{"id":34771},"なぜスキップリンクが必要なのか","なぜスキップリンクが必要なのか？",[15,34774,34775],{},"スキップリンクを設置する必要がある理由は以下の通りです。",[89,34777,34778,34784],{},[92,34779,34780,34781,34783],{},"アクセシビリティの向上",[5467,34782],{},"\n長いナビゲーションリンクを繰り返し呼んだり、移動する手間を省くことができるので、ユーザーは求める情報へすぐにアクセスすることが可能になります。",[92,34785,34786,34787,34789],{},"国際的な推奨",[5467,34788],{},"\nWCAG（Web Content Accessibility Guidelines）やJIS規格でも、スキップリンクの設置が推奨されています。",[15,34791,34792],{},"それでは実際にスキップリンクを実装する方法について見ていきましょう。",[11,34794,34795],{"id":34795},"スキップリンクの実装方法",[15,34797,34798,34799,34803,34804,34807],{},"スキップリンクは",[34800,34801,34802],"kbd",{},"Tab","キーやスクリーンリーダで読む際に最初に来てほしいので",[124,34805,34806],{},"\u003Cbody>","要素のできるだけ先頭に近い場所に配置しましょう。",[15,34809,34810,34811,34813],{},"デモのCodePenは下記になります。先頭の位置で",[34800,34812,34802],{},"キーを押したら「メインコンテンツにスキップ」のテキストが表示され、そのままリンクをクリックするとメインコンテンツのお知らせ一覧のリンクにフォーカスが移るのを確認してみてください。",[34815,34816],"codepen-embed",{"id":34817,"title":34818},"zxrBBKY","Skip Link",[1177,34820,34822],{"id":34821},"html","HTML",[15,34824,34825],{},"HTMLは次のようになります。",[129,34827,34830],{"className":34828,"code":34829,"filename":34822,"language":34821,"meta":135,"style":135},"language-html shiki shiki-themes aurora-x","\u003Cbody>\n \u003Ca href=\"#main\" class=\"c-skip-link\">メインコンテンツにスキップ\u003C/a>\n \n \u003Cheader>\n \u003C!-- headerのnavリンク -->\n \u003C/header>\n \n \u003C!-- スキップリンクで飛ぶ場所 -->\n \u003Cmain id=\"main\">\n \u003C/main>\n\u003C/body>\n",[124,34831,34832,34842,34886,34891,34900,34905,34914,34918,34923,34943,34951],{"__ignoreMap":135},[65,34833,34834,34836,34839],{"class":140,"line":141},[65,34835,1830],{"class":154},[65,34837,34838],{"class":214},"body",[65,34840,34841],{"class":154},">\n",[65,34843,34844,34847,34849,34853,34855,34858,34861,34863,34865,34867,34869,34872,34874,34876,34879,34882,34884],{"class":140,"line":158},[65,34845,34846],{"class":154}," \u003C",[65,34848,29],{"class":214},[65,34850,34852],{"class":34851},"stCc5"," href",[65,34854,6252],{"class":154},[65,34856,34857],{"class":154},"\"",[65,34859,34860],{"class":302},"#main",[65,34862,34857],{"class":154},[65,34864,774],{"class":34851},[65,34866,6252],{"class":154},[65,34868,34857],{"class":154},[65,34870,34871],{"class":302},"c-skip-link",[65,34873,34857],{"class":154},[65,34875,1836],{"class":154},[65,34877,34878],{"class":204},"メインコンテンツにスキップ",[65,34880,34881],{"class":154},"\u003C/",[65,34883,29],{"class":214},[65,34885,34841],{"class":154},[65,34887,34888],{"class":140,"line":165},[65,34889,34890],{"class":204}," \n",[65,34892,34893,34895,34898],{"class":140,"line":180},[65,34894,34846],{"class":154},[65,34896,34897],{"class":214},"header",[65,34899,34841],{"class":154},[65,34901,34902],{"class":140,"line":194},[65,34903,34904],{"class":278}," \u003C!-- headerのnavリンク -->\n",[65,34906,34907,34910,34912],{"class":140,"line":211},[65,34908,34909],{"class":154}," \u003C/",[65,34911,34897],{"class":214},[65,34913,34841],{"class":154},[65,34915,34916],{"class":140,"line":240},[65,34917,34890],{"class":204},[65,34919,34920],{"class":140,"line":391},[65,34921,34922],{"class":278}," \u003C!-- スキップリンクで飛ぶ場所 -->\n",[65,34924,34925,34927,34930,34933,34935,34937,34939,34941],{"class":140,"line":401},[65,34926,34846],{"class":154},[65,34928,34929],{"class":214},"main",[65,34931,34932],{"class":34851}," id",[65,34934,6252],{"class":154},[65,34936,34857],{"class":154},[65,34938,34929],{"class":302},[65,34940,34857],{"class":154},[65,34942,34841],{"class":154},[65,34944,34945,34947,34949],{"class":140,"line":406},[65,34946,34909],{"class":154},[65,34948,34929],{"class":214},[65,34950,34841],{"class":154},[65,34952,34953,34955,34957],{"class":140,"line":421},[65,34954,34881],{"class":154},[65,34956,34838],{"class":214},[65,34958,34841],{"class":154},[15,34960,34961,34962,34964],{},"ここではbody直下にスキップリンクを配置しています。これにより、スキップリンクが最初に表示され、",[34800,34963,34802],{},"キーを押すとスキップリンクにフォーカスが移ります。",[15,34966,34967,34968,34970,34971,34974,34975,34978],{},"スキップリンクのリンクには、",[124,34969,34860],{},"というIDを指定し、スキップリンクで飛ばす場所に",[124,34972,34973],{},"id=\"main\"","を指定しています。これにより、スキップリンクをクリックすると、",[124,34976,34977],{},"\u003Cmain>","タグの部分にフォーカスが移ります。",[15,34980,34981],{},"続いてCSSを見ていきましょう。",[1177,34983,34985],{"id":34984},"css","CSS",[129,34987,34990],{"className":34988,"code":34989,"filename":34985,"language":34984,"meta":135,"style":135},"language-css shiki shiki-themes aurora-x",".c-skip-link {\n position: fixed;\n top: 0.5rem;\n left: 16px;\n z-index: 1000;\n padding: 1rem;\n background: #fff;\n border: 1px solid #000;\n opacity: 0;\n pointer-events: none;\n}\n\n.c-skip-link:focus {\n opacity: 1;\n pointer-events: auto;\n}\n",[124,34991,34992,35000,35011,35022,35033,35045,35057,35067,35083,35094,35106,35110,35114,35127,35137,35148],{"__ignoreMap":135},[65,34993,34994,34996,34998],{"class":140,"line":141},[65,34995,834],{"class":154},[65,34997,34871],{"class":326},[65,34999,418],{"class":154},[65,35001,35002,35004,35006,35009],{"class":140,"line":158},[65,35003,8393],{"class":340},[65,35005,797],{"class":154},[65,35007,35008],{"class":793}," fixed",[65,35010,155],{"class":154},[65,35012,35013,35015,35017,35020],{"class":140,"line":165},[65,35014,24259],{"class":340},[65,35016,797],{"class":154},[65,35018,35019],{"class":793}," 0.5rem",[65,35021,155],{"class":154},[65,35023,35024,35026,35028,35031],{"class":140,"line":180},[65,35025,24226],{"class":340},[65,35027,797],{"class":154},[65,35029,35030],{"class":793}," 16px",[65,35032,155],{"class":154},[65,35034,35035,35038,35040,35043],{"class":140,"line":194},[65,35036,35037],{"class":340}," z-index",[65,35039,797],{"class":154},[65,35041,35042],{"class":793}," 1000",[65,35044,155],{"class":154},[65,35046,35047,35050,35052,35055],{"class":140,"line":211},[65,35048,35049],{"class":340}," padding",[65,35051,797],{"class":154},[65,35053,35054],{"class":793}," 1rem",[65,35056,155],{"class":154},[65,35058,35059,35062,35064],{"class":140,"line":240},[65,35060,35061],{"class":340}," background",[65,35063,797],{"class":154},[65,35065,35066],{"class":154}," #fff;\n",[65,35068,35069,35072,35074,35077,35080],{"class":140,"line":391},[65,35070,35071],{"class":340}," border",[65,35073,797],{"class":154},[65,35075,35076],{"class":793}," 1px",[65,35078,35079],{"class":793}," solid",[65,35081,35082],{"class":154}," #000;\n",[65,35084,35085,35088,35090,35092],{"class":140,"line":401},[65,35086,35087],{"class":340}," opacity",[65,35089,797],{"class":154},[65,35091,1142],{"class":793},[65,35093,155],{"class":154},[65,35095,35096,35099,35101,35104],{"class":140,"line":406},[65,35097,35098],{"class":340}," pointer-events",[65,35100,797],{"class":154},[65,35102,35103],{"class":793}," none",[65,35105,155],{"class":154},[65,35107,35108],{"class":140,"line":421},[65,35109,243],{"class":154},[65,35111,35112],{"class":140,"line":435},[65,35113,162],{"emptyLinePlaceholder":161},[65,35115,35116,35118,35120,35122,35125],{"class":140,"line":447},[65,35117,834],{"class":154},[65,35119,34871],{"class":326},[65,35121,797],{"class":154},[65,35123,35124],{"class":168},"focus",[65,35126,418],{"class":154},[65,35128,35129,35131,35133,35135],{"class":140,"line":459},[65,35130,35087],{"class":340},[65,35132,797],{"class":154},[65,35134,3137],{"class":793},[65,35136,155],{"class":154},[65,35138,35139,35141,35143,35146],{"class":140,"line":471},[65,35140,35098],{"class":340},[65,35142,797],{"class":154},[65,35144,35145],{"class":793}," auto",[65,35147,155],{"class":154},[65,35149,35150],{"class":140,"line":63},[65,35151,243],{"class":154},[15,35153,35154,35155,35158,35159,35162,35163,35166],{},"スキップリンクは、",[124,35156,35157],{},"position: fixed;","で固定しています。最初は非表示にしておきたいので",[124,35160,35161],{},"opacity: 0","にして隠しています。また、",[124,35164,35165],{},"pointer-events: none;","でクリックやタップができないようにしています。",[15,35168,35169,35170,35172,35173,35176,35177,35180,35181,35184],{},"スキップリンクを表示させるタイミングは",[34800,35171,34802],{},"キーが押されたときです。なので、",[124,35174,35175],{},":focus","状態になったときに",[124,35178,35179],{},"opacity: 1","にして表示させ、",[124,35182,35183],{},"pointer-events: auto;","にしてクリックやタップが可能にします。",[20229,35186],{"backgroundColor":35187,"text":35188,"title":35189},"var(--orange)","スキップリンクはスクリーンリーダーでも読めるようにしたいので、非表示にするためにdisplay: none;を使用するのは避けてください。","注意事項",[11,35191,5299],{"id":5299},[15,35193,35194,35195,35197],{},"スキップリンクについての説明や実装方法について解説しました。",[5467,35196],{},"\n実装する上でのポイントは、",[89,35199,35200,35203],{},[92,35201,35202],{},"ページ先頭に配置する",[92,35204,35205],{},"普段は隠してフォーカス時に表示",[15,35207,35208],{},"となり、すぐに導入できます。",[15,35210,35211],{},"この記事が参考になれば幸いです。",[11,35213,35214],{"id":35214},"参考",[89,35216,35217],{},[92,35218,35219,35223],{},[29,35220],{"href":35221,"rel":35222,"target":3049},"https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/a#%E3%82%B9%E3%82%AD%E3%83%83%E3%83%97%E3%83%AA%E3%83%B3%E3%82%AF",[3048],[29,35224,35225],{},": アンカー要素 スキップリンク - MDN",[5313,35227,35228],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .stCc5, html code.shiki .stCc5{--shiki-default:#FFCB6B;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}",{"title":135,"searchDepth":165,"depth":165,"links":35230},[35231,35232,35233,35237,35238],{"id":34747,"depth":158,"text":34748},{"id":34771,"depth":158,"text":34772},{"id":34795,"depth":158,"text":34795,"children":35234},[35235,35236],{"id":34821,"depth":165,"text":34822},{"id":34984,"depth":165,"text":34985},{"id":5299,"depth":158,"text":5299},{"id":35214,"depth":158,"text":35214},"2025-10-03T00:00:00.000Z","Webサイトを制作する際、見た目や操作性に加えてアクセシビリティへの配慮は欠かせません。その中でも基本的な取り組みのひとつが スキップリンク です。この記事では「スキップリンクとは何か」「なぜ必要なのか」そして「実装方法」についてわかりやすく解説します。","/images/blog/web-accessibility-skip-link.jpg",{},"/blog/web-accessibility-skip-link",{"title":34742,"description":35240},"blog/web-accessibility-skip-link",[35247,35248],"スキップリンクについて","スキップリンクを実装する方法",[35250,34985],"アクセシビリティ","dmsKbXaXHVynL91PWrER7InFip8jAe8EmpKj0_qd58w",{"id":35253,"title":35254,"body":35255,"date":35720,"description":35721,"draft":5339,"extension":5340,"image":35722,"meta":35723,"navigation":161,"path":35724,"seo":35725,"stem":35726,"summaryList":35727,"summaryText":5348,"tags":35729,"__hash__":35730},"blog/blog/javascript-location-history.md","JavaScriptでページ遷移や履歴操作の方法を紹介！locationとhistoryの使い方",{"type":8,"value":35256,"toc":35710},[35257,35259,35269,35273,35278,35284,35355,35358,35361,35368,35391,35394,35397,35411,35456,35463,35492,35496,35499,35506,35580,35585,35588,35598,35609,35612,35684,35690,35692,35700,35707],[11,35258,13],{"id":13},[15,35260,35261,35262,35264,35265,35268],{},"Web開発では「ページ遷移」や「履歴操作」を扱う場面がよくあるかと思います。これらの操作はJavaScriptの",[124,35263,33091],{},"オブジェクトと",[124,35266,35267],{},"history","オブジェクトを使うことで簡単に行うことができます。この記事では、これらの基本的な使い方を紹介します。",[11,35270,35272],{"id":35271},"urlを取得ページを遷移する","URLを取得・ページを遷移する",[35274,35275],"content-list",{":list":35276,"title":35277},"[\"現在のURLを取得する\",\"aタグ以外の方法でページ遷移したいとき\"]","利用シーン",[15,35279,35280,35283],{},[124,35281,35282],{},"location.href","プロパティを使用すると、現在のURLを取得することができます。また、このプロパティに新しいURLを設定することで、ページを遷移することができます。このプロパティは読み取りも書き込みの両方に対応しています。",[129,35285,35290],{"className":35286,"code":35287,"filename":35288,"language":35289,"meta":135,"style":135},"language-js shiki shiki-themes aurora-x","// 読み取りの場合\nconsole.log(location.href); // 現在のURLを取得\n\n// 書き込みの場合\nlocation.href = \"https://example.com\"; // 別のページに遷移する\n","JavaScript","js",[124,35291,35292,35297,35323,35327,35332],{"__ignoreMap":135},[65,35293,35294],{"class":140,"line":141},[65,35295,35296],{"class":278},"// 読み取りの場合\n",[65,35298,35299,35302,35304,35307,35309,35311,35313,35316,35318,35320],{"class":140,"line":158},[65,35300,35301],{"class":144},"console",[65,35303,834],{"class":154},[65,35305,35306],{"class":200},"log",[65,35308,224],{"class":204},[65,35310,33091],{"class":144},[65,35312,834],{"class":154},[65,35314,35315],{"class":144},"href",[65,35317,235],{"class":204},[65,35319,6005],{"class":154},[65,35321,35322],{"class":278}," // 現在のURLを取得\n",[65,35324,35325],{"class":140,"line":165},[65,35326,162],{"emptyLinePlaceholder":161},[65,35328,35329],{"class":140,"line":180},[65,35330,35331],{"class":278},"// 書き込みの場合\n",[65,35333,35334,35336,35338,35340,35342,35345,35348,35350,35352],{"class":140,"line":194},[65,35335,33091],{"class":144},[65,35337,834],{"class":154},[65,35339,35315],{"class":144},[65,35341,218],{"class":168},[65,35343,35344],{"class":154}," \"",[65,35346,35347],{"class":302},"https://example.com",[65,35349,34857],{"class":154},[65,35351,6005],{"class":154},[65,35353,35354],{"class":278}," // 別のページに遷移する\n",[11,35356,35357],{"id":35357},"ページをリロードする",[35274,35359],{":list":35360,"title":35277},"[\"更新があるページで再読み込みしたいとき\"]",[15,35362,35363,35364,35367],{},"現在のウェブページをリロード（再読み込み）するには",[124,35365,35366],{},"location.reload()","メソッドを実行します。このメソッドを呼び出すと、その瞬間にリロードします。これはブラウザのリロードボタンを押したときと同じ挙動になります。",[129,35369,35371],{"className":35286,"code":35370,"filename":35288,"language":35289,"meta":135,"style":135},"// ページをリロードする\nlocation.reload();\n",[124,35372,35373,35378],{"__ignoreMap":135},[65,35374,35375],{"class":140,"line":141},[65,35376,35377],{"class":278},"// ページをリロードする\n",[65,35379,35380,35382,35384,35387,35389],{"class":140,"line":158},[65,35381,33091],{"class":144},[65,35383,834],{"class":154},[65,35385,35386],{"class":200},"reload",[65,35388,1269],{"class":204},[65,35390,155],{"class":154},[11,35392,35393],{"id":35393},"履歴操作を行う",[35274,35395],{":list":35396,"title":35277},"[\"ブラウザの戻る・進むボタンと同じ挙動をさせたいとき\"]",[15,35398,35399,35400,35402,35403,35406,35407,35410],{},"ブラウザの「戻る・進む」をJavaScriptで操作したいときには、",[124,35401,35267],{},"オブジェクトを使用します。",[124,35404,35405],{},"history.back()","は履歴をひとつ戻すメソッドで、",[124,35408,35409],{},"history.forward()","は履歴をひとつ進めるメソッドです。",[129,35412,35414],{"className":35286,"code":35413,"filename":35288,"language":35289,"meta":135,"style":135},"// 1つ前のページに戻る\nhistory.back();\n\n// 1つ進む\nhistory.forward();\n",[124,35415,35416,35421,35434,35438,35443],{"__ignoreMap":135},[65,35417,35418],{"class":140,"line":141},[65,35419,35420],{"class":278},"// 1つ前のページに戻る\n",[65,35422,35423,35425,35427,35430,35432],{"class":140,"line":158},[65,35424,35267],{"class":144},[65,35426,834],{"class":154},[65,35428,35429],{"class":200},"back",[65,35431,1269],{"class":204},[65,35433,155],{"class":154},[65,35435,35436],{"class":140,"line":165},[65,35437,162],{"emptyLinePlaceholder":161},[65,35439,35440],{"class":140,"line":180},[65,35441,35442],{"class":278},"// 1つ進む\n",[65,35444,35445,35447,35449,35452,35454],{"class":140,"line":194},[65,35446,35267],{"class":144},[65,35448,834],{"class":154},[65,35450,35451],{"class":200},"forward",[65,35453,1269],{"class":204},[65,35455,155],{"class":154},[15,35457,35458,35459,35462],{},"履歴を任意の位置まで操作するには、",[124,35460,35461],{},"history.go()","メソッドを使用します。引数には進みたい数を指定します。前のページに戻るには負の数を、次のページに進むには正の数を指定します。",[129,35464,35466],{"className":35286,"code":35465,"filename":35288,"language":35289,"meta":135,"style":135},"// 任意の位置に移動(-1で1つ前のページに戻る、1で1つ進む)\nhistory.go(-1);\n",[124,35467,35468,35473],{"__ignoreMap":135},[65,35469,35470],{"class":140,"line":141},[65,35471,35472],{"class":278},"// 任意の位置に移動(-1で1つ前のページに戻る、1で1つ進む)\n",[65,35474,35475,35477,35479,35482,35484,35486,35488,35490],{"class":140,"line":158},[65,35476,35267],{"class":144},[65,35478,834],{"class":154},[65,35480,35481],{"class":200},"go",[65,35483,224],{"class":204},[65,35485,3936],{"class":168},[65,35487,3620],{"class":793},[65,35489,235],{"class":204},[65,35491,155],{"class":154},[11,35493,35495],{"id":35494},"ハッシュ値を取得設定を行う","ハッシュ値を取得・設定を行う",[35274,35497],{":list":35498,"title":35277},"[\"JavaScriptでページ内リンクの挙動を実現させたいとき\",\"ハッシュに状態を保持したいとき\"]",[15,35500,35501,35502,35505],{},"URLの#(ハッシュ)の値を扱うには",[124,35503,35504],{},"location.hash","プロパティを使用します。このプロパティは読み取りと書き込みの両方に対応しています。",[129,35507,35509],{"className":35286,"code":35508,"filename":35288,"language":35289,"meta":135,"style":135},"// 読み取りの場合\nconst hash = location.hash;\nconsole.log(hash); // 例：#section1\n\n// ハッシュを変更するとidの位置に自動でスクロール\nlocation.hash = \"#section1\";\n",[124,35510,35511,35515,35533,35552,35556,35561],{"__ignoreMap":135},[65,35512,35513],{"class":140,"line":141},[65,35514,35296],{"class":278},[65,35516,35517,35519,35522,35524,35526,35528,35531],{"class":140,"line":158},[65,35518,1769],{"class":168},[65,35520,35521],{"class":144}," hash",[65,35523,218],{"class":168},[65,35525,3182],{"class":144},[65,35527,834],{"class":154},[65,35529,35530],{"class":144},"hash",[65,35532,155],{"class":154},[65,35534,35535,35537,35539,35541,35543,35545,35547,35549],{"class":140,"line":165},[65,35536,35301],{"class":144},[65,35538,834],{"class":154},[65,35540,35306],{"class":200},[65,35542,224],{"class":204},[65,35544,35530],{"class":144},[65,35546,235],{"class":204},[65,35548,6005],{"class":154},[65,35550,35551],{"class":278}," // 例：#section1\n",[65,35553,35554],{"class":140,"line":180},[65,35555,162],{"emptyLinePlaceholder":161},[65,35557,35558],{"class":140,"line":194},[65,35559,35560],{"class":278},"// ハッシュを変更するとidの位置に自動でスクロール\n",[65,35562,35563,35565,35567,35569,35571,35573,35576,35578],{"class":140,"line":211},[65,35564,33091],{"class":144},[65,35566,834],{"class":154},[65,35568,35530],{"class":144},[65,35570,218],{"class":168},[65,35572,35344],{"class":154},[65,35574,35575],{"class":302},"#section1",[65,35577,34857],{"class":154},[65,35579,155],{"class":154},[15,35581,35582,35584],{},[124,35583,35504],{},"に新しいハッシュ値を設定すると、対象のid値が付いた要素を確認し、その要素に自動でスクロールします。これにより、ページ内リンクの挙動を実現することができます。",[1177,35586,35587],{"id":35587},"ハッシュの変更を検知する",[15,35589,35590,35591,35593,35594,35597],{},"最後に、URLのハッシュが変更されたときに処理をする方法を紹介します。",[5467,35592],{},"\nURLの#(ハッシュ)が変更されたときに処理をしたい時は、windowオブジェクトの",[124,35595,35596],{},"hashchange","イベントを利用します。#(ハッシュ)が変化するタイミングの例としては次のタイミングがあります。",[89,35599,35600,35603,35606],{},[92,35601,35602],{},"ページ内のリンクをクリックしたとき",[92,35604,35605],{},"ブラウザの戻る・進むボタンを押したとき",[92,35607,35608],{},"ユーザーがURLのハッシュを書き換えたとき",[15,35610,35611],{},"コードの例としては次のようになります。",[129,35613,35615],{"className":35286,"code":35614,"filename":35288,"language":35289,"meta":135,"style":135},"// ハッシュの変更を監視\nwindow.addEventListener(\"hashchange\", () => {\n console.log(\"ハッシュが変更されました\", location.hash);\n});\n",[124,35616,35617,35622,35646,35676],{"__ignoreMap":135},[65,35618,35619],{"class":140,"line":141},[65,35620,35621],{"class":278},"// ハッシュの変更を監視\n",[65,35623,35624,35626,35628,35630,35632,35634,35636,35638,35640,35642,35644],{"class":140,"line":158},[65,35625,4615],{"class":144},[65,35627,834],{"class":154},[65,35629,4698],{"class":200},[65,35631,224],{"class":204},[65,35633,34857],{"class":154},[65,35635,35596],{"class":302},[65,35637,34857],{"class":154},[65,35639,230],{"class":154},[65,35641,1932],{"class":154},[65,35643,1862],{"class":168},[65,35645,418],{"class":154},[65,35647,35648,35651,35653,35655,35657,35659,35662,35664,35666,35668,35670,35672,35674],{"class":140,"line":165},[65,35649,35650],{"class":214}," console",[65,35652,834],{"class":154},[65,35654,35306],{"class":200},[65,35656,224],{"class":204},[65,35658,34857],{"class":154},[65,35660,35661],{"class":302},"ハッシュが変更されました",[65,35663,34857],{"class":154},[65,35665,230],{"class":154},[65,35667,3182],{"class":214},[65,35669,834],{"class":154},[65,35671,35530],{"class":214},[65,35673,235],{"class":204},[65,35675,155],{"class":154},[65,35677,35678,35680,35682],{"class":140,"line":180},[65,35679,2899],{"class":154},[65,35681,235],{"class":204},[65,35683,155],{"class":154},[15,35685,35686,35687,35689],{},"このように",[124,35688,35596],{},"イベントを使うと、ハッシュの変化に応じて画面表示を切り替えたりできます。",[11,35691,5299],{"id":5299},[15,35693,35694,35695,35264,35697,35699],{},"この記事では、JavaScriptの",[124,35696,33091],{},[124,35698,35267],{},"オブジェクトを使うことでページ遷移や履歴操作の方法などを紹介しました。",[15,35701,35702,2765,35704,35706],{},[124,35703,33091],{},[124,35705,35267],{},"を使いこなすと、ページ遷移やスクロール管理、履歴操作が簡単に実現できます。SPAや動的ページを作る上で非常に便利な機能なので、ぜひ覚えておきましょう！",[5313,35708,35709],{},"html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}",{"title":135,"searchDepth":165,"depth":165,"links":35711},[35712,35713,35714,35715,35716,35719],{"id":13,"depth":158,"text":13},{"id":35271,"depth":158,"text":35272},{"id":35357,"depth":158,"text":35357},{"id":35393,"depth":158,"text":35393},{"id":35494,"depth":158,"text":35495,"children":35717},[35718],{"id":35587,"depth":165,"text":35587},{"id":5299,"depth":158,"text":5299},"2025-09-22T00:00:00.000Z","JavaScriptでのブラウザ操作について紹介します。ブラウザ操作の中でもlocationとhistoryの使い方を説明し、ページ遷移や履歴操作の方法を紹介します。","/images/blog/javascript-location-history.jpg",{},"/blog/javascript-location-history",{"title":35254,"description":35721},"blog/javascript-location-history",[35728],"JavaScriptのlocationとhistoryの説明",[35288],"JaUFU90ONdESZQIyTnEPqUL_DoO3F02OKjv77pLT1po",{"id":35732,"title":35733,"body":35734,"date":36807,"description":36808,"draft":5339,"extension":5340,"image":36809,"meta":36810,"navigation":161,"path":36811,"seo":36812,"stem":36813,"summaryList":36814,"summaryText":5348,"tags":36817,"__hash__":36818},"blog/blog/javascript-time-elapsed-countdown.md","JavaScriptのsetIntervalを使用して経過時間とカウントダウンを実装する方法",{"type":8,"value":35735,"toc":36801},[35736,35738,35745,35755,35761,35764,35767,35773,35801,35805,36233,36251,36259,36309,36312,36314,36319,36353,36357,36788,36790,36796,36798],[11,35737,13],{"id":13},[15,35739,35740,35741,35744],{},"Webサイトで「公開から○日が経過しました」や「セール終了まで○日」などの表示をみたことはありますか？これらの表示はJavaScriptの",[124,35742,35743],{},"Date","オブジェクトを使って簡単に実装することができます。",[15,35746,35747,35748,2765,35751,35754],{},"この記事では、初心者向けに",[34759,35749,35750],{},"経過時間の計算方法",[34759,35752,35753],{},"カウントダウンの作り方","をサンプルコードとCodePenのデモ付きで解説します。",[15,35756,35757,35758,35760],{},"JavaScriptの",[124,35759,35743],{},"オブジェクトを使用した、日付や時間の扱い方は以前紹介しているのでこちらも参考にしてください。",[19,35762],{":items":35763},"[{\"title\":\"JavaScriptのnew Dateで日付や時間の扱い方を紹介\",\"link\":\"/blog/javascript-new-date\",\"image\":\"/images/blog/javascript-new-date.jpg\",\"description\":\"JavaScriptで「今日の日付は何日？」や「何時何分？」などの時間を扱いたいときに使うのがDateオブジェクトです。この記事では、JavaScriptのDateオブジェクトの使い方を紹介します。\"}]",[11,35765,35766],{"id":35766},"経過時間を調べる方法",[15,35768,35769,35770,35772],{},"ボタンを押してからの経過時間を表示するデモを作成します。",[5467,35771],{},"\n実装の考え方は次の通りになります。",[35774,35775,35776,35785,35795],"ol",{},[92,35777,35778,35779,35781,35782,35784],{},"開始時間を保存する",[5467,35780],{},"\nボタンを押したときに「基準となる時刻」を",[124,35783,35743],{},"で記録する。",[92,35786,35787,35788,35790,35791,35794],{},"現在時刻と比較する",[5467,35789],{},"\nボタンを押したときに",[124,35792,35793],{},"new Date()","で現在時刻を取得し、開始時刻との差分を計算する。",[92,35796,35797,35798,35800],{},"差分を整形して表示する",[5467,35799],{},"\n差分はミリ秒になるので、この差を「秒」に変換して画面に表示します。",[34815,35802],{"id":35803,"title":35804},"PwPBMjX","JavaScript Time Elapsed",[129,35806,35808],{"className":35286,"code":35807,"filename":35288,"language":35289,"meta":135,"style":135},"const startBtn = document.querySelector('.start');\nconst resetBtn = document.querySelector('.reset');\nconst result = document.querySelector('.result');\n\nlet timerId = null;\nlet startTime = null;\n\nconst startTimer = () => {\n if (timerId) return; // 連打防止\n\n startTime = new Date();\n\n timerId = setInterval(() => {\n const currentTime = new Date();\n const diff = currentTime - startTime;\n const sec = Math.floor(diff / 1000);\n result.textContent = `${sec}秒経過`;\n })\n};\n\nconst resetTimer = () => {\n if (!timerId) return;\n clearInterval(timerId);\n timerId = null;\n result.textContent = '';\n}\n\nstartBtn.addEventListener('click', startTimer);\nresetBtn.addEventListener('click', resetTimer);\n",[124,35809,35810,35839,35867,35895,35899,35912,35925,35929,35944,35961,35965,35981,35985,36003,36020,36037,36065,36092,36098,36102,36106,36121,36135,36148,36158,36174,36178,36182,36208],{"__ignoreMap":135},[65,35811,35812,35814,35817,35819,35821,35823,35826,35828,35830,35833,35835,35837],{"class":140,"line":141},[65,35813,1769],{"class":168},[65,35815,35816],{"class":144}," startBtn",[65,35818,218],{"class":168},[65,35820,3413],{"class":144},[65,35822,834],{"class":154},[65,35824,35825],{"class":200},"querySelector",[65,35827,224],{"class":204},[65,35829,306],{"class":154},[65,35831,35832],{"class":302},".start",[65,35834,306],{"class":154},[65,35836,235],{"class":204},[65,35838,155],{"class":154},[65,35840,35841,35843,35846,35848,35850,35852,35854,35856,35858,35861,35863,35865],{"class":140,"line":158},[65,35842,1769],{"class":168},[65,35844,35845],{"class":144}," resetBtn",[65,35847,218],{"class":168},[65,35849,3413],{"class":144},[65,35851,834],{"class":154},[65,35853,35825],{"class":200},[65,35855,224],{"class":204},[65,35857,306],{"class":154},[65,35859,35860],{"class":302},".reset",[65,35862,306],{"class":154},[65,35864,235],{"class":204},[65,35866,155],{"class":154},[65,35868,35869,35871,35874,35876,35878,35880,35882,35884,35886,35889,35891,35893],{"class":140,"line":165},[65,35870,1769],{"class":168},[65,35872,35873],{"class":144}," result",[65,35875,218],{"class":168},[65,35877,3413],{"class":144},[65,35879,834],{"class":154},[65,35881,35825],{"class":200},[65,35883,224],{"class":204},[65,35885,306],{"class":154},[65,35887,35888],{"class":302},".result",[65,35890,306],{"class":154},[65,35892,235],{"class":204},[65,35894,155],{"class":154},[65,35896,35897],{"class":140,"line":180},[65,35898,162],{"emptyLinePlaceholder":161},[65,35900,35901,35903,35906,35908,35910],{"class":140,"line":194},[65,35902,5995],{"class":168},[65,35904,35905],{"class":144}," timerId",[65,35907,218],{"class":168},[65,35909,20550],{"class":793},[65,35911,155],{"class":154},[65,35913,35914,35916,35919,35921,35923],{"class":140,"line":211},[65,35915,5995],{"class":168},[65,35917,35918],{"class":144}," startTime",[65,35920,218],{"class":168},[65,35922,20550],{"class":793},[65,35924,155],{"class":154},[65,35926,35927],{"class":140,"line":240},[65,35928,162],{"emptyLinePlaceholder":161},[65,35930,35931,35933,35936,35938,35940,35942],{"class":140,"line":391},[65,35932,1769],{"class":168},[65,35934,35935],{"class":200}," startTimer",[65,35937,218],{"class":168},[65,35939,1932],{"class":154},[65,35941,1862],{"class":168},[65,35943,418],{"class":154},[65,35945,35946,35948,35950,35953,35955,35958],{"class":140,"line":401},[65,35947,2064],{"class":154},[65,35949,1696],{"class":204},[65,35951,35952],{"class":214},"timerId",[65,35954,1713],{"class":204},[65,35956,35957],{"class":154},"return;",[65,35959,35960],{"class":278}," // 連打防止\n",[65,35962,35963],{"class":140,"line":406},[65,35964,162],{"emptyLinePlaceholder":161},[65,35966,35967,35970,35972,35974,35977,35979],{"class":140,"line":421},[65,35968,35969],{"class":214}," startTime",[65,35971,218],{"class":168},[65,35973,1776],{"class":168},[65,35975,35976],{"class":200}," Date",[65,35978,1269],{"class":204},[65,35980,155],{"class":154},[65,35982,35983],{"class":140,"line":435},[65,35984,162],{"emptyLinePlaceholder":161},[65,35986,35987,35990,35992,35995,35997,35999,36001],{"class":140,"line":447},[65,35988,35989],{"class":214}," timerId",[65,35991,218],{"class":168},[65,35993,35994],{"class":200}," setInterval",[65,35996,224],{"class":204},[65,35998,1269],{"class":154},[65,36000,1862],{"class":168},[65,36002,418],{"class":154},[65,36004,36005,36007,36010,36012,36014,36016,36018],{"class":140,"line":459},[65,36006,848],{"class":168},[65,36008,36009],{"class":214}," currentTime",[65,36011,218],{"class":168},[65,36013,1776],{"class":168},[65,36015,35976],{"class":200},[65,36017,1269],{"class":204},[65,36019,155],{"class":154},[65,36021,36022,36024,36027,36029,36031,36033,36035],{"class":140,"line":471},[65,36023,848],{"class":168},[65,36025,36026],{"class":214}," diff",[65,36028,218],{"class":168},[65,36030,36009],{"class":214},[65,36032,4399],{"class":168},[65,36034,35918],{"class":214},[65,36036,155],{"class":154},[65,36038,36039,36041,36044,36046,36048,36050,36052,36054,36057,36059,36061,36063],{"class":140,"line":63},[65,36040,848],{"class":168},[65,36042,36043],{"class":214}," sec",[65,36045,218],{"class":168},[65,36047,4356],{"class":214},[65,36049,834],{"class":154},[65,36051,11971],{"class":200},[65,36053,224],{"class":204},[65,36055,36056],{"class":214},"diff",[65,36058,4349],{"class":168},[65,36060,35042],{"class":793},[65,36062,235],{"class":204},[65,36064,155],{"class":154},[65,36066,36067,36070,36072,36075,36077,36080,36083,36085,36088,36090],{"class":140,"line":495},[65,36068,36069],{"class":214}," result",[65,36071,834],{"class":154},[65,36073,36074],{"class":214},"textContent",[65,36076,218],{"class":168},[65,36078,36079],{"class":154}," `${",[65,36081,36082],{"class":214},"sec",[65,36084,2899],{"class":154},[65,36086,36087],{"class":302},"秒経過",[65,36089,30698],{"class":154},[65,36091,155],{"class":154},[65,36093,36094,36096],{"class":140,"line":507},[65,36095,1977],{"class":154},[65,36097,12359],{"class":204},[65,36099,36100],{"class":140,"line":519},[65,36101,4731],{"class":154},[65,36103,36104],{"class":140,"line":531},[65,36105,162],{"emptyLinePlaceholder":161},[65,36107,36108,36110,36113,36115,36117,36119],{"class":140,"line":543},[65,36109,1769],{"class":168},[65,36111,36112],{"class":200}," resetTimer",[65,36114,218],{"class":168},[65,36116,1932],{"class":154},[65,36118,1862],{"class":168},[65,36120,418],{"class":154},[65,36122,36123,36125,36127,36129,36131,36133],{"class":140,"line":555},[65,36124,2064],{"class":154},[65,36126,1696],{"class":204},[65,36128,2264],{"class":168},[65,36130,35952],{"class":214},[65,36132,1713],{"class":204},[65,36134,2287],{"class":154},[65,36136,36137,36140,36142,36144,36146],{"class":140,"line":567},[65,36138,36139],{"class":200}," clearInterval",[65,36141,224],{"class":204},[65,36143,35952],{"class":214},[65,36145,235],{"class":204},[65,36147,155],{"class":154},[65,36149,36150,36152,36154,36156],{"class":140,"line":3757},[65,36151,35989],{"class":214},[65,36153,218],{"class":168},[65,36155,20550],{"class":793},[65,36157,155],{"class":154},[65,36159,36160,36163,36165,36167,36169,36172],{"class":140,"line":3787},[65,36161,36162],{"class":214}," result",[65,36164,834],{"class":154},[65,36166,36074],{"class":214},[65,36168,218],{"class":168},[65,36170,36171],{"class":154}," ''",[65,36173,155],{"class":154},[65,36175,36176],{"class":140,"line":3792},[65,36177,243],{"class":154},[65,36179,36180],{"class":140,"line":3814},[65,36181,162],{"emptyLinePlaceholder":161},[65,36183,36184,36187,36189,36191,36193,36195,36198,36200,36202,36204,36206],{"class":140,"line":3823},[65,36185,36186],{"class":144},"startBtn",[65,36188,834],{"class":154},[65,36190,4698],{"class":200},[65,36192,224],{"class":204},[65,36194,306],{"class":154},[65,36196,36197],{"class":302},"click",[65,36199,306],{"class":154},[65,36201,230],{"class":154},[65,36203,35935],{"class":144},[65,36205,235],{"class":204},[65,36207,155],{"class":154},[65,36209,36210,36213,36215,36217,36219,36221,36223,36225,36227,36229,36231],{"class":140,"line":3831},[65,36211,36212],{"class":144},"resetBtn",[65,36214,834],{"class":154},[65,36216,4698],{"class":200},[65,36218,224],{"class":204},[65,36220,306],{"class":154},[65,36222,36197],{"class":302},[65,36224,306],{"class":154},[65,36226,230],{"class":154},[65,36228,36112],{"class":144},[65,36230,235],{"class":204},[65,36232,155],{"class":154},[15,36234,36235,36236,36238,36239,36242,36243,36246,36247,36250],{},"Startボタンを押した時に、",[124,36237,35793],{},"で開始時刻を取得し、その時刻を",[124,36240,36241],{},"startTime","に保存します。その後、",[124,36244,36245],{},"setInterval","で開始時刻と",[124,36248,36249],{},"currentTime","の差分を計算しすることで、経過時間が得られます。",[15,36252,36253,36255,36256,36258],{},[124,36254,35793],{},"で取得する時刻は、ミリ秒になります。これを秒数で表示したいので、1000で割って",[124,36257,11971],{},"で小数点を切り捨てます。",[129,36260,36262],{"className":35286,"code":36261,"filename":35288,"language":35289,"meta":135,"style":135},"const diff = currentTime - startTime;\nconst sec = Math.floor(diff / 1000); // 秒数に変換\n",[124,36263,36264,36280],{"__ignoreMap":135},[65,36265,36266,36268,36270,36272,36274,36276,36278],{"class":140,"line":141},[65,36267,1769],{"class":168},[65,36269,36026],{"class":144},[65,36271,218],{"class":168},[65,36273,36009],{"class":144},[65,36275,4399],{"class":168},[65,36277,35918],{"class":144},[65,36279,155],{"class":154},[65,36281,36282,36284,36286,36288,36290,36292,36294,36296,36298,36300,36302,36304,36306],{"class":140,"line":158},[65,36283,1769],{"class":168},[65,36285,36043],{"class":144},[65,36287,218],{"class":168},[65,36289,4356],{"class":144},[65,36291,834],{"class":154},[65,36293,11971],{"class":200},[65,36295,224],{"class":204},[65,36297,36056],{"class":144},[65,36299,4349],{"class":168},[65,36301,35042],{"class":793},[65,36303,235],{"class":204},[65,36305,6005],{"class":154},[65,36307,36308],{"class":278}," // 秒数に変換\n",[15,36310,36311],{},"このように、経過時間を計算することで、ボタンを押した時からの経過時間を表示することができます。",[11,36313,35753],{"id":35753},[15,36315,36316,36317,35772],{},"次は、ボタンを押したらカウントダウンするデモになります。",[5467,36318],{},[35774,36320,36321,36331,36342],{},[92,36322,36323,36324,36326,36327,36330],{},"カウントダウンの残り時間の初期値を決める",[5467,36325],{},"\n残り10秒からカウントダウンするなら、",[124,36328,36329],{},"let remaining = 10;","とする",[92,36332,36333,36335,36336,36338,36341],{},[124,36334,36245],{},"で1秒ごと減らす",[5467,36337],{},[124,36339,36340],{},"remaining","を1秒ごとに減らして、残り時間を表示する",[92,36343,36344,36345,36347,36349,36350,36352],{},"残り時間が0になったら終了",[5467,36346],{},[124,36348,36340],{},"が0になったら、カウントダウンを終了する",[5467,36351],{},"\nメッセージ(「終了！」)を表示する",[34815,36354],{"id":36355,"title":36356},"pvjxYpV","JavaScript CountDown Time",[129,36358,36360],{"className":35286,"code":36359,"filename":35288,"language":35289,"meta":135,"style":135},"const startBtn = document.querySelector('.start');\nconst resetBtn = document.querySelector('.reset');\nconst result = document.querySelector('.result');\n\nlet timerId = null;\nlet remaining = 10; // 初期値(秒)\n\nconst startTimer = () => {\n if (timerId) return; // 連打防止\n\n timerId = setInterval(() => {\n result.textContent = `残り${remaining}秒`;\n\n if (remaining \u003C= 0) {\n clearInterval(timerId);\n timerId = null;\n result.textContent = '終了！';\n return;\n }\n\n remaining--;\n }, 1000);\n};\n\nconst resetTimer = () => {\n clearInterval(timerId);\n timerId = null;\n remaining = 10;\n result.textContent = `残り${remaining}秒`;\n}\n\nstartBtn.addEventListener('click', startTimer);\nresetBtn.addEventListener('click', resetTimer);\n",[124,36361,36362,36388,36414,36440,36444,36456,36472,36476,36490,36504,36508,36524,36553,36557,36573,36586,36597,36617,36622,36626,36630,36640,36651,36655,36659,36673,36685,36695,36706,36732,36736,36740,36764],{"__ignoreMap":135},[65,36363,36364,36366,36368,36370,36372,36374,36376,36378,36380,36382,36384,36386],{"class":140,"line":141},[65,36365,1769],{"class":168},[65,36367,35816],{"class":144},[65,36369,218],{"class":168},[65,36371,3413],{"class":144},[65,36373,834],{"class":154},[65,36375,35825],{"class":200},[65,36377,224],{"class":204},[65,36379,306],{"class":154},[65,36381,35832],{"class":302},[65,36383,306],{"class":154},[65,36385,235],{"class":204},[65,36387,155],{"class":154},[65,36389,36390,36392,36394,36396,36398,36400,36402,36404,36406,36408,36410,36412],{"class":140,"line":158},[65,36391,1769],{"class":168},[65,36393,35845],{"class":144},[65,36395,218],{"class":168},[65,36397,3413],{"class":144},[65,36399,834],{"class":154},[65,36401,35825],{"class":200},[65,36403,224],{"class":204},[65,36405,306],{"class":154},[65,36407,35860],{"class":302},[65,36409,306],{"class":154},[65,36411,235],{"class":204},[65,36413,155],{"class":154},[65,36415,36416,36418,36420,36422,36424,36426,36428,36430,36432,36434,36436,36438],{"class":140,"line":165},[65,36417,1769],{"class":168},[65,36419,35873],{"class":144},[65,36421,218],{"class":168},[65,36423,3413],{"class":144},[65,36425,834],{"class":154},[65,36427,35825],{"class":200},[65,36429,224],{"class":204},[65,36431,306],{"class":154},[65,36433,35888],{"class":302},[65,36435,306],{"class":154},[65,36437,235],{"class":204},[65,36439,155],{"class":154},[65,36441,36442],{"class":140,"line":180},[65,36443,162],{"emptyLinePlaceholder":161},[65,36445,36446,36448,36450,36452,36454],{"class":140,"line":194},[65,36447,5995],{"class":168},[65,36449,35905],{"class":144},[65,36451,218],{"class":168},[65,36453,20550],{"class":793},[65,36455,155],{"class":154},[65,36457,36458,36460,36463,36465,36467,36469],{"class":140,"line":211},[65,36459,5995],{"class":168},[65,36461,36462],{"class":144}," remaining",[65,36464,218],{"class":168},[65,36466,5525],{"class":793},[65,36468,6005],{"class":154},[65,36470,36471],{"class":278}," // 初期値(秒)\n",[65,36473,36474],{"class":140,"line":240},[65,36475,162],{"emptyLinePlaceholder":161},[65,36477,36478,36480,36482,36484,36486,36488],{"class":140,"line":391},[65,36479,1769],{"class":168},[65,36481,35935],{"class":200},[65,36483,218],{"class":168},[65,36485,1932],{"class":154},[65,36487,1862],{"class":168},[65,36489,418],{"class":154},[65,36491,36492,36494,36496,36498,36500,36502],{"class":140,"line":401},[65,36493,2064],{"class":154},[65,36495,1696],{"class":204},[65,36497,35952],{"class":214},[65,36499,1713],{"class":204},[65,36501,35957],{"class":154},[65,36503,35960],{"class":278},[65,36505,36506],{"class":140,"line":406},[65,36507,162],{"emptyLinePlaceholder":161},[65,36509,36510,36512,36514,36516,36518,36520,36522],{"class":140,"line":421},[65,36511,35989],{"class":214},[65,36513,218],{"class":168},[65,36515,35994],{"class":200},[65,36517,224],{"class":204},[65,36519,1269],{"class":154},[65,36521,1862],{"class":168},[65,36523,418],{"class":154},[65,36525,36526,36528,36530,36532,36534,36537,36540,36542,36544,36546,36549,36551],{"class":140,"line":435},[65,36527,36069],{"class":214},[65,36529,834],{"class":154},[65,36531,36074],{"class":214},[65,36533,218],{"class":168},[65,36535,36536],{"class":154}," `",[65,36538,36539],{"class":302},"残り",[65,36541,30704],{"class":154},[65,36543,36340],{"class":214},[65,36545,2899],{"class":154},[65,36547,36548],{"class":302},"秒",[65,36550,30698],{"class":154},[65,36552,155],{"class":154},[65,36554,36555],{"class":140,"line":447},[65,36556,162],{"emptyLinePlaceholder":161},[65,36558,36559,36561,36563,36565,36567,36569,36571],{"class":140,"line":459},[65,36560,3105],{"class":154},[65,36562,1696],{"class":204},[65,36564,36340],{"class":214},[65,36566,6010],{"class":168},[65,36568,1142],{"class":793},[65,36570,1713],{"class":204},[65,36572,208],{"class":154},[65,36574,36575,36578,36580,36582,36584],{"class":140,"line":471},[65,36576,36577],{"class":200}," clearInterval",[65,36579,224],{"class":204},[65,36581,35952],{"class":214},[65,36583,235],{"class":204},[65,36585,155],{"class":154},[65,36587,36588,36591,36593,36595],{"class":140,"line":63},[65,36589,36590],{"class":214}," timerId",[65,36592,218],{"class":168},[65,36594,20550],{"class":793},[65,36596,155],{"class":154},[65,36598,36599,36602,36604,36606,36608,36610,36613,36615],{"class":140,"line":495},[65,36600,36601],{"class":214}," result",[65,36603,834],{"class":154},[65,36605,36074],{"class":214},[65,36607,218],{"class":168},[65,36609,299],{"class":154},[65,36611,36612],{"class":302},"終了！",[65,36614,306],{"class":154},[65,36616,155],{"class":154},[65,36618,36619],{"class":140,"line":507},[65,36620,36621],{"class":154}," return;\n",[65,36623,36624],{"class":140,"line":519},[65,36625,3204],{"class":154},[65,36627,36628],{"class":140,"line":531},[65,36629,162],{"emptyLinePlaceholder":161},[65,36631,36632,36635,36638],{"class":140,"line":543},[65,36633,36634],{"class":214}," remaining",[65,36636,36637],{"class":168},"--",[65,36639,155],{"class":154},[65,36641,36642,36645,36647,36649],{"class":140,"line":555},[65,36643,36644],{"class":154}," },",[65,36646,35042],{"class":793},[65,36648,235],{"class":204},[65,36650,155],{"class":154},[65,36652,36653],{"class":140,"line":567},[65,36654,4731],{"class":154},[65,36656,36657],{"class":140,"line":3757},[65,36658,162],{"emptyLinePlaceholder":161},[65,36660,36661,36663,36665,36667,36669,36671],{"class":140,"line":3787},[65,36662,1769],{"class":168},[65,36664,36112],{"class":200},[65,36666,218],{"class":168},[65,36668,1932],{"class":154},[65,36670,1862],{"class":168},[65,36672,418],{"class":154},[65,36674,36675,36677,36679,36681,36683],{"class":140,"line":3792},[65,36676,36139],{"class":200},[65,36678,224],{"class":204},[65,36680,35952],{"class":214},[65,36682,235],{"class":204},[65,36684,155],{"class":154},[65,36686,36687,36689,36691,36693],{"class":140,"line":3814},[65,36688,35989],{"class":214},[65,36690,218],{"class":168},[65,36692,20550],{"class":793},[65,36694,155],{"class":154},[65,36696,36697,36700,36702,36704],{"class":140,"line":3823},[65,36698,36699],{"class":214}," remaining",[65,36701,218],{"class":168},[65,36703,5525],{"class":793},[65,36705,155],{"class":154},[65,36707,36708,36710,36712,36714,36716,36718,36720,36722,36724,36726,36728,36730],{"class":140,"line":3831},[65,36709,36162],{"class":214},[65,36711,834],{"class":154},[65,36713,36074],{"class":214},[65,36715,218],{"class":168},[65,36717,36536],{"class":154},[65,36719,36539],{"class":302},[65,36721,30704],{"class":154},[65,36723,36340],{"class":214},[65,36725,2899],{"class":154},[65,36727,36548],{"class":302},[65,36729,30698],{"class":154},[65,36731,155],{"class":154},[65,36733,36734],{"class":140,"line":3841},[65,36735,243],{"class":154},[65,36737,36738],{"class":140,"line":3861},[65,36739,162],{"emptyLinePlaceholder":161},[65,36741,36742,36744,36746,36748,36750,36752,36754,36756,36758,36760,36762],{"class":140,"line":3867},[65,36743,36186],{"class":144},[65,36745,834],{"class":154},[65,36747,4698],{"class":200},[65,36749,224],{"class":204},[65,36751,306],{"class":154},[65,36753,36197],{"class":302},[65,36755,306],{"class":154},[65,36757,230],{"class":154},[65,36759,35935],{"class":144},[65,36761,235],{"class":204},[65,36763,155],{"class":154},[65,36765,36766,36768,36770,36772,36774,36776,36778,36780,36782,36784,36786],{"class":140,"line":3876},[65,36767,36212],{"class":144},[65,36769,834],{"class":154},[65,36771,4698],{"class":200},[65,36773,224],{"class":204},[65,36775,306],{"class":154},[65,36777,36197],{"class":302},[65,36779,306],{"class":154},[65,36781,230],{"class":154},[65,36783,36112],{"class":144},[65,36785,235],{"class":204},[65,36787,155],{"class":154},[11,36789,5299],{"id":5299},[15,36791,36792,36793,36795],{},"この記事では、JavaScriptで時間経過を表示する方法と、カウントダウンを実装する方法を解説しました！実装の考え方は、",[124,36794,36245],{},"で1秒ごとに時間を更新して表示させました。",[15,36797,35211],{},[5313,36799,36800],{},"html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":135,"searchDepth":165,"depth":165,"links":36802},[36803,36804,36805,36806],{"id":13,"depth":158,"text":13},{"id":35766,"depth":158,"text":35766},{"id":35753,"depth":158,"text":35753},{"id":5299,"depth":158,"text":5299},"2025-09-03T00:00:00.000Z","JavaScriptのsetIntervalとDateオブジェクトを使って経過時間を調べる方法とカウントダウンを実装する方法を紹介します。","/images/blog/javascript-time-elapsed-countdown.jpg",{},"/blog/javascript-time-elapsed-countdown",{"title":35733,"description":36808},"blog/javascript-time-elapsed-countdown",[36815,36816],"JavaScriptで経過時間を調べる方法","カウントダウンを実装する方法",[35288],"Snj1thIVhM3AIPFhgSo8M-HQTbZeAPpTysM4tyK1NpU",{"id":36820,"title":36821,"body":36822,"date":37623,"description":37624,"draft":5339,"extension":5340,"image":37625,"meta":37626,"navigation":161,"path":37627,"seo":37628,"stem":37629,"summaryList":37630,"summaryText":5348,"tags":37633,"__hash__":37634},"blog/blog/bread-text-overflow-ellipsis.md","パンくずリストで長いテキストを「...」で省略する方法",{"type":8,"value":36823,"toc":37613},[36824,36826,36833,36836,36839,36842,36853,36859,36865,36871,36874,36876,36879,37418,37421,37424,37426,37448,37459,37586,37592,37595,37601,37605,37607,37610],[11,36825,13],{"id":13},[15,36827,36828,36829,36832],{},"前回の記事では、CSSの",[124,36830,36831],{},"text-overflow: ellipsis","を使って長いテキストを省略する方法を紹介しました。",[19,36834],{":items":36835},"[{\"title\":\"CSSで長いテキストを「...」で省略できるtext-overflow: ellipsisの紹介\",\"link\":\"/blog/css-text-overflow-ellipsis\",\"image\":\"/images/blog/css-text-overflow-ellipsis.jpg\",\"description\":\"JavaScriptで「今日の日付は何日？」や「何時何分？」などの時間を扱いたいときに使うのがDateオブジェクトです。この記事では、JavaScriptのDateオブジェクトの使い方を紹介します。\"}]",[15,36837,36838],{},"しかし、パンくずリストで使用する場合にハマりポイントがあるので今回はパンくずリストにも正しく適用されるようにする方法を解説します。",[11,36840,36841],{"id":36841},"パンくずリストでのハマりポイント",[15,36843,36844,36846,36847,10345,36849,36852],{},[124,36845,36831],{},"を使用して、正しく長いテキストが省略されるようにするには、要素に",[124,36848,735],{},[124,36850,36851],{},"max-width","を設定して幅を決める必要があります。",[15,36854,36855,36856,36858],{},"ですが、パンくずリストでは通常動的にテキストが入り、",[124,36857,735],{},"などで幅を決めることができません。",[15,36860,36861],{},[57,36862],{"alt":36863,"src":36864},"タイトル部分の幅は事前に設定できない","https://res.cloudinary.com/dy8ftemi0/image/upload/v1756112900/bread-text-overflow-ellipsis-01_cdzjem.jpg",[15,36866,36867,36868,36870],{},"そこで、この記事では、幅を決めないでも",[124,36869,36831],{},"が適用できる方法を解説します。",[11,36872,36873],{"id":36873},"パンくずリストでの実装方法",[1177,36875,34822],{"id":34821},[15,36877,36878],{},"まずは、HTMLの構造を示します。",[129,36880,36882],{"className":34828,"code":36881,"filename":34822,"language":34821,"meta":135,"style":135},"\u003Cnav class=\"breadcrumb\" aria-label=\"breadcrumb\">\n \u003Col itemscope itemtype=\"https://schema.org/BreadcrumbList\" class=\"breadcrumb__list\">\n \u003Cli\n itemprop=\"itemListElement\"\n itemscope\n itemtype=\"https://schema.org/ListItem\"\n class=\"breadcrumb__item\"\n >\n \u003Ca itemprop=\"item\" href=\"/\" class=\"breadcrumb__link\">\n \u003Cspan itemprop=\"name\">HOME\u003C/span>\n \u003C/a>\n \u003Cmeta itemprop=\"position\" content=\"1\" />\n \u003C/li>\n \u003Cli\n itemprop=\"itemListElement\"\n itemscope\n itemtype=\"https://schema.org/ListItem\"\n class=\"breadcrumb__item\"\n >\n \u003Ca itemprop=\"item\" href=\"/components\" class=\"breadcrumb__link\">\n \u003Cspan itemprop=\"name\">Components\u003C/span>\n \u003C/a>\n \u003Cmeta itemprop=\"position\" content=\"2\" />\n \u003C/li>\n \u003Cli\n itemprop=\"itemListElement\"\n itemscope\n itemtype=\"https://schema.org/ListItem\"\n class=\"breadcrumb__item\"\n >\n \u003Cspan itemprop=\"name\">長いテキストが入ります長いテキストが入ります長いテキストが入ります長いテキストが入ります長いテキストが入ります\u003C/span>\n \u003Cmeta itemprop=\"position\" content=\"3\" />\n \u003C/li>\n \u003C/ol>\n\u003C/nav>\n",[124,36883,36884,36915,36949,36957,36972,36977,36991,37005,37010,37052,37080,37089,37120,37129,37135,37147,37151,37163,37175,37179,37218,37245,37253,37281,37289,37295,37307,37311,37323,37335,37339,37366,37394,37402,37410],{"__ignoreMap":135},[65,36885,36886,36888,36891,36893,36895,36897,36900,36902,36905,36907,36909,36911,36913],{"class":140,"line":141},[65,36887,1830],{"class":154},[65,36889,36890],{"class":214},"nav",[65,36892,774],{"class":34851},[65,36894,6252],{"class":154},[65,36896,34857],{"class":154},[65,36898,36899],{"class":302},"breadcrumb",[65,36901,34857],{"class":154},[65,36903,36904],{"class":34851}," aria-label",[65,36906,6252],{"class":154},[65,36908,34857],{"class":154},[65,36910,36899],{"class":302},[65,36912,34857],{"class":154},[65,36914,34841],{"class":154},[65,36916,36917,36919,36921,36924,36927,36929,36931,36934,36936,36938,36940,36942,36945,36947],{"class":140,"line":158},[65,36918,34846],{"class":154},[65,36920,35774],{"class":214},[65,36922,36923],{"class":34851}," itemscope",[65,36925,36926],{"class":34851}," itemtype",[65,36928,6252],{"class":154},[65,36930,34857],{"class":154},[65,36932,36933],{"class":302},"https://schema.org/BreadcrumbList",[65,36935,34857],{"class":154},[65,36937,774],{"class":34851},[65,36939,6252],{"class":154},[65,36941,34857],{"class":154},[65,36943,36944],{"class":302},"breadcrumb__list",[65,36946,34857],{"class":154},[65,36948,34841],{"class":154},[65,36950,36951,36954],{"class":140,"line":165},[65,36952,36953],{"class":154}," \u003C",[65,36955,36956],{"class":214},"li\n",[65,36958,36959,36962,36964,36966,36969],{"class":140,"line":180},[65,36960,36961],{"class":34851}," itemprop",[65,36963,6252],{"class":154},[65,36965,34857],{"class":154},[65,36967,36968],{"class":302},"itemListElement",[65,36970,36971],{"class":154},"\"\n",[65,36973,36974],{"class":140,"line":194},[65,36975,36976],{"class":34851}," itemscope\n",[65,36978,36979,36982,36984,36986,36989],{"class":140,"line":211},[65,36980,36981],{"class":34851}," itemtype",[65,36983,6252],{"class":154},[65,36985,34857],{"class":154},[65,36987,36988],{"class":302},"https://schema.org/ListItem",[65,36990,36971],{"class":154},[65,36992,36993,36996,36998,37000,37003],{"class":140,"line":240},[65,36994,36995],{"class":34851}," class",[65,36997,6252],{"class":154},[65,36999,34857],{"class":154},[65,37001,37002],{"class":302},"breadcrumb__item",[65,37004,36971],{"class":154},[65,37006,37007],{"class":140,"line":391},[65,37008,37009],{"class":154}," >\n",[65,37011,37012,37015,37017,37020,37022,37024,37027,37029,37031,37033,37035,37037,37039,37041,37043,37045,37048,37050],{"class":140,"line":401},[65,37013,37014],{"class":154}," \u003C",[65,37016,29],{"class":214},[65,37018,37019],{"class":34851}," itemprop",[65,37021,6252],{"class":154},[65,37023,34857],{"class":154},[65,37025,37026],{"class":302},"item",[65,37028,34857],{"class":154},[65,37030,34852],{"class":34851},[65,37032,6252],{"class":154},[65,37034,34857],{"class":154},[65,37036,9199],{"class":302},[65,37038,34857],{"class":154},[65,37040,774],{"class":34851},[65,37042,6252],{"class":154},[65,37044,34857],{"class":154},[65,37046,37047],{"class":302},"breadcrumb__link",[65,37049,34857],{"class":154},[65,37051,34841],{"class":154},[65,37053,37054,37057,37059,37061,37063,37065,37067,37069,37071,37074,37076,37078],{"class":140,"line":406},[65,37055,37056],{"class":154}," \u003C",[65,37058,65],{"class":214},[65,37060,37019],{"class":34851},[65,37062,6252],{"class":154},[65,37064,34857],{"class":154},[65,37066,29191],{"class":302},[65,37068,34857],{"class":154},[65,37070,1836],{"class":154},[65,37072,37073],{"class":204},"HOME",[65,37075,34881],{"class":154},[65,37077,65],{"class":214},[65,37079,34841],{"class":154},[65,37081,37082,37085,37087],{"class":140,"line":421},[65,37083,37084],{"class":154}," \u003C/",[65,37086,29],{"class":214},[65,37088,34841],{"class":154},[65,37090,37091,37093,37096,37098,37100,37102,37104,37106,37109,37111,37113,37115,37117],{"class":140,"line":435},[65,37092,37014],{"class":154},[65,37094,37095],{"class":214},"meta",[65,37097,37019],{"class":34851},[65,37099,6252],{"class":154},[65,37101,34857],{"class":154},[65,37103,3610],{"class":302},[65,37105,34857],{"class":154},[65,37107,37108],{"class":34851}," content",[65,37110,6252],{"class":154},[65,37112,34857],{"class":154},[65,37114,3620],{"class":302},[65,37116,34857],{"class":154},[65,37118,37119],{"class":154}," />\n",[65,37121,37122,37125,37127],{"class":140,"line":447},[65,37123,37124],{"class":154}," \u003C/",[65,37126,92],{"class":214},[65,37128,34841],{"class":154},[65,37130,37131,37133],{"class":140,"line":459},[65,37132,36953],{"class":154},[65,37134,36956],{"class":214},[65,37136,37137,37139,37141,37143,37145],{"class":140,"line":471},[65,37138,36961],{"class":34851},[65,37140,6252],{"class":154},[65,37142,34857],{"class":154},[65,37144,36968],{"class":302},[65,37146,36971],{"class":154},[65,37148,37149],{"class":140,"line":63},[65,37150,36976],{"class":34851},[65,37152,37153,37155,37157,37159,37161],{"class":140,"line":495},[65,37154,36981],{"class":34851},[65,37156,6252],{"class":154},[65,37158,34857],{"class":154},[65,37160,36988],{"class":302},[65,37162,36971],{"class":154},[65,37164,37165,37167,37169,37171,37173],{"class":140,"line":507},[65,37166,36995],{"class":34851},[65,37168,6252],{"class":154},[65,37170,34857],{"class":154},[65,37172,37002],{"class":302},[65,37174,36971],{"class":154},[65,37176,37177],{"class":140,"line":519},[65,37178,37009],{"class":154},[65,37180,37181,37183,37185,37187,37189,37191,37193,37195,37197,37199,37201,37204,37206,37208,37210,37212,37214,37216],{"class":140,"line":531},[65,37182,37014],{"class":154},[65,37184,29],{"class":214},[65,37186,37019],{"class":34851},[65,37188,6252],{"class":154},[65,37190,34857],{"class":154},[65,37192,37026],{"class":302},[65,37194,34857],{"class":154},[65,37196,34852],{"class":34851},[65,37198,6252],{"class":154},[65,37200,34857],{"class":154},[65,37202,37203],{"class":302},"/components",[65,37205,34857],{"class":154},[65,37207,774],{"class":34851},[65,37209,6252],{"class":154},[65,37211,34857],{"class":154},[65,37213,37047],{"class":302},[65,37215,34857],{"class":154},[65,37217,34841],{"class":154},[65,37219,37220,37222,37224,37226,37228,37230,37232,37234,37236,37239,37241,37243],{"class":140,"line":543},[65,37221,37056],{"class":154},[65,37223,65],{"class":214},[65,37225,37019],{"class":34851},[65,37227,6252],{"class":154},[65,37229,34857],{"class":154},[65,37231,29191],{"class":302},[65,37233,34857],{"class":154},[65,37235,1836],{"class":154},[65,37237,37238],{"class":204},"Components",[65,37240,34881],{"class":154},[65,37242,65],{"class":214},[65,37244,34841],{"class":154},[65,37246,37247,37249,37251],{"class":140,"line":555},[65,37248,37084],{"class":154},[65,37250,29],{"class":214},[65,37252,34841],{"class":154},[65,37254,37255,37257,37259,37261,37263,37265,37267,37269,37271,37273,37275,37277,37279],{"class":140,"line":567},[65,37256,37014],{"class":154},[65,37258,37095],{"class":214},[65,37260,37019],{"class":34851},[65,37262,6252],{"class":154},[65,37264,34857],{"class":154},[65,37266,3610],{"class":302},[65,37268,34857],{"class":154},[65,37270,37108],{"class":34851},[65,37272,6252],{"class":154},[65,37274,34857],{"class":154},[65,37276,3939],{"class":302},[65,37278,34857],{"class":154},[65,37280,37119],{"class":154},[65,37282,37283,37285,37287],{"class":140,"line":3757},[65,37284,37124],{"class":154},[65,37286,92],{"class":214},[65,37288,34841],{"class":154},[65,37290,37291,37293],{"class":140,"line":3787},[65,37292,36953],{"class":154},[65,37294,36956],{"class":214},[65,37296,37297,37299,37301,37303,37305],{"class":140,"line":3792},[65,37298,36961],{"class":34851},[65,37300,6252],{"class":154},[65,37302,34857],{"class":154},[65,37304,36968],{"class":302},[65,37306,36971],{"class":154},[65,37308,37309],{"class":140,"line":3814},[65,37310,36976],{"class":34851},[65,37312,37313,37315,37317,37319,37321],{"class":140,"line":3823},[65,37314,36981],{"class":34851},[65,37316,6252],{"class":154},[65,37318,34857],{"class":154},[65,37320,36988],{"class":302},[65,37322,36971],{"class":154},[65,37324,37325,37327,37329,37331,37333],{"class":140,"line":3831},[65,37326,36995],{"class":34851},[65,37328,6252],{"class":154},[65,37330,34857],{"class":154},[65,37332,37002],{"class":302},[65,37334,36971],{"class":154},[65,37336,37337],{"class":140,"line":3841},[65,37338,37009],{"class":154},[65,37340,37341,37343,37345,37347,37349,37351,37353,37355,37357,37360,37362,37364],{"class":140,"line":3861},[65,37342,37014],{"class":154},[65,37344,65],{"class":214},[65,37346,37019],{"class":34851},[65,37348,6252],{"class":154},[65,37350,34857],{"class":154},[65,37352,29191],{"class":302},[65,37354,34857],{"class":154},[65,37356,1836],{"class":154},[65,37358,37359],{"class":204},"長いテキストが入ります長いテキストが入ります長いテキストが入ります長いテキストが入ります長いテキストが入ります",[65,37361,34881],{"class":154},[65,37363,65],{"class":214},[65,37365,34841],{"class":154},[65,37367,37368,37370,37372,37374,37376,37378,37380,37382,37384,37386,37388,37390,37392],{"class":140,"line":3867},[65,37369,37014],{"class":154},[65,37371,37095],{"class":214},[65,37373,37019],{"class":34851},[65,37375,6252],{"class":154},[65,37377,34857],{"class":154},[65,37379,3610],{"class":302},[65,37381,34857],{"class":154},[65,37383,37108],{"class":34851},[65,37385,6252],{"class":154},[65,37387,34857],{"class":154},[65,37389,10249],{"class":302},[65,37391,34857],{"class":154},[65,37393,37119],{"class":154},[65,37395,37396,37398,37400],{"class":140,"line":3876},[65,37397,37124],{"class":154},[65,37399,92],{"class":214},[65,37401,34841],{"class":154},[65,37403,37404,37406,37408],{"class":140,"line":3881},[65,37405,34909],{"class":154},[65,37407,35774],{"class":214},[65,37409,34841],{"class":154},[65,37411,37412,37414,37416],{"class":140,"line":3920},[65,37413,34881],{"class":154},[65,37415,36890],{"class":214},[65,37417,34841],{"class":154},[15,37419,37420],{},"パンくずリストの実装方法が不明な方は、以下の記事を参考にしてみてください。",[19,37422],{":items":37423},"[{\"title\":\"Bread\",\"link\":\"/components/bread\",\"image\":\"/images/components/bread.jpg\",\"description\":\"パンくずリストは、ページがサイトの階層内のどこに位置しているかを示します。構造化データを含むパンくずリストの作成方法を解説します。\"}]",[1177,37425,34985],{"id":34984},[15,37427,37428,37429,37431,37432,37435,37436,37438,37439,37441,37442,37444,37445,37447],{},"パンくずリストは横並びになるので、",[124,37430,35774],{},"要素に",[124,37433,37434],{},"display: flex","を設定します。",[5467,37437],{},"\nここで、",[124,37440,36831],{},"を適用する要素は、最後の",[124,37443,92],{},"要素のテキスト部分(",[124,37446,65],{},")に適用します。",[15,37449,37450,37451,37453,37454,37431,37456,37435],{},"また、テキストがはみ出さないように、",[124,37452,36890],{},"と最後の",[124,37455,92],{},[124,37457,37458],{},"overflow: hidden",[129,37460,37462],{"className":34988,"code":37461,"filename":34985,"language":34984,"meta":135,"style":135},"/* テキストがはみ出さないようにoverflow: hiddenを設定 */\n.breadcrumb {\n overflow: hidden;\n}\n\n.breadcrumb__list:last-child {\n overflow: hidden;\n}\n\n/* 最後のliのテキスト部分(span)にtext-overflow: ellipsisを適用 */\n.breadcrumb__list:last-child span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n",[124,37463,37464,37469,37477,37489,37493,37497,37510,37520,37524,37528,37533,37548,37558,37570,37582],{"__ignoreMap":135},[65,37465,37466],{"class":140,"line":141},[65,37467,37468],{"class":278},"/* テキストがはみ出さないようにoverflow: hiddenを設定 */\n",[65,37470,37471,37473,37475],{"class":140,"line":158},[65,37472,834],{"class":154},[65,37474,36899],{"class":326},[65,37476,418],{"class":154},[65,37478,37479,37482,37484,37487],{"class":140,"line":165},[65,37480,37481],{"class":340}," overflow",[65,37483,797],{"class":154},[65,37485,37486],{"class":793}," hidden",[65,37488,155],{"class":154},[65,37490,37491],{"class":140,"line":180},[65,37492,243],{"class":154},[65,37494,37495],{"class":140,"line":194},[65,37496,162],{"emptyLinePlaceholder":161},[65,37498,37499,37501,37503,37505,37508],{"class":140,"line":211},[65,37500,834],{"class":154},[65,37502,36944],{"class":326},[65,37504,797],{"class":154},[65,37506,37507],{"class":168},"last-child",[65,37509,418],{"class":154},[65,37511,37512,37514,37516,37518],{"class":140,"line":240},[65,37513,37481],{"class":340},[65,37515,797],{"class":154},[65,37517,37486],{"class":793},[65,37519,155],{"class":154},[65,37521,37522],{"class":140,"line":391},[65,37523,243],{"class":154},[65,37525,37526],{"class":140,"line":401},[65,37527,162],{"emptyLinePlaceholder":161},[65,37529,37530],{"class":140,"line":406},[65,37531,37532],{"class":278},"/* 最後のliのテキスト部分(span)にtext-overflow: ellipsisを適用 */\n",[65,37534,37535,37537,37539,37541,37543,37546],{"class":140,"line":421},[65,37536,834],{"class":154},[65,37538,36944],{"class":326},[65,37540,797],{"class":154},[65,37542,37507],{"class":168},[65,37544,37545],{"class":214}," span",[65,37547,418],{"class":154},[65,37549,37550,37552,37554,37556],{"class":140,"line":435},[65,37551,37481],{"class":340},[65,37553,797],{"class":154},[65,37555,37486],{"class":793},[65,37557,155],{"class":154},[65,37559,37560,37563,37565,37568],{"class":140,"line":447},[65,37561,37562],{"class":340}," white-space",[65,37564,797],{"class":154},[65,37566,37567],{"class":793}," nowrap",[65,37569,155],{"class":154},[65,37571,37572,37575,37577,37580],{"class":140,"line":459},[65,37573,37574],{"class":340}," text-overflow",[65,37576,797],{"class":154},[65,37578,37579],{"class":793}," ellipsis",[65,37581,155],{"class":154},[65,37583,37584],{"class":140,"line":471},[65,37585,243],{"class":154},[15,37587,37588,37589,37591],{},"このようにすることで、",[124,37590,735],{},"などの幅を指定しない場合でも、「...」で省略することができました。",[11,37593,37594],{"id":37594},"デモ",[15,37596,37597,37598,37600],{},"最後に、パンくずリストに",[124,37599,36831],{},"を適用して、長いテキストを省略したデモを見てみましょう。",[37602,37603],"preview-iframe",{"active":34984,"css":37604,"html":36881},".breadcrumb {\n overflow: hidden;\n}\n\n.breadcrumb__list {\n display: flex;\n align-items: center;\n row-gap: 0.5rem;\n}\n\n.breadcrumb__item {\n display: flex;\n align-items: center;\n font-size: 0.875rem;\n}\n\n.breadcrumb__item:nth-child(n+2)::before {\n content: '>';\n display: block;\n margin-inline: 1rem;\n}\n\n.breadcrumb__item:last-child {\n overflow: hidden;\n}\n\n.breadcrumb__item:last-child span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.breadcrumb__link {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-decoration: underline;\n color: #000;\n}\n",[11,37606,5299],{"id":5299},[15,37608,37609],{},"たまに、実装する際に上手く適用しなくって悩んでしまったので、備忘録として記事を書きました。上手く適用しなくても、devToolsで1つずつ調整していけば原因や解決策が見つかるかと思いますので、ぜひ試してみてください。",[5313,37611,37612],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .stCc5, html code.shiki .stCc5{--shiki-default:#FFCB6B;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}",{"title":135,"searchDepth":165,"depth":165,"links":37614},[37615,37616,37617,37621,37622],{"id":13,"depth":158,"text":13},{"id":36841,"depth":158,"text":36841},{"id":36873,"depth":158,"text":36873,"children":37618},[37619,37620],{"id":34821,"depth":165,"text":34822},{"id":34984,"depth":165,"text":34985},{"id":37594,"depth":158,"text":37594},{"id":5299,"depth":158,"text":5299},"2025-08-30T00:00:00.000Z","前回の記事で、CSSのtext-overflow: ellipsisを使って長いテキストを省略する方法を紹介しました。しかし、パンくずリストで使用する場合にハマりポイントがあるので今回はパンくずリストにも正しく適用されるようにする方法を解説します。","/images/blog/no-image-sky-blue.jpg",{},"/blog/bread-text-overflow-ellipsis",{"title":36821,"description":37624},"blog/bread-text-overflow-ellipsis",[37631,37632],"パンくずリストでの長いテキストを「...」で省略する方法","widthとmax-widthを使用していない場合でも適用できる方法",[34985],"WfQmGB-PU22oXJkQc6bW-D3Baps5ZfTe5JAcfqfIdu0",{"id":37636,"title":37637,"body":37638,"date":40852,"description":40853,"draft":5339,"extension":5340,"image":40854,"meta":40855,"navigation":161,"path":40856,"seo":40857,"stem":40858,"summaryList":40859,"summaryText":5348,"tags":40862,"__hash__":40864},"blog/blog/modal-with-swiper-slider.md","モーダルの中にSwiperで実装したスライダーがある場合の実装方法",{"type":8,"value":37639,"toc":40836},[37640,37642,37649,37654,37657,37660,37663,37667,37679,37682,37688,37692,37702,37704,37713,38315,38322,38346,38348,38354,38559,38574,38587,38597,38600,38606,39610,39613,39615,39836,39844,39857,39860,39865,39981,39997,39999,40004,40328,40337,40356,40359,40364,40367,40375,40485,40491,40496,40548,40551,40603,40613,40626,40629,40671,40680,40683,40688,40809,40822,40825,40827,40833],[11,37641,13],{"id":13},[15,37643,37644,37645,37648],{},"この記事では、モーダルの中にSwiperで実装したスライダーがある場合の実装方法を解説します。モーダルは",[124,37646,37647],{},"dialog","要素を使用して実装します。",[15,37650,37651,37653],{},[124,37652,37647],{},"要素を使用したモーダルの実装の基本は下記のページを参照ください。",[19,37655],{":items":37656},"[{\"title\":\"Modal\",\"link\":\"/components/modal\",\"image\":\"/images/components/modal.jpg\",\"description\":\"Web制作でモーダルを実装する機会は多いかと思います。この記事ではdialog要素でモーダルを実装する方法を解説します。\"}]",[11,37658,37659],{"id":37659},"バージョン情報",[15,37661,37662],{},"この記事で使用しているSwiperのライブラリのバージョンは以下の通りです。",[37664,37665],"version-info",{":libs":37666},"[{\"icon\":{\"name\":\"simple-icons:swiper\",\"color\":\"#00AFFF\"},\"name\":\"Swiper\",\"version\":\"11.2.10\"}]",[15,37668,37669,37670,37675,37676,37678],{},"Swiperの読み込みに関しては、",[29,37671,37674],{"href":37672,"rel":37673,"target":3049},"https://swiperjs.com/get-started",[3048],"公式サイト","を参考に",[124,37677,3251],{},"かCDNでCSSファイルとJSファイルを読み込んでください。",[11,37680,37637],{"id":37681},"モーダルの中にswiperで実装したスライダーがある場合の実装方法",[15,37683,37684,37685,37687],{},"それでは、モーダルの中にSwiperで実装したスライダーがある場合の実装方法について解説します。",[5467,37686],{},"\nデモのCodePenは下記になります。",[34815,37689],{"id":37690,"title":37691},"WbQgNRJ","Swiper Slider Inside a Dialog Modal",[15,37693,37694,37695,37698,37699,37701],{},"モーダルは、画面外をクリックした時や、",[34800,37696,37697],{},"Esc","キーを押したときに閉じることができます。",[5467,37700],{},"\nそれでは、実装方法を見ていきましょう！",[1177,37703,34822],{"id":34821},[15,37705,37706,37707,37709,37710,37712],{},"HTMLは次の通りになります。モーダルは",[124,37708,37647],{},"要素で実装するようにします。なので、Swiperのコードは",[124,37711,37647],{},"の中に書きましょう。",[129,37714,37716],{"className":34828,"code":37715,"filename":34822,"language":34821,"meta":135,"style":135},"\u003C!-- ギャラリー画像 -->\n\u003Cdiv class=\"grid\">\n \u003Ca class=\"grid__img js-modal-trigger\" href=\"\">\n \u003Cimg src=\"https://picsum.photos/800/450?random=1\" alt=\"\">\n \u003C/a>\n \u003Ca class=\"grid__img js-modal-trigger\" href=\"\">\n \u003Cimg src=\"https://picsum.photos/800/450?random=2\" alt=\"\">\n \u003C/a>\n \u003C!-- ギャラリー画像が続く -->\n\u003C/div>\n\n\u003C!-- モーダル -->\n\u003Cdialog class=\"modal js-modal\">\n \u003Cdiv class=\"modal__overlay js-modal-overlay\">\u003C/div>\n \u003Cdiv class=\"modal__inner\">\n \u003Cdiv class=\"swiper modal__swiper\">\n \u003Cdiv class=\"swiper-wrapper\">\n \u003Cdiv class=\"swiper-slide\">\n \u003Cdiv class=\"modal__title\">スライダー1\u003C/div>\n \u003Cdiv class=\"modal__img\">\n \u003Cimg src=\"https://picsum.photos/800/450?random=1\" alt=\"\">\n \u003C/div>\n \u003C/div>\n \u003Cdiv class=\"swiper-slide\">\n \u003Cdiv class=\"modal__title\">スライダー2\u003C/div>\n \u003Cdiv class=\"modal__img\">\n \u003Cimg src=\"https://picsum.photos/800/450?random=2\" alt=\"\">\n \u003C/div>\n \u003C/div>\n \u003C!-- ギャラリー画像と同じ画像が続く -->\n \u003C/div>\n \u003C!-- Swiperの矢印 -->\n \u003Cdiv class=\"swiper-button-prev\">\u003C/div>\n \u003Cdiv class=\"swiper-button-next\">\u003C/div>\n \u003C/div>\n \u003C!-- 閉じるボタン -->\n \u003Cbutton class=\"modal__close js-modal-close\">モーダルを閉じる\u003C/button>\n \u003C/div>\n\u003C/dialog>\n",[124,37717,37718,37723,37741,37767,37793,37801,37825,37850,37858,37863,37871,37875,37880,37899,37923,37942,37961,37980,37999,38028,38047,38072,38081,38090,38108,38135,38153,38177,38185,38193,38198,38206,38211,38234,38257,38265,38270,38299,38307],{"__ignoreMap":135},[65,37719,37720],{"class":140,"line":141},[65,37721,37722],{"class":278},"\u003C!-- ギャラリー画像 -->\n",[65,37724,37725,37727,37729,37731,37733,37735,37737,37739],{"class":140,"line":158},[65,37726,1830],{"class":154},[65,37728,36],{"class":214},[65,37730,774],{"class":34851},[65,37732,6252],{"class":154},[65,37734,34857],{"class":154},[65,37736,5613],{"class":302},[65,37738,34857],{"class":154},[65,37740,34841],{"class":154},[65,37742,37743,37745,37747,37749,37751,37753,37756,37758,37760,37762,37765],{"class":140,"line":165},[65,37744,34846],{"class":154},[65,37746,29],{"class":214},[65,37748,774],{"class":34851},[65,37750,6252],{"class":154},[65,37752,34857],{"class":154},[65,37754,37755],{"class":302},"grid__img js-modal-trigger",[65,37757,34857],{"class":154},[65,37759,34852],{"class":34851},[65,37761,6252],{"class":154},[65,37763,37764],{"class":154},"\"\"",[65,37766,34841],{"class":154},[65,37768,37769,37771,37773,37775,37777,37779,37782,37784,37787,37789,37791],{"class":140,"line":180},[65,37770,36953],{"class":154},[65,37772,57],{"class":214},[65,37774,1916],{"class":34851},[65,37776,6252],{"class":154},[65,37778,34857],{"class":154},[65,37780,37781],{"class":302},"https://picsum.photos/800/450?random=1",[65,37783,34857],{"class":154},[65,37785,37786],{"class":34851}," alt",[65,37788,6252],{"class":154},[65,37790,37764],{"class":154},[65,37792,34841],{"class":154},[65,37794,37795,37797,37799],{"class":140,"line":194},[65,37796,34909],{"class":154},[65,37798,29],{"class":214},[65,37800,34841],{"class":154},[65,37802,37803,37805,37807,37809,37811,37813,37815,37817,37819,37821,37823],{"class":140,"line":211},[65,37804,34846],{"class":154},[65,37806,29],{"class":214},[65,37808,774],{"class":34851},[65,37810,6252],{"class":154},[65,37812,34857],{"class":154},[65,37814,37755],{"class":302},[65,37816,34857],{"class":154},[65,37818,34852],{"class":34851},[65,37820,6252],{"class":154},[65,37822,37764],{"class":154},[65,37824,34841],{"class":154},[65,37826,37827,37829,37831,37833,37835,37837,37840,37842,37844,37846,37848],{"class":140,"line":240},[65,37828,36953],{"class":154},[65,37830,57],{"class":214},[65,37832,1916],{"class":34851},[65,37834,6252],{"class":154},[65,37836,34857],{"class":154},[65,37838,37839],{"class":302},"https://picsum.photos/800/450?random=2",[65,37841,34857],{"class":154},[65,37843,37786],{"class":34851},[65,37845,6252],{"class":154},[65,37847,37764],{"class":154},[65,37849,34841],{"class":154},[65,37851,37852,37854,37856],{"class":140,"line":391},[65,37853,34909],{"class":154},[65,37855,29],{"class":214},[65,37857,34841],{"class":154},[65,37859,37860],{"class":140,"line":401},[65,37861,37862],{"class":278}," \u003C!-- ギャラリー画像が続く -->\n",[65,37864,37865,37867,37869],{"class":140,"line":406},[65,37866,34881],{"class":154},[65,37868,36],{"class":214},[65,37870,34841],{"class":154},[65,37872,37873],{"class":140,"line":421},[65,37874,162],{"emptyLinePlaceholder":161},[65,37876,37877],{"class":140,"line":435},[65,37878,37879],{"class":278},"\u003C!-- モーダル -->\n",[65,37881,37882,37884,37886,37888,37890,37892,37895,37897],{"class":140,"line":447},[65,37883,1830],{"class":154},[65,37885,37647],{"class":214},[65,37887,774],{"class":34851},[65,37889,6252],{"class":154},[65,37891,34857],{"class":154},[65,37893,37894],{"class":302},"modal js-modal",[65,37896,34857],{"class":154},[65,37898,34841],{"class":154},[65,37900,37901,37903,37905,37907,37909,37911,37914,37916,37919,37921],{"class":140,"line":459},[65,37902,34846],{"class":154},[65,37904,36],{"class":214},[65,37906,774],{"class":34851},[65,37908,6252],{"class":154},[65,37910,34857],{"class":154},[65,37912,37913],{"class":302},"modal__overlay js-modal-overlay",[65,37915,34857],{"class":154},[65,37917,37918],{"class":154},">\u003C/",[65,37920,36],{"class":214},[65,37922,34841],{"class":154},[65,37924,37925,37927,37929,37931,37933,37935,37938,37940],{"class":140,"line":471},[65,37926,34846],{"class":154},[65,37928,36],{"class":214},[65,37930,774],{"class":34851},[65,37932,6252],{"class":154},[65,37934,34857],{"class":154},[65,37936,37937],{"class":302},"modal__inner",[65,37939,34857],{"class":154},[65,37941,34841],{"class":154},[65,37943,37944,37946,37948,37950,37952,37954,37957,37959],{"class":140,"line":63},[65,37945,36953],{"class":154},[65,37947,36],{"class":214},[65,37949,774],{"class":34851},[65,37951,6252],{"class":154},[65,37953,34857],{"class":154},[65,37955,37956],{"class":302},"swiper modal__swiper",[65,37958,34857],{"class":154},[65,37960,34841],{"class":154},[65,37962,37963,37965,37967,37969,37971,37973,37976,37978],{"class":140,"line":495},[65,37964,37014],{"class":154},[65,37966,36],{"class":214},[65,37968,774],{"class":34851},[65,37970,6252],{"class":154},[65,37972,34857],{"class":154},[65,37974,37975],{"class":302},"swiper-wrapper",[65,37977,34857],{"class":154},[65,37979,34841],{"class":154},[65,37981,37982,37984,37986,37988,37990,37992,37995,37997],{"class":140,"line":507},[65,37983,37056],{"class":154},[65,37985,36],{"class":214},[65,37987,774],{"class":34851},[65,37989,6252],{"class":154},[65,37991,34857],{"class":154},[65,37993,37994],{"class":302},"swiper-slide",[65,37996,34857],{"class":154},[65,37998,34841],{"class":154},[65,38000,38001,38004,38006,38008,38010,38012,38015,38017,38019,38022,38024,38026],{"class":140,"line":519},[65,38002,38003],{"class":154}," \u003C",[65,38005,36],{"class":214},[65,38007,774],{"class":34851},[65,38009,6252],{"class":154},[65,38011,34857],{"class":154},[65,38013,38014],{"class":302},"modal__title",[65,38016,34857],{"class":154},[65,38018,1836],{"class":154},[65,38020,38021],{"class":204},"スライダー1",[65,38023,34881],{"class":154},[65,38025,36],{"class":214},[65,38027,34841],{"class":154},[65,38029,38030,38032,38034,38036,38038,38040,38043,38045],{"class":140,"line":531},[65,38031,38003],{"class":154},[65,38033,36],{"class":214},[65,38035,774],{"class":34851},[65,38037,6252],{"class":154},[65,38039,34857],{"class":154},[65,38041,38042],{"class":302},"modal__img",[65,38044,34857],{"class":154},[65,38046,34841],{"class":154},[65,38048,38049,38052,38054,38056,38058,38060,38062,38064,38066,38068,38070],{"class":140,"line":543},[65,38050,38051],{"class":154}," \u003C",[65,38053,57],{"class":214},[65,38055,1916],{"class":34851},[65,38057,6252],{"class":154},[65,38059,34857],{"class":154},[65,38061,37781],{"class":302},[65,38063,34857],{"class":154},[65,38065,37786],{"class":34851},[65,38067,6252],{"class":154},[65,38069,37764],{"class":154},[65,38071,34841],{"class":154},[65,38073,38074,38077,38079],{"class":140,"line":555},[65,38075,38076],{"class":154}," \u003C/",[65,38078,36],{"class":214},[65,38080,34841],{"class":154},[65,38082,38083,38086,38088],{"class":140,"line":567},[65,38084,38085],{"class":154}," \u003C/",[65,38087,36],{"class":214},[65,38089,34841],{"class":154},[65,38091,38092,38094,38096,38098,38100,38102,38104,38106],{"class":140,"line":3757},[65,38093,37056],{"class":154},[65,38095,36],{"class":214},[65,38097,774],{"class":34851},[65,38099,6252],{"class":154},[65,38101,34857],{"class":154},[65,38103,37994],{"class":302},[65,38105,34857],{"class":154},[65,38107,34841],{"class":154},[65,38109,38110,38112,38114,38116,38118,38120,38122,38124,38126,38129,38131,38133],{"class":140,"line":3787},[65,38111,38003],{"class":154},[65,38113,36],{"class":214},[65,38115,774],{"class":34851},[65,38117,6252],{"class":154},[65,38119,34857],{"class":154},[65,38121,38014],{"class":302},[65,38123,34857],{"class":154},[65,38125,1836],{"class":154},[65,38127,38128],{"class":204},"スライダー2",[65,38130,34881],{"class":154},[65,38132,36],{"class":214},[65,38134,34841],{"class":154},[65,38136,38137,38139,38141,38143,38145,38147,38149,38151],{"class":140,"line":3792},[65,38138,38003],{"class":154},[65,38140,36],{"class":214},[65,38142,774],{"class":34851},[65,38144,6252],{"class":154},[65,38146,34857],{"class":154},[65,38148,38042],{"class":302},[65,38150,34857],{"class":154},[65,38152,34841],{"class":154},[65,38154,38155,38157,38159,38161,38163,38165,38167,38169,38171,38173,38175],{"class":140,"line":3814},[65,38156,38051],{"class":154},[65,38158,57],{"class":214},[65,38160,1916],{"class":34851},[65,38162,6252],{"class":154},[65,38164,34857],{"class":154},[65,38166,37839],{"class":302},[65,38168,34857],{"class":154},[65,38170,37786],{"class":34851},[65,38172,6252],{"class":154},[65,38174,37764],{"class":154},[65,38176,34841],{"class":154},[65,38178,38179,38181,38183],{"class":140,"line":3823},[65,38180,38076],{"class":154},[65,38182,36],{"class":214},[65,38184,34841],{"class":154},[65,38186,38187,38189,38191],{"class":140,"line":3831},[65,38188,38085],{"class":154},[65,38190,36],{"class":214},[65,38192,34841],{"class":154},[65,38194,38195],{"class":140,"line":3841},[65,38196,38197],{"class":278}," \u003C!-- ギャラリー画像と同じ画像が続く -->\n",[65,38199,38200,38202,38204],{"class":140,"line":3861},[65,38201,37084],{"class":154},[65,38203,36],{"class":214},[65,38205,34841],{"class":154},[65,38207,38208],{"class":140,"line":3867},[65,38209,38210],{"class":278}," \u003C!-- Swiperの矢印 -->\n",[65,38212,38213,38215,38217,38219,38221,38223,38226,38228,38230,38232],{"class":140,"line":3876},[65,38214,37014],{"class":154},[65,38216,36],{"class":214},[65,38218,774],{"class":34851},[65,38220,6252],{"class":154},[65,38222,34857],{"class":154},[65,38224,38225],{"class":302},"swiper-button-prev",[65,38227,34857],{"class":154},[65,38229,37918],{"class":154},[65,38231,36],{"class":214},[65,38233,34841],{"class":154},[65,38235,38236,38238,38240,38242,38244,38246,38249,38251,38253,38255],{"class":140,"line":3881},[65,38237,37014],{"class":154},[65,38239,36],{"class":214},[65,38241,774],{"class":34851},[65,38243,6252],{"class":154},[65,38245,34857],{"class":154},[65,38247,38248],{"class":302},"swiper-button-next",[65,38250,34857],{"class":154},[65,38252,37918],{"class":154},[65,38254,36],{"class":214},[65,38256,34841],{"class":154},[65,38258,38259,38261,38263],{"class":140,"line":3920},[65,38260,37124],{"class":154},[65,38262,36],{"class":214},[65,38264,34841],{"class":154},[65,38266,38267],{"class":140,"line":3954},[65,38268,38269],{"class":278}," \u003C!-- 閉じるボタン -->\n",[65,38271,38272,38274,38277,38279,38281,38283,38286,38288,38290,38293,38295,38297],{"class":140,"line":3974},[65,38273,36953],{"class":154},[65,38275,38276],{"class":214},"button",[65,38278,774],{"class":34851},[65,38280,6252],{"class":154},[65,38282,34857],{"class":154},[65,38284,38285],{"class":302},"modal__close js-modal-close",[65,38287,34857],{"class":154},[65,38289,1836],{"class":154},[65,38291,38292],{"class":204},"モーダルを閉じる",[65,38294,34881],{"class":154},[65,38296,38276],{"class":214},[65,38298,34841],{"class":154},[65,38300,38301,38303,38305],{"class":140,"line":3979},[65,38302,34909],{"class":154},[65,38304,36],{"class":214},[65,38306,34841],{"class":154},[65,38308,38309,38311,38313],{"class":140,"line":4031},[65,38310,34881],{"class":154},[65,38312,37647],{"class":214},[65,38314,34841],{"class":154},[15,38316,38317,38318,38321],{},"JavaScriptで操作する要素に関しては、クラスの先頭に",[124,38319,38320],{},"js-","をつけています。これにより、JavaScriptで操作する要素を特定しやすくなります。",[15,38323,38324,38325,38327,38328,38331,38332,31190,38334,38337,38338,38341,38342,38345],{},"モーダルを開くトリガーになる画像には",[124,38326,29],{},"タグで実装し、",[124,38329,38330],{},"js-modal-trigger","を付けます。モーダルの",[124,38333,37647],{},[124,38335,38336],{},"js-modal","を、モーダルの外側には",[124,38339,38340],{},"js-modal-overlay","を付けます。また、モーダルを閉じるボタンには",[124,38343,38344],{},"js-modal-close","を付けましょう。",[1177,38347,34985],{"id":34984},[15,38349,38350,38351,38353],{},"CSSは、モーダル部分に関してのみ解説します。",[5467,38352],{},"\n全てのスタイルはCodePenを参照してください。",[129,38355,38357],{"className":34988,"code":38356,"filename":34985,"language":34984,"meta":135,"style":135},".modal {\n /* モーダルのスタイルのリセット */\n margin: 0;\n padding: 0;\n border: none;\n max-width: unset;\n max-height: unset;\n\n width: 100vw;\n height: 100dvh;\n}\n\n.modal::backdrop {\n display: none;\n}\n\n.modal__overlay {\n position: fixed;\n inset: 0;\n background-color: rgba(255, 255, 0, 0.4);\n}\n",[124,38358,38359,38368,38373,38384,38394,38404,38416,38427,38431,38442,38453,38457,38461,38475,38486,38490,38494,38503,38513,38524,38555],{"__ignoreMap":135},[65,38360,38361,38363,38366],{"class":140,"line":141},[65,38362,834],{"class":154},[65,38364,38365],{"class":326},"modal",[65,38367,418],{"class":154},[65,38369,38370],{"class":140,"line":158},[65,38371,38372],{"class":278}," /* モーダルのスタイルのリセット */\n",[65,38374,38375,38378,38380,38382],{"class":140,"line":165},[65,38376,38377],{"class":340}," margin",[65,38379,797],{"class":154},[65,38381,1142],{"class":793},[65,38383,155],{"class":154},[65,38385,38386,38388,38390,38392],{"class":140,"line":180},[65,38387,35049],{"class":340},[65,38389,797],{"class":154},[65,38391,1142],{"class":793},[65,38393,155],{"class":154},[65,38395,38396,38398,38400,38402],{"class":140,"line":194},[65,38397,35071],{"class":340},[65,38399,797],{"class":154},[65,38401,35103],{"class":793},[65,38403,155],{"class":154},[65,38405,38406,38409,38411,38414],{"class":140,"line":211},[65,38407,38408],{"class":340}," max-width",[65,38410,797],{"class":154},[65,38412,38413],{"class":793}," unset",[65,38415,155],{"class":154},[65,38417,38418,38421,38423,38425],{"class":140,"line":240},[65,38419,38420],{"class":340}," max-height",[65,38422,797],{"class":154},[65,38424,38413],{"class":793},[65,38426,155],{"class":154},[65,38428,38429],{"class":140,"line":391},[65,38430,162],{"emptyLinePlaceholder":161},[65,38432,38433,38435,38437,38440],{"class":140,"line":401},[65,38434,546],{"class":340},[65,38436,797],{"class":154},[65,38438,38439],{"class":793}," 100vw",[65,38441,155],{"class":154},[65,38443,38444,38446,38448,38451],{"class":140,"line":406},[65,38445,558],{"class":340},[65,38447,797],{"class":154},[65,38449,38450],{"class":793}," 100dvh",[65,38452,155],{"class":154},[65,38454,38455],{"class":140,"line":421},[65,38456,243],{"class":154},[65,38458,38459],{"class":140,"line":435},[65,38460,162],{"emptyLinePlaceholder":161},[65,38462,38463,38465,38467,38470,38473],{"class":140,"line":447},[65,38464,834],{"class":154},[65,38466,38365],{"class":326},[65,38468,38469],{"class":154},"::",[65,38471,38472],{"class":168},"backdrop",[65,38474,418],{"class":154},[65,38476,38477,38480,38482,38484],{"class":140,"line":459},[65,38478,38479],{"class":340}," display",[65,38481,797],{"class":154},[65,38483,35103],{"class":793},[65,38485,155],{"class":154},[65,38487,38488],{"class":140,"line":471},[65,38489,243],{"class":154},[65,38491,38492],{"class":140,"line":63},[65,38493,162],{"emptyLinePlaceholder":161},[65,38495,38496,38498,38501],{"class":140,"line":495},[65,38497,834],{"class":154},[65,38499,38500],{"class":326},"modal__overlay",[65,38502,418],{"class":154},[65,38504,38505,38507,38509,38511],{"class":140,"line":507},[65,38506,8393],{"class":340},[65,38508,797],{"class":154},[65,38510,35008],{"class":793},[65,38512,155],{"class":154},[65,38514,38515,38518,38520,38522],{"class":140,"line":519},[65,38516,38517],{"class":340}," inset",[65,38519,797],{"class":154},[65,38521,1142],{"class":793},[65,38523,155],{"class":154},[65,38525,38526,38529,38531,38534,38536,38539,38541,38544,38546,38548,38550,38553],{"class":140,"line":531},[65,38527,38528],{"class":340}," background-color",[65,38530,797],{"class":154},[65,38532,38533],{"class":200}," rgba",[65,38535,224],{"class":154},[65,38537,38538],{"class":793},"255",[65,38540,230],{"class":154},[65,38542,38543],{"class":793}," 255",[65,38545,230],{"class":154},[65,38547,1142],{"class":793},[65,38549,230],{"class":154},[65,38551,38552],{"class":793}," 0.4",[65,38554,1980],{"class":154},[65,38556,38557],{"class":140,"line":543},[65,38558,243],{"class":154},[15,38560,38561,38563,38564,10345,38567,10345,38570,38573],{},[124,38562,37647],{},"要素にはデフォルトで",[124,38565,38566],{},"margin",[124,38568,38569],{},"padding",[124,38571,38572],{},"border","のスタイルが付いてるのでリセットしておきましょう。",[15,38575,38576,38578,38579,38582,38583,38586],{},[124,38577,37647],{},"要素には、モーダルの外側(",[124,38580,38581],{},"::backdrop",")が付いていますが、これはJavaScriptで操作できないので、",[124,38584,38585],{},"display: none;","で非表示にしてます。",[15,38588,38589,38590,38592,38593,38596],{},"モーダルの外側としては",[124,38591,38500],{},"を使用してるので、これを",[124,38594,38595],{},"position: fixed","にして固定しておきましょう。",[1177,38598,35288],{"id":38599},"javascript",[15,38601,38602,38603,38605],{},"最後にJavaScriptの実装について解説します。",[5467,38604],{},"\n全コードは次の通りになります。",[129,38607,38609],{"className":35286,"code":38608,"filename":35288,"language":35289,"meta":135,"style":135},"class Modal {\n constructor() {\n this.modal = document.querySelector('.js-modal');\n if(!this.modal) return\n this.init();\n }\n init() {\n this.triggers = document.querySelectorAll('.js-modal-trigger');\n this.overlay = document.querySelector('.js-modal-overlay');\n this.closeBtn = document.querySelector('.js-modal-close');\n\n // Swiperの設定\n this.setSwiper();\n\n // クリックイベントなどの設定\n this.event()\n }\n setSwiper() {\n this.swiper = new Swiper('.swiper', {\n slidesPerView: 1,\n loop: true,\n navigation: {\n nextEl: '.swiper-button-next',\n prevEl: '.swiper-button-prev',\n },\n });\n }\n\n event() {\n // ギャラリーの画像をクリックしたとき\n this.triggers.forEach((trigger, index) => {\n trigger.addEventListener('click', (e) => {\n e.preventDefault();\n this.openModal(index);\n } );\n });\n\n // 閉じるボタンをクリックしたとき\n this.closeBtn.addEventListener('click', () => {\n this.closeModal();\n });\n\n // モーダルの外側をクリックしたとき\n this.overlay.addEventListener('click', () => {\n this.closeModal();\n });\n\n // Escキーを押したとき\n document.addEventListener('keydown', (e) => {\n if(e.key === 'Escape') {\n this.closeModal();\n }\n });\n }\n\n openModal(index) {\n // モーダルを開いた時に固定にするための設定\n this.bodyOffsetY = window.scrollY;\n document.body.style.top = `-${this.bodyOffsetY}px`;\n document.body.classList.add('is-scrollLock');\n\n // クリックしたindexのスライダーを表示\n this.swiper.slideToLoop(index, 0);\n // モーダルを開く\n this.modal.showModal();\n }\n\n closeModal() {\n // 固定解除\n document.body.classList.remove('is-scrollLock');\n document.body.style.top = '';\n window.scrollTo(0, this.bodyOffsetY);\n\n // モーダルを閉じる\n this.modal.close();\n }\n}\n\nconst modal = new Modal();\n",[124,38610,38611,38621,38629,38658,38677,38689,38693,38702,38733,38763,38793,38797,38802,38815,38819,38824,38836,38840,38849,38878,38889,38900,38909,38925,38941,38945,38953,38957,38961,38970,38975,39005,39034,39048,39065,39074,39082,39086,39091,39119,39132,39140,39144,39149,39177,39189,39197,39201,39206,39236,39262,39274,39278,39286,39290,39294,39307,39312,39332,39371,39401,39405,39410,39435,39440,39457,39461,39465,39474,39479,39507,39529,39555,39559,39564,39581,39585,39589,39593],{"__ignoreMap":135},[65,38612,38613,38616,38619],{"class":140,"line":141},[65,38614,38615],{"class":168},"class",[65,38617,38618],{"class":326}," Modal",[65,38620,418],{"class":154},[65,38622,38623,38625,38627],{"class":140,"line":158},[65,38624,788],{"class":168},[65,38626,1269],{"class":154},[65,38628,418],{"class":154},[65,38630,38631,38633,38635,38637,38639,38641,38643,38645,38647,38649,38652,38654,38656],{"class":140,"line":165},[65,38632,831],{"class":830},[65,38634,834],{"class":154},[65,38636,38365],{"class":214},[65,38638,218],{"class":168},[65,38640,3413],{"class":214},[65,38642,834],{"class":154},[65,38644,35825],{"class":200},[65,38646,224],{"class":204},[65,38648,306],{"class":154},[65,38650,38651],{"class":302},".js-modal",[65,38653,306],{"class":154},[65,38655,235],{"class":204},[65,38657,155],{"class":154},[65,38659,38660,38662,38664,38666,38668,38670,38672,38674],{"class":140,"line":180},[65,38661,3105],{"class":154},[65,38663,224],{"class":204},[65,38665,2264],{"class":168},[65,38667,2004],{"class":830},[65,38669,834],{"class":154},[65,38671,38365],{"class":214},[65,38673,1713],{"class":204},[65,38675,38676],{"class":154},"return\n",[65,38678,38679,38681,38683,38685,38687],{"class":140,"line":194},[65,38680,831],{"class":830},[65,38682,834],{"class":154},[65,38684,3193],{"class":200},[65,38686,1269],{"class":204},[65,38688,155],{"class":154},[65,38690,38691],{"class":140,"line":211},[65,38692,1171],{"class":154},[65,38694,38695,38698,38700],{"class":140,"line":240},[65,38696,38697],{"class":200}," init",[65,38699,1269],{"class":154},[65,38701,418],{"class":154},[65,38703,38704,38706,38708,38711,38713,38715,38717,38720,38722,38724,38727,38729,38731],{"class":140,"line":391},[65,38705,831],{"class":830},[65,38707,834],{"class":154},[65,38709,38710],{"class":214},"triggers",[65,38712,218],{"class":168},[65,38714,3413],{"class":214},[65,38716,834],{"class":154},[65,38718,38719],{"class":200},"querySelectorAll",[65,38721,224],{"class":204},[65,38723,306],{"class":154},[65,38725,38726],{"class":302},".js-modal-trigger",[65,38728,306],{"class":154},[65,38730,235],{"class":204},[65,38732,155],{"class":154},[65,38734,38735,38737,38739,38742,38744,38746,38748,38750,38752,38754,38757,38759,38761],{"class":140,"line":401},[65,38736,831],{"class":830},[65,38738,834],{"class":154},[65,38740,38741],{"class":214},"overlay",[65,38743,218],{"class":168},[65,38745,3413],{"class":214},[65,38747,834],{"class":154},[65,38749,35825],{"class":200},[65,38751,224],{"class":204},[65,38753,306],{"class":154},[65,38755,38756],{"class":302},".js-modal-overlay",[65,38758,306],{"class":154},[65,38760,235],{"class":204},[65,38762,155],{"class":154},[65,38764,38765,38767,38769,38772,38774,38776,38778,38780,38782,38784,38787,38789,38791],{"class":140,"line":406},[65,38766,831],{"class":830},[65,38768,834],{"class":154},[65,38770,38771],{"class":214},"closeBtn",[65,38773,218],{"class":168},[65,38775,3413],{"class":214},[65,38777,834],{"class":154},[65,38779,35825],{"class":200},[65,38781,224],{"class":204},[65,38783,306],{"class":154},[65,38785,38786],{"class":302},".js-modal-close",[65,38788,306],{"class":154},[65,38790,235],{"class":204},[65,38792,155],{"class":154},[65,38794,38795],{"class":140,"line":421},[65,38796,162],{"emptyLinePlaceholder":161},[65,38798,38799],{"class":140,"line":435},[65,38800,38801],{"class":278}," // Swiperの設定\n",[65,38803,38804,38806,38808,38811,38813],{"class":140,"line":447},[65,38805,831],{"class":830},[65,38807,834],{"class":154},[65,38809,38810],{"class":200},"setSwiper",[65,38812,1269],{"class":204},[65,38814,155],{"class":154},[65,38816,38817],{"class":140,"line":459},[65,38818,162],{"emptyLinePlaceholder":161},[65,38820,38821],{"class":140,"line":471},[65,38822,38823],{"class":278}," // クリックイベントなどの設定\n",[65,38825,38826,38828,38830,38833],{"class":140,"line":63},[65,38827,831],{"class":830},[65,38829,834],{"class":154},[65,38831,38832],{"class":200},"event",[65,38834,38835],{"class":204},"()\n",[65,38837,38838],{"class":140,"line":495},[65,38839,1171],{"class":154},[65,38841,38842,38845,38847],{"class":140,"line":507},[65,38843,38844],{"class":200}," setSwiper",[65,38846,1269],{"class":154},[65,38848,418],{"class":154},[65,38850,38851,38853,38855,38858,38860,38862,38865,38867,38869,38872,38874,38876],{"class":140,"line":519},[65,38852,831],{"class":830},[65,38854,834],{"class":154},[65,38856,38857],{"class":214},"swiper",[65,38859,218],{"class":168},[65,38861,1776],{"class":168},[65,38863,38864],{"class":200}," Swiper",[65,38866,224],{"class":204},[65,38868,306],{"class":154},[65,38870,38871],{"class":302},".swiper",[65,38873,306],{"class":154},[65,38875,230],{"class":154},[65,38877,418],{"class":154},[65,38879,38880,38883,38885,38887],{"class":140,"line":531},[65,38881,38882],{"class":204}," slidesPerView",[65,38884,797],{"class":154},[65,38886,3137],{"class":793},[65,38888,3820],{"class":154},[65,38890,38891,38894,38896,38898],{"class":140,"line":543},[65,38892,38893],{"class":204}," loop",[65,38895,797],{"class":154},[65,38897,1016],{"class":793},[65,38899,3820],{"class":154},[65,38901,38902,38905,38907],{"class":140,"line":555},[65,38903,38904],{"class":204}," navigation",[65,38906,797],{"class":154},[65,38908,418],{"class":154},[65,38910,38911,38914,38916,38918,38921,38923],{"class":140,"line":567},[65,38912,38913],{"class":204}," nextEl",[65,38915,797],{"class":154},[65,38917,299],{"class":154},[65,38919,38920],{"class":302},".swiper-button-next",[65,38922,306],{"class":154},[65,38924,3820],{"class":154},[65,38926,38927,38930,38932,38934,38937,38939],{"class":140,"line":3757},[65,38928,38929],{"class":204}," prevEl",[65,38931,797],{"class":154},[65,38933,299],{"class":154},[65,38935,38936],{"class":302},".swiper-button-prev",[65,38938,306],{"class":154},[65,38940,3820],{"class":154},[65,38942,38943],{"class":140,"line":3787},[65,38944,6493],{"class":154},[65,38946,38947,38949,38951],{"class":140,"line":3792},[65,38948,6341],{"class":154},[65,38950,235],{"class":204},[65,38952,155],{"class":154},[65,38954,38955],{"class":140,"line":3814},[65,38956,1171],{"class":154},[65,38958,38959],{"class":140,"line":3823},[65,38960,162],{"emptyLinePlaceholder":161},[65,38962,38963,38966,38968],{"class":140,"line":3831},[65,38964,38965],{"class":200}," event",[65,38967,1269],{"class":154},[65,38969,418],{"class":154},[65,38971,38972],{"class":140,"line":3841},[65,38973,38974],{"class":278}," // ギャラリーの画像をクリックしたとき\n",[65,38976,38977,38979,38981,38983,38985,38988,38990,38992,38995,38997,38999,39001,39003],{"class":140,"line":3861},[65,38978,831],{"class":830},[65,38980,834],{"class":154},[65,38982,38710],{"class":214},[65,38984,834],{"class":154},[65,38986,38987],{"class":200},"forEach",[65,38989,224],{"class":204},[65,38991,224],{"class":154},[65,38993,38994],{"class":793},"trigger",[65,38996,230],{"class":154},[65,38998,6187],{"class":793},[65,39000,235],{"class":154},[65,39002,1862],{"class":168},[65,39004,418],{"class":154},[65,39006,39007,39010,39012,39014,39016,39018,39020,39022,39024,39026,39028,39030,39032],{"class":140,"line":3867},[65,39008,39009],{"class":214}," trigger",[65,39011,834],{"class":154},[65,39013,4698],{"class":200},[65,39015,224],{"class":204},[65,39017,306],{"class":154},[65,39019,36197],{"class":302},[65,39021,306],{"class":154},[65,39023,230],{"class":154},[65,39025,1696],{"class":154},[65,39027,1968],{"class":793},[65,39029,235],{"class":154},[65,39031,1862],{"class":168},[65,39033,418],{"class":154},[65,39035,39036,39039,39041,39044,39046],{"class":140,"line":3876},[65,39037,39038],{"class":214}," e",[65,39040,834],{"class":154},[65,39042,39043],{"class":200},"preventDefault",[65,39045,1269],{"class":204},[65,39047,155],{"class":154},[65,39049,39050,39052,39054,39057,39059,39061,39063],{"class":140,"line":3881},[65,39051,20875],{"class":830},[65,39053,834],{"class":154},[65,39055,39056],{"class":200},"openModal",[65,39058,224],{"class":204},[65,39060,11865],{"class":214},[65,39062,235],{"class":204},[65,39064,155],{"class":154},[65,39066,39067,39069,39072],{"class":140,"line":3920},[65,39068,20901],{"class":154},[65,39070,39071],{"class":204}," )",[65,39073,155],{"class":154},[65,39075,39076,39078,39080],{"class":140,"line":3954},[65,39077,6341],{"class":154},[65,39079,235],{"class":204},[65,39081,155],{"class":154},[65,39083,39084],{"class":140,"line":3974},[65,39085,162],{"emptyLinePlaceholder":161},[65,39087,39088],{"class":140,"line":3979},[65,39089,39090],{"class":278}," // 閉じるボタンをクリックしたとき\n",[65,39092,39093,39095,39097,39099,39101,39103,39105,39107,39109,39111,39113,39115,39117],{"class":140,"line":4031},[65,39094,831],{"class":830},[65,39096,834],{"class":154},[65,39098,38771],{"class":214},[65,39100,834],{"class":154},[65,39102,4698],{"class":200},[65,39104,224],{"class":204},[65,39106,306],{"class":154},[65,39108,36197],{"class":302},[65,39110,306],{"class":154},[65,39112,230],{"class":154},[65,39114,1932],{"class":154},[65,39116,1862],{"class":168},[65,39118,418],{"class":154},[65,39120,39121,39123,39125,39128,39130],{"class":140,"line":4036},[65,39122,20954],{"class":830},[65,39124,834],{"class":154},[65,39126,39127],{"class":200},"closeModal",[65,39129,1269],{"class":204},[65,39131,155],{"class":154},[65,39133,39134,39136,39138],{"class":140,"line":4070},[65,39135,6341],{"class":154},[65,39137,235],{"class":204},[65,39139,155],{"class":154},[65,39141,39142],{"class":140,"line":4086},[65,39143,162],{"emptyLinePlaceholder":161},[65,39145,39146],{"class":140,"line":4102},[65,39147,39148],{"class":278}," // モーダルの外側をクリックしたとき\n",[65,39150,39151,39153,39155,39157,39159,39161,39163,39165,39167,39169,39171,39173,39175],{"class":140,"line":4118},[65,39152,831],{"class":830},[65,39154,834],{"class":154},[65,39156,38741],{"class":214},[65,39158,834],{"class":154},[65,39160,4698],{"class":200},[65,39162,224],{"class":204},[65,39164,306],{"class":154},[65,39166,36197],{"class":302},[65,39168,306],{"class":154},[65,39170,230],{"class":154},[65,39172,1932],{"class":154},[65,39174,1862],{"class":168},[65,39176,418],{"class":154},[65,39178,39179,39181,39183,39185,39187],{"class":140,"line":4149},[65,39180,20954],{"class":830},[65,39182,834],{"class":154},[65,39184,39127],{"class":200},[65,39186,1269],{"class":204},[65,39188,155],{"class":154},[65,39190,39191,39193,39195],{"class":140,"line":4163},[65,39192,6341],{"class":154},[65,39194,235],{"class":204},[65,39196,155],{"class":154},[65,39198,39199],{"class":140,"line":4168},[65,39200,162],{"emptyLinePlaceholder":161},[65,39202,39203],{"class":140,"line":4194},[65,39204,39205],{"class":278}," // Escキーを押したとき\n",[65,39207,39208,39211,39213,39215,39217,39219,39222,39224,39226,39228,39230,39232,39234],{"class":140,"line":4199},[65,39209,39210],{"class":214}," document",[65,39212,834],{"class":154},[65,39214,4698],{"class":200},[65,39216,224],{"class":204},[65,39218,306],{"class":154},[65,39220,39221],{"class":302},"keydown",[65,39223,306],{"class":154},[65,39225,230],{"class":154},[65,39227,1696],{"class":154},[65,39229,1968],{"class":793},[65,39231,235],{"class":154},[65,39233,1862],{"class":168},[65,39235,418],{"class":154},[65,39237,39238,39240,39242,39244,39246,39249,39251,39253,39256,39258,39260],{"class":140,"line":4221},[65,39239,17840],{"class":154},[65,39241,224],{"class":204},[65,39243,1968],{"class":214},[65,39245,834],{"class":154},[65,39247,39248],{"class":214},"key",[65,39250,1704],{"class":168},[65,39252,299],{"class":154},[65,39254,39255],{"class":302},"Escape",[65,39257,306],{"class":154},[65,39259,1713],{"class":204},[65,39261,208],{"class":154},[65,39263,39264,39266,39268,39270,39272],{"class":140,"line":4228},[65,39265,20875],{"class":830},[65,39267,834],{"class":154},[65,39269,39127],{"class":200},[65,39271,1269],{"class":204},[65,39273,155],{"class":154},[65,39275,39276],{"class":140,"line":4235},[65,39277,6413],{"class":154},[65,39279,39280,39282,39284],{"class":140,"line":4244},[65,39281,6341],{"class":154},[65,39283,235],{"class":204},[65,39285,155],{"class":154},[65,39287,39288],{"class":140,"line":4261},[65,39289,1171],{"class":154},[65,39291,39292],{"class":140,"line":4266},[65,39293,162],{"emptyLinePlaceholder":161},[65,39295,39296,39299,39301,39303,39305],{"class":140,"line":4275},[65,39297,39298],{"class":200}," openModal",[65,39300,224],{"class":154},[65,39302,11865],{"class":793},[65,39304,235],{"class":154},[65,39306,418],{"class":154},[65,39308,39309],{"class":140,"line":4280},[65,39310,39311],{"class":278}," // モーダルを開いた時に固定にするための設定\n",[65,39313,39314,39316,39318,39321,39323,39325,39327,39330],{"class":140,"line":4322},[65,39315,831],{"class":830},[65,39317,834],{"class":154},[65,39319,39320],{"class":214},"bodyOffsetY",[65,39322,218],{"class":168},[65,39324,4625],{"class":214},[65,39326,834],{"class":154},[65,39328,39329],{"class":214},"scrollY",[65,39331,155],{"class":154},[65,39333,39334,39336,39338,39340,39342,39344,39346,39348,39350,39352,39354,39356,39358,39360,39362,39364,39367,39369],{"class":140,"line":4375},[65,39335,39210],{"class":214},[65,39337,834],{"class":154},[65,39339,34838],{"class":214},[65,39341,834],{"class":154},[65,39343,5313],{"class":214},[65,39345,834],{"class":154},[65,39347,24775],{"class":214},[65,39349,218],{"class":168},[65,39351,36536],{"class":154},[65,39353,3936],{"class":302},[65,39355,30704],{"class":154},[65,39357,2004],{"class":830},[65,39359,834],{"class":154},[65,39361,39320],{"class":214},[65,39363,2899],{"class":154},[65,39365,39366],{"class":302},"px",[65,39368,30698],{"class":154},[65,39370,155],{"class":154},[65,39372,39373,39375,39377,39379,39381,39384,39386,39388,39390,39392,39395,39397,39399],{"class":140,"line":4408},[65,39374,39210],{"class":214},[65,39376,834],{"class":154},[65,39378,34838],{"class":214},[65,39380,834],{"class":154},[65,39382,39383],{"class":214},"classList",[65,39385,834],{"class":154},[65,39387,3962],{"class":200},[65,39389,224],{"class":204},[65,39391,306],{"class":154},[65,39393,39394],{"class":302},"is-scrollLock",[65,39396,306],{"class":154},[65,39398,235],{"class":204},[65,39400,155],{"class":154},[65,39402,39403],{"class":140,"line":4426},[65,39404,162],{"emptyLinePlaceholder":161},[65,39406,39407],{"class":140,"line":4431},[65,39408,39409],{"class":278}," // クリックしたindexのスライダーを表示\n",[65,39411,39412,39414,39416,39418,39420,39423,39425,39427,39429,39431,39433],{"class":140,"line":4447},[65,39413,831],{"class":830},[65,39415,834],{"class":154},[65,39417,38857],{"class":214},[65,39419,834],{"class":154},[65,39421,39422],{"class":200},"slideToLoop",[65,39424,224],{"class":204},[65,39426,11865],{"class":214},[65,39428,230],{"class":154},[65,39430,1142],{"class":793},[65,39432,235],{"class":204},[65,39434,155],{"class":154},[65,39436,39437],{"class":140,"line":4470},[65,39438,39439],{"class":278}," // モーダルを開く\n",[65,39441,39442,39444,39446,39448,39450,39453,39455],{"class":140,"line":4490},[65,39443,831],{"class":830},[65,39445,834],{"class":154},[65,39447,38365],{"class":214},[65,39449,834],{"class":154},[65,39451,39452],{"class":200},"showModal",[65,39454,1269],{"class":204},[65,39456,155],{"class":154},[65,39458,39459],{"class":140,"line":4495},[65,39460,1171],{"class":154},[65,39462,39463],{"class":140,"line":4523},[65,39464,162],{"emptyLinePlaceholder":161},[65,39466,39467,39470,39472],{"class":140,"line":4528},[65,39468,39469],{"class":200}," closeModal",[65,39471,1269],{"class":154},[65,39473,418],{"class":154},[65,39475,39476],{"class":140,"line":4542},[65,39477,39478],{"class":278}," // 固定解除\n",[65,39480,39481,39483,39485,39487,39489,39491,39493,39495,39497,39499,39501,39503,39505],{"class":140,"line":4547},[65,39482,39210],{"class":214},[65,39484,834],{"class":154},[65,39486,34838],{"class":214},[65,39488,834],{"class":154},[65,39490,39383],{"class":214},[65,39492,834],{"class":154},[65,39494,28529],{"class":200},[65,39496,224],{"class":204},[65,39498,306],{"class":154},[65,39500,39394],{"class":302},[65,39502,306],{"class":154},[65,39504,235],{"class":204},[65,39506,155],{"class":154},[65,39508,39509,39511,39513,39515,39517,39519,39521,39523,39525,39527],{"class":140,"line":4561},[65,39510,39210],{"class":214},[65,39512,834],{"class":154},[65,39514,34838],{"class":214},[65,39516,834],{"class":154},[65,39518,5313],{"class":214},[65,39520,834],{"class":154},[65,39522,24775],{"class":214},[65,39524,218],{"class":168},[65,39526,36171],{"class":154},[65,39528,155],{"class":154},[65,39530,39531,39534,39536,39539,39541,39543,39545,39547,39549,39551,39553],{"class":140,"line":4567},[65,39532,39533],{"class":214}," window",[65,39535,834],{"class":154},[65,39537,39538],{"class":200},"scrollTo",[65,39540,224],{"class":204},[65,39542,743],{"class":793},[65,39544,230],{"class":154},[65,39546,1434],{"class":830},[65,39548,834],{"class":154},[65,39550,39320],{"class":214},[65,39552,235],{"class":204},[65,39554,155],{"class":154},[65,39556,39557],{"class":140,"line":4572},[65,39558,162],{"emptyLinePlaceholder":161},[65,39560,39561],{"class":140,"line":4582},[65,39562,39563],{"class":278}," // モーダルを閉じる\n",[65,39565,39566,39568,39570,39572,39574,39577,39579],{"class":140,"line":4587},[65,39567,831],{"class":830},[65,39569,834],{"class":154},[65,39571,38365],{"class":214},[65,39573,834],{"class":154},[65,39575,39576],{"class":200},"close",[65,39578,1269],{"class":204},[65,39580,155],{"class":154},[65,39582,39583],{"class":140,"line":4603},[65,39584,1171],{"class":154},[65,39586,39587],{"class":140,"line":4637},[65,39588,243],{"class":154},[65,39590,39591],{"class":140,"line":4685},[65,39592,162],{"emptyLinePlaceholder":161},[65,39594,39595,39597,39600,39602,39604,39606,39608],{"class":140,"line":4690},[65,39596,1769],{"class":168},[65,39598,39599],{"class":144}," modal",[65,39601,218],{"class":168},[65,39603,1776],{"class":168},[65,39605,38618],{"class":200},[65,39607,1269],{"class":204},[65,39609,155],{"class":154},[15,39611,39612],{},"それでは解説していきます！",[2418,39614,3193],{"id":3193},[129,39616,39618],{"className":35286,"code":39617,"filename":35288,"language":35289,"meta":135,"style":135},"class Modal {\n constructor() {\n this.modal = document.querySelector('.js-modal');\n if(!this.modal) return\n this.init();\n }\n init() {\n this.triggers = document.querySelectorAll('.js-modal-trigger');\n this.overlay = document.querySelector('.js-modal-overlay');\n this.closeBtn = document.querySelector('.js-modal-close');\n\n // Swiperの設定\n this.setSwiper();\n\n // クリックイベントなどの設定\n this.event()\n }\n}\n",[124,39619,39620,39628,39636,39664,39682,39694,39698,39706,39734,39762,39790,39794,39798,39810,39814,39818,39828,39832],{"__ignoreMap":135},[65,39621,39622,39624,39626],{"class":140,"line":141},[65,39623,38615],{"class":168},[65,39625,38618],{"class":326},[65,39627,418],{"class":154},[65,39629,39630,39632,39634],{"class":140,"line":158},[65,39631,788],{"class":168},[65,39633,1269],{"class":154},[65,39635,418],{"class":154},[65,39637,39638,39640,39642,39644,39646,39648,39650,39652,39654,39656,39658,39660,39662],{"class":140,"line":165},[65,39639,831],{"class":830},[65,39641,834],{"class":154},[65,39643,38365],{"class":214},[65,39645,218],{"class":168},[65,39647,3413],{"class":214},[65,39649,834],{"class":154},[65,39651,35825],{"class":200},[65,39653,224],{"class":204},[65,39655,306],{"class":154},[65,39657,38651],{"class":302},[65,39659,306],{"class":154},[65,39661,235],{"class":204},[65,39663,155],{"class":154},[65,39665,39666,39668,39670,39672,39674,39676,39678,39680],{"class":140,"line":180},[65,39667,3105],{"class":154},[65,39669,224],{"class":204},[65,39671,2264],{"class":168},[65,39673,2004],{"class":830},[65,39675,834],{"class":154},[65,39677,38365],{"class":214},[65,39679,1713],{"class":204},[65,39681,38676],{"class":154},[65,39683,39684,39686,39688,39690,39692],{"class":140,"line":194},[65,39685,831],{"class":830},[65,39687,834],{"class":154},[65,39689,3193],{"class":200},[65,39691,1269],{"class":204},[65,39693,155],{"class":154},[65,39695,39696],{"class":140,"line":211},[65,39697,1171],{"class":154},[65,39699,39700,39702,39704],{"class":140,"line":240},[65,39701,38697],{"class":200},[65,39703,1269],{"class":154},[65,39705,418],{"class":154},[65,39707,39708,39710,39712,39714,39716,39718,39720,39722,39724,39726,39728,39730,39732],{"class":140,"line":391},[65,39709,831],{"class":830},[65,39711,834],{"class":154},[65,39713,38710],{"class":214},[65,39715,218],{"class":168},[65,39717,3413],{"class":214},[65,39719,834],{"class":154},[65,39721,38719],{"class":200},[65,39723,224],{"class":204},[65,39725,306],{"class":154},[65,39727,38726],{"class":302},[65,39729,306],{"class":154},[65,39731,235],{"class":204},[65,39733,155],{"class":154},[65,39735,39736,39738,39740,39742,39744,39746,39748,39750,39752,39754,39756,39758,39760],{"class":140,"line":401},[65,39737,831],{"class":830},[65,39739,834],{"class":154},[65,39741,38741],{"class":214},[65,39743,218],{"class":168},[65,39745,3413],{"class":214},[65,39747,834],{"class":154},[65,39749,35825],{"class":200},[65,39751,224],{"class":204},[65,39753,306],{"class":154},[65,39755,38756],{"class":302},[65,39757,306],{"class":154},[65,39759,235],{"class":204},[65,39761,155],{"class":154},[65,39763,39764,39766,39768,39770,39772,39774,39776,39778,39780,39782,39784,39786,39788],{"class":140,"line":406},[65,39765,831],{"class":830},[65,39767,834],{"class":154},[65,39769,38771],{"class":214},[65,39771,218],{"class":168},[65,39773,3413],{"class":214},[65,39775,834],{"class":154},[65,39777,35825],{"class":200},[65,39779,224],{"class":204},[65,39781,306],{"class":154},[65,39783,38786],{"class":302},[65,39785,306],{"class":154},[65,39787,235],{"class":204},[65,39789,155],{"class":154},[65,39791,39792],{"class":140,"line":421},[65,39793,162],{"emptyLinePlaceholder":161},[65,39795,39796],{"class":140,"line":435},[65,39797,38801],{"class":278},[65,39799,39800,39802,39804,39806,39808],{"class":140,"line":447},[65,39801,831],{"class":830},[65,39803,834],{"class":154},[65,39805,38810],{"class":200},[65,39807,1269],{"class":204},[65,39809,155],{"class":154},[65,39811,39812],{"class":140,"line":459},[65,39813,162],{"emptyLinePlaceholder":161},[65,39815,39816],{"class":140,"line":471},[65,39817,38823],{"class":278},[65,39819,39820,39822,39824,39826],{"class":140,"line":63},[65,39821,831],{"class":830},[65,39823,834],{"class":154},[65,39825,38832],{"class":200},[65,39827,38835],{"class":204},[65,39829,39830],{"class":140,"line":495},[65,39831,1171],{"class":154},[65,39833,39834],{"class":140,"line":507},[65,39835,243],{"class":154},[15,39837,39838,39840,39841,39843],{},[124,39839,31079],{},"では、モーダルを",[124,39842,38651],{},"クラスで設定したので取得しています。",[15,39845,39846,39848,39849,39852,39853,39856],{},[124,39847,3193],{},"では、モーダルを開くトリガーとモーダルの外側、閉じるボタンを取得しておきます。また、Swiperの設定を行う",[124,39850,39851],{},"setSwiper()","と、イベントを設定する",[124,39854,39855],{},"event()","を呼び出しています。",[2418,39858,38810],{"id":39859},"setswiper",[15,39861,39862,39864],{},[124,39863,38810],{},"では、Swiperの設定を行います。",[129,39866,39868],{"className":35286,"code":39867,"filename":35288,"language":35289,"meta":135,"style":135},"setSwiper() {\n this.swiper = new Swiper('.swiper', {\n slidesPerView: 1,\n loop: true,\n navigation: {\n nextEl: '.swiper-button-next',\n prevEl: '.swiper-button-prev',\n },\n });\n}\n",[124,39869,39870,39878,39904,39915,39926,39935,39950,39965,39969,39977],{"__ignoreMap":135},[65,39871,39872,39874,39876],{"class":140,"line":141},[65,39873,38810],{"class":200},[65,39875,205],{"class":204},[65,39877,208],{"class":154},[65,39879,39880,39882,39884,39886,39888,39890,39892,39894,39896,39898,39900,39902],{"class":140,"line":158},[65,39881,1720],{"class":830},[65,39883,834],{"class":154},[65,39885,38857],{"class":214},[65,39887,218],{"class":168},[65,39889,1776],{"class":168},[65,39891,38864],{"class":200},[65,39893,224],{"class":204},[65,39895,306],{"class":154},[65,39897,38871],{"class":302},[65,39899,306],{"class":154},[65,39901,230],{"class":154},[65,39903,418],{"class":154},[65,39905,39906,39909,39911,39913],{"class":140,"line":165},[65,39907,39908],{"class":204}," slidesPerView",[65,39910,797],{"class":154},[65,39912,3137],{"class":793},[65,39914,3820],{"class":154},[65,39916,39917,39920,39922,39924],{"class":140,"line":180},[65,39918,39919],{"class":204}," loop",[65,39921,797],{"class":154},[65,39923,1016],{"class":793},[65,39925,3820],{"class":154},[65,39927,39928,39931,39933],{"class":140,"line":194},[65,39929,39930],{"class":204}," navigation",[65,39932,797],{"class":154},[65,39934,418],{"class":154},[65,39936,39937,39940,39942,39944,39946,39948],{"class":140,"line":211},[65,39938,39939],{"class":204}," nextEl",[65,39941,797],{"class":154},[65,39943,299],{"class":154},[65,39945,38920],{"class":302},[65,39947,306],{"class":154},[65,39949,3820],{"class":154},[65,39951,39952,39955,39957,39959,39961,39963],{"class":140,"line":240},[65,39953,39954],{"class":204}," prevEl",[65,39956,797],{"class":154},[65,39958,299],{"class":154},[65,39960,38936],{"class":302},[65,39962,306],{"class":154},[65,39964,3820],{"class":154},[65,39966,39967],{"class":140,"line":391},[65,39968,3864],{"class":154},[65,39970,39971,39973,39975],{"class":140,"line":401},[65,39972,1977],{"class":154},[65,39974,235],{"class":204},[65,39976,155],{"class":154},[65,39978,39979],{"class":140,"line":406},[65,39980,243],{"class":154},[15,39982,39983,39984,39986,39987,39989,39990,39992,39993,39996],{},"ここでは、スライダーを1枚表示し、ループ機能をオンにしています。",[5467,39985],{},"\nまた、スライダーの矢印(",[124,39988,38920],{},", ",[124,39991,38936],{},")を",[124,39994,39995],{},"navigation","で設定するようにしましょう。",[2418,39998,38832],{"id":38832},[15,40000,40001,40003],{},[124,40002,38832],{},"では、クリックイベントやキーボードイベントを設定します。",[129,40005,40007],{"className":35286,"code":40006,"filename":35288,"language":35289,"meta":135,"style":135},"event() {\n // ギャラリーの画像をクリックしたとき\n this.triggers.forEach((trigger, index) => {\n trigger.addEventListener('click', (e) => {\n e.preventDefault();\n this.openModal(index);\n } );\n });\n\n // 閉じるボタンをクリックしたとき\n this.closeBtn.addEventListener('click', () => {\n this.closeModal();\n });\n\n // モーダルの外側をクリックしたとき\n this.overlay.addEventListener('click', () => {\n this.closeModal();\n });\n\n // Escキーを押したとき\n document.addEventListener('keydown', (e) => {\n if(e.key === 'Escape') {\n this.closeModal();\n }\n });\n}\n",[124,40008,40009,40017,40022,40050,40079,40092,40108,40116,40124,40128,40133,40161,40173,40181,40185,40190,40218,40230,40238,40242,40247,40276,40300,40312,40316,40324],{"__ignoreMap":135},[65,40010,40011,40013,40015],{"class":140,"line":141},[65,40012,38832],{"class":200},[65,40014,205],{"class":204},[65,40016,208],{"class":154},[65,40018,40019],{"class":140,"line":158},[65,40020,40021],{"class":278}," // ギャラリーの画像をクリックしたとき\n",[65,40023,40024,40026,40028,40030,40032,40034,40036,40038,40040,40042,40044,40046,40048],{"class":140,"line":165},[65,40025,1720],{"class":830},[65,40027,834],{"class":154},[65,40029,38710],{"class":214},[65,40031,834],{"class":154},[65,40033,38987],{"class":200},[65,40035,224],{"class":204},[65,40037,224],{"class":154},[65,40039,38994],{"class":793},[65,40041,230],{"class":154},[65,40043,6187],{"class":793},[65,40045,235],{"class":154},[65,40047,1862],{"class":168},[65,40049,418],{"class":154},[65,40051,40052,40055,40057,40059,40061,40063,40065,40067,40069,40071,40073,40075,40077],{"class":140,"line":180},[65,40053,40054],{"class":214}," trigger",[65,40056,834],{"class":154},[65,40058,4698],{"class":200},[65,40060,224],{"class":204},[65,40062,306],{"class":154},[65,40064,36197],{"class":302},[65,40066,306],{"class":154},[65,40068,230],{"class":154},[65,40070,1696],{"class":154},[65,40072,1968],{"class":793},[65,40074,235],{"class":154},[65,40076,1862],{"class":168},[65,40078,418],{"class":154},[65,40080,40081,40084,40086,40088,40090],{"class":140,"line":194},[65,40082,40083],{"class":214}," e",[65,40085,834],{"class":154},[65,40087,39043],{"class":200},[65,40089,1269],{"class":204},[65,40091,155],{"class":154},[65,40093,40094,40096,40098,40100,40102,40104,40106],{"class":140,"line":211},[65,40095,20954],{"class":830},[65,40097,834],{"class":154},[65,40099,39056],{"class":200},[65,40101,224],{"class":204},[65,40103,11865],{"class":214},[65,40105,235],{"class":204},[65,40107,155],{"class":154},[65,40109,40110,40112,40114],{"class":140,"line":240},[65,40111,6341],{"class":154},[65,40113,39071],{"class":204},[65,40115,155],{"class":154},[65,40117,40118,40120,40122],{"class":140,"line":391},[65,40119,1977],{"class":154},[65,40121,235],{"class":204},[65,40123,155],{"class":154},[65,40125,40126],{"class":140,"line":401},[65,40127,162],{"emptyLinePlaceholder":161},[65,40129,40130],{"class":140,"line":406},[65,40131,40132],{"class":278}," // 閉じるボタンをクリックしたとき\n",[65,40134,40135,40137,40139,40141,40143,40145,40147,40149,40151,40153,40155,40157,40159],{"class":140,"line":421},[65,40136,1720],{"class":830},[65,40138,834],{"class":154},[65,40140,38771],{"class":214},[65,40142,834],{"class":154},[65,40144,4698],{"class":200},[65,40146,224],{"class":204},[65,40148,306],{"class":154},[65,40150,36197],{"class":302},[65,40152,306],{"class":154},[65,40154,230],{"class":154},[65,40156,1932],{"class":154},[65,40158,1862],{"class":168},[65,40160,418],{"class":154},[65,40162,40163,40165,40167,40169,40171],{"class":140,"line":435},[65,40164,831],{"class":830},[65,40166,834],{"class":154},[65,40168,39127],{"class":200},[65,40170,1269],{"class":204},[65,40172,155],{"class":154},[65,40174,40175,40177,40179],{"class":140,"line":447},[65,40176,1977],{"class":154},[65,40178,235],{"class":204},[65,40180,155],{"class":154},[65,40182,40183],{"class":140,"line":459},[65,40184,162],{"emptyLinePlaceholder":161},[65,40186,40187],{"class":140,"line":471},[65,40188,40189],{"class":278}," // モーダルの外側をクリックしたとき\n",[65,40191,40192,40194,40196,40198,40200,40202,40204,40206,40208,40210,40212,40214,40216],{"class":140,"line":63},[65,40193,1720],{"class":830},[65,40195,834],{"class":154},[65,40197,38741],{"class":214},[65,40199,834],{"class":154},[65,40201,4698],{"class":200},[65,40203,224],{"class":204},[65,40205,306],{"class":154},[65,40207,36197],{"class":302},[65,40209,306],{"class":154},[65,40211,230],{"class":154},[65,40213,1932],{"class":154},[65,40215,1862],{"class":168},[65,40217,418],{"class":154},[65,40219,40220,40222,40224,40226,40228],{"class":140,"line":495},[65,40221,831],{"class":830},[65,40223,834],{"class":154},[65,40225,39127],{"class":200},[65,40227,1269],{"class":204},[65,40229,155],{"class":154},[65,40231,40232,40234,40236],{"class":140,"line":507},[65,40233,1977],{"class":154},[65,40235,235],{"class":204},[65,40237,155],{"class":154},[65,40239,40240],{"class":140,"line":519},[65,40241,162],{"emptyLinePlaceholder":161},[65,40243,40244],{"class":140,"line":531},[65,40245,40246],{"class":278}," // Escキーを押したとき\n",[65,40248,40249,40252,40254,40256,40258,40260,40262,40264,40266,40268,40270,40272,40274],{"class":140,"line":543},[65,40250,40251],{"class":214}," document",[65,40253,834],{"class":154},[65,40255,4698],{"class":200},[65,40257,224],{"class":204},[65,40259,306],{"class":154},[65,40261,39221],{"class":302},[65,40263,306],{"class":154},[65,40265,230],{"class":154},[65,40267,1696],{"class":154},[65,40269,1968],{"class":793},[65,40271,235],{"class":154},[65,40273,1862],{"class":168},[65,40275,418],{"class":154},[65,40277,40278,40280,40282,40284,40286,40288,40290,40292,40294,40296,40298],{"class":140,"line":555},[65,40279,3105],{"class":154},[65,40281,224],{"class":204},[65,40283,1968],{"class":214},[65,40285,834],{"class":154},[65,40287,39248],{"class":214},[65,40289,1704],{"class":168},[65,40291,299],{"class":154},[65,40293,39255],{"class":302},[65,40295,306],{"class":154},[65,40297,1713],{"class":204},[65,40299,208],{"class":154},[65,40301,40302,40304,40306,40308,40310],{"class":140,"line":567},[65,40303,20954],{"class":830},[65,40305,834],{"class":154},[65,40307,39127],{"class":200},[65,40309,1269],{"class":204},[65,40311,155],{"class":154},[65,40313,40314],{"class":140,"line":3757},[65,40315,3204],{"class":154},[65,40317,40318,40320,40322],{"class":140,"line":3787},[65,40319,1977],{"class":154},[65,40321,235],{"class":204},[65,40323,155],{"class":154},[65,40325,40326],{"class":140,"line":3792},[65,40327,243],{"class":154},[15,40329,40330,40331,40333,40334,39856],{},"ギャラリーの画像は、",[124,40332,29],{},"タグで実装しているのでリンク遷移を防ぐために",[124,40335,40336],{},"e.preventDefault()",[15,40338,40339,40340,40343,40344,40347,40348,40350,40352,40353,40355],{},"モーダルを開く処理は",[124,40341,40342],{},"openModal()","メソッドで、閉じる処理は",[124,40345,40346],{},"closeModal()","メソッドで行います。",[5467,40349],{},[124,40351,40342],{},"にクリックした要素の",[124,40354,11865],{},"を渡すことで、表示するスライダーを指定することができます。",[2418,40357,39056],{"id":40358},"openmodal",[15,40360,40361,40363],{},[124,40362,39056],{},"では、モーダルを開く処理を書いています。",[21568,40365,40366],{"id":40366},"モーダルのガタツキを防ぐ",[15,40368,40369,40370,37431,40372,40374],{},"そのままだと、スクロールするとモーダルの裏側にあるコンテンツがスクロールしてしまうので、",[124,40371,34838],{},[124,40373,39394],{},"クラスを追加してスクロールを固定します。",[129,40376,40378],{"className":35286,"code":40377,"filename":35288,"language":35289,"meta":135,"style":135},"openModal(index) {\n // モーダルを開いた時に固定にするための設定\n this.bodyOffsetY = window.scrollY;\n document.body.style.top = `-${this.bodyOffsetY}px`;\n document.body.classList.add('is-scrollLock');\n}\n",[124,40379,40380,40392,40397,40415,40453,40481],{"__ignoreMap":135},[65,40381,40382,40384,40386,40388,40390],{"class":140,"line":141},[65,40383,39056],{"class":200},[65,40385,224],{"class":204},[65,40387,11865],{"class":144},[65,40389,1713],{"class":204},[65,40391,208],{"class":154},[65,40393,40394],{"class":140,"line":158},[65,40395,40396],{"class":278}," // モーダルを開いた時に固定にするための設定\n",[65,40398,40399,40401,40403,40405,40407,40409,40411,40413],{"class":140,"line":165},[65,40400,1720],{"class":830},[65,40402,834],{"class":154},[65,40404,39320],{"class":214},[65,40406,218],{"class":168},[65,40408,4625],{"class":214},[65,40410,834],{"class":154},[65,40412,39329],{"class":214},[65,40414,155],{"class":154},[65,40416,40417,40419,40421,40423,40425,40427,40429,40431,40433,40435,40437,40439,40441,40443,40445,40447,40449,40451],{"class":140,"line":180},[65,40418,40251],{"class":214},[65,40420,834],{"class":154},[65,40422,34838],{"class":214},[65,40424,834],{"class":154},[65,40426,5313],{"class":214},[65,40428,834],{"class":154},[65,40430,24775],{"class":214},[65,40432,218],{"class":168},[65,40434,36536],{"class":154},[65,40436,3936],{"class":302},[65,40438,30704],{"class":154},[65,40440,2004],{"class":830},[65,40442,834],{"class":154},[65,40444,39320],{"class":214},[65,40446,2899],{"class":154},[65,40448,39366],{"class":302},[65,40450,30698],{"class":154},[65,40452,155],{"class":154},[65,40454,40455,40457,40459,40461,40463,40465,40467,40469,40471,40473,40475,40477,40479],{"class":140,"line":194},[65,40456,40251],{"class":214},[65,40458,834],{"class":154},[65,40460,34838],{"class":214},[65,40462,834],{"class":154},[65,40464,39383],{"class":214},[65,40466,834],{"class":154},[65,40468,3962],{"class":200},[65,40470,224],{"class":204},[65,40472,306],{"class":154},[65,40474,39394],{"class":302},[65,40476,306],{"class":154},[65,40478,235],{"class":204},[65,40480,155],{"class":154},[65,40482,40483],{"class":140,"line":211},[65,40484,243],{"class":154},[15,40486,40487,40490],{},[124,40488,40489],{},"window.scrollY","などのコードは、モーダルを開いた際にガタつかないようにするためのコードになります。",[15,40492,40493,40495],{},[124,40494,39394],{},"のCSSは以下のように設定してます。",[129,40497,40499],{"className":34988,"code":40498,"filename":34985,"language":34984,"meta":135,"style":135},"body.is-scrollLock {\n position: fixed;\n width: 100%;\n overflow-y: scroll;\n}\n",[124,40500,40501,40511,40521,40532,40544],{"__ignoreMap":135},[65,40502,40503,40505,40507,40509],{"class":140,"line":141},[65,40504,34838],{"class":214},[65,40506,834],{"class":154},[65,40508,39394],{"class":326},[65,40510,418],{"class":154},[65,40512,40513,40515,40517,40519],{"class":140,"line":158},[65,40514,8393],{"class":340},[65,40516,797],{"class":154},[65,40518,35008],{"class":793},[65,40520,155],{"class":154},[65,40522,40523,40525,40527,40530],{"class":140,"line":165},[65,40524,546],{"class":340},[65,40526,797],{"class":154},[65,40528,40529],{"class":793}," 100%",[65,40531,155],{"class":154},[65,40533,40534,40537,40539,40542],{"class":140,"line":180},[65,40535,40536],{"class":340}," overflow-y",[65,40538,797],{"class":154},[65,40540,40541],{"class":793}," scroll",[65,40543,155],{"class":154},[65,40545,40546],{"class":140,"line":194},[65,40547,243],{"class":154},[21568,40549,40550],{"id":40550},"表示するスライダーの指定",[129,40552,40554],{"className":35286,"code":40553,"filename":35288,"language":35289,"meta":135,"style":135},"openModal(index) {\n // クリックしたindexのスライダーを表示\n this.swiper.slideToLoop(index, 0); \n}\n",[124,40555,40556,40568,40573,40599],{"__ignoreMap":135},[65,40557,40558,40560,40562,40564,40566],{"class":140,"line":141},[65,40559,39056],{"class":200},[65,40561,224],{"class":204},[65,40563,11865],{"class":144},[65,40565,1713],{"class":204},[65,40567,208],{"class":154},[65,40569,40570],{"class":140,"line":158},[65,40571,40572],{"class":278}," // クリックしたindexのスライダーを表示\n",[65,40574,40575,40577,40579,40581,40583,40585,40587,40589,40591,40593,40595,40597],{"class":140,"line":165},[65,40576,1720],{"class":830},[65,40578,834],{"class":154},[65,40580,38857],{"class":214},[65,40582,834],{"class":154},[65,40584,39422],{"class":200},[65,40586,224],{"class":204},[65,40588,11865],{"class":214},[65,40590,230],{"class":154},[65,40592,1142],{"class":793},[65,40594,235],{"class":204},[65,40596,6005],{"class":154},[65,40598,34890],{"class":204},[65,40600,40601],{"class":140,"line":180},[65,40602,243],{"class":154},[15,40604,40605,40606,40608,40609,40612],{},"クリックした画像は、引数の",[124,40607,11865],{},"になるので、",[124,40610,40611],{},"this.swiper.slideToLoop(index, 0)","で表示するスライダーを指定します。",[15,40614,40615,40616,40618,40619,40622,40623,40625],{},"ここで、Swiperの設定を",[124,40617,4093],{},"にしているので",[124,40620,40621],{},"slideToLoop()","でスライドの移動をするようにしてください。",[124,40624,40621],{},"の第2引数は、スライドのスピードを設定できます。これを0にすることで、スライドの移動が瞬時に終わるようになり、モーダルを開いた際の違和感を無くすことができます。",[21568,40627,40628],{"id":40628},"モーダルの表示",[129,40630,40632],{"className":35286,"code":40631,"filename":35288,"language":35289,"meta":135,"style":135},"openModal(index) {\n // モーダルを開く\n this.modal.showModal();\n}\n",[124,40633,40634,40646,40651,40667],{"__ignoreMap":135},[65,40635,40636,40638,40640,40642,40644],{"class":140,"line":141},[65,40637,39056],{"class":200},[65,40639,224],{"class":204},[65,40641,11865],{"class":144},[65,40643,1713],{"class":204},[65,40645,208],{"class":154},[65,40647,40648],{"class":140,"line":158},[65,40649,40650],{"class":278}," // モーダルを開く\n",[65,40652,40653,40655,40657,40659,40661,40663,40665],{"class":140,"line":165},[65,40654,1720],{"class":830},[65,40656,834],{"class":154},[65,40658,38365],{"class":214},[65,40660,834],{"class":154},[65,40662,39452],{"class":200},[65,40664,1269],{"class":204},[65,40666,155],{"class":154},[65,40668,40669],{"class":140,"line":180},[65,40670,243],{"class":154},[15,40672,40673,40675,40676,40679],{},[124,40674,37647],{},"要素のモーダルを開くには、",[124,40677,40678],{},"showModal()","メソッドを使用することで、モーダルを表示することができます。",[2418,40681,39127],{"id":40682},"closemodal",[15,40684,40685,40687],{},[124,40686,39127],{},"では、モーダルを閉じる処理を書いています。",[129,40689,40691],{"className":35286,"code":40690,"filename":35288,"language":35289,"meta":135,"style":135},"closeModal() {\n // 固定解除\n document.body.classList.remove('is-scrollLock');\n document.body.style.top = '';\n window.scrollTo(0, this.bodyOffsetY);\n\n // モーダルを閉じる\n this.modal.close();\n}\n",[124,40692,40693,40701,40706,40734,40756,40780,40784,40789,40805],{"__ignoreMap":135},[65,40694,40695,40697,40699],{"class":140,"line":141},[65,40696,39127],{"class":200},[65,40698,205],{"class":204},[65,40700,208],{"class":154},[65,40702,40703],{"class":140,"line":158},[65,40704,40705],{"class":278}," // 固定解除\n",[65,40707,40708,40710,40712,40714,40716,40718,40720,40722,40724,40726,40728,40730,40732],{"class":140,"line":165},[65,40709,40251],{"class":214},[65,40711,834],{"class":154},[65,40713,34838],{"class":214},[65,40715,834],{"class":154},[65,40717,39383],{"class":214},[65,40719,834],{"class":154},[65,40721,28529],{"class":200},[65,40723,224],{"class":204},[65,40725,306],{"class":154},[65,40727,39394],{"class":302},[65,40729,306],{"class":154},[65,40731,235],{"class":204},[65,40733,155],{"class":154},[65,40735,40736,40738,40740,40742,40744,40746,40748,40750,40752,40754],{"class":140,"line":180},[65,40737,40251],{"class":214},[65,40739,834],{"class":154},[65,40741,34838],{"class":214},[65,40743,834],{"class":154},[65,40745,5313],{"class":214},[65,40747,834],{"class":154},[65,40749,24775],{"class":214},[65,40751,218],{"class":168},[65,40753,36171],{"class":154},[65,40755,155],{"class":154},[65,40757,40758,40760,40762,40764,40766,40768,40770,40772,40774,40776,40778],{"class":140,"line":194},[65,40759,4693],{"class":214},[65,40761,834],{"class":154},[65,40763,39538],{"class":200},[65,40765,224],{"class":204},[65,40767,743],{"class":793},[65,40769,230],{"class":154},[65,40771,1434],{"class":830},[65,40773,834],{"class":154},[65,40775,39320],{"class":214},[65,40777,235],{"class":204},[65,40779,155],{"class":154},[65,40781,40782],{"class":140,"line":211},[65,40783,162],{"emptyLinePlaceholder":161},[65,40785,40786],{"class":140,"line":240},[65,40787,40788],{"class":278}," // モーダルを閉じる\n",[65,40790,40791,40793,40795,40797,40799,40801,40803],{"class":140,"line":391},[65,40792,1720],{"class":830},[65,40794,834],{"class":154},[65,40796,38365],{"class":214},[65,40798,834],{"class":154},[65,40800,39576],{"class":200},[65,40802,1269],{"class":204},[65,40804,155],{"class":154},[65,40806,40807],{"class":140,"line":401},[65,40808,243],{"class":154},[15,40810,40811,40812,40814,40815,40817,40818,40821],{},"スクロールを固定しているので、",[124,40813,39394],{},"クラスを外すなどで固定を解除します。",[5467,40816],{},"\nモーダルを閉じるには、",[124,40819,40820],{},"close()","メソッドを使用することで、モーダルを閉じることができます。",[15,40823,40824],{},"以上が、モーダルとSwiperの組み合わせの実装方法の解説になります。",[11,40826,5299],{"id":5299},[15,40828,40829,40830,40832],{},"Web制作でよくある実装の、モーダルの中にスライダーがある実装方法を解説しました。",[5467,40831],{},"\nこのデモでは、モーダルが1つの場合の実装方法でしたが、実際には複数のモーダルを組み合わせることがあるでしょう。その場合は、このデモの実装方法を参考に対応してみてください！",[5313,40834,40835],{},"html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .stCc5, html code.shiki .stCc5{--shiki-default:#FFCB6B;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s9qRY, html code.shiki .s9qRY{--shiki-default:#FF5370;--shiki-default-font-style:italic}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}",{"title":135,"searchDepth":165,"depth":165,"links":40837},[40838,40839,40840,40851],{"id":13,"depth":158,"text":13},{"id":37659,"depth":158,"text":37659},{"id":37681,"depth":158,"text":37637,"children":40841},[40842,40843,40844],{"id":34821,"depth":165,"text":34822},{"id":34984,"depth":165,"text":34985},{"id":38599,"depth":165,"text":35288,"children":40845},[40846,40847,40848,40849,40850],{"id":3193,"depth":180,"text":3193},{"id":39859,"depth":180,"text":38810},{"id":38832,"depth":180,"text":38832},{"id":40358,"depth":180,"text":39056},{"id":40682,"depth":180,"text":39127},{"id":5299,"depth":158,"text":5299},"2025-08-29T00:00:00.000Z","モーダルの中にSwiperで実装したスライダーがある場合の実装方法を解説します。デモでは画像のギャラリーがあり、クリックするとその画像のモーダルが開き、スライダーで操作できるようにします！","/images/blog/modal-with-swiper-slider.jpg",{},"/blog/modal-with-swiper-slider",{"title":37637,"description":40853},"blog/modal-with-swiper-slider",[40860,40861],"dialog要素を使用したモーダルの実装方法","Swiperとモーダルの組み合わせ方法",[35288,40863],"Swiper","O5EO77p-XeanlV3sMzXOuPK-Ctv3ZK2RM49a47YhpOw",{"id":40866,"title":40867,"body":40868,"date":42229,"description":42230,"draft":5339,"extension":5340,"image":42231,"meta":42232,"navigation":161,"path":42233,"seo":42234,"stem":42235,"summaryList":42236,"summaryText":5348,"tags":42239,"__hash__":42240},"blog/blog/javascript-new-date.md","JavaScriptのnew Dateで日付や時間の扱い方を紹介",{"type":8,"value":40869,"toc":42214},[40870,40872,40875,40879,40885,40927,40936,41005,41008,41011,41020,41081,41084,41099,41207,41210,41221,41234,41375,41378,41387,41393,41538,41541,41547,41550,41636,41642,41652,41722,41726,41731,41734,41744,41751,41902,41908,42050,42056,42192,42194,42200,42202,42211],[11,40871,13],{"id":13},[15,40873,40874],{},"JavaScriptのDateオブジェクトは、日付や時間を扱うためのオブジェクトです。この記事では、初心者の方でも分かりやすいように、JavaScriptのDateオブジェクトの使い方を順番に解説していきます。",[11,40876,40878],{"id":40877},"dateオブジェクトの基本の使い方","Dateオブジェクトの基本の使い方",[15,40880,40881,40882,40884],{},"JavaScriptで",[124,40883,35793],{},"を呼び出すだけで、現在の日時を表すオブジェクトが作成されます。",[129,40886,40888],{"className":35286,"code":40887,"filename":35288,"language":35289,"meta":135,"style":135},"const now = new Date();\nconsole.log(now); // 例: Tue Aug 28 2025 00:00:00 GMT+0900 (日本標準時)\n",[124,40889,40890,40907],{"__ignoreMap":135},[65,40891,40892,40894,40897,40899,40901,40903,40905],{"class":140,"line":141},[65,40893,1769],{"class":168},[65,40895,40896],{"class":144}," now",[65,40898,218],{"class":168},[65,40900,1776],{"class":168},[65,40902,35976],{"class":200},[65,40904,1269],{"class":204},[65,40906,155],{"class":154},[65,40908,40909,40911,40913,40915,40917,40920,40922,40924],{"class":140,"line":158},[65,40910,35301],{"class":144},[65,40912,834],{"class":154},[65,40914,35306],{"class":200},[65,40916,224],{"class":204},[65,40918,40919],{"class":144},"now",[65,40921,235],{"class":204},[65,40923,6005],{"class":154},[65,40925,40926],{"class":278}," // 例: Tue Aug 28 2025 00:00:00 GMT+0900 (日本標準時)\n",[15,40928,40929,40930,40932,40933,40935],{},"引数なしで",[124,40931,35793],{},"を呼ぶことで、現在の日付が入ったDateオブジェクトが作成されます。",[5467,40934],{},"\n作成したDateオブジェクトから「年」や「月」などの情報を取得することができます。",[583,40937,40938,40947],{},[586,40939,40940],{},[589,40941,40942,40945],{},[592,40943,40944],{},"メソッド名",[592,40946,597],{},[602,40948,40949,40957,40965,40973,40981,40989,40997],{},[589,40950,40951,40954],{},[607,40952,40953],{},"getFullYear()",[607,40955,40956],{},"西暦を取得する。",[589,40958,40959,40962],{},[607,40960,40961],{},"getMonth()",[607,40963,40964],{},"月を取得する。",[589,40966,40967,40970],{},[607,40968,40969],{},"getDate()",[607,40971,40972],{},"日を取得する。",[589,40974,40975,40978],{},[607,40976,40977],{},"getHours()",[607,40979,40980],{},"時を取得する。",[589,40982,40983,40986],{},[607,40984,40985],{},"getMinutes()",[607,40987,40988],{},"分を取得する。",[589,40990,40991,40994],{},[607,40992,40993],{},"getSeconds()",[607,40995,40996],{},"秒を取得する。",[589,40998,40999,41002],{},[607,41000,41001],{},"getDay()",[607,41003,41004],{},"曜日を取得する。",[15,41006,41007],{},"それぞれのメソッドについて詳しく説明します。",[1177,41009,41010],{"id":41010},"西暦を取得する",[15,41012,41013,41014,41016,41017,41019],{},"西暦を取得するには、",[124,41015,40953],{},"メソッドを使います。",[5467,41018],{},"\n西暦なので4桁の数値が返ります。",[129,41021,41023],{"className":35286,"code":41022,"filename":35288,"language":35289,"meta":135,"style":135},"const now = new Date();\nconst year = now.getFullYear();\nconsole.log(year); // 例: 2025\n",[124,41024,41025,41041,41061],{"__ignoreMap":135},[65,41026,41027,41029,41031,41033,41035,41037,41039],{"class":140,"line":141},[65,41028,1769],{"class":168},[65,41030,40896],{"class":144},[65,41032,218],{"class":168},[65,41034,1776],{"class":168},[65,41036,35976],{"class":200},[65,41038,1269],{"class":204},[65,41040,155],{"class":154},[65,41042,41043,41045,41048,41050,41052,41054,41057,41059],{"class":140,"line":158},[65,41044,1769],{"class":168},[65,41046,41047],{"class":144}," year",[65,41049,218],{"class":168},[65,41051,40896],{"class":144},[65,41053,834],{"class":154},[65,41055,41056],{"class":200},"getFullYear",[65,41058,1269],{"class":204},[65,41060,155],{"class":154},[65,41062,41063,41065,41067,41069,41071,41074,41076,41078],{"class":140,"line":165},[65,41064,35301],{"class":144},[65,41066,834],{"class":154},[65,41068,35306],{"class":200},[65,41070,224],{"class":204},[65,41072,41073],{"class":144},"year",[65,41075,235],{"class":204},[65,41077,6005],{"class":154},[65,41079,41080],{"class":278}," // 例: 2025\n",[1177,41082,41083],{"id":41083},"日付を取得する",[15,41085,41086,41087,41089,41090,41092,41093,41095,41096,41098],{},"月を取得するには、",[124,41088,40961],{},"メソッドを、日を取得するには、",[124,41091,40969],{},"メソッドを使います。月を取得する",[124,41094,40961],{},"メソッドは0から始まるので、1を足して月を取得する必要があります。日を取得する",[124,41097,40969],{},"メソッドはそのまま日を取得するので加工する必要はありません。",[129,41100,41102],{"className":35286,"code":41101,"filename":35288,"language":35289,"meta":135,"style":135},"const now = new Date();\nconst month = now.getMonth() + 1; // 0から始まるので1を足す\nconst date = now.getDate();\nconsole.log(month); // 例: 8\nconsole.log(date); // 例: 28\n",[124,41103,41104,41120,41147,41167,41187],{"__ignoreMap":135},[65,41105,41106,41108,41110,41112,41114,41116,41118],{"class":140,"line":141},[65,41107,1769],{"class":168},[65,41109,40896],{"class":144},[65,41111,218],{"class":168},[65,41113,1776],{"class":168},[65,41115,35976],{"class":200},[65,41117,1269],{"class":204},[65,41119,155],{"class":154},[65,41121,41122,41124,41127,41129,41131,41133,41136,41138,41140,41142,41144],{"class":140,"line":158},[65,41123,1769],{"class":168},[65,41125,41126],{"class":144}," month",[65,41128,218],{"class":168},[65,41130,40896],{"class":144},[65,41132,834],{"class":154},[65,41134,41135],{"class":200},"getMonth",[65,41137,205],{"class":204},[65,41139,17980],{"class":168},[65,41141,3137],{"class":793},[65,41143,6005],{"class":154},[65,41145,41146],{"class":278}," // 0から始まるので1を足す\n",[65,41148,41149,41151,41154,41156,41158,41160,41163,41165],{"class":140,"line":165},[65,41150,1769],{"class":168},[65,41152,41153],{"class":144}," date",[65,41155,218],{"class":168},[65,41157,40896],{"class":144},[65,41159,834],{"class":154},[65,41161,41162],{"class":200},"getDate",[65,41164,1269],{"class":204},[65,41166,155],{"class":154},[65,41168,41169,41171,41173,41175,41177,41180,41182,41184],{"class":140,"line":180},[65,41170,35301],{"class":144},[65,41172,834],{"class":154},[65,41174,35306],{"class":200},[65,41176,224],{"class":204},[65,41178,41179],{"class":144},"month",[65,41181,235],{"class":204},[65,41183,6005],{"class":154},[65,41185,41186],{"class":278}," // 例: 8\n",[65,41188,41189,41191,41193,41195,41197,41200,41202,41204],{"class":140,"line":194},[65,41190,35301],{"class":144},[65,41192,834],{"class":154},[65,41194,35306],{"class":200},[65,41196,224],{"class":204},[65,41198,41199],{"class":144},"date",[65,41201,235],{"class":204},[65,41203,6005],{"class":154},[65,41205,41206],{"class":278}," // 例: 28\n",[1177,41208,41209],{"id":41209},"時刻を取得する",[15,41211,41212,41213,41215,41216,41218,41219,41016],{},"時間を取得するには",[124,41214,40977],{},"メソッドを、分を取得するには",[124,41217,40985],{},"メソッドを使い、秒を取得するには、",[124,41220,40993],{},[15,41222,41223,41225,41226,2765,41228,41230,41231,41233],{},[124,41224,40977],{},"メソッドは、0〜23の整数を返します。",[124,41227,40985],{},[124,41229,40993],{},"メソッドは、0〜59の整数を返します。",[124,41232,40977],{},"メソッドを使う場合は、24時の場合は0が返ってくるので気をつけましょう。",[129,41235,41237],{"className":35286,"code":41236,"filename":35288,"language":35289,"meta":135,"style":135},"const now = new Date();\nconst hours = now.getHours();\nconst minutes = now.getMinutes();\nconst seconds = now.getSeconds();\nconsole.log(hours); // 例: 17\nconsole.log(minutes); // 例: 20\nconsole.log(seconds); // 例: 50\n",[124,41238,41239,41255,41275,41295,41315,41335,41355],{"__ignoreMap":135},[65,41240,41241,41243,41245,41247,41249,41251,41253],{"class":140,"line":141},[65,41242,1769],{"class":168},[65,41244,40896],{"class":144},[65,41246,218],{"class":168},[65,41248,1776],{"class":168},[65,41250,35976],{"class":200},[65,41252,1269],{"class":204},[65,41254,155],{"class":154},[65,41256,41257,41259,41262,41264,41266,41268,41271,41273],{"class":140,"line":158},[65,41258,1769],{"class":168},[65,41260,41261],{"class":144}," hours",[65,41263,218],{"class":168},[65,41265,40896],{"class":144},[65,41267,834],{"class":154},[65,41269,41270],{"class":200},"getHours",[65,41272,1269],{"class":204},[65,41274,155],{"class":154},[65,41276,41277,41279,41282,41284,41286,41288,41291,41293],{"class":140,"line":165},[65,41278,1769],{"class":168},[65,41280,41281],{"class":144}," minutes",[65,41283,218],{"class":168},[65,41285,40896],{"class":144},[65,41287,834],{"class":154},[65,41289,41290],{"class":200},"getMinutes",[65,41292,1269],{"class":204},[65,41294,155],{"class":154},[65,41296,41297,41299,41302,41304,41306,41308,41311,41313],{"class":140,"line":180},[65,41298,1769],{"class":168},[65,41300,41301],{"class":144}," seconds",[65,41303,218],{"class":168},[65,41305,40896],{"class":144},[65,41307,834],{"class":154},[65,41309,41310],{"class":200},"getSeconds",[65,41312,1269],{"class":204},[65,41314,155],{"class":154},[65,41316,41317,41319,41321,41323,41325,41328,41330,41332],{"class":140,"line":194},[65,41318,35301],{"class":144},[65,41320,834],{"class":154},[65,41322,35306],{"class":200},[65,41324,224],{"class":204},[65,41326,41327],{"class":144},"hours",[65,41329,235],{"class":204},[65,41331,6005],{"class":154},[65,41333,41334],{"class":278}," // 例: 17\n",[65,41336,41337,41339,41341,41343,41345,41348,41350,41352],{"class":140,"line":211},[65,41338,35301],{"class":144},[65,41340,834],{"class":154},[65,41342,35306],{"class":200},[65,41344,224],{"class":204},[65,41346,41347],{"class":144},"minutes",[65,41349,235],{"class":204},[65,41351,6005],{"class":154},[65,41353,41354],{"class":278}," // 例: 20\n",[65,41356,41357,41359,41361,41363,41365,41368,41370,41372],{"class":140,"line":240},[65,41358,35301],{"class":144},[65,41360,834],{"class":154},[65,41362,35306],{"class":200},[65,41364,224],{"class":204},[65,41366,41367],{"class":144},"seconds",[65,41369,235],{"class":204},[65,41371,6005],{"class":154},[65,41373,41374],{"class":278}," // 例: 50\n",[1177,41376,41377],{"id":41377},"曜日を取得する",[15,41379,41380,41381,41383,41384,41386],{},"曜日を取得するには、",[124,41382,41001],{},"メソッドを使用します。",[124,41385,41001],{},"メソッドは、0~6の整数を返します。0は日曜日、1は月曜日、2は火曜日、3は水曜日、4は木曜日、5は金曜日、6は土曜日です。",[15,41388,41389,41390,41392],{},"実際に使用するときには、配列で曜日の文字列を用意して、",[124,41391,41001],{},"メソッドの返り値をインデックスとして使用します。日曜日が0になるので、配列は日曜日始まりにしましょう。",[129,41394,41396],{"className":35286,"code":41395,"filename":35288,"language":35289,"meta":135,"style":135},"const daysOfWeek = ['日', '月', '火', '水', '木', '金', '土'];\nconst now = new Date();\nconst dayOfWeek = daysOfWeek[now.getDay()]; // 例: 4\nconsole.log(dayOfWeek); // 例: 木\n",[124,41397,41398,41474,41490,41518],{"__ignoreMap":135},[65,41399,41400,41402,41405,41407,41409,41411,41414,41416,41418,41420,41423,41425,41427,41429,41432,41434,41436,41438,41441,41443,41445,41447,41450,41452,41454,41456,41459,41461,41463,41465,41468,41470,41472],{"class":140,"line":141},[65,41401,1769],{"class":168},[65,41403,41404],{"class":144}," daysOfWeek",[65,41406,218],{"class":168},[65,41408,30228],{"class":204},[65,41410,306],{"class":154},[65,41412,41413],{"class":302},"日",[65,41415,306],{"class":154},[65,41417,230],{"class":154},[65,41419,299],{"class":154},[65,41421,41422],{"class":302},"月",[65,41424,306],{"class":154},[65,41426,230],{"class":154},[65,41428,299],{"class":154},[65,41430,41431],{"class":302},"火",[65,41433,306],{"class":154},[65,41435,230],{"class":154},[65,41437,299],{"class":154},[65,41439,41440],{"class":302},"水",[65,41442,306],{"class":154},[65,41444,230],{"class":154},[65,41446,299],{"class":154},[65,41448,41449],{"class":302},"木",[65,41451,306],{"class":154},[65,41453,230],{"class":154},[65,41455,299],{"class":154},[65,41457,41458],{"class":302},"金",[65,41460,306],{"class":154},[65,41462,230],{"class":154},[65,41464,299],{"class":154},[65,41466,41467],{"class":302},"土",[65,41469,306],{"class":154},[65,41471,6106],{"class":204},[65,41473,155],{"class":154},[65,41475,41476,41478,41480,41482,41484,41486,41488],{"class":140,"line":158},[65,41477,1769],{"class":168},[65,41479,40896],{"class":144},[65,41481,218],{"class":168},[65,41483,1776],{"class":168},[65,41485,35976],{"class":200},[65,41487,1269],{"class":204},[65,41489,155],{"class":154},[65,41491,41492,41494,41497,41499,41501,41503,41505,41507,41510,41513,41515],{"class":140,"line":165},[65,41493,1769],{"class":168},[65,41495,41496],{"class":144}," dayOfWeek",[65,41498,218],{"class":168},[65,41500,41404],{"class":144},[65,41502,6243],{"class":204},[65,41504,40919],{"class":144},[65,41506,834],{"class":154},[65,41508,41509],{"class":200},"getDay",[65,41511,41512],{"class":204},"()]",[65,41514,6005],{"class":154},[65,41516,41517],{"class":278}," // 例: 4\n",[65,41519,41520,41522,41524,41526,41528,41531,41533,41535],{"class":140,"line":180},[65,41521,35301],{"class":144},[65,41523,834],{"class":154},[65,41525,35306],{"class":200},[65,41527,224],{"class":204},[65,41529,41530],{"class":144},"dayOfWeek",[65,41532,235],{"class":204},[65,41534,6005],{"class":154},[65,41536,41537],{"class":278}," // 例: 木\n",[11,41539,41540],{"id":41540},"ユーザーの環境に合わせて日付と時刻を文字列で表示する",[15,41542,41543,41546],{},[124,41544,41545],{},"toLocaleString()","メソッドを使用すると、ユーザーの環境(ロケール=言語や地域設定)に合わせて日付と時刻を文字列で表示することができます。",[15,41548,41549],{},"日本の環境だと、「2025/8/28 17:20:50」のように年月日で表示され、アメリカだと「8/28/2025 5:20:50 PM」のように月日年の順で表示されます。",[129,41551,41553],{"className":35286,"code":41552,"filename":35288,"language":35289,"meta":135,"style":135},"const now = new Date();\nconsole.log(now.toLocaleString(\"ja-JP\")); // 例: 2025/8/28 17:20:50\nconsole.log(now.toLocaleString(\"en-US\")); // 例: 8/28/2025 5:20:50 PM\n",[124,41554,41555,41571,41604],{"__ignoreMap":135},[65,41556,41557,41559,41561,41563,41565,41567,41569],{"class":140,"line":141},[65,41558,1769],{"class":168},[65,41560,40896],{"class":144},[65,41562,218],{"class":168},[65,41564,1776],{"class":168},[65,41566,35976],{"class":200},[65,41568,1269],{"class":204},[65,41570,155],{"class":154},[65,41572,41573,41575,41577,41579,41581,41583,41585,41588,41590,41592,41595,41597,41599,41601],{"class":140,"line":158},[65,41574,35301],{"class":144},[65,41576,834],{"class":154},[65,41578,35306],{"class":200},[65,41580,224],{"class":204},[65,41582,40919],{"class":144},[65,41584,834],{"class":154},[65,41586,41587],{"class":200},"toLocaleString",[65,41589,224],{"class":204},[65,41591,34857],{"class":154},[65,41593,41594],{"class":302},"ja-JP",[65,41596,34857],{"class":154},[65,41598,11111],{"class":204},[65,41600,6005],{"class":154},[65,41602,41603],{"class":278}," // 例: 2025/8/28 17:20:50\n",[65,41605,41606,41608,41610,41612,41614,41616,41618,41620,41622,41624,41627,41629,41631,41633],{"class":140,"line":165},[65,41607,35301],{"class":144},[65,41609,834],{"class":154},[65,41611,35306],{"class":200},[65,41613,224],{"class":204},[65,41615,40919],{"class":144},[65,41617,834],{"class":154},[65,41619,41587],{"class":200},[65,41621,224],{"class":204},[65,41623,34857],{"class":154},[65,41625,41626],{"class":302},"en-US",[65,41628,34857],{"class":154},[65,41630,11111],{"class":204},[65,41632,6005],{"class":154},[65,41634,41635],{"class":278}," // 例: 8/28/2025 5:20:50 PM\n",[15,41637,41638,41639,41641],{},"引数に",[124,41640,41594],{},"のようにロケールを指定すると、その国の形式で表示されます。",[15,41643,41644,41647,41648,41651],{},[124,41645,41646],{},"toLocaleDateString()","メソッドを使用すると、日付だけを表示することができ、",[124,41649,41650],{},"toLocaleTimeString()","メソッドを使用すると、時刻だけを表示することができます。",[129,41653,41655],{"className":35286,"code":41654,"filename":35288,"language":35289,"meta":135,"style":135},"const now = new Date();\nconsole.log(now.toLocaleDateString()); // 例: 2025/8/28\nconsole.log(now.toLocaleTimeString()); // 例: 17:20:50\n",[124,41656,41657,41673,41698],{"__ignoreMap":135},[65,41658,41659,41661,41663,41665,41667,41669,41671],{"class":140,"line":141},[65,41660,1769],{"class":168},[65,41662,40896],{"class":144},[65,41664,218],{"class":168},[65,41666,1776],{"class":168},[65,41668,35976],{"class":200},[65,41670,1269],{"class":204},[65,41672,155],{"class":154},[65,41674,41675,41677,41679,41681,41683,41685,41687,41690,41693,41695],{"class":140,"line":158},[65,41676,35301],{"class":144},[65,41678,834],{"class":154},[65,41680,35306],{"class":200},[65,41682,224],{"class":204},[65,41684,40919],{"class":144},[65,41686,834],{"class":154},[65,41688,41689],{"class":200},"toLocaleDateString",[65,41691,41692],{"class":204},"())",[65,41694,6005],{"class":154},[65,41696,41697],{"class":278}," // 例: 2025/8/28\n",[65,41699,41700,41702,41704,41706,41708,41710,41712,41715,41717,41719],{"class":140,"line":165},[65,41701,35301],{"class":144},[65,41703,834],{"class":154},[65,41705,35306],{"class":200},[65,41707,224],{"class":204},[65,41709,40919],{"class":144},[65,41711,834],{"class":154},[65,41713,41714],{"class":200},"toLocaleTimeString",[65,41716,41692],{"class":204},[65,41718,6005],{"class":154},[65,41720,41721],{"class":278}," // 例: 17:20:50\n",[11,41723,41725],{"id":41724},"dateオブジェクトの応用例","Dateオブジェクトの応用例",[15,41727,41728,41730],{},[124,41729,35743],{},"オブジェクトの基本の使い方を見てきたので、ここからは応用の使い方を紹介します。",[1177,41732,41733],{"id":41733},"日付と時刻の差分を計算する",[15,41735,41736,41737,41739,41740,41743],{},"比較したい日付と時間を",[124,41738,35743],{},"オブジェクトに変換してから、",[124,41741,41742],{},"getTime()","メソッドを使用してミリ秒を取得します。このミリ秒を引き算することで、日付と時刻の差分を計算することができます。",[15,41745,41746,41747,41750],{},"日数として知りたい場合は、",[124,41748,41749],{},"24 * 60 * 60 * 1000","で差分を除算します。",[129,41752,41754],{"className":35286,"code":41753,"filename":35288,"language":35289,"meta":135,"style":135},"const date1 = new Date('2025/8/1');\nconst date2 = new Date('2025/8/28');\nconst diff = date2.getTime() - date1.getTime();\nconst diffDay = diff / (24 * 60 * 60 * 1000);\nconsole.log(`${diffDay}日の差があります`); // 28日の差があります\n",[124,41755,41756,41782,41808,41837,41872],{"__ignoreMap":135},[65,41757,41758,41760,41763,41765,41767,41769,41771,41773,41776,41778,41780],{"class":140,"line":141},[65,41759,1769],{"class":168},[65,41761,41762],{"class":144}," date1",[65,41764,218],{"class":168},[65,41766,1776],{"class":168},[65,41768,35976],{"class":200},[65,41770,224],{"class":204},[65,41772,306],{"class":154},[65,41774,41775],{"class":302},"2025/8/1",[65,41777,306],{"class":154},[65,41779,235],{"class":204},[65,41781,155],{"class":154},[65,41783,41784,41786,41789,41791,41793,41795,41797,41799,41802,41804,41806],{"class":140,"line":158},[65,41785,1769],{"class":168},[65,41787,41788],{"class":144}," date2",[65,41790,218],{"class":168},[65,41792,1776],{"class":168},[65,41794,35976],{"class":200},[65,41796,224],{"class":204},[65,41798,306],{"class":154},[65,41800,41801],{"class":302},"2025/8/28",[65,41803,306],{"class":154},[65,41805,235],{"class":204},[65,41807,155],{"class":154},[65,41809,41810,41812,41814,41816,41818,41820,41823,41825,41827,41829,41831,41833,41835],{"class":140,"line":165},[65,41811,1769],{"class":168},[65,41813,36026],{"class":144},[65,41815,218],{"class":168},[65,41817,41788],{"class":144},[65,41819,834],{"class":154},[65,41821,41822],{"class":200},"getTime",[65,41824,205],{"class":204},[65,41826,3936],{"class":168},[65,41828,41762],{"class":144},[65,41830,834],{"class":154},[65,41832,41822],{"class":200},[65,41834,1269],{"class":204},[65,41836,155],{"class":154},[65,41838,41839,41841,41844,41846,41848,41850,41852,41855,41857,41860,41862,41864,41866,41868,41870],{"class":140,"line":180},[65,41840,1769],{"class":168},[65,41842,41843],{"class":144}," diffDay",[65,41845,218],{"class":168},[65,41847,36026],{"class":144},[65,41849,4349],{"class":168},[65,41851,1696],{"class":204},[65,41853,41854],{"class":793},"24",[65,41856,5933],{"class":168},[65,41858,41859],{"class":793}," 60",[65,41861,5933],{"class":168},[65,41863,41859],{"class":793},[65,41865,5933],{"class":168},[65,41867,35042],{"class":793},[65,41869,235],{"class":204},[65,41871,155],{"class":154},[65,41873,41874,41876,41878,41880,41882,41885,41888,41890,41893,41895,41897,41899],{"class":140,"line":194},[65,41875,35301],{"class":144},[65,41877,834],{"class":154},[65,41879,35306],{"class":200},[65,41881,224],{"class":204},[65,41883,41884],{"class":154},"`${",[65,41886,41887],{"class":144},"diffDay",[65,41889,2899],{"class":154},[65,41891,41892],{"class":302},"日の差があります",[65,41894,30698],{"class":154},[65,41896,235],{"class":204},[65,41898,6005],{"class":154},[65,41900,41901],{"class":278}," // 28日の差があります\n",[15,41903,41904,41905,41750],{},"時間として知りたい場合は、",[124,41906,41907],{},"60 * 60 * 1000",[129,41909,41911],{"className":35286,"code":41910,"filename":35288,"language":35289,"meta":135,"style":135},"const date1 = new Date('2025/8/28 07:00:00');\nconst date2 = new Date('2025/8/28 10:00:00');\nconst diff = date2.getTime() - date1.getTime();\nconst diffHour = diff / (60 * 60 * 1000);\nconsole.log(`${diffHour}時間の差があります`); // 3時間の差があります\n",[124,41912,41913,41938,41963,41991,42021],{"__ignoreMap":135},[65,41914,41915,41917,41919,41921,41923,41925,41927,41929,41932,41934,41936],{"class":140,"line":141},[65,41916,1769],{"class":168},[65,41918,41762],{"class":144},[65,41920,218],{"class":168},[65,41922,1776],{"class":168},[65,41924,35976],{"class":200},[65,41926,224],{"class":204},[65,41928,306],{"class":154},[65,41930,41931],{"class":302},"2025/8/28 07:00:00",[65,41933,306],{"class":154},[65,41935,235],{"class":204},[65,41937,155],{"class":154},[65,41939,41940,41942,41944,41946,41948,41950,41952,41954,41957,41959,41961],{"class":140,"line":158},[65,41941,1769],{"class":168},[65,41943,41788],{"class":144},[65,41945,218],{"class":168},[65,41947,1776],{"class":168},[65,41949,35976],{"class":200},[65,41951,224],{"class":204},[65,41953,306],{"class":154},[65,41955,41956],{"class":302},"2025/8/28 10:00:00",[65,41958,306],{"class":154},[65,41960,235],{"class":204},[65,41962,155],{"class":154},[65,41964,41965,41967,41969,41971,41973,41975,41977,41979,41981,41983,41985,41987,41989],{"class":140,"line":165},[65,41966,1769],{"class":168},[65,41968,36026],{"class":144},[65,41970,218],{"class":168},[65,41972,41788],{"class":144},[65,41974,834],{"class":154},[65,41976,41822],{"class":200},[65,41978,205],{"class":204},[65,41980,3936],{"class":168},[65,41982,41762],{"class":144},[65,41984,834],{"class":154},[65,41986,41822],{"class":200},[65,41988,1269],{"class":204},[65,41990,155],{"class":154},[65,41992,41993,41995,41998,42000,42002,42004,42006,42009,42011,42013,42015,42017,42019],{"class":140,"line":180},[65,41994,1769],{"class":168},[65,41996,41997],{"class":144}," diffHour",[65,41999,218],{"class":168},[65,42001,36026],{"class":144},[65,42003,4349],{"class":168},[65,42005,1696],{"class":204},[65,42007,42008],{"class":793},"60",[65,42010,5933],{"class":168},[65,42012,41859],{"class":793},[65,42014,5933],{"class":168},[65,42016,35042],{"class":793},[65,42018,235],{"class":204},[65,42020,155],{"class":154},[65,42022,42023,42025,42027,42029,42031,42033,42036,42038,42041,42043,42045,42047],{"class":140,"line":194},[65,42024,35301],{"class":144},[65,42026,834],{"class":154},[65,42028,35306],{"class":200},[65,42030,224],{"class":204},[65,42032,41884],{"class":154},[65,42034,42035],{"class":144},"diffHour",[65,42037,2899],{"class":154},[65,42039,42040],{"class":302},"時間の差があります",[65,42042,30698],{"class":154},[65,42044,235],{"class":204},[65,42046,6005],{"class":154},[65,42048,42049],{"class":278}," // 3時間の差があります\n",[15,42051,42052,42053,41750],{},"分として知りたい場合は、",[124,42054,42055],{},"60 * 1000",[129,42057,42059],{"className":35286,"code":42058,"filename":35288,"language":35289,"meta":135,"style":135},"const date1 = new Date('2025/8/28 10:00:00');\nconst date2 = new Date('2025/8/28 10:30:00');\nconst diff = date2.getTime() - date1.getTime();\nconst diffMinute = diff / (60 * 1000);\nconsole.log(`${diffMinute}分の差があります`); // 30分の差があります\n",[124,42060,42061,42085,42110,42138,42163],{"__ignoreMap":135},[65,42062,42063,42065,42067,42069,42071,42073,42075,42077,42079,42081,42083],{"class":140,"line":141},[65,42064,1769],{"class":168},[65,42066,41762],{"class":144},[65,42068,218],{"class":168},[65,42070,1776],{"class":168},[65,42072,35976],{"class":200},[65,42074,224],{"class":204},[65,42076,306],{"class":154},[65,42078,41956],{"class":302},[65,42080,306],{"class":154},[65,42082,235],{"class":204},[65,42084,155],{"class":154},[65,42086,42087,42089,42091,42093,42095,42097,42099,42101,42104,42106,42108],{"class":140,"line":158},[65,42088,1769],{"class":168},[65,42090,41788],{"class":144},[65,42092,218],{"class":168},[65,42094,1776],{"class":168},[65,42096,35976],{"class":200},[65,42098,224],{"class":204},[65,42100,306],{"class":154},[65,42102,42103],{"class":302},"2025/8/28 10:30:00",[65,42105,306],{"class":154},[65,42107,235],{"class":204},[65,42109,155],{"class":154},[65,42111,42112,42114,42116,42118,42120,42122,42124,42126,42128,42130,42132,42134,42136],{"class":140,"line":165},[65,42113,1769],{"class":168},[65,42115,36026],{"class":144},[65,42117,218],{"class":168},[65,42119,41788],{"class":144},[65,42121,834],{"class":154},[65,42123,41822],{"class":200},[65,42125,205],{"class":204},[65,42127,3936],{"class":168},[65,42129,41762],{"class":144},[65,42131,834],{"class":154},[65,42133,41822],{"class":200},[65,42135,1269],{"class":204},[65,42137,155],{"class":154},[65,42139,42140,42142,42145,42147,42149,42151,42153,42155,42157,42159,42161],{"class":140,"line":180},[65,42141,1769],{"class":168},[65,42143,42144],{"class":144}," diffMinute",[65,42146,218],{"class":168},[65,42148,36026],{"class":144},[65,42150,4349],{"class":168},[65,42152,1696],{"class":204},[65,42154,42008],{"class":793},[65,42156,5933],{"class":168},[65,42158,35042],{"class":793},[65,42160,235],{"class":204},[65,42162,155],{"class":154},[65,42164,42165,42167,42169,42171,42173,42175,42178,42180,42183,42185,42187,42189],{"class":140,"line":194},[65,42166,35301],{"class":144},[65,42168,834],{"class":154},[65,42170,35306],{"class":200},[65,42172,224],{"class":204},[65,42174,41884],{"class":154},[65,42176,42177],{"class":144},"diffMinute",[65,42179,2899],{"class":154},[65,42181,42182],{"class":302},"分の差があります",[65,42184,30698],{"class":154},[65,42186,235],{"class":204},[65,42188,6005],{"class":154},[65,42190,42191],{"class":278}," // 30分の差があります\n",[11,42193,5299],{"id":5299},[15,42195,42196,42197,42199],{},"JavaScriptでDateオブジェクトを使用した、日付や時間の扱い方を紹介しました。",[5467,42198],{},"\nDateオブジェクトは、よく使用するのでいろいろ試しながら覚えていきましょう！",[11,42201,35214],{"id":35214},[89,42203,42204],{},[92,42205,42206],{},[29,42207,42210],{"href":42208,"rel":42209,"target":3049},"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/Date",[3048],"Date() コンストラクター - MDN",[5313,42212,42213],{},"html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}",{"title":135,"searchDepth":165,"depth":165,"links":42215},[42216,42217,42223,42224,42227,42228],{"id":13,"depth":158,"text":13},{"id":40877,"depth":158,"text":40878,"children":42218},[42219,42220,42221,42222],{"id":41010,"depth":165,"text":41010},{"id":41083,"depth":165,"text":41083},{"id":41209,"depth":165,"text":41209},{"id":41377,"depth":165,"text":41377},{"id":41540,"depth":158,"text":41540},{"id":41724,"depth":158,"text":41725,"children":42225},[42226],{"id":41733,"depth":165,"text":41733},{"id":5299,"depth":158,"text":5299},{"id":35214,"depth":158,"text":35214},"2025-08-28T00:00:00.000Z","JavaScriptで「今日の日付は何日？」や「何時何分？」などの時間を扱いたいときに使うのがDateオブジェクトです。この記事では、JavaScriptのDateオブジェクトの使い方を紹介します。","/images/blog/javascript-new-date.jpg",{},"/blog/javascript-new-date",{"title":40867,"description":42230},"blog/javascript-new-date",[42237,42238],"JavaScriptのDateオブジェクトの使い方の紹介","現在の日付や時間を取得する方法",[35288],"NnB-xuPKP3Y5s4VRlN0K-CG1k195CLGWlKaP-jTdpIo",{"id":42242,"title":42243,"body":42244,"date":42563,"description":42230,"draft":5339,"extension":5340,"image":42564,"meta":42565,"navigation":161,"path":42566,"seo":42567,"stem":42568,"summaryList":42569,"summaryText":5348,"tags":42572,"__hash__":42573},"blog/blog/css-text-overflow-ellipsis.md","CSSで長いテキストを「...」で省略できるtext-overflow: ellipsisの紹介",{"type":8,"value":42245,"toc":42551},[42246,42248,42251,42257,42260,42265,42322,42342,42346,42351,42388,42392,42398,42402,42405,42410,42485,42499,42505,42509,42512,42515,42518,42523,42526,42528,42534,42537,42539,42548],[11,42247,13],{"id":13},[15,42249,42250],{},"Webサイトをコーディングする際に、CMSなどで動的にコンテンツを表示する場面は多々あるかと思います。その際に、長いテキストの場合にテキスト行が多くなりデザインが崩れてしまう場合がよくあります。",[15,42252,42253,42254,42256],{},"この記事では、CSSの",[124,42255,36831],{},"を使って長いテキストを省略する方法を紹介します。",[11,42258,42259],{"id":42259},"長いテキストを省略する方法",[15,42261,42262,42264],{},[124,42263,36831],{},"を使用して長いテキストを省略するための基本のCSSは次のようになります。",[129,42266,42268],{"className":34988,"code":42267,"language":34984,"meta":135,"style":135},".ellipsis {\n white-space: nowrap; // テキストを折り返さない\n overflow: hidden; // はみ出した部分を非表示\n text-overflow: ellipsis; // はみ出した部分を「...」で表示\n}\n",[124,42269,42270,42279,42292,42305,42318],{"__ignoreMap":135},[65,42271,42272,42274,42277],{"class":140,"line":141},[65,42273,834],{"class":154},[65,42275,42276],{"class":326},"ellipsis",[65,42278,418],{"class":154},[65,42280,42281,42283,42285,42287,42289],{"class":140,"line":158},[65,42282,37562],{"class":340},[65,42284,797],{"class":154},[65,42286,37567],{"class":793},[65,42288,6005],{"class":154},[65,42290,42291],{"class":204}," // テキストを折り返さない\n",[65,42293,42294,42296,42298,42300,42302],{"class":140,"line":165},[65,42295,37481],{"class":340},[65,42297,797],{"class":154},[65,42299,37486],{"class":793},[65,42301,6005],{"class":154},[65,42303,42304],{"class":204}," // はみ出した部分を非表示\n",[65,42306,42307,42309,42311,42313,42315],{"class":140,"line":180},[65,42308,37574],{"class":340},[65,42310,797],{"class":154},[65,42312,37579],{"class":793},[65,42314,6005],{"class":154},[65,42316,42317],{"class":204}," // はみ出した部分を「...」で表示\n",[65,42319,42320],{"class":140,"line":194},[65,42321,243],{"class":154},[89,42323,42324,42330,42336],{},[92,42325,42326,42329],{},[124,42327,42328],{},"white-space: nowrap;","：テキストを折り返さないようにするため設定します。",[92,42331,42332,42335],{},[124,42333,42334],{},"overflow: hidden;","：はみ出した部分を非表示にします。",[92,42337,42338,42341],{},[124,42339,42340],{},"text-overflow: ellipsis;","：はみ出した部分を「...」で表示します。",[1177,42343,42345],{"id":42344},"が表示されない場合のハマりポイント","「...」が表示されない場合のハマりポイント",[15,42347,42348,42350],{},[124,42349,36831],{},"を指定していても、「...」で省略されない場合は、次の点を確認してみてください。",[35774,42352,42353,42365,42373],{},[92,42354,42355,42357,42358,42360,42361,42364],{},[124,42356,735],{},"などで幅が指定されてない",[5467,42359],{},"\nコンテンツの幅が決まってないと、",[34759,42362,42363],{},"はみ出す状態","にならないので、幅を指定してみてください。",[92,42366,42367,42369,42370,42372],{},[124,42368,42328],{},"が指定されていない",[5467,42371],{},"\n折り返されてしまうと、省略記号ではなく2行になるので忘れないようにしてください。",[92,42374,42375,42376,42378,42380,42381,10246,42384,42387],{},"インライン要素では効かない",[5467,42377],{},[124,42379,65],{},"などのインライン要素のままだと効かないことがあります。",[124,42382,42383],{},"inline-block",[124,42385,42386],{},"block","を指定しましょう。",[1177,42389,42391],{"id":42390},"_1行の場合のデモ","1行の場合のデモ",[15,42393,42394,42395,42397],{},"次はテキストが1行の場合のデモになります。",[5467,42396],{},"\nテキストが長い場合に「...」で省略されるのが確認できるかと思います。",[37602,42399],{"active":34984,"css":42400,"html":42401},".text {\n width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.box {\n padding: 1rem;\n border: 1px solid #ccc;\n}\n","\u003Cdiv class=\"flex center\">\n \u003Cdiv class=\"box\">\n \u003Cdiv class=\"text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam aliquet, nisl nisl aliquet nisl, eget aliquam nisl nisl eget aliquam.\u003C/div>\n \u003C/div>\n\u003C/div>\n",[11,42403,42404],{"id":42404},"複数行で省略する方法",[15,42406,42407,42409],{},[124,42408,36831],{},"のみの指定だと、1行のみの省略になります。複数行に対応したい場合は、次のように記載しましょう。",[129,42411,42413],{"className":34988,"code":42412,"language":34984,"meta":135,"style":135},".multiline-ellipsis {\n display: -webkit-box;\n -webkit-line-clamp: 2; // 2行の場合\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n",[124,42414,42415,42424,42435,42449,42461,42471,42481],{"__ignoreMap":135},[65,42416,42417,42419,42422],{"class":140,"line":141},[65,42418,834],{"class":154},[65,42420,42421],{"class":326},"multiline-ellipsis",[65,42423,418],{"class":154},[65,42425,42426,42428,42430,42433],{"class":140,"line":158},[65,42427,38479],{"class":340},[65,42429,797],{"class":154},[65,42431,42432],{"class":793}," -webkit-box",[65,42434,155],{"class":154},[65,42436,42437,42440,42442,42444,42446],{"class":140,"line":165},[65,42438,42439],{"class":340}," -webkit-line-clamp",[65,42441,797],{"class":154},[65,42443,3748],{"class":793},[65,42445,6005],{"class":154},[65,42447,42448],{"class":204}," // 2行の場合\n",[65,42450,42451,42454,42456,42459],{"class":140,"line":180},[65,42452,42453],{"class":340}," -webkit-box-orient",[65,42455,797],{"class":154},[65,42457,42458],{"class":793}," vertical",[65,42460,155],{"class":154},[65,42462,42463,42465,42467,42469],{"class":140,"line":194},[65,42464,37481],{"class":340},[65,42466,797],{"class":154},[65,42468,37486],{"class":793},[65,42470,155],{"class":154},[65,42472,42473,42475,42477,42479],{"class":140,"line":211},[65,42474,37574],{"class":340},[65,42476,797],{"class":154},[65,42478,37579],{"class":793},[65,42480,155],{"class":154},[65,42482,42483],{"class":140,"line":240},[65,42484,243],{"class":154},[15,42486,42487,42488,42491,42492,2765,42495,42498],{},"複数行で省略したい場合は、",[124,42489,42490],{},"-webkit-line-clamp","を指定しましょう。この数値で省略する行数を指定できます。また、",[124,42493,42494],{},"display: -webkit-box",[124,42496,42497],{},"-webkit-box-orient: vertical;","を指定する必要があります。",[15,42500,42501,42502,42504],{},"複数行になるので、",[124,42503,42328],{},"は指定しなくても大丈夫です！",[11,42506,42508],{"id":42507},"_2行で省略するデモ","2行で省略するデモ",[15,42510,42511],{},"テキストが2行で省略されるデモになります。",[37602,42513],{"active":34984,"css":42514,"html":42401},".text {\n width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n.box {\n padding: 1rem;\n border: 1px solid #ccc;\n}\n",[11,42516,42517],{"id":42517},"実際の利用シーン",[15,42519,42520,42522],{},[124,42521,36831],{},"を使用した、利用シーンは次のようになるでしょう。",[35274,42524],{":list":42525,"title":35277},"[\"記事一覧のカードのタイトルや説明文\",\"商品名やレビュー\",\"パンくずリストのテキスト\"]",[11,42527,5299],{"id":5299},[15,42529,42530,42531,42533],{},"CSSの",[124,42532,36831],{},"を使用して、テキストが長くなりすぎた場合に、省略記号「...」を表示する方法を紹介しました。",[15,42535,42536],{},"「テキストが長くて、デザイン通りにならない」ときに、ぜひ活用してみてください！",[11,42538,35214],{"id":35214},[89,42540,42541],{},[92,42542,42543],{},[29,42544,42547],{"href":42545,"rel":42546,"target":3049},"https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow",[3048],"text-overflow - MDN",[5313,42549,42550],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":135,"searchDepth":165,"depth":165,"links":42552},[42553,42554,42558,42559,42560,42561,42562],{"id":13,"depth":158,"text":13},{"id":42259,"depth":158,"text":42259,"children":42555},[42556,42557],{"id":42344,"depth":165,"text":42345},{"id":42390,"depth":165,"text":42391},{"id":42404,"depth":158,"text":42404},{"id":42507,"depth":158,"text":42508},{"id":42517,"depth":158,"text":42517},{"id":5299,"depth":158,"text":5299},{"id":35214,"depth":158,"text":35214},"2025-08-27T00:00:00.000Z","/images/blog/css-text-overflow-ellipsis.jpg",{},"/blog/css-text-overflow-ellipsis",{"title":42243,"description":42230},"blog/css-text-overflow-ellipsis",[42570,42571],"CSSで長いテキストを「...」で省略する方法","text-overflow: ellipsisの利用シーンを紹介",[34985],"z7FmfZjL-kkvuiTuTO-v_0fJqMPnWAb2yCo-Czb4838",{"id":42575,"title":42576,"body":42577,"date":44139,"description":44140,"draft":5339,"extension":5340,"image":44141,"meta":44142,"navigation":161,"path":44143,"seo":44144,"stem":44145,"summaryList":44146,"summaryText":5348,"tags":44149,"__hash__":44150},"blog/blog/javascript-object.md","JavaScriptのオブジェクト操作を紹介",{"type":8,"value":42578,"toc":44120},[42579,42581,42584,42587,42591,42594,42597,42659,42662,42673,42676,42814,42818,42821,42828,43012,43019,43022,43180,43183,43186,43239,43242,43246,43251,43340,43343,43348,43431,43434,43439,43521,43524,43529,43611,43614,43621,43624,43630,43735,43738,43741,43744,43837,43840,43846,43950,43953,43956,44101,44103,44106,44108,44117],[11,42580,13],{"id":13},[15,42582,42583],{},"この記事ではJavaScriptにおけるオブジェクトの基本から解説します。配列や関数もオブジェクトとして扱われるため、基本を押さえておくとコードの理解が一気に進みます。",[15,42585,42586],{},"オブジェクトの基本操作から応用的なテクニックまでを、サンプルコード多めで解説します。",[11,42588,42590],{"id":42589},"javascriptにおけるオブジェクトの基本","JavaScriptにおけるオブジェクトの基本",[15,42592,42593],{},"オブジェクトはJavaScriptにおける基本的なデータ型のひとつです。複数のプロパティを持つことが可能で、オブジェクトのプロパティはキーと値のペアで表現されます。",[15,42595,42596],{},"例えば、次のコードは3つのプロパティを持ちます。",[129,42598,42600],{"className":35286,"code":42599,"filename":35288,"language":35289,"meta":135,"style":135},"const person = {\n name: \"John\",\n age: 30,\n city: \"New York\"\n};\n",[124,42601,42602,42613,42629,42641,42655],{"__ignoreMap":135},[65,42603,42604,42606,42609,42611],{"class":140,"line":141},[65,42605,1769],{"class":168},[65,42607,42608],{"class":144}," person",[65,42610,218],{"class":168},[65,42612,418],{"class":154},[65,42614,42615,42618,42620,42622,42625,42627],{"class":140,"line":158},[65,42616,42617],{"class":204}," name",[65,42619,797],{"class":154},[65,42621,35344],{"class":154},[65,42623,42624],{"class":302},"John",[65,42626,34857],{"class":154},[65,42628,3820],{"class":154},[65,42630,42631,42634,42636,42639],{"class":140,"line":165},[65,42632,42633],{"class":204}," age",[65,42635,797],{"class":154},[65,42637,42638],{"class":793}," 30",[65,42640,3820],{"class":154},[65,42642,42643,42646,42648,42650,42653],{"class":140,"line":180},[65,42644,42645],{"class":204}," city",[65,42647,797],{"class":154},[65,42649,35344],{"class":154},[65,42651,42652],{"class":302},"New York",[65,42654,36971],{"class":154},[65,42656,42657],{"class":140,"line":194},[65,42658,4731],{"class":154},[15,42660,42661],{},"ここで各プロパティ、キー、値は次のようになります。",[89,42663,42664,42667,42670],{},[92,42665,42666],{},"プロパティ: name: \"John\", age: 30, city: \"New York\"",[92,42668,42669],{},"キー: name, age, city",[92,42671,42672],{},"値: \"John\", 30, \"New York\"",[15,42674,42675],{},"また、値として格納できるデータ型に制限はありません。配列、関数、オブジェクトも格納できます。",[129,42677,42679],{"className":35286,"code":42678,"filename":35288,"language":35289,"meta":135,"style":135},"const person = {\n name: \"John\",\n hobbies: [\"reading\", \"swimming\"],\n address: { street: \"123 Main St\", city: \"New York\" },\n greet: function() {\n console.log(\"Hello!\");\n }\n};\n",[124,42680,42681,42691,42705,42734,42770,42784,42806,42810],{"__ignoreMap":135},[65,42682,42683,42685,42687,42689],{"class":140,"line":141},[65,42684,1769],{"class":168},[65,42686,42608],{"class":144},[65,42688,218],{"class":168},[65,42690,418],{"class":154},[65,42692,42693,42695,42697,42699,42701,42703],{"class":140,"line":158},[65,42694,42617],{"class":204},[65,42696,797],{"class":154},[65,42698,35344],{"class":154},[65,42700,42624],{"class":302},[65,42702,34857],{"class":154},[65,42704,3820],{"class":154},[65,42706,42707,42710,42712,42714,42716,42719,42721,42723,42725,42728,42730,42732],{"class":140,"line":165},[65,42708,42709],{"class":204}," hobbies",[65,42711,797],{"class":154},[65,42713,30228],{"class":204},[65,42715,34857],{"class":154},[65,42717,42718],{"class":302},"reading",[65,42720,34857],{"class":154},[65,42722,230],{"class":154},[65,42724,35344],{"class":154},[65,42726,42727],{"class":302},"swimming",[65,42729,34857],{"class":154},[65,42731,6106],{"class":204},[65,42733,3820],{"class":154},[65,42735,42736,42739,42741,42743,42746,42748,42750,42753,42755,42757,42760,42762,42764,42766,42768],{"class":140,"line":180},[65,42737,42738],{"class":204}," address",[65,42740,797],{"class":154},[65,42742,287],{"class":154},[65,42744,42745],{"class":204}," street",[65,42747,797],{"class":154},[65,42749,35344],{"class":154},[65,42751,42752],{"class":302},"123 Main St",[65,42754,34857],{"class":154},[65,42756,230],{"class":154},[65,42758,42759],{"class":204}," city",[65,42761,797],{"class":154},[65,42763,35344],{"class":154},[65,42765,42652],{"class":302},[65,42767,34857],{"class":154},[65,42769,3858],{"class":154},[65,42771,42772,42775,42777,42780,42782],{"class":140,"line":194},[65,42773,42774],{"class":200}," greet",[65,42776,797],{"class":154},[65,42778,42779],{"class":168}," function",[65,42781,1269],{"class":154},[65,42783,418],{"class":154},[65,42785,42786,42789,42791,42793,42795,42797,42800,42802,42804],{"class":140,"line":211},[65,42787,42788],{"class":214}," console",[65,42790,834],{"class":154},[65,42792,35306],{"class":200},[65,42794,224],{"class":204},[65,42796,34857],{"class":154},[65,42798,42799],{"class":302},"Hello!",[65,42801,34857],{"class":154},[65,42803,235],{"class":204},[65,42805,155],{"class":154},[65,42807,42808],{"class":140,"line":240},[65,42809,1171],{"class":154},[65,42811,42812],{"class":140,"line":391},[65,42813,4731],{"class":154},[11,42815,42817],{"id":42816},"オブジェクトの定義と値の取得更新をする","オブジェクトの定義と値の取得、更新をする",[15,42819,42820],{},"続いては、オブジェクトの定義と値の取得、更新をする方法を解説します。",[15,42822,42823,42824,42827],{},"オブジェクトを定義するには、",[124,42825,42826],{},"{}","(波括弧)で囲み、オブジェクトに格納したいデータを指定します。値の取得には、「ドット記法」と「ブラケット記法」が利用できます。更新するには、取得と同様にして代入することで更新できます。",[129,42829,42831],{"className":35286,"code":42830,"filename":35288,"language":35289,"meta":135,"style":135},"// オブジェクトの定義\nconst user = { name: \"John\", age: 30 };\n\n// ドット記法\nconsole.log(user.name); // \"John\"\n\n// ブラケット記法\nconsole.log(user[\"age\"]); // 30\n\n// 値の更新\nuser.age = 31;\nuser[\"name\"] = \"Bob\";\n\nconsole.log(user); // { name: \"Bob\", age: 31 }\n",[124,42832,42833,42838,42870,42874,42879,42903,42907,42912,42940,42944,42949,42964,42989,42993],{"__ignoreMap":135},[65,42834,42835],{"class":140,"line":141},[65,42836,42837],{"class":278},"// オブジェクトの定義\n",[65,42839,42840,42842,42845,42847,42849,42851,42853,42855,42857,42859,42861,42864,42866,42868],{"class":140,"line":158},[65,42841,1769],{"class":168},[65,42843,42844],{"class":144}," user",[65,42846,218],{"class":168},[65,42848,287],{"class":154},[65,42850,29166],{"class":204},[65,42852,797],{"class":154},[65,42854,35344],{"class":154},[65,42856,42624],{"class":302},[65,42858,34857],{"class":154},[65,42860,230],{"class":154},[65,42862,42863],{"class":204}," age",[65,42865,797],{"class":154},[65,42867,42638],{"class":793},[65,42869,2713],{"class":154},[65,42871,42872],{"class":140,"line":165},[65,42873,162],{"emptyLinePlaceholder":161},[65,42875,42876],{"class":140,"line":180},[65,42877,42878],{"class":278},"// ドット記法\n",[65,42880,42881,42883,42885,42887,42889,42892,42894,42896,42898,42900],{"class":140,"line":194},[65,42882,35301],{"class":144},[65,42884,834],{"class":154},[65,42886,35306],{"class":200},[65,42888,224],{"class":204},[65,42890,42891],{"class":144},"user",[65,42893,834],{"class":154},[65,42895,29191],{"class":144},[65,42897,235],{"class":204},[65,42899,6005],{"class":154},[65,42901,42902],{"class":278}," // \"John\"\n",[65,42904,42905],{"class":140,"line":211},[65,42906,162],{"emptyLinePlaceholder":161},[65,42908,42909],{"class":140,"line":240},[65,42910,42911],{"class":278},"// ブラケット記法\n",[65,42913,42914,42916,42918,42920,42922,42924,42926,42928,42931,42933,42935,42937],{"class":140,"line":391},[65,42915,35301],{"class":144},[65,42917,834],{"class":154},[65,42919,35306],{"class":200},[65,42921,224],{"class":204},[65,42923,42891],{"class":144},[65,42925,6243],{"class":204},[65,42927,34857],{"class":154},[65,42929,42930],{"class":302},"age",[65,42932,34857],{"class":154},[65,42934,3658],{"class":204},[65,42936,6005],{"class":154},[65,42938,42939],{"class":278}," // 30\n",[65,42941,42942],{"class":140,"line":401},[65,42943,162],{"emptyLinePlaceholder":161},[65,42945,42946],{"class":140,"line":406},[65,42947,42948],{"class":278},"// 値の更新\n",[65,42950,42951,42953,42955,42957,42959,42962],{"class":140,"line":421},[65,42952,42891],{"class":144},[65,42954,834],{"class":154},[65,42956,42930],{"class":144},[65,42958,218],{"class":168},[65,42960,42961],{"class":793}," 31",[65,42963,155],{"class":154},[65,42965,42966,42968,42970,42972,42974,42976,42978,42980,42982,42985,42987],{"class":140,"line":435},[65,42967,42891],{"class":144},[65,42969,6243],{"class":204},[65,42971,34857],{"class":154},[65,42973,29191],{"class":302},[65,42975,34857],{"class":154},[65,42977,6249],{"class":204},[65,42979,6252],{"class":168},[65,42981,35344],{"class":154},[65,42983,42984],{"class":302},"Bob",[65,42986,34857],{"class":154},[65,42988,155],{"class":154},[65,42990,42991],{"class":140,"line":447},[65,42992,162],{"emptyLinePlaceholder":161},[65,42994,42995,42997,42999,43001,43003,43005,43007,43009],{"class":140,"line":459},[65,42996,35301],{"class":144},[65,42998,834],{"class":154},[65,43000,35306],{"class":200},[65,43002,224],{"class":204},[65,43004,42891],{"class":144},[65,43006,235],{"class":204},[65,43008,6005],{"class":154},[65,43010,43011],{"class":278}," // { name: \"Bob\", age: 31 }\n",[15,43013,43014,43015,43018],{},"存在しないプロパティを取得しようとすると、",[124,43016,43017],{},"undefined","が返されます。",[15,43020,43021],{},"オブジェクトの値の型は任意なので、配列やオブジェクトを格納するなど多階層に定義できます。多階層の場合でも、ドット記法やブラケット記法でアクセスできます。",[129,43023,43025],{"className":35286,"code":43024,"filename":35288,"language":35289,"meta":135,"style":135},"const data = {\n list: [\n { id: 1, name: \"John\" },\n { id: 2, name: \"Bob\" }\n ]\n};\n\n//値の取得\nconsole.log(data.list[0].name); // \"John\"\nconsole.log(data.list[1].name); // \"Bob\"\n",[124,43026,43027,43037,43046,43071,43096,43101,43105,43109,43114,43147],{"__ignoreMap":135},[65,43028,43029,43031,43033,43035],{"class":140,"line":141},[65,43030,1769],{"class":168},[65,43032,6304],{"class":144},[65,43034,218],{"class":168},[65,43036,418],{"class":154},[65,43038,43039,43042,43044],{"class":140,"line":158},[65,43040,43041],{"class":204}," list",[65,43043,797],{"class":154},[65,43045,16316],{"class":204},[65,43047,43048,43051,43053,43055,43057,43059,43061,43063,43065,43067,43069],{"class":140,"line":165},[65,43049,43050],{"class":154}," {",[65,43052,34932],{"class":204},[65,43054,797],{"class":154},[65,43056,3137],{"class":793},[65,43058,230],{"class":154},[65,43060,29166],{"class":204},[65,43062,797],{"class":154},[65,43064,35344],{"class":154},[65,43066,42624],{"class":302},[65,43068,34857],{"class":154},[65,43070,3858],{"class":154},[65,43072,43073,43075,43077,43079,43081,43083,43085,43087,43089,43091,43093],{"class":140,"line":180},[65,43074,43050],{"class":154},[65,43076,34932],{"class":204},[65,43078,797],{"class":154},[65,43080,3748],{"class":793},[65,43082,230],{"class":154},[65,43084,29166],{"class":204},[65,43086,797],{"class":154},[65,43088,35344],{"class":154},[65,43090,42984],{"class":302},[65,43092,34857],{"class":154},[65,43094,43095],{"class":154}," }\n",[65,43097,43098],{"class":140,"line":194},[65,43099,43100],{"class":204}," ]\n",[65,43102,43103],{"class":140,"line":211},[65,43104,4731],{"class":154},[65,43106,43107],{"class":140,"line":240},[65,43108,162],{"emptyLinePlaceholder":161},[65,43110,43111],{"class":140,"line":391},[65,43112,43113],{"class":278},"//値の取得\n",[65,43115,43116,43118,43120,43122,43124,43126,43128,43131,43133,43135,43137,43139,43141,43143,43145],{"class":140,"line":401},[65,43117,35301],{"class":144},[65,43119,834],{"class":154},[65,43121,35306],{"class":200},[65,43123,224],{"class":204},[65,43125,9164],{"class":144},[65,43127,834],{"class":154},[65,43129,43130],{"class":144},"list",[65,43132,6243],{"class":204},[65,43134,743],{"class":793},[65,43136,6106],{"class":204},[65,43138,834],{"class":154},[65,43140,29191],{"class":144},[65,43142,235],{"class":204},[65,43144,6005],{"class":154},[65,43146,42902],{"class":278},[65,43148,43149,43151,43153,43155,43157,43159,43161,43163,43165,43167,43169,43171,43173,43175,43177],{"class":140,"line":406},[65,43150,35301],{"class":144},[65,43152,834],{"class":154},[65,43154,35306],{"class":200},[65,43156,224],{"class":204},[65,43158,9164],{"class":144},[65,43160,834],{"class":154},[65,43162,43130],{"class":144},[65,43164,6243],{"class":204},[65,43166,3620],{"class":793},[65,43168,6106],{"class":204},[65,43170,834],{"class":154},[65,43172,29191],{"class":144},[65,43174,235],{"class":204},[65,43176,6005],{"class":154},[65,43178,43179],{"class":278}," // \"Bob\"\n",[11,43181,43182],{"id":43182},"オブジェクトのループ処理",[15,43184,43185],{},"続いてはオブジェクトの応用的なテクニックとしてループ処理を紹介します。",[583,43187,43188,43197],{},[586,43189,43190],{},[589,43191,43192,43195],{},[592,43193,43194],{},"メソッド",[592,43196,597],{},[602,43198,43199,43209,43219,43229],{},[589,43200,43201,43206],{},[607,43202,43203],{},[124,43204,43205],{},"for...in",[607,43207,43208],{},"オブジェクトのプロパティをループ処理する",[589,43210,43211,43216],{},[607,43212,43213],{},[124,43214,43215],{},"Object.keys()",[607,43217,43218],{},"オブジェクトのキーを配列で取得する",[589,43220,43221,43226],{},[607,43222,43223],{},[124,43224,43225],{},"Object.values()",[607,43227,43228],{},"オブジェクトの値を配列で取得する",[589,43230,43231,43236],{},[607,43232,43233],{},[124,43234,43235],{},"Object.entries()",[607,43237,43238],{},"オブジェクトのキーと値のペアを配列で取得する",[15,43240,43241],{},"上記のメソッドを使用することで、オブジェクトの中身をすべて取り出すことができます。それでは、それぞれ説明します。",[1177,43243,43245],{"id":43244},"for-in","for ... in",[15,43247,43248,43250],{},[124,43249,43245],{},"はオブジェクトのプロパティをループ処理するための構文です。オブジェクトのプロパティ名を順番に取得し、そのプロパティ名を変数に代入して処理を行います。",[129,43252,43254],{"className":35286,"code":43253,"filename":35288,"language":35289,"meta":135,"style":135},"const user = { name: \"John\", age: 30 };\n\nfor (const key in user) {\n console.log(key, user[key]); // name John, age 30\n}\n",[124,43255,43256,43286,43290,43309,43336],{"__ignoreMap":135},[65,43257,43258,43260,43262,43264,43266,43268,43270,43272,43274,43276,43278,43280,43282,43284],{"class":140,"line":141},[65,43259,1769],{"class":168},[65,43261,42844],{"class":144},[65,43263,218],{"class":168},[65,43265,287],{"class":154},[65,43267,29166],{"class":204},[65,43269,797],{"class":154},[65,43271,35344],{"class":154},[65,43273,42624],{"class":302},[65,43275,34857],{"class":154},[65,43277,230],{"class":154},[65,43279,42863],{"class":204},[65,43281,797],{"class":154},[65,43283,42638],{"class":793},[65,43285,2713],{"class":154},[65,43287,43288],{"class":140,"line":158},[65,43289,162],{"emptyLinePlaceholder":161},[65,43291,43292,43294,43296,43298,43301,43303,43305,43307],{"class":140,"line":165},[65,43293,6643],{"class":154},[65,43295,1696],{"class":204},[65,43297,1769],{"class":168},[65,43299,43300],{"class":144}," key",[65,43302,29169],{"class":168},[65,43304,42844],{"class":144},[65,43306,1713],{"class":204},[65,43308,208],{"class":154},[65,43310,43311,43313,43315,43317,43319,43321,43323,43325,43327,43329,43331,43333],{"class":140,"line":180},[65,43312,35650],{"class":214},[65,43314,834],{"class":154},[65,43316,35306],{"class":200},[65,43318,224],{"class":204},[65,43320,39248],{"class":214},[65,43322,230],{"class":154},[65,43324,42844],{"class":214},[65,43326,6243],{"class":204},[65,43328,39248],{"class":214},[65,43330,3658],{"class":204},[65,43332,6005],{"class":154},[65,43334,43335],{"class":278}," // name John, age 30\n",[65,43337,43338],{"class":140,"line":194},[65,43339,243],{"class":154},[1177,43341,43215],{"id":43342},"objectkeys",[15,43344,43345,43347],{},[124,43346,43215],{},"はオブジェクトのキーを配列で取得するためのメソッドです。オブジェクトのキーを配列に変換して、その配列を返します。",[129,43349,43351],{"className":35286,"code":43350,"filename":35288,"language":35289,"meta":135,"style":135},"const user = { name: \"John\", age: 30 };\n\nconst keys = Object.keys(user);\nconsole.log(keys); // [\"name\", \"age\"]\n",[124,43352,43353,43383,43387,43412],{"__ignoreMap":135},[65,43354,43355,43357,43359,43361,43363,43365,43367,43369,43371,43373,43375,43377,43379,43381],{"class":140,"line":141},[65,43356,1769],{"class":168},[65,43358,42844],{"class":144},[65,43360,218],{"class":168},[65,43362,287],{"class":154},[65,43364,29166],{"class":204},[65,43366,797],{"class":154},[65,43368,35344],{"class":154},[65,43370,42624],{"class":302},[65,43372,34857],{"class":154},[65,43374,230],{"class":154},[65,43376,42863],{"class":204},[65,43378,797],{"class":154},[65,43380,42638],{"class":793},[65,43382,2713],{"class":154},[65,43384,43385],{"class":140,"line":158},[65,43386,162],{"emptyLinePlaceholder":161},[65,43388,43389,43391,43394,43396,43399,43401,43404,43406,43408,43410],{"class":140,"line":165},[65,43390,1769],{"class":168},[65,43392,43393],{"class":144}," keys",[65,43395,218],{"class":168},[65,43397,43398],{"class":144}," Object",[65,43400,834],{"class":154},[65,43402,43403],{"class":200},"keys",[65,43405,224],{"class":204},[65,43407,42891],{"class":144},[65,43409,235],{"class":204},[65,43411,155],{"class":154},[65,43413,43414,43416,43418,43420,43422,43424,43426,43428],{"class":140,"line":180},[65,43415,35301],{"class":144},[65,43417,834],{"class":154},[65,43419,35306],{"class":200},[65,43421,224],{"class":204},[65,43423,43403],{"class":144},[65,43425,235],{"class":204},[65,43427,6005],{"class":154},[65,43429,43430],{"class":278}," // [\"name\", \"age\"]\n",[1177,43432,43225],{"id":43433},"objectvalues",[15,43435,43436,43438],{},[124,43437,43225],{},"はオブジェクトの値を配列で取得するためのメソッドです。オブジェクトの値を配列に変換して、その配列を返します。",[129,43440,43442],{"className":35286,"code":43441,"filename":35288,"language":35289,"meta":135,"style":135},"const user = { name: \"John\", age: 30 };\n\nconst values = Object.values(user);\nconsole.log(values); // [\"John\", 30]\n",[124,43443,43444,43474,43478,43502],{"__ignoreMap":135},[65,43445,43446,43448,43450,43452,43454,43456,43458,43460,43462,43464,43466,43468,43470,43472],{"class":140,"line":141},[65,43447,1769],{"class":168},[65,43449,42844],{"class":144},[65,43451,218],{"class":168},[65,43453,287],{"class":154},[65,43455,29166],{"class":204},[65,43457,797],{"class":154},[65,43459,35344],{"class":154},[65,43461,42624],{"class":302},[65,43463,34857],{"class":154},[65,43465,230],{"class":154},[65,43467,42863],{"class":204},[65,43469,797],{"class":154},[65,43471,42638],{"class":793},[65,43473,2713],{"class":154},[65,43475,43476],{"class":140,"line":158},[65,43477,162],{"emptyLinePlaceholder":161},[65,43479,43480,43482,43485,43487,43489,43491,43494,43496,43498,43500],{"class":140,"line":165},[65,43481,1769],{"class":168},[65,43483,43484],{"class":144}," values",[65,43486,218],{"class":168},[65,43488,43398],{"class":144},[65,43490,834],{"class":154},[65,43492,43493],{"class":200},"values",[65,43495,224],{"class":204},[65,43497,42891],{"class":144},[65,43499,235],{"class":204},[65,43501,155],{"class":154},[65,43503,43504,43506,43508,43510,43512,43514,43516,43518],{"class":140,"line":180},[65,43505,35301],{"class":144},[65,43507,834],{"class":154},[65,43509,35306],{"class":200},[65,43511,224],{"class":204},[65,43513,43493],{"class":144},[65,43515,235],{"class":204},[65,43517,6005],{"class":154},[65,43519,43520],{"class":278}," // [\"John\", 30]\n",[1177,43522,43235],{"id":43523},"objectentries",[15,43525,43526,43528],{},[124,43527,43235],{},"はオブジェクトのキーと値のペアを配列で取得するためのメソッドです。オブジェクトのキーと値のペアを配列に変換して、その配列を返します。",[129,43530,43532],{"className":35286,"code":43531,"filename":35288,"language":35289,"meta":135,"style":135},"const user = { name: \"John\", age: 30 };\n\nconst entries = Object.entries(user);\nconsole.log(entries); // [[\"name\", \"John\"], [\"age\", 30]]\n",[124,43533,43534,43564,43568,43592],{"__ignoreMap":135},[65,43535,43536,43538,43540,43542,43544,43546,43548,43550,43552,43554,43556,43558,43560,43562],{"class":140,"line":141},[65,43537,1769],{"class":168},[65,43539,42844],{"class":144},[65,43541,218],{"class":168},[65,43543,287],{"class":154},[65,43545,29166],{"class":204},[65,43547,797],{"class":154},[65,43549,35344],{"class":154},[65,43551,42624],{"class":302},[65,43553,34857],{"class":154},[65,43555,230],{"class":154},[65,43557,42863],{"class":204},[65,43559,797],{"class":154},[65,43561,42638],{"class":793},[65,43563,2713],{"class":154},[65,43565,43566],{"class":140,"line":158},[65,43567,162],{"emptyLinePlaceholder":161},[65,43569,43570,43572,43575,43577,43579,43581,43584,43586,43588,43590],{"class":140,"line":165},[65,43571,1769],{"class":168},[65,43573,43574],{"class":144}," entries",[65,43576,218],{"class":168},[65,43578,43398],{"class":144},[65,43580,834],{"class":154},[65,43582,43583],{"class":200},"entries",[65,43585,224],{"class":204},[65,43587,42891],{"class":144},[65,43589,235],{"class":204},[65,43591,155],{"class":154},[65,43593,43594,43596,43598,43600,43602,43604,43606,43608],{"class":140,"line":180},[65,43595,35301],{"class":144},[65,43597,834],{"class":154},[65,43599,35306],{"class":200},[65,43601,224],{"class":204},[65,43603,43583],{"class":144},[65,43605,235],{"class":204},[65,43607,6005],{"class":154},[65,43609,43610],{"class":278}," // [[\"name\", \"John\"], [\"age\", 30]]\n",[11,43612,43613],{"id":43613},"分割代入",[15,43615,43616,43617,43620],{},"分割代入は、",[34759,43618,43619],{},"配列やオブジェクトから値を取り出して変数にまとめて代入できる構文","です。コードをスッキリ書けるので、現代のJavaScriptではよく使用されます。",[1177,43622,43623],{"id":43623},"オブジェクトの分割代入",[15,43625,43626,43627,43629],{},"オブジェクトの分割代入を行うには、変数名をプロパティ名と一致させる必要があり、",[124,43628,42826],{},"で囲います。分割代入を使わない場合と分割代入を使った場合の違いを比較してみましょう。",[129,43631,43633],{"className":35286,"code":43632,"filename":35288,"language":35289,"meta":135,"style":135},"const user = { name: \"John\", age: 30 };\n\n//分割代入を使わない場合\nconst name = user.name;\nconst age = user.age;\n\n//分割代入を使った場合\nconst { name, age } = user;\n",[124,43634,43635,43665,43669,43674,43690,43706,43710,43715],{"__ignoreMap":135},[65,43636,43637,43639,43641,43643,43645,43647,43649,43651,43653,43655,43657,43659,43661,43663],{"class":140,"line":141},[65,43638,1769],{"class":168},[65,43640,42844],{"class":144},[65,43642,218],{"class":168},[65,43644,287],{"class":154},[65,43646,29166],{"class":204},[65,43648,797],{"class":154},[65,43650,35344],{"class":154},[65,43652,42624],{"class":302},[65,43654,34857],{"class":154},[65,43656,230],{"class":154},[65,43658,42863],{"class":204},[65,43660,797],{"class":154},[65,43662,42638],{"class":793},[65,43664,2713],{"class":154},[65,43666,43667],{"class":140,"line":158},[65,43668,162],{"emptyLinePlaceholder":161},[65,43670,43671],{"class":140,"line":165},[65,43672,43673],{"class":278},"//分割代入を使わない場合\n",[65,43675,43676,43678,43680,43682,43684,43686,43688],{"class":140,"line":180},[65,43677,1769],{"class":168},[65,43679,29166],{"class":144},[65,43681,218],{"class":168},[65,43683,42844],{"class":144},[65,43685,834],{"class":154},[65,43687,29191],{"class":144},[65,43689,155],{"class":154},[65,43691,43692,43694,43696,43698,43700,43702,43704],{"class":140,"line":194},[65,43693,1769],{"class":168},[65,43695,42863],{"class":144},[65,43697,218],{"class":168},[65,43699,42844],{"class":144},[65,43701,834],{"class":154},[65,43703,42930],{"class":144},[65,43705,155],{"class":154},[65,43707,43708],{"class":140,"line":211},[65,43709,162],{"emptyLinePlaceholder":161},[65,43711,43712],{"class":140,"line":240},[65,43713,43714],{"class":278},"//分割代入を使った場合\n",[65,43716,43717,43719,43721,43723,43725,43727,43729,43731,43733],{"class":140,"line":391},[65,43718,1769],{"class":168},[65,43720,287],{"class":154},[65,43722,29166],{"class":144},[65,43724,230],{"class":154},[65,43726,42863],{"class":144},[65,43728,293],{"class":154},[65,43730,218],{"class":168},[65,43732,42844],{"class":144},[65,43734,155],{"class":154},[15,43736,43737],{},"上記のコード例のように分割代入を使うと、ドット記法でアクセスする必要がなくなり簡潔に書くことができます。",[1177,43739,43740],{"id":43740},"変数名を変更する",[15,43742,43743],{},"通常、分割代入を行うには変数名をプロパティ名と一致させる必要があります。しかし、コロン(:)を使うことで変数名を別の名前にすることができます。",[129,43745,43747],{"className":35286,"code":43746,"filename":35288,"language":35289,"meta":135,"style":135},"const user = { name: \"John\", age: 30 };\n\nconst { name: userName, age: userAge } = user;\nconsole.log(userName, userAge); // John 30\n",[124,43748,43749,43779,43783,43813],{"__ignoreMap":135},[65,43750,43751,43753,43755,43757,43759,43761,43763,43765,43767,43769,43771,43773,43775,43777],{"class":140,"line":141},[65,43752,1769],{"class":168},[65,43754,42844],{"class":144},[65,43756,218],{"class":168},[65,43758,287],{"class":154},[65,43760,29166],{"class":204},[65,43762,797],{"class":154},[65,43764,35344],{"class":154},[65,43766,42624],{"class":302},[65,43768,34857],{"class":154},[65,43770,230],{"class":154},[65,43772,42863],{"class":204},[65,43774,797],{"class":154},[65,43776,42638],{"class":793},[65,43778,2713],{"class":154},[65,43780,43781],{"class":140,"line":158},[65,43782,162],{"emptyLinePlaceholder":161},[65,43784,43785,43787,43789,43791,43793,43796,43798,43800,43802,43805,43807,43809,43811],{"class":140,"line":165},[65,43786,1769],{"class":168},[65,43788,287],{"class":154},[65,43790,29166],{"class":144},[65,43792,797],{"class":154},[65,43794,43795],{"class":144}," userName",[65,43797,230],{"class":154},[65,43799,42863],{"class":144},[65,43801,797],{"class":154},[65,43803,43804],{"class":144}," userAge",[65,43806,293],{"class":154},[65,43808,218],{"class":168},[65,43810,42844],{"class":144},[65,43812,155],{"class":154},[65,43814,43815,43817,43819,43821,43823,43826,43828,43830,43832,43834],{"class":140,"line":180},[65,43816,35301],{"class":144},[65,43818,834],{"class":154},[65,43820,35306],{"class":200},[65,43822,224],{"class":204},[65,43824,43825],{"class":144},"userName",[65,43827,230],{"class":154},[65,43829,43804],{"class":144},[65,43831,235],{"class":204},[65,43833,6005],{"class":154},[65,43835,43836],{"class":278}," // John 30\n",[1177,43838,43839],{"id":43839},"デフォルト値を設定する",[15,43841,43842,43843,43845],{},"通常、オブジェクトに存在しないプロパティを分割代入する場合、",[124,43844,43017],{},"になります。しかし、デフォルト値を設定することで、そのような場合でもエラーを回避することができます。",[129,43847,43849],{"className":35286,"code":43848,"filename":35288,"language":35289,"meta":135,"style":135},"const user = { name: \"John\" };\n\nconst { name: userName, gender = \"male\" } = user;\nconsole.log(userName); // John\nconsole.log(gender); // male(プロパティがないのでデフォルトが使われる)\n",[124,43850,43851,43873,43877,43911,43930],{"__ignoreMap":135},[65,43852,43853,43855,43857,43859,43861,43863,43865,43867,43869,43871],{"class":140,"line":141},[65,43854,1769],{"class":168},[65,43856,42844],{"class":144},[65,43858,218],{"class":168},[65,43860,287],{"class":154},[65,43862,29166],{"class":204},[65,43864,797],{"class":154},[65,43866,35344],{"class":154},[65,43868,42624],{"class":302},[65,43870,34857],{"class":154},[65,43872,2713],{"class":154},[65,43874,43875],{"class":140,"line":158},[65,43876,162],{"emptyLinePlaceholder":161},[65,43878,43879,43881,43883,43885,43887,43889,43891,43894,43896,43898,43901,43903,43905,43907,43909],{"class":140,"line":165},[65,43880,1769],{"class":168},[65,43882,287],{"class":154},[65,43884,29166],{"class":144},[65,43886,797],{"class":154},[65,43888,43795],{"class":144},[65,43890,230],{"class":154},[65,43892,43893],{"class":144}," gender",[65,43895,218],{"class":168},[65,43897,35344],{"class":154},[65,43899,43900],{"class":302},"male",[65,43902,34857],{"class":154},[65,43904,293],{"class":154},[65,43906,218],{"class":168},[65,43908,42844],{"class":144},[65,43910,155],{"class":154},[65,43912,43913,43915,43917,43919,43921,43923,43925,43927],{"class":140,"line":180},[65,43914,35301],{"class":144},[65,43916,834],{"class":154},[65,43918,35306],{"class":200},[65,43920,224],{"class":204},[65,43922,43825],{"class":144},[65,43924,235],{"class":204},[65,43926,6005],{"class":154},[65,43928,43929],{"class":278}," // John\n",[65,43931,43932,43934,43936,43938,43940,43943,43945,43947],{"class":140,"line":194},[65,43933,35301],{"class":144},[65,43935,834],{"class":154},[65,43937,35306],{"class":200},[65,43939,224],{"class":204},[65,43941,43942],{"class":144},"gender",[65,43944,235],{"class":204},[65,43946,6005],{"class":154},[65,43948,43949],{"class":278}," // male(プロパティがないのでデフォルトが使われる)\n",[1177,43951,43952],{"id":43952},"ネストしたオブジェクトの分割代入",[15,43954,43955],{},"入れ子構造のオブジェクトでも同様に分割代入で値を取り出すことができます。",[129,43957,43959],{"className":35286,"code":43958,"filename":35288,"language":35289,"meta":135,"style":135},"const user = {\n name: \"John\",\n age: 30,\n address: {\n city: \"Tokyo\",\n country: \"Japan\",\n },\n};\n\nconst { address: { city, country } } = user;\nconsole.log(city, country); // Tokyo Japan\n",[124,43960,43961,43971,43985,43995,44003,44019,44035,44039,44043,44047,44077],{"__ignoreMap":135},[65,43962,43963,43965,43967,43969],{"class":140,"line":141},[65,43964,1769],{"class":168},[65,43966,42844],{"class":144},[65,43968,218],{"class":168},[65,43970,418],{"class":154},[65,43972,43973,43975,43977,43979,43981,43983],{"class":140,"line":158},[65,43974,42617],{"class":204},[65,43976,797],{"class":154},[65,43978,35344],{"class":154},[65,43980,42624],{"class":302},[65,43982,34857],{"class":154},[65,43984,3820],{"class":154},[65,43986,43987,43989,43991,43993],{"class":140,"line":165},[65,43988,42633],{"class":204},[65,43990,797],{"class":154},[65,43992,42638],{"class":793},[65,43994,3820],{"class":154},[65,43996,43997,43999,44001],{"class":140,"line":180},[65,43998,42738],{"class":204},[65,44000,797],{"class":154},[65,44002,418],{"class":154},[65,44004,44005,44008,44010,44012,44015,44017],{"class":140,"line":194},[65,44006,44007],{"class":204}," city",[65,44009,797],{"class":154},[65,44011,35344],{"class":154},[65,44013,44014],{"class":302},"Tokyo",[65,44016,34857],{"class":154},[65,44018,3820],{"class":154},[65,44020,44021,44024,44026,44028,44031,44033],{"class":140,"line":211},[65,44022,44023],{"class":204}," country",[65,44025,797],{"class":154},[65,44027,35344],{"class":154},[65,44029,44030],{"class":302},"Japan",[65,44032,34857],{"class":154},[65,44034,3820],{"class":154},[65,44036,44037],{"class":140,"line":240},[65,44038,4879],{"class":154},[65,44040,44041],{"class":140,"line":391},[65,44042,4731],{"class":154},[65,44044,44045],{"class":140,"line":401},[65,44046,162],{"emptyLinePlaceholder":161},[65,44048,44049,44051,44053,44056,44058,44060,44062,44064,44067,44069,44071,44073,44075],{"class":140,"line":406},[65,44050,1769],{"class":168},[65,44052,287],{"class":154},[65,44054,44055],{"class":144}," address",[65,44057,797],{"class":154},[65,44059,287],{"class":154},[65,44061,42759],{"class":144},[65,44063,230],{"class":154},[65,44065,44066],{"class":144}," country",[65,44068,293],{"class":154},[65,44070,293],{"class":154},[65,44072,218],{"class":168},[65,44074,42844],{"class":144},[65,44076,155],{"class":154},[65,44078,44079,44081,44083,44085,44087,44090,44092,44094,44096,44098],{"class":140,"line":421},[65,44080,35301],{"class":144},[65,44082,834],{"class":154},[65,44084,35306],{"class":200},[65,44086,224],{"class":204},[65,44088,44089],{"class":144},"city",[65,44091,230],{"class":154},[65,44093,44066],{"class":144},[65,44095,235],{"class":204},[65,44097,6005],{"class":154},[65,44099,44100],{"class":278}," // Tokyo Japan\n",[11,44102,5299],{"id":5299},[15,44104,44105],{},"JavaScriptにおけるオブジェクトについて解説しました。Web制作においてもAPIからのデータを扱う際に、オブジェクト操作の知識は必須になりますので、ぜひ手を動かして学んでください。",[11,44107,35214],{"id":35214},[89,44109,44110],{},[92,44111,44112],{},[29,44113,44116],{"href":44114,"rel":44115,"target":3049},"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object",[3048],"Object - MDN",[5313,44118,44119],{},"html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}",{"title":135,"searchDepth":165,"depth":165,"links":44121},[44122,44123,44124,44125,44131,44137,44138],{"id":13,"depth":158,"text":13},{"id":42589,"depth":158,"text":42590},{"id":42816,"depth":158,"text":42817},{"id":43182,"depth":158,"text":43182,"children":44126},[44127,44128,44129,44130],{"id":43244,"depth":165,"text":43245},{"id":43342,"depth":165,"text":43215},{"id":43433,"depth":165,"text":43225},{"id":43523,"depth":165,"text":43235},{"id":43613,"depth":158,"text":43613,"children":44132},[44133,44134,44135,44136],{"id":43623,"depth":165,"text":43623},{"id":43740,"depth":165,"text":43740},{"id":43839,"depth":165,"text":43839},{"id":43952,"depth":165,"text":43952},{"id":5299,"depth":158,"text":5299},{"id":35214,"depth":158,"text":35214},"2025-08-21T00:00:00.000Z","JavaScriptのオブジェクト操作を紹介をします。JavaScriptにおけるオブジェクトの基本から解説します！","/images/blog/javascript-object.jpg",{},"/blog/javascript-object",{"title":42576,"description":44140},"blog/javascript-object",[44147,44148],"JavaScriptのオブジェクト操作の紹介","オブジェクトの基本から応用まで紹介",[35288],"55eQLxJfM6r6pQwBcUbINJEOHTHx64BGarS1iSHBkTs",{"id":44152,"title":44153,"body":44154,"date":46930,"description":46931,"draft":5339,"extension":5340,"image":46932,"meta":46933,"navigation":161,"path":46934,"seo":46935,"stem":46936,"summaryList":46937,"summaryText":5348,"tags":46940,"__hash__":46941},"blog/blog/javascript-array.md","JavaScriptの配列操作を紹介",{"type":8,"value":44155,"toc":46907},[44156,44158,44164,44167,44291,44294,44296,44299,44305,44373,44375,44378,44396,44486,44491,44588,44594,44709,44711,44714,44722,44752,44764,44845,44925,44927,44930,44939,44969,44981,44984,45083,45180,45182,45185,45193,45284,45286,45289,45295,45420,45422,45425,45432,45512,45515,45602,45604,45607,45616,45621,45724,45729,45832,45834,45837,45848,45975,45978,46133,46135,46138,46147,46150,46159,46225,46228,46233,46236,46320,46323,46406,46408,46411,46424,46426,46440,46443,46594,46596,46601,46604,46782,46784,46789,46888,46890,46893,46895,46904],[11,44157,13],{"id":13},[15,44159,44160,44161,44163],{},"この記事ではJavaScriptの配列操作を紹介します。配列はJavaScriptにおける基本的なデータ型のひとつで、複数のデータを扱うことができます。型はArray型になります。配列を定義するには、",[65,44162],{},"で囲みます。",[15,44165,44166],{},"配列を用いて以下のような操作を行うことができます。",[583,44168,44169,44179],{},[586,44170,44171],{},[589,44172,44173,44176],{},[592,44174,44175],{},"内容",[592,44177,44178],{},"例",[602,44180,44181,44191,44201,44211,44221,44231,44241,44251,44261,44271,44281],{},[589,44182,44183,44186],{},[607,44184,44185],{},"配列の長さを取得する",[607,44187,44188],{},[124,44189,44190],{},"[\"バナナ\", \"リンゴ\", \"もも\"].length",[589,44192,44193,44196],{},[607,44194,44195],{},"配列のループ処理",[607,44197,44198],{},[124,44199,44200],{},"[\"バナナ\", \"リンゴ\", \"もも\"].forEach((fruit) => console.log(fruit));",[589,44202,44203,44206],{},[607,44204,44205],{},"配列の要素を追加する",[607,44207,44208],{},[124,44209,44210],{},"[\"バナナ\", \"リンゴ\", \"もも\"].push(\"いちご\");",[589,44212,44213,44216],{},[607,44214,44215],{},"配列の要素を削除する",[607,44217,44218],{},[124,44219,44220],{},"[\"バナナ\", \"リンゴ\", \"もも\"].pop();",[589,44222,44223,44226],{},[607,44224,44225],{},"配列の要素を置き換える",[607,44227,44228],{},[124,44229,44230],{},"[\"バナナ\", \"リンゴ\", \"もも\"].splice(1, 1, \"いちご\");",[589,44232,44233,44236],{},[607,44234,44235],{},"複数の配列を一つに結合する",[607,44237,44238],{},[124,44239,44240],{},"[\"バナナ\", \"リンゴ\", \"もも\"].concat([\"いちご\", \"みかん\"]);",[589,44242,44243,44246],{},[607,44244,44245],{},"配列の要素を結合する",[607,44247,44248],{},[124,44249,44250],{},"[\"バナナ\", \"リンゴ\", \"もも\"].join(\" / \");",[589,44252,44253,44256],{},[607,44254,44255],{},"配列の要素を検索する",[607,44257,44258],{},[124,44259,44260],{},"[\"バナナ\", \"リンゴ\", \"もも\"].indexOf(\"リンゴ\");",[589,44262,44263,44266],{},[607,44264,44265],{},"配列から条件を満たす要素を抽出する",[607,44267,44268],{},[124,44269,44270],{},"[\"バナナ\", \"リンゴ\", \"もも\"].find((fruit) => fruit === \"リンゴ\");",[589,44272,44273,44276],{},[607,44274,44275],{},"配列の要素を並び順を変える",[607,44277,44278],{},[124,44279,44280],{},"[1, 2, 3].sort();",[589,44282,44283,44286],{},[607,44284,44285],{},"ある配列から別の配列を作成する",[607,44287,44288],{},[124,44289,44290],{},"[1, 2, 3].map((num) => num * 2);",[15,44292,44293],{},"それでは、それぞれの操作について紹介していきます！",[11,44295,44185],{"id":44185},[35274,44297],{":list":44298,"title":35277},"[\"配列の数を調べる\",\"記事数を表示する\"]",[15,44300,44301,44302,44304],{},"配列の長さを取得するには、文字列と同様に",[124,44303,9685],{},"プロパティを使用します。",[129,44306,44308],{"className":35286,"code":44307,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nconsole.log(fruits.length); // 3\n",[124,44309,44310,44350],{"__ignoreMap":135},[65,44311,44312,44314,44317,44319,44321,44323,44326,44328,44330,44332,44335,44337,44339,44341,44344,44346,44348],{"class":140,"line":141},[65,44313,1769],{"class":168},[65,44315,44316],{"class":144}," fruits",[65,44318,218],{"class":168},[65,44320,30228],{"class":204},[65,44322,34857],{"class":154},[65,44324,44325],{"class":302},"バナナ",[65,44327,34857],{"class":154},[65,44329,230],{"class":154},[65,44331,35344],{"class":154},[65,44333,44334],{"class":302},"リンゴ",[65,44336,34857],{"class":154},[65,44338,230],{"class":154},[65,44340,35344],{"class":154},[65,44342,44343],{"class":302},"もも",[65,44345,34857],{"class":154},[65,44347,6106],{"class":204},[65,44349,155],{"class":154},[65,44351,44352,44354,44356,44358,44360,44363,44365,44368,44370],{"class":140,"line":158},[65,44353,35301],{"class":144},[65,44355,834],{"class":154},[65,44357,35306],{"class":200},[65,44359,224],{"class":204},[65,44361,44362],{"class":144},"fruits",[65,44364,834],{"class":154},[65,44366,44367],{"class":204},"length)",[65,44369,6005],{"class":154},[65,44371,44372],{"class":278}," // 3\n",[11,44374,44195],{"id":44195},[35274,44376],{":list":44377,"title":35277},"[\"配列の全要素を表示する\",\"複数の取得したHTML要素に処理を適用する\"]",[15,44379,44380,44381,10345,44383,44385,44386,44389,44390,44392,44393,44395],{},"配列のループ処理は、",[124,44382,38987],{},[124,44384,6643],{},"文、",[124,44387,44388],{},"for...of","文を使用してできます。ここでは、使う機会の多い",[124,44391,38987],{},"について紹介します。以下は、",[124,44394,38987],{},"を使用して配列の全要素を表示する例です。",[129,44397,44399],{"className":35286,"code":44398,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nfruits.forEach((fruit) => console.log(fruit));\n// バナナ\n// リンゴ\n// もも\n",[124,44400,44401,44437,44471,44476,44481],{"__ignoreMap":135},[65,44402,44403,44405,44407,44409,44411,44413,44415,44417,44419,44421,44423,44425,44427,44429,44431,44433,44435],{"class":140,"line":141},[65,44404,1769],{"class":168},[65,44406,44316],{"class":144},[65,44408,218],{"class":168},[65,44410,30228],{"class":204},[65,44412,34857],{"class":154},[65,44414,44325],{"class":302},[65,44416,34857],{"class":154},[65,44418,230],{"class":154},[65,44420,35344],{"class":154},[65,44422,44334],{"class":302},[65,44424,34857],{"class":154},[65,44426,230],{"class":154},[65,44428,35344],{"class":154},[65,44430,44343],{"class":302},[65,44432,34857],{"class":154},[65,44434,6106],{"class":204},[65,44436,155],{"class":154},[65,44438,44439,44441,44443,44445,44447,44449,44452,44454,44456,44459,44461,44463,44465,44467,44469],{"class":140,"line":158},[65,44440,44362],{"class":144},[65,44442,834],{"class":154},[65,44444,38987],{"class":200},[65,44446,224],{"class":204},[65,44448,224],{"class":154},[65,44450,44451],{"class":793},"fruit",[65,44453,235],{"class":154},[65,44455,1862],{"class":168},[65,44457,44458],{"class":144}," console",[65,44460,834],{"class":154},[65,44462,35306],{"class":200},[65,44464,224],{"class":204},[65,44466,44451],{"class":144},[65,44468,11111],{"class":204},[65,44470,155],{"class":154},[65,44472,44473],{"class":140,"line":165},[65,44474,44475],{"class":278},"// バナナ\n",[65,44477,44478],{"class":140,"line":180},[65,44479,44480],{"class":278},"// リンゴ\n",[65,44482,44483],{"class":140,"line":194},[65,44484,44485],{"class":278},"// もも\n",[15,44487,44488,44490],{},[124,44489,38987],{},"の第2引数には、ループ処理の現在のインデックスが渡されます。",[129,44492,44494],{"className":35286,"code":44493,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nfruits.forEach((fruit, index) => console.log(index, fruit));\n// 0 バナナ\n// 1 リンゴ\n// 2 もも\n",[124,44495,44496,44532,44573,44578,44583],{"__ignoreMap":135},[65,44497,44498,44500,44502,44504,44506,44508,44510,44512,44514,44516,44518,44520,44522,44524,44526,44528,44530],{"class":140,"line":141},[65,44499,1769],{"class":168},[65,44501,44316],{"class":144},[65,44503,218],{"class":168},[65,44505,30228],{"class":204},[65,44507,34857],{"class":154},[65,44509,44325],{"class":302},[65,44511,34857],{"class":154},[65,44513,230],{"class":154},[65,44515,35344],{"class":154},[65,44517,44334],{"class":302},[65,44519,34857],{"class":154},[65,44521,230],{"class":154},[65,44523,35344],{"class":154},[65,44525,44343],{"class":302},[65,44527,34857],{"class":154},[65,44529,6106],{"class":204},[65,44531,155],{"class":154},[65,44533,44534,44536,44538,44540,44542,44544,44546,44548,44550,44552,44554,44556,44558,44560,44562,44564,44566,44569,44571],{"class":140,"line":158},[65,44535,44362],{"class":144},[65,44537,834],{"class":154},[65,44539,38987],{"class":200},[65,44541,224],{"class":204},[65,44543,224],{"class":154},[65,44545,44451],{"class":793},[65,44547,230],{"class":154},[65,44549,6187],{"class":793},[65,44551,235],{"class":154},[65,44553,1862],{"class":168},[65,44555,44458],{"class":144},[65,44557,834],{"class":154},[65,44559,35306],{"class":200},[65,44561,224],{"class":204},[65,44563,11865],{"class":144},[65,44565,230],{"class":154},[65,44567,44568],{"class":144}," fruit",[65,44570,11111],{"class":204},[65,44572,155],{"class":154},[65,44574,44575],{"class":140,"line":165},[65,44576,44577],{"class":278},"// 0 バナナ\n",[65,44579,44580],{"class":140,"line":180},[65,44581,44582],{"class":278},"// 1 リンゴ\n",[65,44584,44585],{"class":140,"line":194},[65,44586,44587],{"class":278},"// 2 もも\n",[15,44589,44590,44591,44593],{},"Web制作では、複数のHTML要素に処理を適用する際に",[124,44592,38987],{},"が便利でよく使用されます。",[129,44595,44597],{"className":35286,"code":44596,"filename":35288,"language":35289,"meta":135,"style":135},"const items = document.querySelectorAll(\".item\");\nitems.forEach((item) => {\n item.addEventListener(\"click\", () => {\n console.log(item.textContent);\n });\n});\n",[124,44598,44599,44627,44648,44673,44693,44701],{"__ignoreMap":135},[65,44600,44601,44603,44606,44608,44610,44612,44614,44616,44618,44621,44623,44625],{"class":140,"line":141},[65,44602,1769],{"class":168},[65,44604,44605],{"class":144}," items",[65,44607,218],{"class":168},[65,44609,3413],{"class":144},[65,44611,834],{"class":154},[65,44613,38719],{"class":200},[65,44615,224],{"class":204},[65,44617,34857],{"class":154},[65,44619,44620],{"class":302},".item",[65,44622,34857],{"class":154},[65,44624,235],{"class":204},[65,44626,155],{"class":154},[65,44628,44629,44632,44634,44636,44638,44640,44642,44644,44646],{"class":140,"line":158},[65,44630,44631],{"class":144},"items",[65,44633,834],{"class":154},[65,44635,38987],{"class":200},[65,44637,224],{"class":204},[65,44639,224],{"class":154},[65,44641,37026],{"class":793},[65,44643,235],{"class":154},[65,44645,1862],{"class":168},[65,44647,418],{"class":154},[65,44649,44650,44653,44655,44657,44659,44661,44663,44665,44667,44669,44671],{"class":140,"line":165},[65,44651,44652],{"class":214}," item",[65,44654,834],{"class":154},[65,44656,4698],{"class":200},[65,44658,224],{"class":204},[65,44660,34857],{"class":154},[65,44662,36197],{"class":302},[65,44664,34857],{"class":154},[65,44666,230],{"class":154},[65,44668,1932],{"class":154},[65,44670,1862],{"class":168},[65,44672,418],{"class":154},[65,44674,44675,44677,44679,44681,44683,44685,44687,44689,44691],{"class":140,"line":180},[65,44676,42788],{"class":214},[65,44678,834],{"class":154},[65,44680,35306],{"class":200},[65,44682,224],{"class":204},[65,44684,37026],{"class":214},[65,44686,834],{"class":154},[65,44688,36074],{"class":214},[65,44690,235],{"class":204},[65,44692,155],{"class":154},[65,44694,44695,44697,44699],{"class":140,"line":194},[65,44696,1977],{"class":154},[65,44698,235],{"class":204},[65,44700,155],{"class":154},[65,44702,44703,44705,44707],{"class":140,"line":211},[65,44704,2899],{"class":154},[65,44706,235],{"class":204},[65,44708,155],{"class":154},[11,44710,44205],{"id":44205},[35274,44712],{":list":44713,"title":35277},"[\"新しいデータを配列の最後に追加していく(ログ履歴、メッセージの追加など)\",\"新しいデータを配列の最初に挿入する（優先度の高いタスクを前に入れるなど）\"]",[15,44715,44716,44717,10345,44719,41383],{},"配列の要素を追加するには、",[124,44718,19451],{},[124,44720,44721],{},"unshift",[583,44723,44724,44732],{},[586,44725,44726],{},[589,44727,44728,44730],{},[592,44729,43194],{},[592,44731,597],{},[602,44733,44734,44743],{},[589,44735,44736,44740],{},[607,44737,44738],{},[124,44739,19451],{},[607,44741,44742],{},"配列の最後に要素を追加する",[589,44744,44745,44749],{},[607,44746,44747],{},[124,44748,44721],{},[607,44750,44751],{},"配列の最初に要素を追加する",[89,44753,44754,44759],{},[92,44755,44756,44758],{},[124,44757,19451],{},"メソッドは、配列の最後に要素を追加します。",[92,44760,44761,44763],{},[124,44762,44721],{},"メソッドは、配列の最初に要素を追加します。",[129,44765,44767],{"className":35286,"code":44766,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nfruits.push(\"いちご\");\nconsole.log(fruits); // [\"バナナ\", \"リンゴ\", \"もも\", \"いちご\"]\n",[124,44768,44769,44805,44826],{"__ignoreMap":135},[65,44770,44771,44773,44775,44777,44779,44781,44783,44785,44787,44789,44791,44793,44795,44797,44799,44801,44803],{"class":140,"line":141},[65,44772,1769],{"class":168},[65,44774,44316],{"class":144},[65,44776,218],{"class":168},[65,44778,30228],{"class":204},[65,44780,34857],{"class":154},[65,44782,44325],{"class":302},[65,44784,34857],{"class":154},[65,44786,230],{"class":154},[65,44788,35344],{"class":154},[65,44790,44334],{"class":302},[65,44792,34857],{"class":154},[65,44794,230],{"class":154},[65,44796,35344],{"class":154},[65,44798,44343],{"class":302},[65,44800,34857],{"class":154},[65,44802,6106],{"class":204},[65,44804,155],{"class":154},[65,44806,44807,44809,44811,44813,44815,44817,44820,44822,44824],{"class":140,"line":158},[65,44808,44362],{"class":144},[65,44810,834],{"class":154},[65,44812,19451],{"class":200},[65,44814,224],{"class":204},[65,44816,34857],{"class":154},[65,44818,44819],{"class":302},"いちご",[65,44821,34857],{"class":154},[65,44823,235],{"class":204},[65,44825,155],{"class":154},[65,44827,44828,44830,44832,44834,44836,44838,44840,44842],{"class":140,"line":165},[65,44829,35301],{"class":144},[65,44831,834],{"class":154},[65,44833,35306],{"class":200},[65,44835,224],{"class":204},[65,44837,44362],{"class":144},[65,44839,235],{"class":204},[65,44841,6005],{"class":154},[65,44843,44844],{"class":278}," // [\"バナナ\", \"リンゴ\", \"もも\", \"いちご\"]\n",[129,44846,44848],{"className":35286,"code":44847,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nfruits.unshift(\"いちご\");\nconsole.log(fruits); // [\"いちご\", \"バナナ\", \"リンゴ\", \"もも\"]\n",[124,44849,44850,44886,44906],{"__ignoreMap":135},[65,44851,44852,44854,44856,44858,44860,44862,44864,44866,44868,44870,44872,44874,44876,44878,44880,44882,44884],{"class":140,"line":141},[65,44853,1769],{"class":168},[65,44855,44316],{"class":144},[65,44857,218],{"class":168},[65,44859,30228],{"class":204},[65,44861,34857],{"class":154},[65,44863,44325],{"class":302},[65,44865,34857],{"class":154},[65,44867,230],{"class":154},[65,44869,35344],{"class":154},[65,44871,44334],{"class":302},[65,44873,34857],{"class":154},[65,44875,230],{"class":154},[65,44877,35344],{"class":154},[65,44879,44343],{"class":302},[65,44881,34857],{"class":154},[65,44883,6106],{"class":204},[65,44885,155],{"class":154},[65,44887,44888,44890,44892,44894,44896,44898,44900,44902,44904],{"class":140,"line":158},[65,44889,44362],{"class":144},[65,44891,834],{"class":154},[65,44893,44721],{"class":200},[65,44895,224],{"class":204},[65,44897,34857],{"class":154},[65,44899,44819],{"class":302},[65,44901,34857],{"class":154},[65,44903,235],{"class":204},[65,44905,155],{"class":154},[65,44907,44908,44910,44912,44914,44916,44918,44920,44922],{"class":140,"line":165},[65,44909,35301],{"class":144},[65,44911,834],{"class":154},[65,44913,35306],{"class":200},[65,44915,224],{"class":204},[65,44917,44362],{"class":144},[65,44919,235],{"class":204},[65,44921,6005],{"class":154},[65,44923,44924],{"class":278}," // [\"いちご\", \"バナナ\", \"リンゴ\", \"もも\"]\n",[11,44926,44215],{"id":44215},[35274,44928],{":list":44929,"title":35277},"[\"最新の要素を削除したい時\",\"古いデータを削除したい時\"]",[15,44931,44932,44933,10345,44936,41383],{},"配列の要素を削除するには、",[124,44934,44935],{},"pop",[124,44937,44938],{},"shift",[583,44940,44941,44949],{},[586,44942,44943],{},[589,44944,44945,44947],{},[592,44946,43194],{},[592,44948,597],{},[602,44950,44951,44960],{},[589,44952,44953,44957],{},[607,44954,44955],{},[124,44956,44935],{},[607,44958,44959],{},"配列の最後の要素を削除する",[589,44961,44962,44966],{},[607,44963,44964],{},[124,44965,44938],{},[607,44967,44968],{},"配列の最初の要素を削除する",[89,44970,44971,44976],{},[92,44972,44973,44975],{},[124,44974,44935],{},"メソッドは、配列の最後の要素を削除します。",[92,44977,44978,44980],{},[124,44979,44938],{},"メソッドは、配列の最初の要素を削除します。",[15,44982,44983],{},"戻り値には削除された要素が返されます。",[129,44985,44987],{"className":35286,"code":44986,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nconst removedFruit = fruits.pop();\nconsole.log(removedFruit); // \"もも\"\nconsole.log(fruits); // [\"バナナ\", \"リンゴ\"]\n",[124,44988,44989,45025,45044,45064],{"__ignoreMap":135},[65,44990,44991,44993,44995,44997,44999,45001,45003,45005,45007,45009,45011,45013,45015,45017,45019,45021,45023],{"class":140,"line":141},[65,44992,1769],{"class":168},[65,44994,44316],{"class":144},[65,44996,218],{"class":168},[65,44998,30228],{"class":204},[65,45000,34857],{"class":154},[65,45002,44325],{"class":302},[65,45004,34857],{"class":154},[65,45006,230],{"class":154},[65,45008,35344],{"class":154},[65,45010,44334],{"class":302},[65,45012,34857],{"class":154},[65,45014,230],{"class":154},[65,45016,35344],{"class":154},[65,45018,44343],{"class":302},[65,45020,34857],{"class":154},[65,45022,6106],{"class":204},[65,45024,155],{"class":154},[65,45026,45027,45029,45032,45034,45036,45038,45040,45042],{"class":140,"line":158},[65,45028,1769],{"class":168},[65,45030,45031],{"class":144}," removedFruit",[65,45033,218],{"class":168},[65,45035,44316],{"class":144},[65,45037,834],{"class":154},[65,45039,44935],{"class":200},[65,45041,1269],{"class":204},[65,45043,155],{"class":154},[65,45045,45046,45048,45050,45052,45054,45057,45059,45061],{"class":140,"line":165},[65,45047,35301],{"class":144},[65,45049,834],{"class":154},[65,45051,35306],{"class":200},[65,45053,224],{"class":204},[65,45055,45056],{"class":144},"removedFruit",[65,45058,235],{"class":204},[65,45060,6005],{"class":154},[65,45062,45063],{"class":278}," // \"もも\"\n",[65,45065,45066,45068,45070,45072,45074,45076,45078,45080],{"class":140,"line":180},[65,45067,35301],{"class":144},[65,45069,834],{"class":154},[65,45071,35306],{"class":200},[65,45073,224],{"class":204},[65,45075,44362],{"class":144},[65,45077,235],{"class":204},[65,45079,6005],{"class":154},[65,45081,45082],{"class":278}," // [\"バナナ\", \"リンゴ\"]\n",[129,45084,45086],{"className":35286,"code":45085,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nconst removedFruit = fruits.shift();\nconsole.log(removedFruit); // \"バナナ\"\nconsole.log(fruits); // [\"リンゴ\", \"もも\"]\n",[124,45087,45088,45124,45142,45161],{"__ignoreMap":135},[65,45089,45090,45092,45094,45096,45098,45100,45102,45104,45106,45108,45110,45112,45114,45116,45118,45120,45122],{"class":140,"line":141},[65,45091,1769],{"class":168},[65,45093,44316],{"class":144},[65,45095,218],{"class":168},[65,45097,30228],{"class":204},[65,45099,34857],{"class":154},[65,45101,44325],{"class":302},[65,45103,34857],{"class":154},[65,45105,230],{"class":154},[65,45107,35344],{"class":154},[65,45109,44334],{"class":302},[65,45111,34857],{"class":154},[65,45113,230],{"class":154},[65,45115,35344],{"class":154},[65,45117,44343],{"class":302},[65,45119,34857],{"class":154},[65,45121,6106],{"class":204},[65,45123,155],{"class":154},[65,45125,45126,45128,45130,45132,45134,45136,45138,45140],{"class":140,"line":158},[65,45127,1769],{"class":168},[65,45129,45031],{"class":144},[65,45131,218],{"class":168},[65,45133,44316],{"class":144},[65,45135,834],{"class":154},[65,45137,44938],{"class":200},[65,45139,1269],{"class":204},[65,45141,155],{"class":154},[65,45143,45144,45146,45148,45150,45152,45154,45156,45158],{"class":140,"line":165},[65,45145,35301],{"class":144},[65,45147,834],{"class":154},[65,45149,35306],{"class":200},[65,45151,224],{"class":204},[65,45153,45056],{"class":144},[65,45155,235],{"class":204},[65,45157,6005],{"class":154},[65,45159,45160],{"class":278}," // \"バナナ\"\n",[65,45162,45163,45165,45167,45169,45171,45173,45175,45177],{"class":140,"line":180},[65,45164,35301],{"class":144},[65,45166,834],{"class":154},[65,45168,35306],{"class":200},[65,45170,224],{"class":204},[65,45172,44362],{"class":144},[65,45174,235],{"class":204},[65,45176,6005],{"class":154},[65,45178,45179],{"class":278}," // [\"リンゴ\", \"もも\"]\n",[11,45181,44225],{"id":44225},[35274,45183],{":list":45184,"title":35277},"[\"特定の位置の要素を別の要素に変更したいとき\"]",[15,45186,45187,45188,41383,45190,45192],{},"配列内の要素を別の要素に置き換えるには、",[124,45189,28675],{},[5467,45191],{},"\n第1引数は置き換える要素のインデックス、第2引数は置き換える要素の数、第3引数以降は置き換える要素になります。",[129,45194,45196],{"className":35286,"code":45195,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nfruits.splice(1, 1, \"いちご\"); // リンゴをいちごに置き換える\nconsole.log(fruits); // [\"バナナ\", \"いちご\", \"もも\"]\n",[124,45197,45198,45234,45265],{"__ignoreMap":135},[65,45199,45200,45202,45204,45206,45208,45210,45212,45214,45216,45218,45220,45222,45224,45226,45228,45230,45232],{"class":140,"line":141},[65,45201,1769],{"class":168},[65,45203,44316],{"class":144},[65,45205,218],{"class":168},[65,45207,30228],{"class":204},[65,45209,34857],{"class":154},[65,45211,44325],{"class":302},[65,45213,34857],{"class":154},[65,45215,230],{"class":154},[65,45217,35344],{"class":154},[65,45219,44334],{"class":302},[65,45221,34857],{"class":154},[65,45223,230],{"class":154},[65,45225,35344],{"class":154},[65,45227,44343],{"class":302},[65,45229,34857],{"class":154},[65,45231,6106],{"class":204},[65,45233,155],{"class":154},[65,45235,45236,45238,45240,45242,45244,45246,45248,45250,45252,45254,45256,45258,45260,45262],{"class":140,"line":158},[65,45237,44362],{"class":144},[65,45239,834],{"class":154},[65,45241,28675],{"class":200},[65,45243,224],{"class":204},[65,45245,3620],{"class":793},[65,45247,230],{"class":154},[65,45249,3137],{"class":793},[65,45251,230],{"class":154},[65,45253,35344],{"class":154},[65,45255,44819],{"class":302},[65,45257,34857],{"class":154},[65,45259,235],{"class":204},[65,45261,6005],{"class":154},[65,45263,45264],{"class":278}," // リンゴをいちごに置き換える\n",[65,45266,45267,45269,45271,45273,45275,45277,45279,45281],{"class":140,"line":165},[65,45268,35301],{"class":144},[65,45270,834],{"class":154},[65,45272,35306],{"class":200},[65,45274,224],{"class":204},[65,45276,44362],{"class":144},[65,45278,235],{"class":204},[65,45280,6005],{"class":154},[65,45282,45283],{"class":278}," // [\"バナナ\", \"いちご\", \"もも\"]\n",[11,45285,44235],{"id":44235},[35274,45287],{":list":45288,"title":35277},"[\"複数の配列をまとめて1つにする\"]",[15,45290,45291,45292,41383],{},"複数の配列を一つに結合するには、",[124,45293,45294],{},"concat",[129,45296,45298],{"className":35286,"code":45297,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nconst vegetables = [\"トマト\", \"きゅうり\", \"なす\"];\nconst combined = fruits.concat(vegetables);\nconsole.log(combined); // [\"バナナ\", \"リンゴ\", \"もも\", \"トマト\", \"きゅうり\", \"なす\"]\n",[124,45299,45300,45336,45376,45400],{"__ignoreMap":135},[65,45301,45302,45304,45306,45308,45310,45312,45314,45316,45318,45320,45322,45324,45326,45328,45330,45332,45334],{"class":140,"line":141},[65,45303,1769],{"class":168},[65,45305,44316],{"class":144},[65,45307,218],{"class":168},[65,45309,30228],{"class":204},[65,45311,34857],{"class":154},[65,45313,44325],{"class":302},[65,45315,34857],{"class":154},[65,45317,230],{"class":154},[65,45319,35344],{"class":154},[65,45321,44334],{"class":302},[65,45323,34857],{"class":154},[65,45325,230],{"class":154},[65,45327,35344],{"class":154},[65,45329,44343],{"class":302},[65,45331,34857],{"class":154},[65,45333,6106],{"class":204},[65,45335,155],{"class":154},[65,45337,45338,45340,45343,45345,45347,45349,45352,45354,45356,45358,45361,45363,45365,45367,45370,45372,45374],{"class":140,"line":158},[65,45339,1769],{"class":168},[65,45341,45342],{"class":144}," vegetables",[65,45344,218],{"class":168},[65,45346,30228],{"class":204},[65,45348,34857],{"class":154},[65,45350,45351],{"class":302},"トマト",[65,45353,34857],{"class":154},[65,45355,230],{"class":154},[65,45357,35344],{"class":154},[65,45359,45360],{"class":302},"きゅうり",[65,45362,34857],{"class":154},[65,45364,230],{"class":154},[65,45366,35344],{"class":154},[65,45368,45369],{"class":302},"なす",[65,45371,34857],{"class":154},[65,45373,6106],{"class":204},[65,45375,155],{"class":154},[65,45377,45378,45380,45383,45385,45387,45389,45391,45393,45396,45398],{"class":140,"line":165},[65,45379,1769],{"class":168},[65,45381,45382],{"class":144}," combined",[65,45384,218],{"class":168},[65,45386,44316],{"class":144},[65,45388,834],{"class":154},[65,45390,45294],{"class":200},[65,45392,224],{"class":204},[65,45394,45395],{"class":144},"vegetables",[65,45397,235],{"class":204},[65,45399,155],{"class":154},[65,45401,45402,45404,45406,45408,45410,45413,45415,45417],{"class":140,"line":180},[65,45403,35301],{"class":144},[65,45405,834],{"class":154},[65,45407,35306],{"class":200},[65,45409,224],{"class":204},[65,45411,45412],{"class":144},"combined",[65,45414,235],{"class":204},[65,45416,6005],{"class":154},[65,45418,45419],{"class":278}," // [\"バナナ\", \"リンゴ\", \"もも\", \"トマト\", \"きゅうり\", \"なす\"]\n",[11,45421,44245],{"id":44245},[35274,45423],{":list":45424,"title":35277},"[\"配列を単純に文字列に変換したいとき\",\"表示用に見やすく区切りたいとき\",\"複数行テキストやログ形式の文字列を作成する\"]",[15,45426,45427,45428,45431],{},"配列の要素を結合するには、",[124,45429,45430],{},"join","メソッドを使用します。戻り値は結合された文字列になります。引数に何も指定しない場合は、カンマで結合されます。",[129,45433,45435],{"className":35286,"code":45434,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nconst joined = fruits.join();\nconsole.log(joined); // \"バナナ,リンゴ,もも\"\n",[124,45436,45437,45473,45492],{"__ignoreMap":135},[65,45438,45439,45441,45443,45445,45447,45449,45451,45453,45455,45457,45459,45461,45463,45465,45467,45469,45471],{"class":140,"line":141},[65,45440,1769],{"class":168},[65,45442,44316],{"class":144},[65,45444,218],{"class":168},[65,45446,30228],{"class":204},[65,45448,34857],{"class":154},[65,45450,44325],{"class":302},[65,45452,34857],{"class":154},[65,45454,230],{"class":154},[65,45456,35344],{"class":154},[65,45458,44334],{"class":302},[65,45460,34857],{"class":154},[65,45462,230],{"class":154},[65,45464,35344],{"class":154},[65,45466,44343],{"class":302},[65,45468,34857],{"class":154},[65,45470,6106],{"class":204},[65,45472,155],{"class":154},[65,45474,45475,45477,45480,45482,45484,45486,45488,45490],{"class":140,"line":158},[65,45476,1769],{"class":168},[65,45478,45479],{"class":144}," joined",[65,45481,218],{"class":168},[65,45483,44316],{"class":144},[65,45485,834],{"class":154},[65,45487,45430],{"class":200},[65,45489,1269],{"class":204},[65,45491,155],{"class":154},[65,45493,45494,45496,45498,45500,45502,45505,45507,45509],{"class":140,"line":165},[65,45495,35301],{"class":144},[65,45497,834],{"class":154},[65,45499,35306],{"class":200},[65,45501,224],{"class":204},[65,45503,45504],{"class":144},"joined",[65,45506,235],{"class":204},[65,45508,6005],{"class":154},[65,45510,45511],{"class":278}," // \"バナナ,リンゴ,もも\"\n",[15,45513,45514],{},"引数には、結合する文字列を指定できます。次の例はスラッシュで区切った文字列にします。",[129,45516,45518],{"className":35286,"code":45517,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nconst joined = fruits.join(\" / \");\nconsole.log(joined); // \"バナナ / リンゴ / もも\"\n",[124,45519,45520,45556,45583],{"__ignoreMap":135},[65,45521,45522,45524,45526,45528,45530,45532,45534,45536,45538,45540,45542,45544,45546,45548,45550,45552,45554],{"class":140,"line":141},[65,45523,1769],{"class":168},[65,45525,44316],{"class":144},[65,45527,218],{"class":168},[65,45529,30228],{"class":204},[65,45531,34857],{"class":154},[65,45533,44325],{"class":302},[65,45535,34857],{"class":154},[65,45537,230],{"class":154},[65,45539,35344],{"class":154},[65,45541,44334],{"class":302},[65,45543,34857],{"class":154},[65,45545,230],{"class":154},[65,45547,35344],{"class":154},[65,45549,44343],{"class":302},[65,45551,34857],{"class":154},[65,45553,6106],{"class":204},[65,45555,155],{"class":154},[65,45557,45558,45560,45562,45564,45566,45568,45570,45572,45574,45577,45579,45581],{"class":140,"line":158},[65,45559,1769],{"class":168},[65,45561,45479],{"class":144},[65,45563,218],{"class":168},[65,45565,44316],{"class":144},[65,45567,834],{"class":154},[65,45569,45430],{"class":200},[65,45571,224],{"class":204},[65,45573,34857],{"class":154},[65,45575,45576],{"class":302}," / ",[65,45578,34857],{"class":154},[65,45580,235],{"class":204},[65,45582,155],{"class":154},[65,45584,45585,45587,45589,45591,45593,45595,45597,45599],{"class":140,"line":165},[65,45586,35301],{"class":144},[65,45588,834],{"class":154},[65,45590,35306],{"class":200},[65,45592,224],{"class":204},[65,45594,45504],{"class":144},[65,45596,235],{"class":204},[65,45598,6005],{"class":154},[65,45600,45601],{"class":278}," // \"バナナ / リンゴ / もも\"\n",[11,45603,44255],{"id":44255},[35274,45605],{":list":45606,"title":35277},"[\"配列から特定の要素の位置を調べたいとき\",\"配列に特定の要素が含まれているかどうかを調べたいとき\"]",[15,45608,45609,45610,45612,45613,41383],{},"配列の要素を検索するには、",[124,45611,28621],{},"メソッドと",[124,45614,45615],{},"includes",[15,45617,45618,45620],{},[124,45619,28621],{},"メソッドは、配列から特定の要素の位置を検索します。戻り値は要素のインデックスになります。要素が見つからない場合は、-1が返されます。",[129,45622,45624],{"className":35286,"code":45623,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nconsole.log(fruits.indexOf(\"リンゴ\")); // 1\nconsole.log(fruits.indexOf(\"いちご\")); // 要素が見つからない場合は、-1が返される。\n",[124,45625,45626,45662,45693],{"__ignoreMap":135},[65,45627,45628,45630,45632,45634,45636,45638,45640,45642,45644,45646,45648,45650,45652,45654,45656,45658,45660],{"class":140,"line":141},[65,45629,1769],{"class":168},[65,45631,44316],{"class":144},[65,45633,218],{"class":168},[65,45635,30228],{"class":204},[65,45637,34857],{"class":154},[65,45639,44325],{"class":302},[65,45641,34857],{"class":154},[65,45643,230],{"class":154},[65,45645,35344],{"class":154},[65,45647,44334],{"class":302},[65,45649,34857],{"class":154},[65,45651,230],{"class":154},[65,45653,35344],{"class":154},[65,45655,44343],{"class":302},[65,45657,34857],{"class":154},[65,45659,6106],{"class":204},[65,45661,155],{"class":154},[65,45663,45664,45666,45668,45670,45672,45674,45676,45678,45680,45682,45684,45686,45688,45690],{"class":140,"line":158},[65,45665,35301],{"class":144},[65,45667,834],{"class":154},[65,45669,35306],{"class":200},[65,45671,224],{"class":204},[65,45673,44362],{"class":144},[65,45675,834],{"class":154},[65,45677,28621],{"class":200},[65,45679,224],{"class":204},[65,45681,34857],{"class":154},[65,45683,44334],{"class":302},[65,45685,34857],{"class":154},[65,45687,11111],{"class":204},[65,45689,6005],{"class":154},[65,45691,45692],{"class":278}," // 1\n",[65,45694,45695,45697,45699,45701,45703,45705,45707,45709,45711,45713,45715,45717,45719,45721],{"class":140,"line":165},[65,45696,35301],{"class":144},[65,45698,834],{"class":154},[65,45700,35306],{"class":200},[65,45702,224],{"class":204},[65,45704,44362],{"class":144},[65,45706,834],{"class":154},[65,45708,28621],{"class":200},[65,45710,224],{"class":204},[65,45712,34857],{"class":154},[65,45714,44819],{"class":302},[65,45716,34857],{"class":154},[65,45718,11111],{"class":204},[65,45720,6005],{"class":154},[65,45722,45723],{"class":278}," // 要素が見つからない場合は、-1が返される。\n",[15,45725,45726,45728],{},[124,45727,45615],{},"メソッドは、配列に特定の要素が含まれているかどうかを検索します。戻り値は真偽値になります。",[129,45730,45732],{"className":35286,"code":45731,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nconsole.log(fruits.includes(\"リンゴ\")); // true\nconsole.log(fruits.includes(\"いちご\")); // false\n",[124,45733,45734,45770,45801],{"__ignoreMap":135},[65,45735,45736,45738,45740,45742,45744,45746,45748,45750,45752,45754,45756,45758,45760,45762,45764,45766,45768],{"class":140,"line":141},[65,45737,1769],{"class":168},[65,45739,44316],{"class":144},[65,45741,218],{"class":168},[65,45743,30228],{"class":204},[65,45745,34857],{"class":154},[65,45747,44325],{"class":302},[65,45749,34857],{"class":154},[65,45751,230],{"class":154},[65,45753,35344],{"class":154},[65,45755,44334],{"class":302},[65,45757,34857],{"class":154},[65,45759,230],{"class":154},[65,45761,35344],{"class":154},[65,45763,44343],{"class":302},[65,45765,34857],{"class":154},[65,45767,6106],{"class":204},[65,45769,155],{"class":154},[65,45771,45772,45774,45776,45778,45780,45782,45784,45786,45788,45790,45792,45794,45796,45798],{"class":140,"line":158},[65,45773,35301],{"class":144},[65,45775,834],{"class":154},[65,45777,35306],{"class":200},[65,45779,224],{"class":204},[65,45781,44362],{"class":144},[65,45783,834],{"class":154},[65,45785,45615],{"class":200},[65,45787,224],{"class":204},[65,45789,34857],{"class":154},[65,45791,44334],{"class":302},[65,45793,34857],{"class":154},[65,45795,11111],{"class":204},[65,45797,6005],{"class":154},[65,45799,45800],{"class":278}," // true\n",[65,45802,45803,45805,45807,45809,45811,45813,45815,45817,45819,45821,45823,45825,45827,45829],{"class":140,"line":165},[65,45804,35301],{"class":144},[65,45806,834],{"class":154},[65,45808,35306],{"class":200},[65,45810,224],{"class":204},[65,45812,44362],{"class":144},[65,45814,834],{"class":154},[65,45816,45615],{"class":200},[65,45818,224],{"class":204},[65,45820,34857],{"class":154},[65,45822,44819],{"class":302},[65,45824,34857],{"class":154},[65,45826,11111],{"class":204},[65,45828,6005],{"class":154},[65,45830,45831],{"class":278}," // false\n",[11,45833,44265],{"id":44265},[35274,45835],{":list":45836,"title":35277},"[\"特定の条件に一致する1つ目の値を取得したいとき\",\"データベースやAPIから取得した配列から特定のデータを探す\"]",[15,45838,45839,45840,41383,45843,45845,45846,43018],{},"配列から特定の条件を満たす要素を抽出するには、",[124,45841,45842],{},"find",[124,45844,45842],{},"メソッドは条件を満たす最初の要素を返します。見つからない場合は、",[124,45847,43017],{},[129,45849,45851],{"className":35286,"code":45850,"filename":35288,"language":35289,"meta":135,"style":135},"const fruits = [\"バナナ\", \"リンゴ\", \"もも\"];\nconsole.log(fruits.find((fruit) => fruit === \"リンゴ\")); // \"リンゴ\"\nconsole.log(fruits.find((fruit) => fruit === \"いちご\")); // undefined\n",[124,45852,45853,45889,45932],{"__ignoreMap":135},[65,45854,45855,45857,45859,45861,45863,45865,45867,45869,45871,45873,45875,45877,45879,45881,45883,45885,45887],{"class":140,"line":141},[65,45856,1769],{"class":168},[65,45858,44316],{"class":144},[65,45860,218],{"class":168},[65,45862,30228],{"class":204},[65,45864,34857],{"class":154},[65,45866,44325],{"class":302},[65,45868,34857],{"class":154},[65,45870,230],{"class":154},[65,45872,35344],{"class":154},[65,45874,44334],{"class":302},[65,45876,34857],{"class":154},[65,45878,230],{"class":154},[65,45880,35344],{"class":154},[65,45882,44343],{"class":302},[65,45884,34857],{"class":154},[65,45886,6106],{"class":204},[65,45888,155],{"class":154},[65,45890,45891,45893,45895,45897,45899,45901,45903,45905,45907,45909,45911,45913,45915,45917,45919,45921,45923,45925,45927,45929],{"class":140,"line":158},[65,45892,35301],{"class":144},[65,45894,834],{"class":154},[65,45896,35306],{"class":200},[65,45898,224],{"class":204},[65,45900,44362],{"class":144},[65,45902,834],{"class":154},[65,45904,45842],{"class":200},[65,45906,224],{"class":204},[65,45908,224],{"class":154},[65,45910,44451],{"class":793},[65,45912,235],{"class":154},[65,45914,1862],{"class":168},[65,45916,44568],{"class":144},[65,45918,1704],{"class":168},[65,45920,35344],{"class":154},[65,45922,44334],{"class":302},[65,45924,34857],{"class":154},[65,45926,11111],{"class":204},[65,45928,6005],{"class":154},[65,45930,45931],{"class":278}," // \"リンゴ\"\n",[65,45933,45934,45936,45938,45940,45942,45944,45946,45948,45950,45952,45954,45956,45958,45960,45962,45964,45966,45968,45970,45972],{"class":140,"line":165},[65,45935,35301],{"class":144},[65,45937,834],{"class":154},[65,45939,35306],{"class":200},[65,45941,224],{"class":204},[65,45943,44362],{"class":144},[65,45945,834],{"class":154},[65,45947,45842],{"class":200},[65,45949,224],{"class":204},[65,45951,224],{"class":154},[65,45953,44451],{"class":793},[65,45955,235],{"class":154},[65,45957,1862],{"class":168},[65,45959,44568],{"class":144},[65,45961,1704],{"class":168},[65,45963,35344],{"class":154},[65,45965,44819],{"class":302},[65,45967,34857],{"class":154},[65,45969,11111],{"class":204},[65,45971,6005],{"class":154},[65,45973,45974],{"class":278}," // undefined\n",[15,45976,45977],{},"データベースやAPIから取得したオブジェクト配列から特定のデータを探す用途にも使用できます。",[129,45979,45981],{"className":35286,"code":45980,"filename":35288,"language":35289,"meta":135,"style":135},"const users = [\n { id: 1, name: \"Alice\" },\n { id: 2, name: \"Bob\" },\n { id: 3, name: \"Charlie\" },\n];\nconst user = users.find((user) => user.id === 2);\nconsole.log(user); // { id: 2, name: \"Bob\" }\n",[124,45982,45983,45994,46020,46044,46069,46075,46114],{"__ignoreMap":135},[65,45984,45985,45987,45990,45992],{"class":140,"line":141},[65,45986,1769],{"class":168},[65,45988,45989],{"class":144}," users",[65,45991,218],{"class":168},[65,45993,16316],{"class":204},[65,45995,45996,45999,46001,46003,46005,46007,46009,46011,46013,46016,46018],{"class":140,"line":158},[65,45997,45998],{"class":154}," {",[65,46000,34932],{"class":204},[65,46002,797],{"class":154},[65,46004,3137],{"class":793},[65,46006,230],{"class":154},[65,46008,29166],{"class":204},[65,46010,797],{"class":154},[65,46012,35344],{"class":154},[65,46014,46015],{"class":302},"Alice",[65,46017,34857],{"class":154},[65,46019,3858],{"class":154},[65,46021,46022,46024,46026,46028,46030,46032,46034,46036,46038,46040,46042],{"class":140,"line":165},[65,46023,45998],{"class":154},[65,46025,34932],{"class":204},[65,46027,797],{"class":154},[65,46029,3748],{"class":793},[65,46031,230],{"class":154},[65,46033,29166],{"class":204},[65,46035,797],{"class":154},[65,46037,35344],{"class":154},[65,46039,42984],{"class":302},[65,46041,34857],{"class":154},[65,46043,3858],{"class":154},[65,46045,46046,46048,46050,46052,46054,46056,46058,46060,46062,46065,46067],{"class":140,"line":180},[65,46047,45998],{"class":154},[65,46049,34932],{"class":204},[65,46051,797],{"class":154},[65,46053,3739],{"class":793},[65,46055,230],{"class":154},[65,46057,29166],{"class":204},[65,46059,797],{"class":154},[65,46061,35344],{"class":154},[65,46063,46064],{"class":302},"Charlie",[65,46066,34857],{"class":154},[65,46068,3858],{"class":154},[65,46070,46071,46073],{"class":140,"line":194},[65,46072,6106],{"class":204},[65,46074,155],{"class":154},[65,46076,46077,46079,46081,46083,46085,46087,46089,46091,46093,46095,46097,46099,46101,46103,46106,46108,46110,46112],{"class":140,"line":211},[65,46078,1769],{"class":168},[65,46080,42844],{"class":144},[65,46082,218],{"class":168},[65,46084,45989],{"class":144},[65,46086,834],{"class":154},[65,46088,45842],{"class":200},[65,46090,224],{"class":204},[65,46092,224],{"class":154},[65,46094,42891],{"class":793},[65,46096,235],{"class":154},[65,46098,1862],{"class":168},[65,46100,42844],{"class":144},[65,46102,834],{"class":154},[65,46104,46105],{"class":144},"id",[65,46107,1704],{"class":168},[65,46109,3748],{"class":793},[65,46111,235],{"class":204},[65,46113,155],{"class":154},[65,46115,46116,46118,46120,46122,46124,46126,46128,46130],{"class":140,"line":240},[65,46117,35301],{"class":144},[65,46119,834],{"class":154},[65,46121,35306],{"class":200},[65,46123,224],{"class":204},[65,46125,42891],{"class":144},[65,46127,235],{"class":204},[65,46129,6005],{"class":154},[65,46131,46132],{"class":278}," // { id: 2, name: \"Bob\" }\n",[11,46134,44275],{"id":44275},[35274,46136],{":list":46137,"title":35277},"[\"データを逆順に並べたいとき\",\"アルファベット順や数字順に並べたいとき\"]",[15,46139,46140,46141,45612,46144,41383],{},"配列の並び順を変えるには、",[124,46142,46143],{},"reverse",[124,46145,46146],{},"sort",[1177,46148,46149],{"id":46149},"配列の並び順を逆にする",[15,46151,46152,46154,46155,46158],{},[124,46153,46143],{},"メソッドは、配列の要素の順序を逆に並べ替えます。注意点として、",[34759,46156,46157],{},"元の配列自体を変更(破壊的メソッド)","します。",[129,46160,46162],{"className":35286,"code":46161,"filename":35288,"language":35289,"meta":135,"style":135},"const numbers = [1, 2, 3, 4];\nnumbers.reverse();\nconsole.log(numbers); // [4, 3, 2, 1]\n",[124,46163,46164,46193,46206],{"__ignoreMap":135},[65,46165,46166,46168,46171,46173,46175,46177,46179,46181,46183,46185,46187,46189,46191],{"class":140,"line":141},[65,46167,1769],{"class":168},[65,46169,46170],{"class":144}," numbers",[65,46172,218],{"class":168},[65,46174,30228],{"class":204},[65,46176,3620],{"class":793},[65,46178,230],{"class":154},[65,46180,3748],{"class":793},[65,46182,230],{"class":154},[65,46184,3739],{"class":793},[65,46186,230],{"class":154},[65,46188,3629],{"class":793},[65,46190,6106],{"class":204},[65,46192,155],{"class":154},[65,46194,46195,46198,46200,46202,46204],{"class":140,"line":158},[65,46196,46197],{"class":144},"numbers",[65,46199,834],{"class":154},[65,46201,46143],{"class":200},[65,46203,1269],{"class":204},[65,46205,155],{"class":154},[65,46207,46208,46210,46212,46214,46216,46218,46220,46222],{"class":140,"line":165},[65,46209,35301],{"class":144},[65,46211,834],{"class":154},[65,46213,35306],{"class":200},[65,46215,224],{"class":204},[65,46217,46197],{"class":144},[65,46219,235],{"class":204},[65,46221,6005],{"class":154},[65,46223,46224],{"class":278}," // [4, 3, 2, 1]\n",[1177,46226,46227],{"id":46227},"配列をソートする",[15,46229,46230,46232],{},[124,46231,46146],{},"メソッドは、配列を比較関数に従って並び替えます。比較関数は、比較のためのふたつの要素(a,b)を受け取り、戻り値の大小によって順番を決定します。",[15,46234,46235],{},"以下は、数値の昇順に並べ替える例です。",[129,46237,46239],{"className":35286,"code":46238,"filename":35288,"language":35289,"meta":135,"style":135},"const numbers = [3, 1, 4, 2];\nnumbers.sort((a, b) => a - b);\nconsole.log(numbers); // [1, 2, 3, 4]\n",[124,46240,46241,46269,46301],{"__ignoreMap":135},[65,46242,46243,46245,46247,46249,46251,46253,46255,46257,46259,46261,46263,46265,46267],{"class":140,"line":141},[65,46244,1769],{"class":168},[65,46246,46170],{"class":144},[65,46248,218],{"class":168},[65,46250,30228],{"class":204},[65,46252,10249],{"class":793},[65,46254,230],{"class":154},[65,46256,3137],{"class":793},[65,46258,230],{"class":154},[65,46260,3629],{"class":793},[65,46262,230],{"class":154},[65,46264,3748],{"class":793},[65,46266,6106],{"class":204},[65,46268,155],{"class":154},[65,46270,46271,46273,46275,46277,46279,46281,46283,46285,46287,46289,46291,46293,46295,46297,46299],{"class":140,"line":158},[65,46272,46197],{"class":144},[65,46274,834],{"class":154},[65,46276,46146],{"class":200},[65,46278,224],{"class":204},[65,46280,224],{"class":154},[65,46282,29],{"class":793},[65,46284,230],{"class":154},[65,46286,7540],{"class":793},[65,46288,235],{"class":154},[65,46290,1862],{"class":168},[65,46292,7513],{"class":144},[65,46294,4399],{"class":168},[65,46296,7540],{"class":144},[65,46298,235],{"class":204},[65,46300,155],{"class":154},[65,46302,46303,46305,46307,46309,46311,46313,46315,46317],{"class":140,"line":165},[65,46304,35301],{"class":144},[65,46306,834],{"class":154},[65,46308,35306],{"class":200},[65,46310,224],{"class":204},[65,46312,46197],{"class":144},[65,46314,235],{"class":204},[65,46316,6005],{"class":154},[65,46318,46319],{"class":278}," // [1, 2, 3, 4]\n",[15,46321,46322],{},"次の例は、数値を降順に並べ替える例です。",[129,46324,46326],{"className":35286,"code":46325,"filename":35288,"language":35289,"meta":135,"style":135},"const numbers = [3, 1, 4, 2];\nnumbers.sort((a, b) => b - a);\nconsole.log(numbers); // [4, 3, 2, 1]\n",[124,46327,46328,46356,46388],{"__ignoreMap":135},[65,46329,46330,46332,46334,46336,46338,46340,46342,46344,46346,46348,46350,46352,46354],{"class":140,"line":141},[65,46331,1769],{"class":168},[65,46333,46170],{"class":144},[65,46335,218],{"class":168},[65,46337,30228],{"class":204},[65,46339,10249],{"class":793},[65,46341,230],{"class":154},[65,46343,3137],{"class":793},[65,46345,230],{"class":154},[65,46347,3629],{"class":793},[65,46349,230],{"class":154},[65,46351,3748],{"class":793},[65,46353,6106],{"class":204},[65,46355,155],{"class":154},[65,46357,46358,46360,46362,46364,46366,46368,46370,46372,46374,46376,46378,46380,46382,46384,46386],{"class":140,"line":158},[65,46359,46197],{"class":144},[65,46361,834],{"class":154},[65,46363,46146],{"class":200},[65,46365,224],{"class":204},[65,46367,224],{"class":154},[65,46369,29],{"class":793},[65,46371,230],{"class":154},[65,46373,7540],{"class":793},[65,46375,235],{"class":154},[65,46377,1862],{"class":168},[65,46379,7540],{"class":144},[65,46381,4399],{"class":168},[65,46383,7513],{"class":144},[65,46385,235],{"class":204},[65,46387,155],{"class":154},[65,46389,46390,46392,46394,46396,46398,46400,46402,46404],{"class":140,"line":165},[65,46391,35301],{"class":144},[65,46393,834],{"class":154},[65,46395,35306],{"class":200},[65,46397,224],{"class":204},[65,46399,46197],{"class":144},[65,46401,235],{"class":204},[65,46403,6005],{"class":154},[65,46405,46224],{"class":278},[11,46407,44285],{"id":44285},[35274,46409],{":list":46410,"title":35277},"[\"各要素を加工して新しい配列を作成したいとき\",\"条件に合う要素を抽出したいとき\",\"配列の合計値を計算したいとき\"]",[15,46412,46413,46414,13737,46417,13737,46420,46423],{},"ある配列から別の配列を作成するには、",[124,46415,46416],{},"map",[124,46418,46419],{},"filter",[124,46421,46422],{},"reduce","などのメソッドを使用します。",[1177,46425,46416],{"id":46416},[15,46427,46428,46430,46431,46433,46434,46436,46437,46439],{},[124,46429,46416],{},"メソッドは、配列の各要素に対して処理を行い、その結果を新しい配列として返します。",[124,46432,38987],{},"メソッドと似てますが、",[124,46435,38987],{},"メソッドは戻り値がなく実行するだけなのに対して、",[124,46438,46416],{},"メソッドは処理を行った後に、新しい配列を返すのが特徴です。",[15,46441,46442],{},"例では、APIから取得したデータをもとにメンバーの名前リストの配列を作成しています。",[129,46444,46446],{"className":35286,"code":46445,"filename":35288,"language":35289,"meta":135,"style":135},"const members = [\n { id: 1, name: \"Alice\" },\n { id: 2, name: \"Bob\" },\n { id: 3, name: \"Charlie\" },\n];\nconst memberNames = members.map((member) => member.name);\nconsole.log(memberNames); // [\"Alice\", \"Bob\", \"Charlie\"]\n",[124,46447,46448,46459,46483,46507,46531,46537,46574],{"__ignoreMap":135},[65,46449,46450,46452,46455,46457],{"class":140,"line":141},[65,46451,1769],{"class":168},[65,46453,46454],{"class":144}," members",[65,46456,218],{"class":168},[65,46458,16316],{"class":204},[65,46460,46461,46463,46465,46467,46469,46471,46473,46475,46477,46479,46481],{"class":140,"line":158},[65,46462,45998],{"class":154},[65,46464,34932],{"class":204},[65,46466,797],{"class":154},[65,46468,3137],{"class":793},[65,46470,230],{"class":154},[65,46472,29166],{"class":204},[65,46474,797],{"class":154},[65,46476,35344],{"class":154},[65,46478,46015],{"class":302},[65,46480,34857],{"class":154},[65,46482,3858],{"class":154},[65,46484,46485,46487,46489,46491,46493,46495,46497,46499,46501,46503,46505],{"class":140,"line":165},[65,46486,45998],{"class":154},[65,46488,34932],{"class":204},[65,46490,797],{"class":154},[65,46492,3748],{"class":793},[65,46494,230],{"class":154},[65,46496,29166],{"class":204},[65,46498,797],{"class":154},[65,46500,35344],{"class":154},[65,46502,42984],{"class":302},[65,46504,34857],{"class":154},[65,46506,3858],{"class":154},[65,46508,46509,46511,46513,46515,46517,46519,46521,46523,46525,46527,46529],{"class":140,"line":180},[65,46510,45998],{"class":154},[65,46512,34932],{"class":204},[65,46514,797],{"class":154},[65,46516,3739],{"class":793},[65,46518,230],{"class":154},[65,46520,29166],{"class":204},[65,46522,797],{"class":154},[65,46524,35344],{"class":154},[65,46526,46064],{"class":302},[65,46528,34857],{"class":154},[65,46530,3858],{"class":154},[65,46532,46533,46535],{"class":140,"line":194},[65,46534,6106],{"class":204},[65,46536,155],{"class":154},[65,46538,46539,46541,46544,46546,46548,46550,46552,46554,46556,46559,46561,46563,46566,46568,46570,46572],{"class":140,"line":211},[65,46540,1769],{"class":168},[65,46542,46543],{"class":144}," memberNames",[65,46545,218],{"class":168},[65,46547,46454],{"class":144},[65,46549,834],{"class":154},[65,46551,46416],{"class":200},[65,46553,224],{"class":204},[65,46555,224],{"class":154},[65,46557,46558],{"class":793},"member",[65,46560,235],{"class":154},[65,46562,1862],{"class":168},[65,46564,46565],{"class":144}," member",[65,46567,834],{"class":154},[65,46569,29191],{"class":144},[65,46571,235],{"class":204},[65,46573,155],{"class":154},[65,46575,46576,46578,46580,46582,46584,46587,46589,46591],{"class":140,"line":240},[65,46577,35301],{"class":144},[65,46579,834],{"class":154},[65,46581,35306],{"class":200},[65,46583,224],{"class":204},[65,46585,46586],{"class":144},"memberNames",[65,46588,235],{"class":204},[65,46590,6005],{"class":154},[65,46592,46593],{"class":278}," // [\"Alice\", \"Bob\", \"Charlie\"]\n",[1177,46595,46419],{"id":46419},[15,46597,46598,46600],{},[124,46599,46419],{},"メソッドは、配列の各要素に対して条件を満たすかどうかを判定し、条件に一致する要素のみを新しい配列として返します。",[15,46602,46603],{},"例では、APIから取得したデータをもとに、有効ユーザーだけの条件で抽出しています。",[129,46605,46607],{"className":35286,"code":46606,"filename":35288,"language":35289,"meta":135,"style":135},"const users = [\n { id: 1, name: \"Alice\", isActive: true },\n { id: 2, name: \"Bob\", isActive: false },\n { id: 3, name: \"Charlie\", isActive: true },\n];\nconst activeUsers = users.filter((user) => user.isActive);\nconsole.log(activeUsers); \n// [{ id: 1, name: \"Alice\", isActive: true }, { id: 3, name: \"Charlie\", isActive: true }]\n",[124,46608,46609,46619,46652,46684,46716,46722,46758,46777],{"__ignoreMap":135},[65,46610,46611,46613,46615,46617],{"class":140,"line":141},[65,46612,1769],{"class":168},[65,46614,45989],{"class":144},[65,46616,218],{"class":168},[65,46618,16316],{"class":204},[65,46620,46621,46623,46625,46627,46629,46631,46633,46635,46637,46639,46641,46643,46646,46648,46650],{"class":140,"line":158},[65,46622,45998],{"class":154},[65,46624,34932],{"class":204},[65,46626,797],{"class":154},[65,46628,3137],{"class":793},[65,46630,230],{"class":154},[65,46632,29166],{"class":204},[65,46634,797],{"class":154},[65,46636,35344],{"class":154},[65,46638,46015],{"class":302},[65,46640,34857],{"class":154},[65,46642,230],{"class":154},[65,46644,46645],{"class":204}," isActive",[65,46647,797],{"class":154},[65,46649,1016],{"class":793},[65,46651,3858],{"class":154},[65,46653,46654,46656,46658,46660,46662,46664,46666,46668,46670,46672,46674,46676,46678,46680,46682],{"class":140,"line":165},[65,46655,45998],{"class":154},[65,46657,34932],{"class":204},[65,46659,797],{"class":154},[65,46661,3748],{"class":793},[65,46663,230],{"class":154},[65,46665,29166],{"class":204},[65,46667,797],{"class":154},[65,46669,35344],{"class":154},[65,46671,42984],{"class":302},[65,46673,34857],{"class":154},[65,46675,230],{"class":154},[65,46677,46645],{"class":204},[65,46679,797],{"class":154},[65,46681,1039],{"class":793},[65,46683,3858],{"class":154},[65,46685,46686,46688,46690,46692,46694,46696,46698,46700,46702,46704,46706,46708,46710,46712,46714],{"class":140,"line":180},[65,46687,45998],{"class":154},[65,46689,34932],{"class":204},[65,46691,797],{"class":154},[65,46693,3739],{"class":793},[65,46695,230],{"class":154},[65,46697,29166],{"class":204},[65,46699,797],{"class":154},[65,46701,35344],{"class":154},[65,46703,46064],{"class":302},[65,46705,34857],{"class":154},[65,46707,230],{"class":154},[65,46709,46645],{"class":204},[65,46711,797],{"class":154},[65,46713,1016],{"class":793},[65,46715,3858],{"class":154},[65,46717,46718,46720],{"class":140,"line":194},[65,46719,6106],{"class":204},[65,46721,155],{"class":154},[65,46723,46724,46726,46729,46731,46733,46735,46737,46739,46741,46743,46745,46747,46749,46751,46754,46756],{"class":140,"line":211},[65,46725,1769],{"class":168},[65,46727,46728],{"class":144}," activeUsers",[65,46730,218],{"class":168},[65,46732,45989],{"class":144},[65,46734,834],{"class":154},[65,46736,46419],{"class":200},[65,46738,224],{"class":204},[65,46740,224],{"class":154},[65,46742,42891],{"class":793},[65,46744,235],{"class":154},[65,46746,1862],{"class":168},[65,46748,42844],{"class":144},[65,46750,834],{"class":154},[65,46752,46753],{"class":144},"isActive",[65,46755,235],{"class":204},[65,46757,155],{"class":154},[65,46759,46760,46762,46764,46766,46768,46771,46773,46775],{"class":140,"line":240},[65,46761,35301],{"class":144},[65,46763,834],{"class":154},[65,46765,35306],{"class":200},[65,46767,224],{"class":204},[65,46769,46770],{"class":144},"activeUsers",[65,46772,235],{"class":204},[65,46774,6005],{"class":154},[65,46776,332],{"class":204},[65,46778,46779],{"class":140,"line":391},[65,46780,46781],{"class":278},"// [{ id: 1, name: \"Alice\", isActive: true }, { id: 3, name: \"Charlie\", isActive: true }]\n",[1177,46783,46422],{"id":46422},[15,46785,46786,46788],{},[124,46787,46422],{},"メソッドは、配列の各要素に対して処理を行い、その結果を一つの値として返します。例では、配列の数値の合計値を計算しています。",[129,46790,46792],{"className":35286,"code":46791,"filename":35288,"language":35289,"meta":135,"style":135},"const numbers = [1, 2, 3, 4];\nconst sum = numbers.reduce((acc, cur) => acc + cur, 0);\nconsole.log(sum); // 10\n",[124,46793,46794,46822,46868],{"__ignoreMap":135},[65,46795,46796,46798,46800,46802,46804,46806,46808,46810,46812,46814,46816,46818,46820],{"class":140,"line":141},[65,46797,1769],{"class":168},[65,46799,46170],{"class":144},[65,46801,218],{"class":168},[65,46803,30228],{"class":204},[65,46805,3620],{"class":793},[65,46807,230],{"class":154},[65,46809,3748],{"class":793},[65,46811,230],{"class":154},[65,46813,3739],{"class":793},[65,46815,230],{"class":154},[65,46817,3629],{"class":793},[65,46819,6106],{"class":204},[65,46821,155],{"class":154},[65,46823,46824,46826,46829,46831,46833,46835,46837,46839,46841,46844,46846,46849,46851,46853,46856,46858,46860,46862,46864,46866],{"class":140,"line":158},[65,46825,1769],{"class":168},[65,46827,46828],{"class":144}," sum",[65,46830,218],{"class":168},[65,46832,46170],{"class":144},[65,46834,834],{"class":154},[65,46836,46422],{"class":200},[65,46838,224],{"class":204},[65,46840,224],{"class":154},[65,46842,46843],{"class":793},"acc",[65,46845,230],{"class":154},[65,46847,46848],{"class":793}," cur",[65,46850,235],{"class":154},[65,46852,1862],{"class":168},[65,46854,46855],{"class":144}," acc",[65,46857,2367],{"class":168},[65,46859,46848],{"class":144},[65,46861,230],{"class":154},[65,46863,1142],{"class":793},[65,46865,235],{"class":204},[65,46867,155],{"class":154},[65,46869,46870,46872,46874,46876,46878,46881,46883,46885],{"class":140,"line":165},[65,46871,35301],{"class":144},[65,46873,834],{"class":154},[65,46875,35306],{"class":200},[65,46877,224],{"class":204},[65,46879,46880],{"class":144},"sum",[65,46882,235],{"class":204},[65,46884,6005],{"class":154},[65,46886,46887],{"class":278}," // 10\n",[11,46889,5299],{"id":5299},[15,46891,46892],{},"JavaScriptの配列操作を使用例と共に紹介しました。配列を操作したい場面はよくあるので、ブラウザの開発者ツールで試しながら覚えておきましょう。",[11,46894,35214],{"id":35214},[89,46896,46897],{},[92,46898,46899],{},[29,46900,46903],{"href":46901,"rel":46902,"target":3049},"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array",[3048],"Array - MDN",[5313,46905,46906],{},"html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}",{"title":135,"searchDepth":165,"depth":165,"links":46908},[46909,46910,46911,46912,46913,46914,46915,46916,46917,46918,46919,46923,46928,46929],{"id":13,"depth":158,"text":13},{"id":44185,"depth":158,"text":44185},{"id":44195,"depth":158,"text":44195},{"id":44205,"depth":158,"text":44205},{"id":44215,"depth":158,"text":44215},{"id":44225,"depth":158,"text":44225},{"id":44235,"depth":158,"text":44235},{"id":44245,"depth":158,"text":44245},{"id":44255,"depth":158,"text":44255},{"id":44265,"depth":158,"text":44265},{"id":44275,"depth":158,"text":44275,"children":46920},[46921,46922],{"id":46149,"depth":165,"text":46149},{"id":46227,"depth":165,"text":46227},{"id":44285,"depth":158,"text":44285,"children":46924},[46925,46926,46927],{"id":46416,"depth":165,"text":46416},{"id":46419,"depth":165,"text":46419},{"id":46422,"depth":165,"text":46422},{"id":5299,"depth":158,"text":5299},{"id":35214,"depth":158,"text":35214},"2025-08-19T00:00:00.000Z","JavaScriptの配列操作を紹介をします。具体的には配列の長さや検索などの基本的な操作を紹介します。","/images/blog/javascript-array.jpg",{},"/blog/javascript-array",{"title":44153,"description":46931},"blog/javascript-array",[46938,46939],"JavaScriptの配列操作の紹介","利用シーンと共に紹介します。",[35288],"EF1joyft_L5SvS3DINfSOVxRHAwXBTLWI_JEXKTeZak",{"id":46943,"title":46944,"body":46945,"date":48170,"description":48171,"draft":5339,"extension":5340,"image":48172,"meta":48173,"navigation":161,"path":48174,"seo":48175,"stem":48176,"summaryList":48177,"summaryText":5348,"tags":48180,"__hash__":48181},"blog/blog/javascript-strings.md","JavaScriptの文字列操作を紹介",{"type":8,"value":46946,"toc":48156},[46947,46949,46952,46955,47039,47041,47043,47046,47052,47097,47099,47102,47118,47121,47172,47174,47177,47183,47185,47244,47246,47249,47270,47302,47307,47358,47364,47515,47517,47520,47527,47529,47582,47584,47587,47594,47727,47736,47801,47803,47806,47815,47818,47913,47919,47972,47975,47978,47988,48057,48059,48062,48071,48074,48134,48137,48139,48142,48144,48153],[11,46948,13],{"id":13},[15,46950,46951],{},"この記事ではJavaScriptの文字列操作を紹介します。文字列はJavaScriptにおける基本的なデータ型のひとつです。シングルクォート(')、ダブルクォート(\")、バッククォート(`)で文字列を囲んで使用します。型はString型になります。",[15,46953,46954],{},"文字列を用いて以下のような操作を行うことができます。",[583,46956,46957,46965],{},[586,46958,46959],{},[589,46960,46961,46963],{},[592,46962,44175],{},[592,46964,44178],{},[602,46966,46967,46975,46983,46991,46999,47007,47015,47023,47031],{},[589,46968,46969,46972],{},[607,46970,46971],{},"文字列の長さを取得する",[607,46973,46974],{},"\"Hello\".length",[589,46976,46977,46980],{},[607,46978,46979],{},"文字列の空白を削除する",[607,46981,46982],{},"\" Hello \".trim()",[589,46984,46985,46988],{},[607,46986,46987],{},"文字列がどの位置にあるか調べる",[607,46989,46990],{},"\"Hello\".indexOf(\"l\")",[589,46992,46993,46996],{},[607,46994,46995],{},"文字列が含まれているか調べる",[607,46997,46998],{},"\"Hello\".includes(\"l\")",[589,47000,47001,47004],{},[607,47002,47003],{},"文字列を取り出す",[607,47005,47006],{},"\"Hello\".slice(0, 3)",[589,47008,47009,47012],{},[607,47010,47011],{},"文字列を別の文字列に置き換える",[607,47013,47014],{},"\"Hello\".replace(\"l\", \"L\")",[589,47016,47017,47020],{},[607,47018,47019],{},"文字列を分割する",[607,47021,47022],{},"\"Hello\".split(\" \")",[589,47024,47025,47028],{},[607,47026,47027],{},"文字列を大文字・小文字に変換する",[607,47029,47030],{},"\"Hello\".toUpperCase()",[589,47032,47033,47036],{},[607,47034,47035],{},"文字列を指定の長さになるように繰り返す",[607,47037,47038],{},"\"5\".padStart(3, \"0\")",[15,47040,44293],{},[11,47042,46971],{"id":46971},[35274,47044],{":list":47045,"title":35277},"[\"入力フォームのバリデーション\",\"残り文字数を表示する\"]",[15,47047,47048,47049,47051],{},"JavaScriptで文字列の長さを取得するには、",[124,47050,9685],{},"プロパティを使用します。使い方は次の通りになります。",[129,47053,47055],{"className":35286,"code":47054,"language":35289,"meta":135,"style":135},"const str = \"Hello\";\nconsole.log(str.length); // 5\n",[124,47056,47057,47075],{"__ignoreMap":135},[65,47058,47059,47061,47064,47066,47068,47071,47073],{"class":140,"line":141},[65,47060,1769],{"class":168},[65,47062,47063],{"class":144}," str",[65,47065,218],{"class":168},[65,47067,35344],{"class":154},[65,47069,47070],{"class":302},"Hello",[65,47072,34857],{"class":154},[65,47074,155],{"class":154},[65,47076,47077,47079,47081,47083,47085,47088,47090,47092,47094],{"class":140,"line":158},[65,47078,35301],{"class":144},[65,47080,834],{"class":154},[65,47082,35306],{"class":200},[65,47084,224],{"class":204},[65,47086,47087],{"class":144},"str",[65,47089,834],{"class":154},[65,47091,44367],{"class":204},[65,47093,6005],{"class":154},[65,47095,47096],{"class":278}," // 5\n",[11,47098,46979],{"id":46979},[35274,47100],{":list":47101,"title":35277},"[\"テキストの整形\",\"クレジットカード番号、電話番号の入力処理\"]",[15,47103,47104,47105,41383,47108,47110,47111,47113,47114,47117],{},"JavaScriptで文字列の空白を削除するには、",[124,47106,47107],{},"trim()",[124,47109,47107],{},"メソッドでは、両端に空白がある場合にもその両端の空白を削除できます。取り除かれる空白の対象は、スペースとタブと改行文字です。注意点としては、",[124,47112,47107],{},"メソッドは、文字列の両端にある空白を削除しますが、",[34759,47115,47116],{},"文字列の途中にある空白","は削除しないので注意してください。",[15,47119,47120],{},"使い方は次の通りになります。",[129,47122,47124],{"className":35286,"code":47123,"language":35289,"meta":135,"style":135},"// 文字列の両端の空白を削除し、途中の空白は削除しない\nconst str = \" Hello World \";\nconsole.log(str.trim()); // \"Hello World\"\n",[124,47125,47126,47131,47148],{"__ignoreMap":135},[65,47127,47128],{"class":140,"line":141},[65,47129,47130],{"class":278},"// 文字列の両端の空白を削除し、途中の空白は削除しない\n",[65,47132,47133,47135,47137,47139,47141,47144,47146],{"class":140,"line":158},[65,47134,1769],{"class":168},[65,47136,47063],{"class":144},[65,47138,218],{"class":168},[65,47140,35344],{"class":154},[65,47142,47143],{"class":302}," Hello World ",[65,47145,34857],{"class":154},[65,47147,155],{"class":154},[65,47149,47150,47152,47154,47156,47158,47160,47162,47165,47167,47169],{"class":140,"line":165},[65,47151,35301],{"class":144},[65,47153,834],{"class":154},[65,47155,35306],{"class":200},[65,47157,224],{"class":204},[65,47159,47087],{"class":144},[65,47161,834],{"class":154},[65,47163,47164],{"class":200},"trim",[65,47166,41692],{"class":204},[65,47168,6005],{"class":154},[65,47170,47171],{"class":278}," // \"Hello World\"\n",[11,47173,46987],{"id":46987},[35274,47175],{":list":47176,"title":35277},"[\"特定単語がどの位置に含まれているか\"]",[15,47178,47179,47182],{},[124,47180,47181],{},"indexOf()","メソッドを使用すると、文字列がどの位置にあるか調べることができます。位置は0から始まります。例えば、1文字目は0で、5文字目は4です。文字列が含まれていない場合は、-1が返されます。また、検索対象の文字列が複数含まれている場合は、最初に見つかった位置が返されますし、大文字・小文字を区別します。",[15,47184,47120],{},[129,47186,47188],{"className":35286,"code":47187,"language":35289,"meta":135,"style":135},"// 最初に見つかった「l」の位置を返す\nconst str = \"Hello World\";\nconsole.log(str.indexOf(\"l\")); // 2\n",[124,47189,47190,47195,47212],{"__ignoreMap":135},[65,47191,47192],{"class":140,"line":141},[65,47193,47194],{"class":278},"// 最初に見つかった「l」の位置を返す\n",[65,47196,47197,47199,47201,47203,47205,47208,47210],{"class":140,"line":158},[65,47198,1769],{"class":168},[65,47200,47063],{"class":144},[65,47202,218],{"class":168},[65,47204,35344],{"class":154},[65,47206,47207],{"class":302},"Hello World",[65,47209,34857],{"class":154},[65,47211,155],{"class":154},[65,47213,47214,47216,47218,47220,47222,47224,47226,47228,47230,47232,47235,47237,47239,47241],{"class":140,"line":165},[65,47215,35301],{"class":144},[65,47217,834],{"class":154},[65,47219,35306],{"class":200},[65,47221,224],{"class":204},[65,47223,47087],{"class":144},[65,47225,834],{"class":154},[65,47227,28621],{"class":200},[65,47229,224],{"class":204},[65,47231,34857],{"class":154},[65,47233,47234],{"class":302},"l",[65,47236,34857],{"class":154},[65,47238,11111],{"class":204},[65,47240,6005],{"class":154},[65,47242,47243],{"class":278}," // 2\n",[11,47245,46995],{"id":46995},[35274,47247],{":list":47248,"title":35277},"[\"入力文字列に特定キーワードが含まれているか調べる\",\"URLやコマンドの先頭部分判定\",\"ファイル拡張子をチェックする\"]",[15,47250,47251,47252,47255,47256,47259,47260,47263,47264,47266,47267,47269],{},"JavaScriptで文字列が含まれているかは",[124,47253,47254],{},"includes()","メソッドを使用します。また、先頭に含まれているか・末尾に含まれているかを調べるには、",[124,47257,47258],{},"startsWith()","・",[124,47261,47262],{},"endsWith()","メソッドを使用します。含まれていたら",[124,47265,667],{},"を、含まれていなかったら",[124,47268,692],{},"を返します。こちらも、大文字・小文字を区別します。",[583,47271,47272,47280],{},[586,47273,47274],{},[589,47275,47276,47278],{},[592,47277,43194],{},[592,47279,597],{},[602,47281,47282,47288,47295],{},[589,47283,47284,47286],{},[607,47285,47254],{},[607,47287,46995],{},[589,47289,47290,47292],{},[607,47291,47258],{},[607,47293,47294],{},"文字列が先頭に含まれているか調べる",[589,47296,47297,47299],{},[607,47298,47262],{},[607,47300,47301],{},"文字列が末尾に含まれているか調べる",[15,47303,47304,47306],{},[124,47305,47254],{},"の使い方は次の通りです。",[129,47308,47310],{"className":35286,"code":47309,"language":35289,"meta":135,"style":135},"const str = \"Hello World\";\nconsole.log(str.includes(\"l\")); // true\n",[124,47311,47312,47328],{"__ignoreMap":135},[65,47313,47314,47316,47318,47320,47322,47324,47326],{"class":140,"line":141},[65,47315,1769],{"class":168},[65,47317,47063],{"class":144},[65,47319,218],{"class":168},[65,47321,35344],{"class":154},[65,47323,47207],{"class":302},[65,47325,34857],{"class":154},[65,47327,155],{"class":154},[65,47329,47330,47332,47334,47336,47338,47340,47342,47344,47346,47348,47350,47352,47354,47356],{"class":140,"line":158},[65,47331,35301],{"class":144},[65,47333,834],{"class":154},[65,47335,35306],{"class":200},[65,47337,224],{"class":204},[65,47339,47087],{"class":144},[65,47341,834],{"class":154},[65,47343,45615],{"class":200},[65,47345,224],{"class":204},[65,47347,34857],{"class":154},[65,47349,47234],{"class":302},[65,47351,34857],{"class":154},[65,47353,11111],{"class":204},[65,47355,6005],{"class":154},[65,47357,45800],{"class":278},[15,47359,47360,2765,47362,47306],{},[124,47361,47258],{},[124,47363,47262],{},[129,47365,47367],{"className":35286,"code":47366,"language":35289,"meta":135,"style":135},"// httpsか調べる\nconst url = \"https://example.com\";\nconsole.log(url.startsWith(\"https://\")); // true\n\n// ファイル拡張子をチェックする\nconst filename = \"phote.jpg\";\nconsole.log(filename.endsWith(\".jpg\")); // true\nconsole.log(filename.endsWith(\".png\")); // false\n",[124,47368,47369,47374,47391,47424,47428,47433,47451,47484],{"__ignoreMap":135},[65,47370,47371],{"class":140,"line":141},[65,47372,47373],{"class":278},"// httpsか調べる\n",[65,47375,47376,47378,47381,47383,47385,47387,47389],{"class":140,"line":158},[65,47377,1769],{"class":168},[65,47379,47380],{"class":144}," url",[65,47382,218],{"class":168},[65,47384,35344],{"class":154},[65,47386,35347],{"class":302},[65,47388,34857],{"class":154},[65,47390,155],{"class":154},[65,47392,47393,47395,47397,47399,47401,47404,47406,47409,47411,47413,47416,47418,47420,47422],{"class":140,"line":165},[65,47394,35301],{"class":144},[65,47396,834],{"class":154},[65,47398,35306],{"class":200},[65,47400,224],{"class":204},[65,47402,47403],{"class":144},"url",[65,47405,834],{"class":154},[65,47407,47408],{"class":200},"startsWith",[65,47410,224],{"class":204},[65,47412,34857],{"class":154},[65,47414,47415],{"class":302},"https://",[65,47417,34857],{"class":154},[65,47419,11111],{"class":204},[65,47421,6005],{"class":154},[65,47423,45800],{"class":278},[65,47425,47426],{"class":140,"line":180},[65,47427,162],{"emptyLinePlaceholder":161},[65,47429,47430],{"class":140,"line":194},[65,47431,47432],{"class":278},"// ファイル拡張子をチェックする\n",[65,47434,47435,47437,47440,47442,47444,47447,47449],{"class":140,"line":211},[65,47436,1769],{"class":168},[65,47438,47439],{"class":144}," filename",[65,47441,218],{"class":168},[65,47443,35344],{"class":154},[65,47445,47446],{"class":302},"phote.jpg",[65,47448,34857],{"class":154},[65,47450,155],{"class":154},[65,47452,47453,47455,47457,47459,47461,47464,47466,47469,47471,47473,47476,47478,47480,47482],{"class":140,"line":240},[65,47454,35301],{"class":144},[65,47456,834],{"class":154},[65,47458,35306],{"class":200},[65,47460,224],{"class":204},[65,47462,47463],{"class":144},"filename",[65,47465,834],{"class":154},[65,47467,47468],{"class":200},"endsWith",[65,47470,224],{"class":204},[65,47472,34857],{"class":154},[65,47474,47475],{"class":302},".jpg",[65,47477,34857],{"class":154},[65,47479,11111],{"class":204},[65,47481,6005],{"class":154},[65,47483,45800],{"class":278},[65,47485,47486,47488,47490,47492,47494,47496,47498,47500,47502,47504,47507,47509,47511,47513],{"class":140,"line":391},[65,47487,35301],{"class":144},[65,47489,834],{"class":154},[65,47491,35306],{"class":200},[65,47493,224],{"class":204},[65,47495,47463],{"class":144},[65,47497,834],{"class":154},[65,47499,47468],{"class":200},[65,47501,224],{"class":204},[65,47503,34857],{"class":154},[65,47505,47506],{"class":302},".png",[65,47508,34857],{"class":154},[65,47510,11111],{"class":204},[65,47512,6005],{"class":154},[65,47514,45831],{"class":278},[11,47516,47003],{"id":47003},[35274,47518],{":list":47519,"title":35277},"[\"特定の文字を取り出す\",\"ドメインの取得\",\"拡張子の取得\"]",[15,47521,47522,47523,47526],{},"JavaScriptで文字列を範囲指定して取り出すには、",[124,47524,47525],{},"slice()","メソッドを使用します。範囲指定は、開始位置と終了位置を指定します。開始位置は0から始まり、終了位置は1から始まります。開始位置が終了位置よりも大きい場合は、空の文字列が返されます。",[15,47528,47120],{},[129,47530,47532],{"className":35286,"code":47531,"language":35289,"meta":135,"style":135},"const str = \"Hello World\";\nconsole.log(str.slice(0, 5)); // \"Hello\"\n",[124,47533,47534,47550],{"__ignoreMap":135},[65,47535,47536,47538,47540,47542,47544,47546,47548],{"class":140,"line":141},[65,47537,1769],{"class":168},[65,47539,47063],{"class":144},[65,47541,218],{"class":168},[65,47543,35344],{"class":154},[65,47545,47207],{"class":302},[65,47547,34857],{"class":154},[65,47549,155],{"class":154},[65,47551,47552,47554,47556,47558,47560,47562,47564,47567,47569,47571,47573,47575,47577,47579],{"class":140,"line":158},[65,47553,35301],{"class":144},[65,47555,834],{"class":154},[65,47557,35306],{"class":200},[65,47559,224],{"class":204},[65,47561,47087],{"class":144},[65,47563,834],{"class":154},[65,47565,47566],{"class":200},"slice",[65,47568,224],{"class":204},[65,47570,743],{"class":793},[65,47572,230],{"class":154},[65,47574,7741],{"class":793},[65,47576,11111],{"class":204},[65,47578,6005],{"class":154},[65,47580,47581],{"class":278}," // \"Hello\"\n",[11,47583,47011],{"id":47011},[35274,47585],{":list":47586,"title":35277},"[\"ファイル名の変換\",\"改行文字を削除する\",\"電話番号からハイフンを削除する\"]",[15,47588,47589,47590,47593],{},"JavaScriptで文字列を別の文字列に置き換えるには、",[124,47591,47592],{},"replace()","メソッドを使用します。使い方は次の通りです。",[129,47595,47597],{"className":35286,"code":47596,"language":35289,"meta":135,"style":135},"// ファイル名の変換\nconst filename = \"text01.txt\";\nconsole.log(filename.replace(\"text01\", \"text02\")); // \"text02.txt\"\n\n// 改行文字を削除する\nconst str = \"Hello\\nWorld\";\nconsole.log(str.replace(\"\\n\", \"\")); // \"HelloWorld\"\n",[124,47598,47599,47604,47621,47663,47667,47672,47694],{"__ignoreMap":135},[65,47600,47601],{"class":140,"line":141},[65,47602,47603],{"class":278},"// ファイル名の変換\n",[65,47605,47606,47608,47610,47612,47614,47617,47619],{"class":140,"line":158},[65,47607,1769],{"class":168},[65,47609,47439],{"class":144},[65,47611,218],{"class":168},[65,47613,35344],{"class":154},[65,47615,47616],{"class":302},"text01.txt",[65,47618,34857],{"class":154},[65,47620,155],{"class":154},[65,47622,47623,47625,47627,47629,47631,47633,47635,47638,47640,47642,47645,47647,47649,47651,47654,47656,47658,47660],{"class":140,"line":165},[65,47624,35301],{"class":144},[65,47626,834],{"class":154},[65,47628,35306],{"class":200},[65,47630,224],{"class":204},[65,47632,47463],{"class":144},[65,47634,834],{"class":154},[65,47636,47637],{"class":200},"replace",[65,47639,224],{"class":204},[65,47641,34857],{"class":154},[65,47643,47644],{"class":302},"text01",[65,47646,34857],{"class":154},[65,47648,230],{"class":154},[65,47650,35344],{"class":154},[65,47652,47653],{"class":302},"text02",[65,47655,34857],{"class":154},[65,47657,11111],{"class":204},[65,47659,6005],{"class":154},[65,47661,47662],{"class":278}," // \"text02.txt\"\n",[65,47664,47665],{"class":140,"line":180},[65,47666,162],{"emptyLinePlaceholder":161},[65,47668,47669],{"class":140,"line":194},[65,47670,47671],{"class":278},"// 改行文字を削除する\n",[65,47673,47674,47676,47678,47680,47682,47684,47687,47690,47692],{"class":140,"line":211},[65,47675,1769],{"class":168},[65,47677,47063],{"class":144},[65,47679,218],{"class":168},[65,47681,35344],{"class":154},[65,47683,47070],{"class":302},[65,47685,47686],{"class":154},"\\n",[65,47688,47689],{"class":302},"World",[65,47691,34857],{"class":154},[65,47693,155],{"class":154},[65,47695,47696,47698,47700,47702,47704,47706,47708,47710,47712,47715,47717,47720,47722,47724],{"class":140,"line":240},[65,47697,35301],{"class":144},[65,47699,834],{"class":154},[65,47701,35306],{"class":200},[65,47703,224],{"class":204},[65,47705,47087],{"class":144},[65,47707,834],{"class":154},[65,47709,47637],{"class":200},[65,47711,224],{"class":204},[65,47713,47714],{"class":154},"\"\\n\"",[65,47716,230],{"class":154},[65,47718,47719],{"class":154}," \"\"",[65,47721,11111],{"class":204},[65,47723,6005],{"class":154},[65,47725,47726],{"class":278}," // \"HelloWorld\"\n",[15,47728,47729,47730,47732,47733,41383],{},"注意点として、",[124,47731,47592],{},"メソッドは、最初に見つかった文字列のみを置き換えます。複数の文字列を置き換えるには、",[124,47734,47735],{},"replaceAll()",[129,47737,47739],{"className":35286,"code":47738,"language":35289,"meta":135,"style":135},"// 電話番号からハイフンを削除する\nconst phone = \"090-1234-5678\";\nconsole.log(phone.replaceAll(\"-\", \"\")); // \"09012345678\"\n",[124,47740,47741,47746,47764],{"__ignoreMap":135},[65,47742,47743],{"class":140,"line":141},[65,47744,47745],{"class":278},"// 電話番号からハイフンを削除する\n",[65,47747,47748,47750,47753,47755,47757,47760,47762],{"class":140,"line":158},[65,47749,1769],{"class":168},[65,47751,47752],{"class":144}," phone",[65,47754,218],{"class":168},[65,47756,35344],{"class":154},[65,47758,47759],{"class":302},"090-1234-5678",[65,47761,34857],{"class":154},[65,47763,155],{"class":154},[65,47765,47766,47768,47770,47772,47774,47777,47779,47782,47784,47786,47788,47790,47792,47794,47796,47798],{"class":140,"line":165},[65,47767,35301],{"class":144},[65,47769,834],{"class":154},[65,47771,35306],{"class":200},[65,47773,224],{"class":204},[65,47775,47776],{"class":144},"phone",[65,47778,834],{"class":154},[65,47780,47781],{"class":200},"replaceAll",[65,47783,224],{"class":204},[65,47785,34857],{"class":154},[65,47787,3936],{"class":302},[65,47789,34857],{"class":154},[65,47791,230],{"class":154},[65,47793,47719],{"class":154},[65,47795,11111],{"class":204},[65,47797,6005],{"class":154},[65,47799,47800],{"class":278}," // \"09012345678\"\n",[11,47802,47019],{"id":47019},[35274,47804],{":list":47805,"title":35277},"[\"URLのハッシュ値を取得する\",\"文字列を1文字ずつ分割する\"]",[15,47807,47808,47809,41383,47812,47814],{},"JavaScriptで文字列を分割するには、",[124,47810,47811],{},"split()",[124,47813,47811],{},"メソッドを使用すると、区切り文字で文字列を分割し配列で返します。",[15,47816,47817],{},"使い方は次の通りです。",[129,47819,47821],{"className":35286,"code":47820,"language":35289,"meta":135,"style":135},"// URLのハッシュ値を取得する\nconst url = \"https://example.com/#hash\";\nconsole.log(url.split(\"#\")); // [\"https://example.com/\", \"hash\"]\nconsole.log(url.split(\"#\")[1]); // \"hash\"\n",[124,47822,47823,47828,47845,47877],{"__ignoreMap":135},[65,47824,47825],{"class":140,"line":141},[65,47826,47827],{"class":278},"// URLのハッシュ値を取得する\n",[65,47829,47830,47832,47834,47836,47838,47841,47843],{"class":140,"line":158},[65,47831,1769],{"class":168},[65,47833,47380],{"class":144},[65,47835,218],{"class":168},[65,47837,35344],{"class":154},[65,47839,47840],{"class":302},"https://example.com/#hash",[65,47842,34857],{"class":154},[65,47844,155],{"class":154},[65,47846,47847,47849,47851,47853,47855,47857,47859,47862,47864,47866,47868,47870,47872,47874],{"class":140,"line":165},[65,47848,35301],{"class":144},[65,47850,834],{"class":154},[65,47852,35306],{"class":200},[65,47854,224],{"class":204},[65,47856,47403],{"class":144},[65,47858,834],{"class":154},[65,47860,47861],{"class":200},"split",[65,47863,224],{"class":204},[65,47865,34857],{"class":154},[65,47867,26793],{"class":302},[65,47869,34857],{"class":154},[65,47871,11111],{"class":204},[65,47873,6005],{"class":154},[65,47875,47876],{"class":278}," // [\"https://example.com/\", \"hash\"]\n",[65,47878,47879,47881,47883,47885,47887,47889,47891,47893,47895,47897,47899,47901,47904,47906,47908,47910],{"class":140,"line":180},[65,47880,35301],{"class":144},[65,47882,834],{"class":154},[65,47884,35306],{"class":200},[65,47886,224],{"class":204},[65,47888,47403],{"class":144},[65,47890,834],{"class":154},[65,47892,47861],{"class":200},[65,47894,224],{"class":204},[65,47896,34857],{"class":154},[65,47898,26793],{"class":302},[65,47900,34857],{"class":154},[65,47902,47903],{"class":204},")[",[65,47905,3620],{"class":793},[65,47907,3658],{"class":204},[65,47909,6005],{"class":154},[65,47911,47912],{"class":278}," // \"hash\"\n",[15,47914,47915,47916,47918],{},"また、",[124,47917,47811],{},"メソッドの第一引数に空文字列を渡すと、文字列を1文字ずつ分割することができます。文字を1文字ずつアニメーションをしたい時によく使用します。",[129,47920,47922],{"className":35286,"code":47921,"language":35289,"meta":135,"style":135},"// 文字列を1文字ずつ分割する\nconst str = \"Hello World\";\nconsole.log(str.split(\"\")); // [\"H\", \"e\", \"l\", \"l\", \"o\", \" \", \"W\", \"o\", \"r\", \"l\", \"d\"]\n",[124,47923,47924,47929,47945],{"__ignoreMap":135},[65,47925,47926],{"class":140,"line":141},[65,47927,47928],{"class":278},"// 文字列を1文字ずつ分割する\n",[65,47930,47931,47933,47935,47937,47939,47941,47943],{"class":140,"line":158},[65,47932,1769],{"class":168},[65,47934,47063],{"class":144},[65,47936,218],{"class":168},[65,47938,35344],{"class":154},[65,47940,47207],{"class":302},[65,47942,34857],{"class":154},[65,47944,155],{"class":154},[65,47946,47947,47949,47951,47953,47955,47957,47959,47961,47963,47965,47967,47969],{"class":140,"line":165},[65,47948,35301],{"class":144},[65,47950,834],{"class":154},[65,47952,35306],{"class":200},[65,47954,224],{"class":204},[65,47956,47087],{"class":144},[65,47958,834],{"class":154},[65,47960,47861],{"class":200},[65,47962,224],{"class":204},[65,47964,37764],{"class":154},[65,47966,11111],{"class":204},[65,47968,6005],{"class":154},[65,47970,47971],{"class":278}," // [\"H\", \"e\", \"l\", \"l\", \"o\", \" \", \"W\", \"o\", \"r\", \"l\", \"d\"]\n",[11,47973,47027],{"id":47974},"文字列を大文字小文字に変換する",[35274,47976],{":list":47977,"title":35277},"[\"小文字のアルファベット表記を大文字表記に変更する\"]",[15,47979,47980,47981,47984,47985,47593],{},"文字列を大文字に変換するには、",[124,47982,47983],{},"toUpperCase()","メソッドを使用します。小文字に変換するには、",[124,47986,47987],{},"toLowerCase()",[129,47989,47991],{"className":35286,"code":47990,"language":35289,"meta":135,"style":135},"const str = \"Hello World\";\nconsole.log(str.toUpperCase()); // \"HELLO WORLD\"\nconsole.log(str.toLowerCase()); // \"hello world\"\n",[124,47992,47993,48009,48033],{"__ignoreMap":135},[65,47994,47995,47997,47999,48001,48003,48005,48007],{"class":140,"line":141},[65,47996,1769],{"class":168},[65,47998,47063],{"class":144},[65,48000,218],{"class":168},[65,48002,35344],{"class":154},[65,48004,47207],{"class":302},[65,48006,34857],{"class":154},[65,48008,155],{"class":154},[65,48010,48011,48013,48015,48017,48019,48021,48023,48026,48028,48030],{"class":140,"line":158},[65,48012,35301],{"class":144},[65,48014,834],{"class":154},[65,48016,35306],{"class":200},[65,48018,224],{"class":204},[65,48020,47087],{"class":144},[65,48022,834],{"class":154},[65,48024,48025],{"class":200},"toUpperCase",[65,48027,41692],{"class":204},[65,48029,6005],{"class":154},[65,48031,48032],{"class":278}," // \"HELLO WORLD\"\n",[65,48034,48035,48037,48039,48041,48043,48045,48047,48050,48052,48054],{"class":140,"line":165},[65,48036,35301],{"class":144},[65,48038,834],{"class":154},[65,48040,35306],{"class":200},[65,48042,224],{"class":204},[65,48044,47087],{"class":144},[65,48046,834],{"class":154},[65,48048,48049],{"class":200},"toLowerCase",[65,48051,41692],{"class":204},[65,48053,6005],{"class":154},[65,48055,48056],{"class":278}," // \"hello world\"\n",[11,48058,47035],{"id":47035},[35274,48060],{":list":48061,"title":35277},"[\"10未満の数値を2桁になるように0を付ける\"]",[15,48063,48064,13737,48067,48070],{},[124,48065,48066],{},"padStart()",[124,48068,48069],{},"padEnd()","メソッドを使用すると、文字列を指定の長さになるように繰り返すことができます。",[15,48072,48073],{},"使用例として、10未満の数値を2桁になるように0を付ける例は次の通りです。",[129,48075,48077],{"className":35286,"code":48076,"language":35289,"meta":135,"style":135},"const num = 5;\nconsole.log(num.toString().padStart(2, \"0\")); // \"05\"\n",[124,48078,48079,48091],{"__ignoreMap":135},[65,48080,48081,48083,48085,48087,48089],{"class":140,"line":141},[65,48082,1769],{"class":168},[65,48084,14790],{"class":144},[65,48086,218],{"class":168},[65,48088,7741],{"class":793},[65,48090,155],{"class":154},[65,48092,48093,48095,48097,48099,48101,48103,48105,48108,48110,48112,48115,48117,48119,48121,48123,48125,48127,48129,48131],{"class":140,"line":158},[65,48094,35301],{"class":144},[65,48096,834],{"class":154},[65,48098,35306],{"class":200},[65,48100,224],{"class":204},[65,48102,17012],{"class":144},[65,48104,834],{"class":154},[65,48106,48107],{"class":200},"toString",[65,48109,1269],{"class":204},[65,48111,834],{"class":154},[65,48113,48114],{"class":200},"padStart",[65,48116,224],{"class":204},[65,48118,3939],{"class":793},[65,48120,230],{"class":154},[65,48122,35344],{"class":154},[65,48124,743],{"class":302},[65,48126,34857],{"class":154},[65,48128,11111],{"class":204},[65,48130,6005],{"class":154},[65,48132,48133],{"class":278}," // \"05\"\n",[15,48135,48136],{},"こちらは、日付などを0埋めする時に使用するので覚えておきましょう。",[11,48138,5299],{"id":5299},[15,48140,48141],{},"JavaScriptの文字列操作を使用例と共に紹介しました。文字列を操作したい場面はよくあるので、ブラウザの開発者ツールで試しながら覚えておきましょう。",[11,48143,35214],{"id":35214},[89,48145,48146],{},[92,48147,48148],{},[29,48149,48152],{"href":48150,"rel":48151,"target":3049},"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String",[3048],"String - MDN",[5313,48154,48155],{},"html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":135,"searchDepth":165,"depth":165,"links":48157},[48158,48159,48160,48161,48162,48163,48164,48165,48166,48167,48168,48169],{"id":13,"depth":158,"text":13},{"id":46971,"depth":158,"text":46971},{"id":46979,"depth":158,"text":46979},{"id":46987,"depth":158,"text":46987},{"id":46995,"depth":158,"text":46995},{"id":47003,"depth":158,"text":47003},{"id":47011,"depth":158,"text":47011},{"id":47019,"depth":158,"text":47019},{"id":47974,"depth":158,"text":47027},{"id":47035,"depth":158,"text":47035},{"id":5299,"depth":158,"text":5299},{"id":35214,"depth":158,"text":35214},"2025-08-14T00:00:00.000Z","JavaScriptの文字列操作を紹介をします。具体的には文字列の長さを取得・空白を削除・位置を調べる・含まれているか調べる・取り出す・置き換える・分割する・大文字・小文字に変換する・指定の長さになるように繰り返すについて紹介します。","/images/blog/javascript-strings.jpg",{},"/blog/javascript-strings",{"title":46944,"description":48171},"blog/javascript-strings",[48178,48179],"JavaScriptの文字列操作の紹介","文字列の長さや含まれているかなどを紹介します。",[35288],"cjiCcI3ai3NigW_6kSbMJOQu4XlPsowaRLJCza3l3-o",{"id":48183,"title":48184,"body":48185,"date":48951,"description":48952,"draft":5339,"extension":5340,"image":48953,"meta":48954,"navigation":161,"path":48955,"seo":48956,"stem":48957,"summaryList":48958,"summaryText":5348,"tags":48961,"__hash__":48962},"blog/blog/javascript-math-object.md","JavaScriptのMathオブジェクトの紹介【四捨五入、切り上げ、切り捨て、ランダム、数学的な計算】",{"type":8,"value":48186,"toc":48937},[48187,48189,48198,48202,48205,48221,48261,48264,48269,48279,48343,48347,48354,48366,48448,48451,48498,48501,48506,48550,48554,48557,48566,48587,48590,48596,48664,48667,48671,48674,48677,48737,48740,48918,48920,48923,48925,48934],[11,48188,13],{"id":13},[15,48190,48191,48192,48197],{},"JavaScriptの組み込み関数の1つの",[48193,48194,48196],"color-text",{"color":48195},"var(--blue)","Mathオブジェクト","の紹介をします。Mathオブジェクトを使用することで、JavaScriptで数値計算を行うことができます。この記事では、四捨五入、切り上げ、切り捨て、ランダム、数学的な計算について紹介します。",[11,48199,48201],{"id":48200},"javascriptで四捨五入切り上げ切り捨てを行う","JavaScriptで四捨五入、切り上げ、切り捨てを行う",[35274,48203],{":list":48204,"title":35277},"[\"価格の計算時の表記\",\"ページネーションのページ数\",\"時間(分や秒)の切り捨て\"]",[15,48206,48207,48208,230,48211,230,48214,230,48217,48220],{},"四捨五入や切り捨てには、",[124,48209,48210],{},"Math.round()",[124,48212,48213],{},"Math.floor()",[124,48215,48216],{},"Math.ceil()",[124,48218,48219],{},"Math.trunc()","メソッドを使用します。各メソッドの意味は下記のようになります。",[583,48222,48223,48231],{},[586,48224,48225],{},[589,48226,48227,48229],{},[592,48228,43194],{},[592,48230,597],{},[602,48232,48233,48240,48247,48254],{},[589,48234,48235,48237],{},[607,48236,48210],{},[607,48238,48239],{},"数値を四捨五入する",[589,48241,48242,48244],{},[607,48243,48213],{},[607,48245,48246],{},"数値を切り捨てる",[589,48248,48249,48251],{},[607,48250,48216],{},[607,48252,48253],{},"数値を切り上げる",[589,48255,48256,48258],{},[607,48257,48219],{},[607,48259,48260],{},"数値の整数部分を返す",[1177,48262,48210],{"id":48263},"mathround",[15,48265,48266,48268],{},[124,48267,48210],{},"メソッドは、数値を四捨五入します。挙動としては、以下のようになります。",[89,48270,48271,48274,48276],{},[92,48272,48273],{},"少数点部分が0.5以上の場合は、次の整数に切り上げ",[92,48275,48273],{},[92,48277,48278],{},"少数点部分が0.5未満の場合は、前の整数に切り下げ",[129,48280,48282],{"className":35286,"code":48281,"filename":35288,"language":35289,"meta":135,"style":135},"Math.round(4.24); // 4\nMath.round(4.5); // 5\nMath.round(4.74); // 5\n",[124,48283,48284,48305,48324],{"__ignoreMap":135},[65,48285,48286,48288,48290,48293,48295,48298,48300,48302],{"class":140,"line":141},[65,48287,4341],{"class":144},[65,48289,834],{"class":154},[65,48291,48292],{"class":200},"round",[65,48294,224],{"class":204},[65,48296,48297],{"class":793},"4.24",[65,48299,235],{"class":204},[65,48301,6005],{"class":154},[65,48303,48304],{"class":278}," // 4\n",[65,48306,48307,48309,48311,48313,48315,48318,48320,48322],{"class":140,"line":158},[65,48308,4341],{"class":144},[65,48310,834],{"class":154},[65,48312,48292],{"class":200},[65,48314,224],{"class":204},[65,48316,48317],{"class":793},"4.5",[65,48319,235],{"class":204},[65,48321,6005],{"class":154},[65,48323,47096],{"class":278},[65,48325,48326,48328,48330,48332,48334,48337,48339,48341],{"class":140,"line":165},[65,48327,4341],{"class":144},[65,48329,834],{"class":154},[65,48331,48292],{"class":200},[65,48333,224],{"class":204},[65,48335,48336],{"class":793},"4.74",[65,48338,235],{"class":204},[65,48340,6005],{"class":154},[65,48342,47096],{"class":278},[1177,48344,48346],{"id":48345},"mathfloormathceil","Math.floor()、Math.ceil()",[15,48348,48349,230,48351,48353],{},[124,48350,48213],{},[124,48352,48216],{},"メソッドの挙動は以下のようになります。",[89,48355,48356,48361],{},[92,48357,48358,48360],{},[124,48359,48213],{},"メソッドは、数値以下の最大の整数を返す",[92,48362,48363,48365],{},[124,48364,48216],{},"メソッドは、数値以上の最小の整数を返す",[129,48367,48369],{"className":35286,"code":48368,"filename":35288,"language":35289,"meta":135,"style":135},"Math.floor(4.24); // 4\nMath.ceil(4.24); // 5\n\nMath.floor(4.74); // 4\nMath.ceil(4.74); // 5\n",[124,48370,48371,48389,48408,48412,48430],{"__ignoreMap":135},[65,48372,48373,48375,48377,48379,48381,48383,48385,48387],{"class":140,"line":141},[65,48374,4341],{"class":144},[65,48376,834],{"class":154},[65,48378,11971],{"class":200},[65,48380,224],{"class":204},[65,48382,48297],{"class":793},[65,48384,235],{"class":204},[65,48386,6005],{"class":154},[65,48388,48304],{"class":278},[65,48390,48391,48393,48395,48398,48400,48402,48404,48406],{"class":140,"line":158},[65,48392,4341],{"class":144},[65,48394,834],{"class":154},[65,48396,48397],{"class":200},"ceil",[65,48399,224],{"class":204},[65,48401,48297],{"class":793},[65,48403,235],{"class":204},[65,48405,6005],{"class":154},[65,48407,47096],{"class":278},[65,48409,48410],{"class":140,"line":165},[65,48411,162],{"emptyLinePlaceholder":161},[65,48413,48414,48416,48418,48420,48422,48424,48426,48428],{"class":140,"line":180},[65,48415,4341],{"class":144},[65,48417,834],{"class":154},[65,48419,11971],{"class":200},[65,48421,224],{"class":204},[65,48423,48336],{"class":793},[65,48425,235],{"class":204},[65,48427,6005],{"class":154},[65,48429,48304],{"class":278},[65,48431,48432,48434,48436,48438,48440,48442,48444,48446],{"class":140,"line":194},[65,48433,4341],{"class":144},[65,48435,834],{"class":154},[65,48437,48397],{"class":200},[65,48439,224],{"class":204},[65,48441,48336],{"class":793},[65,48443,235],{"class":204},[65,48445,6005],{"class":154},[65,48447,47096],{"class":278},[15,48449,48450],{},"負の数値の場合は、以下のようになります。",[129,48452,48454],{"className":35286,"code":48453,"filename":35288,"language":35289,"meta":135,"style":135},"Math.floor(-4.24); // -5\nMath.ceil(-4.24); // -4\n",[124,48455,48456,48477],{"__ignoreMap":135},[65,48457,48458,48460,48462,48464,48466,48468,48470,48472,48474],{"class":140,"line":141},[65,48459,4341],{"class":144},[65,48461,834],{"class":154},[65,48463,11971],{"class":200},[65,48465,224],{"class":204},[65,48467,3936],{"class":168},[65,48469,48297],{"class":793},[65,48471,235],{"class":204},[65,48473,6005],{"class":154},[65,48475,48476],{"class":278}," // -5\n",[65,48478,48479,48481,48483,48485,48487,48489,48491,48493,48495],{"class":140,"line":158},[65,48480,4341],{"class":144},[65,48482,834],{"class":154},[65,48484,48397],{"class":200},[65,48486,224],{"class":204},[65,48488,3936],{"class":168},[65,48490,48297],{"class":793},[65,48492,235],{"class":204},[65,48494,6005],{"class":154},[65,48496,48497],{"class":278}," // -4\n",[1177,48499,48219],{"id":48500},"mathtrunc",[15,48502,48503,48505],{},[124,48504,48219],{},"メソッドは、値の正負にかかわらず数値の整数部分を返します。",[129,48507,48509],{"className":35286,"code":48508,"filename":35288,"language":35289,"meta":135,"style":135},"Math.trunc(4.24); // 4\nMath.trunc(-4.24); // -4\n",[124,48510,48511,48530],{"__ignoreMap":135},[65,48512,48513,48515,48517,48520,48522,48524,48526,48528],{"class":140,"line":141},[65,48514,4341],{"class":144},[65,48516,834],{"class":154},[65,48518,48519],{"class":200},"trunc",[65,48521,224],{"class":204},[65,48523,48297],{"class":793},[65,48525,235],{"class":204},[65,48527,6005],{"class":154},[65,48529,48304],{"class":278},[65,48531,48532,48534,48536,48538,48540,48542,48544,48546,48548],{"class":140,"line":158},[65,48533,4341],{"class":144},[65,48535,834],{"class":154},[65,48537,48519],{"class":200},[65,48539,224],{"class":204},[65,48541,3936],{"class":168},[65,48543,48297],{"class":793},[65,48545,235],{"class":204},[65,48547,6005],{"class":154},[65,48549,48497],{"class":278},[11,48551,48553],{"id":48552},"javascriptでランダムを扱う","JavaScriptでランダムを扱う",[35274,48555],{":list":48556,"title":35277},"[\"ランダムな記事の選択\",\"アニメーションでランダムな効果を付与したい時\"]",[15,48558,48559,48562,48563,48565],{},[124,48560,48561],{},"Math.random()","メソッドを使うことで、0から1の間のランダムな小数を生成することができます。",[124,48564,48561],{},"メソッドを使うことで、このブログの下にあるランダム記事のように、すでにある記事からランダムに表示することができるようになります。",[129,48567,48569],{"className":35286,"code":48568,"filename":35288,"language":35289,"meta":135,"style":135},"Math.random(); // 0以上1未満のランダムな小数\n",[124,48570,48571],{"__ignoreMap":135},[65,48572,48573,48575,48577,48580,48582,48584],{"class":140,"line":141},[65,48574,4341],{"class":144},[65,48576,834],{"class":154},[65,48578,48579],{"class":200},"random",[65,48581,1269],{"class":204},[65,48583,6005],{"class":154},[65,48585,48586],{"class":278}," // 0以上1未満のランダムな小数\n",[1177,48588,48589],{"id":48589},"ランダムの値の範囲を指定したい",[15,48591,48592,48593,48595],{},"通常は0から1の間のランダムな小数値を生成しますが、値の範囲を指定したい場合は、",[124,48594,48213],{},"などを用いて次のようにします。",[129,48597,48599],{"className":35286,"code":48598,"filename":35288,"language":35289,"meta":135,"style":135},"Math.floor(Math.random() * 100); // 0以上100未満の間のランダムな整数\n10 + Math.floor(Math.random() * 10); // 10以上20未満の間のランダムな整数\n",[124,48600,48601,48630],{"__ignoreMap":135},[65,48602,48603,48605,48607,48609,48611,48613,48615,48617,48619,48621,48623,48625,48627],{"class":140,"line":141},[65,48604,4341],{"class":144},[65,48606,834],{"class":154},[65,48608,11971],{"class":200},[65,48610,224],{"class":204},[65,48612,4341],{"class":144},[65,48614,834],{"class":154},[65,48616,48579],{"class":200},[65,48618,205],{"class":204},[65,48620,5928],{"class":168},[65,48622,3594],{"class":793},[65,48624,235],{"class":204},[65,48626,6005],{"class":154},[65,48628,48629],{"class":278}," // 0以上100未満の間のランダムな整数\n",[65,48631,48632,48635,48637,48639,48641,48643,48645,48647,48649,48651,48653,48655,48657,48659,48661],{"class":140,"line":158},[65,48633,48634],{"class":793},"10",[65,48636,2367],{"class":168},[65,48638,4356],{"class":144},[65,48640,834],{"class":154},[65,48642,11971],{"class":200},[65,48644,224],{"class":204},[65,48646,4341],{"class":144},[65,48648,834],{"class":154},[65,48650,48579],{"class":200},[65,48652,205],{"class":204},[65,48654,5928],{"class":168},[65,48656,5525],{"class":793},[65,48658,235],{"class":204},[65,48660,6005],{"class":154},[65,48662,48663],{"class":278}," // 10以上20未満の間のランダムな整数\n",[15,48665,48666],{},"ランダムの値の範囲を指定したい場合はよくあるので、覚えておくと便利です。",[11,48668,48670],{"id":48669},"javascriptで数学的な計算を行う","JavaScriptで数学的な計算を行う",[35274,48672],{":list":48673,"title":35277},"[\"数値の絶対値を扱いたい時\",\"数値のべき乗を扱いたい時\"]",[15,48675,48676],{},"Mathオブジェクトには数学的な計算メソッドが用意されています。それぞれ例としては以下になります。",[583,48678,48679,48687],{},[586,48680,48681],{},[589,48682,48683,48685],{},[592,48684,43194],{},[592,48686,597],{},[602,48688,48689,48697,48705,48713,48721,48729],{},[589,48690,48691,48694],{},[607,48692,48693],{},"Math.abs()",[607,48695,48696],{},"数値の絶対値を計算する",[589,48698,48699,48702],{},[607,48700,48701],{},"Math.pow()",[607,48703,48704],{},"数値のべき乗を計算する",[589,48706,48707,48710],{},[607,48708,48709],{},"Math.sign()",[607,48711,48712],{},"数値の符号を返す",[589,48714,48715,48718],{},[607,48716,48717],{},"Math.sqrt()",[607,48719,48720],{},"数値の平方根を計算する",[589,48722,48723,48726],{},[607,48724,48725],{},"Math.log()",[607,48727,48728],{},"数値の自然対数を計算する",[589,48730,48731,48734],{},[607,48732,48733],{},"Math.exp()",[607,48735,48736],{},"数値の指数関数を計算する",[15,48738,48739],{},"これらの例の使い方としては次の通りになります。",[129,48741,48743],{"className":35286,"code":48742,"filename":35288,"language":35289,"meta":135,"style":135},"Math.abs(-4); // -4の絶対値。4\nMath.pow(2, 3); // 2の3乗。8\nMath.sign(4); // 4が正なので1\nMath.sign(-4); // -4が負なので-1\nMath.sqrt(4); // 4の平方根。2\nMath.log(Math.E); // eの自然対数。1\nMath.log2(8); // 2の3乗なので3\nMath.exp(1); // eの1乗。2.718281828459045\n",[124,48744,48745,48768,48792,48812,48833,48853,48877,48898],{"__ignoreMap":135},[65,48746,48747,48749,48751,48754,48756,48758,48761,48763,48765],{"class":140,"line":141},[65,48748,4341],{"class":144},[65,48750,834],{"class":154},[65,48752,48753],{"class":200},"abs",[65,48755,224],{"class":204},[65,48757,3936],{"class":168},[65,48759,48760],{"class":793},"4",[65,48762,235],{"class":204},[65,48764,6005],{"class":154},[65,48766,48767],{"class":278}," // -4の絶対値。4\n",[65,48769,48770,48772,48774,48777,48779,48781,48783,48785,48787,48789],{"class":140,"line":158},[65,48771,4341],{"class":144},[65,48773,834],{"class":154},[65,48775,48776],{"class":200},"pow",[65,48778,224],{"class":204},[65,48780,3939],{"class":793},[65,48782,230],{"class":154},[65,48784,3739],{"class":793},[65,48786,235],{"class":204},[65,48788,6005],{"class":154},[65,48790,48791],{"class":278}," // 2の3乗。8\n",[65,48793,48794,48796,48798,48801,48803,48805,48807,48809],{"class":140,"line":165},[65,48795,4341],{"class":144},[65,48797,834],{"class":154},[65,48799,48800],{"class":200},"sign",[65,48802,224],{"class":204},[65,48804,48760],{"class":793},[65,48806,235],{"class":204},[65,48808,6005],{"class":154},[65,48810,48811],{"class":278}," // 4が正なので1\n",[65,48813,48814,48816,48818,48820,48822,48824,48826,48828,48830],{"class":140,"line":180},[65,48815,4341],{"class":144},[65,48817,834],{"class":154},[65,48819,48800],{"class":200},[65,48821,224],{"class":204},[65,48823,3936],{"class":168},[65,48825,48760],{"class":793},[65,48827,235],{"class":204},[65,48829,6005],{"class":154},[65,48831,48832],{"class":278}," // -4が負なので-1\n",[65,48834,48835,48837,48839,48842,48844,48846,48848,48850],{"class":140,"line":194},[65,48836,4341],{"class":144},[65,48838,834],{"class":154},[65,48840,48841],{"class":200},"sqrt",[65,48843,224],{"class":204},[65,48845,48760],{"class":793},[65,48847,235],{"class":204},[65,48849,6005],{"class":154},[65,48851,48852],{"class":278}," // 4の平方根。2\n",[65,48854,48855,48857,48859,48861,48863,48865,48867,48870,48872,48874],{"class":140,"line":211},[65,48856,4341],{"class":144},[65,48858,834],{"class":154},[65,48860,35306],{"class":200},[65,48862,224],{"class":204},[65,48864,4341],{"class":144},[65,48866,834],{"class":154},[65,48868,48869],{"class":144},"E",[65,48871,235],{"class":204},[65,48873,6005],{"class":154},[65,48875,48876],{"class":278}," // eの自然対数。1\n",[65,48878,48879,48881,48883,48886,48888,48891,48893,48895],{"class":140,"line":240},[65,48880,4341],{"class":144},[65,48882,834],{"class":154},[65,48884,48885],{"class":200},"log2",[65,48887,224],{"class":204},[65,48889,48890],{"class":793},"8",[65,48892,235],{"class":204},[65,48894,6005],{"class":154},[65,48896,48897],{"class":278}," // 2の3乗なので3\n",[65,48899,48900,48902,48904,48907,48909,48911,48913,48915],{"class":140,"line":391},[65,48901,4341],{"class":144},[65,48903,834],{"class":154},[65,48905,48906],{"class":200},"exp",[65,48908,224],{"class":204},[65,48910,3620],{"class":793},[65,48912,235],{"class":204},[65,48914,6005],{"class":154},[65,48916,48917],{"class":278}," // eの1乗。2.718281828459045\n",[11,48919,5299],{"id":5299},[15,48921,48922],{},"JavaScriptのMathオブジェクトとして、四捨五入、切り上げ、切り捨て、ランダム、数学的な計算について紹介しました。ブラウザの開発者ツールでも簡単に試すことができるので、ぜひ試してみてください。",[11,48924,35214],{"id":35214},[89,48926,48927],{},[92,48928,48929],{},[29,48930,48933],{"href":48931,"rel":48932,"target":3049},"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math",[3048],"Math - MDN",[5313,48935,48936],{},"html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}",{"title":135,"searchDepth":165,"depth":165,"links":48938},[48939,48940,48945,48948,48949,48950],{"id":13,"depth":158,"text":13},{"id":48200,"depth":158,"text":48201,"children":48941},[48942,48943,48944],{"id":48263,"depth":165,"text":48210},{"id":48345,"depth":165,"text":48346},{"id":48500,"depth":165,"text":48219},{"id":48552,"depth":158,"text":48553,"children":48946},[48947],{"id":48589,"depth":165,"text":48589},{"id":48669,"depth":158,"text":48670},{"id":5299,"depth":158,"text":5299},{"id":35214,"depth":158,"text":35214},"2025-08-10T00:00:00.000Z","JavaScriptの組み込み関数の1つのMathオブジェクトの紹介をします。Mathオブジェクトは様々な種類がありますが、この記事では四捨五入、切り上げ、切り捨て、ランダム、数学的な計算について紹介します。","/images/blog/javascript-math-object.jpg",{},"/blog/javascript-math-object",{"title":48184,"description":48952},"blog/javascript-math-object",[48959,48960],"JavaScriptのMathオブジェクトの紹介","JavaScriptで四捨五入、切り上げ、切り捨て、ランダム、数学的な計算をする方法",[35288],"VaBAmTX82h_NAlCku38OOQ31VwCcHGkSNxKjuf280sA",{"id":48964,"title":48965,"body":48966,"date":50313,"description":50314,"draft":5339,"extension":5340,"image":50315,"meta":50316,"navigation":161,"path":50317,"seo":50318,"stem":50319,"summaryList":50320,"summaryText":5348,"tags":50323,"__hash__":50324},"blog/blog/localstorage-first-loading-animation.md","JavaScriptのlocalStorageを利用して初回アクセスか24時間経過したらローディングアニメーションを実行する方法",{"type":8,"value":48967,"toc":50292},[48968,48970,48973,48979,48983,48987,48999,49003,49008,49012,49015,49018,49024,49059,49062,49074,49101,49104,49114,49141,49144,49151,49155,49178,49508,49511,49513,49582,49593,49602,49606,49651,49667,49754,49770,49877,49885,49898,49903,49907,49917,50152,50168,50171,50175,50181,50188,50216,50219,50223,50231,50237,50243,50249,50255,50257,50262,50271,50273,50289],[11,48969,13],{"id":13},[15,48971,48972],{},"再訪問時にローディングアニメーションを、何回も表示するとユーザー体験が悪くなるでしょう。そこで、JavaScriptのlocalStorageを利用して、初回アクセスか24時間経過した時のみローディングアニメーションを実行する方法を紹介します。",[15,48974,48975,48976,48978],{},"下記は今回のデモです！",[5467,48977],{},"\n(初回表示か、24時間経過した時のみローディングアニメーションを表示します)",[34815,48980],{"id":48981,"title":48982},"yyYgwrV","Localstorage First Loading Animation",[11,48984,48986],{"id":48985},"localstorageとは","localStorageとは？",[15,48988,48989,48992,48993,2765,48995,48998],{},[124,48990,48991],{},"localStorage","はブラウザにデータを保存させるWebストレージAPIの1つです。WebストレージAPIには、",[124,48994,48991],{},[124,48996,48997],{},"sessionStorage","があり、それぞれの違いは下記の通りです。",[35274,49000],{":list":49001,"title":49002},"[\"sessionStorageはブラウザを開いている間、使用可能であり、ブラウザを閉じるとデータが削除されます。\",\"localStorageはブラウザを閉じても永続的にデータが残ります。\"]","WebストレージAPIの違い",[15,49004,49005,49007],{},[124,49006,48991],{},"では、保存されたデータの削除処理を書かなければ、永続的に残り続けます。今回のローディングアニメーションの例だと、Topページにアクセスした時に頻繁にローディングアニメーションが表示されると、ユーザー体験を落とすのを防ぐために、24時間経過したかを判断にデータを書き換えることにします。",[1177,49009,49011],{"id":49010},"localstorageの使い方","localStorageの使い方",[15,49013,49014],{},"主なlocalStorageの基本的な使い方は下記になります。",[2418,49016,49017],{"id":49017},"保存",[15,49019,49020,49023],{},[124,49021,49022],{},"localStorage.setItem('key', 'value')","で保存することができます。",[129,49025,49028],{"className":35286,"code":49026,"filename":49027,"language":35289,"meta":135,"style":135},"localStorage.setItem('key', 'value');\n","localStorage.setItem",[124,49029,49030],{"__ignoreMap":135},[65,49031,49032,49034,49036,49039,49041,49043,49045,49047,49049,49051,49053,49055,49057],{"class":140,"line":141},[65,49033,48991],{"class":144},[65,49035,834],{"class":154},[65,49037,49038],{"class":200},"setItem",[65,49040,224],{"class":204},[65,49042,306],{"class":154},[65,49044,39248],{"class":302},[65,49046,306],{"class":154},[65,49048,230],{"class":154},[65,49050,299],{"class":154},[65,49052,3114],{"class":302},[65,49054,306],{"class":154},[65,49056,235],{"class":204},[65,49058,155],{"class":154},[2418,49060,49061],{"id":49061},"取得",[15,49063,49064,49067,49068,49070,49071,49073],{},[124,49065,49066],{},"localStorage.getItem('key')","で",[124,49069,39248],{},"の",[124,49072,3114],{},"を取得することができます。",[129,49075,49078],{"className":35286,"code":49076,"filename":49077,"language":35289,"meta":135,"style":135},"localStorage.getItem('key');\n","localStorage.getItem",[124,49079,49080],{"__ignoreMap":135},[65,49081,49082,49084,49086,49089,49091,49093,49095,49097,49099],{"class":140,"line":141},[65,49083,48991],{"class":144},[65,49085,834],{"class":154},[65,49087,49088],{"class":200},"getItem",[65,49090,224],{"class":204},[65,49092,306],{"class":154},[65,49094,39248],{"class":302},[65,49096,306],{"class":154},[65,49098,235],{"class":204},[65,49100,155],{"class":154},[2418,49102,49103],{"id":49103},"削除",[15,49105,49106,49067,49109,49070,49111,49113],{},[124,49107,49108],{},"localStorage.removeItem('key')",[124,49110,39248],{},[124,49112,3114],{},"を削除することができます。",[129,49115,49118],{"className":35286,"code":49116,"filename":49117,"language":35289,"meta":135,"style":135},"localStorage.removeItem('key');\n","localStorage.removeItem",[124,49119,49120],{"__ignoreMap":135},[65,49121,49122,49124,49126,49129,49131,49133,49135,49137,49139],{"class":140,"line":141},[65,49123,48991],{"class":144},[65,49125,834],{"class":154},[65,49127,49128],{"class":200},"removeItem",[65,49130,224],{"class":204},[65,49132,306],{"class":154},[65,49134,39248],{"class":302},[65,49136,306],{"class":154},[65,49138,235],{"class":204},[65,49140,155],{"class":154},[11,49142,49143],{"id":49143},"デモの解説",[15,49145,49146,49147,49150],{},"デモのCodePenでは、",[34759,49148,49149],{},"初回表示か、24時間経過した時のみ","「LOADING」の文字と帯が動くローディングアニメーションを表示します。ここでは、詳しいコードの説明はしないで、JavaScriptのlocalStorage部分を重視して解説します。",[1177,49152,49154],{"id":49153},"visitedクラスを作る","Visitedクラスを作る",[15,49156,49157,49158,49160,49161,49164,49165,49067,49167,49170,49171,49173,49174,49177],{},"初回表示か、24時間経過したかを",[124,49159,48991],{},"を使って判断する",[124,49162,49163],{},"Visited","クラスを作ります。",[124,49166,31079],{},[124,49168,49169],{},"expire","を引数に取って、",[124,49172,49169],{},"のデフォルト値を",[124,49175,49176],{},"86400","秒（24時間）に設定します。",[129,49179,49181],{"className":35286,"code":49180,"filename":35288,"language":35289,"meta":135,"style":135},"class Visited {\n constructor(expire = 86400) {\n this.key = \"visited\";\n this.expire = expire;\n }\n\n isVisited() {\n let isVisited = true;\n let timelimit = this.expire;\n\n let now = Math.floor((new Date() * 1) / 1000);\n let visited = localStorage.getItem(this.key);\n let diffTime = (now - visited);\n\n if (!visited || timelimit \u003C diffTime) {\n try {\n localStorage.setItem(this.key, now);\n } catch (e) {\n console.error(e);\n }\n isVisited = false;\n }\n return isVisited;\n }\n}\n",[124,49182,49183,49192,49209,49228,49243,49247,49251,49260,49274,49291,49295,49333,49361,49382,49386,49408,49415,49440,49455,49473,49477,49488,49492,49500,49504],{"__ignoreMap":135},[65,49184,49185,49187,49190],{"class":140,"line":141},[65,49186,38615],{"class":168},[65,49188,49189],{"class":326}," Visited",[65,49191,418],{"class":154},[65,49193,49194,49196,49198,49200,49202,49205,49207],{"class":140,"line":158},[65,49195,788],{"class":168},[65,49197,224],{"class":154},[65,49199,49169],{"class":793},[65,49201,218],{"class":168},[65,49203,49204],{"class":793}," 86400",[65,49206,235],{"class":154},[65,49208,418],{"class":154},[65,49210,49211,49213,49215,49217,49219,49221,49224,49226],{"class":140,"line":165},[65,49212,831],{"class":830},[65,49214,834],{"class":154},[65,49216,39248],{"class":214},[65,49218,218],{"class":168},[65,49220,35344],{"class":154},[65,49222,49223],{"class":302},"visited",[65,49225,34857],{"class":154},[65,49227,155],{"class":154},[65,49229,49230,49232,49234,49236,49238,49241],{"class":140,"line":180},[65,49231,831],{"class":830},[65,49233,834],{"class":154},[65,49235,49169],{"class":214},[65,49237,218],{"class":168},[65,49239,49240],{"class":214}," expire",[65,49242,155],{"class":154},[65,49244,49245],{"class":140,"line":194},[65,49246,1171],{"class":154},[65,49248,49249],{"class":140,"line":211},[65,49250,162],{"emptyLinePlaceholder":161},[65,49252,49253,49256,49258],{"class":140,"line":240},[65,49254,49255],{"class":200}," isVisited",[65,49257,1269],{"class":154},[65,49259,418],{"class":154},[65,49261,49262,49265,49268,49270,49272],{"class":140,"line":391},[65,49263,49264],{"class":168}," let",[65,49266,49267],{"class":214}," isVisited",[65,49269,218],{"class":168},[65,49271,1016],{"class":793},[65,49273,155],{"class":154},[65,49275,49276,49278,49281,49283,49285,49287,49289],{"class":140,"line":401},[65,49277,49264],{"class":168},[65,49279,49280],{"class":214}," timelimit",[65,49282,218],{"class":168},[65,49284,1434],{"class":830},[65,49286,834],{"class":154},[65,49288,49169],{"class":214},[65,49290,155],{"class":154},[65,49292,49293],{"class":140,"line":406},[65,49294,162],{"emptyLinePlaceholder":161},[65,49296,49297,49299,49301,49303,49305,49307,49309,49312,49315,49317,49319,49321,49323,49325,49327,49329,49331],{"class":140,"line":421},[65,49298,49264],{"class":168},[65,49300,40896],{"class":214},[65,49302,218],{"class":168},[65,49304,4356],{"class":214},[65,49306,834],{"class":154},[65,49308,11971],{"class":200},[65,49310,49311],{"class":204},"((",[65,49313,49314],{"class":168},"new",[65,49316,35976],{"class":200},[65,49318,205],{"class":204},[65,49320,5928],{"class":168},[65,49322,3137],{"class":793},[65,49324,1713],{"class":204},[65,49326,9199],{"class":168},[65,49328,35042],{"class":793},[65,49330,235],{"class":204},[65,49332,155],{"class":154},[65,49334,49335,49337,49340,49342,49345,49347,49349,49351,49353,49355,49357,49359],{"class":140,"line":435},[65,49336,49264],{"class":168},[65,49338,49339],{"class":214}," visited",[65,49341,218],{"class":168},[65,49343,49344],{"class":214}," localStorage",[65,49346,834],{"class":154},[65,49348,49088],{"class":200},[65,49350,224],{"class":204},[65,49352,2004],{"class":830},[65,49354,834],{"class":154},[65,49356,39248],{"class":214},[65,49358,235],{"class":204},[65,49360,155],{"class":154},[65,49362,49363,49365,49368,49370,49372,49374,49376,49378,49380],{"class":140,"line":447},[65,49364,49264],{"class":168},[65,49366,49367],{"class":214}," diffTime",[65,49369,218],{"class":168},[65,49371,1696],{"class":204},[65,49373,40919],{"class":214},[65,49375,4399],{"class":168},[65,49377,49339],{"class":214},[65,49379,235],{"class":204},[65,49381,155],{"class":154},[65,49383,49384],{"class":140,"line":459},[65,49385,162],{"emptyLinePlaceholder":161},[65,49387,49388,49390,49392,49394,49396,49398,49400,49402,49404,49406],{"class":140,"line":471},[65,49389,3105],{"class":154},[65,49391,1696],{"class":204},[65,49393,2264],{"class":168},[65,49395,49223],{"class":214},[65,49397,2269],{"class":168},[65,49399,49280],{"class":214},[65,49401,6223],{"class":168},[65,49403,49367],{"class":214},[65,49405,1713],{"class":204},[65,49407,208],{"class":154},[65,49409,49410,49413],{"class":140,"line":63},[65,49411,49412],{"class":154}," try",[65,49414,418],{"class":154},[65,49416,49417,49420,49422,49424,49426,49428,49430,49432,49434,49436,49438],{"class":140,"line":495},[65,49418,49419],{"class":214}," localStorage",[65,49421,834],{"class":154},[65,49423,49038],{"class":200},[65,49425,224],{"class":204},[65,49427,2004],{"class":830},[65,49429,834],{"class":154},[65,49431,39248],{"class":214},[65,49433,230],{"class":154},[65,49435,40896],{"class":214},[65,49437,235],{"class":204},[65,49439,155],{"class":154},[65,49441,49442,49444,49447,49449,49451,49453],{"class":140,"line":507},[65,49443,20901],{"class":154},[65,49445,49446],{"class":154}," catch",[65,49448,1696],{"class":204},[65,49450,1968],{"class":214},[65,49452,1713],{"class":204},[65,49454,208],{"class":154},[65,49456,49457,49460,49462,49465,49467,49469,49471],{"class":140,"line":519},[65,49458,49459],{"class":214}," console",[65,49461,834],{"class":154},[65,49463,49464],{"class":200},"error",[65,49466,224],{"class":204},[65,49468,1968],{"class":214},[65,49470,235],{"class":204},[65,49472,155],{"class":154},[65,49474,49475],{"class":140,"line":531},[65,49476,6413],{"class":154},[65,49478,49479,49482,49484,49486],{"class":140,"line":543},[65,49480,49481],{"class":214}," isVisited",[65,49483,218],{"class":168},[65,49485,1039],{"class":793},[65,49487,155],{"class":154},[65,49489,49490],{"class":140,"line":555},[65,49491,3204],{"class":154},[65,49493,49494,49496,49498],{"class":140,"line":567},[65,49495,2684],{"class":154},[65,49497,49267],{"class":214},[65,49499,155],{"class":154},[65,49501,49502],{"class":140,"line":3757},[65,49503,1171],{"class":154},[65,49505,49506],{"class":140,"line":3787},[65,49507,243],{"class":154},[15,49509,49510],{},"それでは解説します。",[2418,49512,31079],{"id":31079},[129,49514,49516],{"className":35286,"code":49515,"filename":35288,"language":35289,"meta":135,"style":135},"class Visited {\n constructor(expire = 86400) {\n this.key = \"visited\";\n this.expire = expire;\n }\n}\n",[124,49517,49518,49526,49542,49560,49574,49578],{"__ignoreMap":135},[65,49519,49520,49522,49524],{"class":140,"line":141},[65,49521,38615],{"class":168},[65,49523,49189],{"class":326},[65,49525,418],{"class":154},[65,49527,49528,49530,49532,49534,49536,49538,49540],{"class":140,"line":158},[65,49529,788],{"class":168},[65,49531,224],{"class":154},[65,49533,49169],{"class":793},[65,49535,218],{"class":168},[65,49537,49204],{"class":793},[65,49539,235],{"class":154},[65,49541,418],{"class":154},[65,49543,49544,49546,49548,49550,49552,49554,49556,49558],{"class":140,"line":165},[65,49545,831],{"class":830},[65,49547,834],{"class":154},[65,49549,39248],{"class":214},[65,49551,218],{"class":168},[65,49553,35344],{"class":154},[65,49555,49223],{"class":302},[65,49557,34857],{"class":154},[65,49559,155],{"class":154},[65,49561,49562,49564,49566,49568,49570,49572],{"class":140,"line":180},[65,49563,831],{"class":830},[65,49565,834],{"class":154},[65,49567,49169],{"class":214},[65,49569,218],{"class":168},[65,49571,49240],{"class":214},[65,49573,155],{"class":154},[65,49575,49576],{"class":140,"line":194},[65,49577,1171],{"class":154},[65,49579,49580],{"class":140,"line":211},[65,49581,243],{"class":154},[15,49583,49584,49586,49587,49589,49590,49592],{},[124,49585,31079],{},"では、",[124,49588,48991],{},"に使うキー(",[124,49591,49223],{},")と有効期限(秒数)を設定します。デフォルトでは、86400秒（24時間）に設定します。",[15,49594,49595,49597,49598,49601],{},[124,49596,49163],{},"クラスを使う時に、",[124,49599,49600],{},"new Visited(3600)","のように有効期限を設定すると、この場合は1時間以内の訪問は「訪問済み」と判断します。",[2418,49603,49605],{"id":49604},"isvisited","isVisited",[129,49607,49609],{"className":35286,"code":49608,"filename":35288,"language":35289,"meta":135,"style":135},"isVisited() {\n let isVisited = true;\n let timelimit = this.expire;\n}\n",[124,49610,49611,49619,49631,49647],{"__ignoreMap":135},[65,49612,49613,49615,49617],{"class":140,"line":141},[65,49614,49605],{"class":200},[65,49616,205],{"class":204},[65,49618,208],{"class":154},[65,49620,49621,49623,49625,49627,49629],{"class":140,"line":158},[65,49622,17401],{"class":168},[65,49624,49267],{"class":214},[65,49626,218],{"class":168},[65,49628,1016],{"class":793},[65,49630,155],{"class":154},[65,49632,49633,49635,49637,49639,49641,49643,49645],{"class":140,"line":165},[65,49634,17401],{"class":168},[65,49636,49280],{"class":214},[65,49638,218],{"class":168},[65,49640,1434],{"class":830},[65,49642,834],{"class":154},[65,49644,49169],{"class":214},[65,49646,155],{"class":154},[65,49648,49649],{"class":140,"line":180},[65,49650,243],{"class":154},[15,49652,49653,49656,49657,49660,49661,49663,49666],{},[124,49654,49655],{},"isVisited()","は、訪問済みかを",[124,49658,49659],{},"true/false","で返します。",[5467,49662],{},[124,49664,49665],{},"timelimit","は期限（秒数）を保持します。",[129,49668,49670],{"className":35286,"code":49669,"filename":35288,"language":35289,"meta":135,"style":135},"let now = Math.floor((new Date() * 1) / 1000);\nlet visited = localStorage.getItem(this.key);\nlet diffTime = (now - visited);\n",[124,49671,49672,49708,49734],{"__ignoreMap":135},[65,49673,49674,49676,49678,49680,49682,49684,49686,49688,49690,49692,49694,49696,49698,49700,49702,49704,49706],{"class":140,"line":141},[65,49675,5995],{"class":168},[65,49677,40896],{"class":144},[65,49679,218],{"class":168},[65,49681,4356],{"class":144},[65,49683,834],{"class":154},[65,49685,11971],{"class":200},[65,49687,49311],{"class":204},[65,49689,49314],{"class":168},[65,49691,35976],{"class":200},[65,49693,205],{"class":204},[65,49695,5928],{"class":168},[65,49697,3137],{"class":793},[65,49699,1713],{"class":204},[65,49701,9199],{"class":168},[65,49703,35042],{"class":793},[65,49705,235],{"class":204},[65,49707,155],{"class":154},[65,49709,49710,49712,49714,49716,49718,49720,49722,49724,49726,49728,49730,49732],{"class":140,"line":158},[65,49711,5995],{"class":168},[65,49713,49339],{"class":144},[65,49715,218],{"class":168},[65,49717,49344],{"class":144},[65,49719,834],{"class":154},[65,49721,49088],{"class":200},[65,49723,224],{"class":204},[65,49725,2004],{"class":830},[65,49727,834],{"class":154},[65,49729,39248],{"class":144},[65,49731,235],{"class":204},[65,49733,155],{"class":154},[65,49735,49736,49738,49740,49742,49744,49746,49748,49750,49752],{"class":140,"line":165},[65,49737,5995],{"class":168},[65,49739,49367],{"class":144},[65,49741,218],{"class":168},[65,49743,1696],{"class":204},[65,49745,40919],{"class":144},[65,49747,4399],{"class":168},[65,49749,49339],{"class":144},[65,49751,235],{"class":204},[65,49753,155],{"class":154},[15,49755,49756,49759,49760,49762,49765,49766,49769],{},[124,49757,49758],{},"localStorage.getItem()","で最後の訪問時間を取得します。",[5467,49761],{},[124,49763,49764],{},"(now - visited)","で差分時間（前回からの経過秒数）を計算して、",[124,49767,49768],{},"diffTime","に入れます。",[129,49771,49773],{"className":35286,"code":49772,"filename":35288,"language":35289,"meta":135,"style":135},"if (!visited || timelimit \u003C diffTime) {\n try {\n localStorage.setItem(this.key, now);\n } catch (e) {\n console.error(e);\n }\n isVisited = false;\n}\n",[124,49774,49775,49797,49804,49829,49843,49859,49863,49873],{"__ignoreMap":135},[65,49776,49777,49779,49781,49783,49785,49787,49789,49791,49793,49795],{"class":140,"line":141},[65,49778,1693],{"class":154},[65,49780,1696],{"class":204},[65,49782,2264],{"class":168},[65,49784,49223],{"class":144},[65,49786,2269],{"class":168},[65,49788,49280],{"class":144},[65,49790,6223],{"class":168},[65,49792,49367],{"class":144},[65,49794,1713],{"class":204},[65,49796,208],{"class":154},[65,49798,49799,49802],{"class":140,"line":158},[65,49800,49801],{"class":154}," try",[65,49803,418],{"class":154},[65,49805,49806,49809,49811,49813,49815,49817,49819,49821,49823,49825,49827],{"class":140,"line":165},[65,49807,49808],{"class":214}," localStorage",[65,49810,834],{"class":154},[65,49812,49038],{"class":200},[65,49814,224],{"class":204},[65,49816,2004],{"class":830},[65,49818,834],{"class":154},[65,49820,39248],{"class":214},[65,49822,230],{"class":154},[65,49824,40896],{"class":214},[65,49826,235],{"class":204},[65,49828,155],{"class":154},[65,49830,49831,49833,49835,49837,49839,49841],{"class":140,"line":180},[65,49832,1977],{"class":154},[65,49834,49446],{"class":154},[65,49836,1696],{"class":204},[65,49838,1968],{"class":214},[65,49840,1713],{"class":204},[65,49842,208],{"class":154},[65,49844,49845,49847,49849,49851,49853,49855,49857],{"class":140,"line":194},[65,49846,42788],{"class":214},[65,49848,834],{"class":154},[65,49850,49464],{"class":200},[65,49852,224],{"class":204},[65,49854,1968],{"class":214},[65,49856,235],{"class":204},[65,49858,155],{"class":154},[65,49860,49861],{"class":140,"line":211},[65,49862,1171],{"class":154},[65,49864,49865,49867,49869,49871],{"class":140,"line":240},[65,49866,49255],{"class":214},[65,49868,218],{"class":168},[65,49870,1039],{"class":793},[65,49872,155],{"class":154},[65,49874,49875],{"class":140,"line":391},[65,49876,243],{"class":154},[15,49878,49879,49880,2177,49882,49884],{},"以下の条件を満たす場合に、",[124,49881,49605],{},[124,49883,692],{},"に設定し「初回表示か、24時間経過した」と判断します。",[89,49886,49887,49892],{},[92,49888,49889,49891],{},[124,49890,49223],{},"が存在しない（初回アクセス）",[92,49893,49894,49895,49897],{},"最終訪問から",[124,49896,49665],{},"秒以上経過している（24時間経過した）",[15,49899,3040,49900,49902],{},[124,49901,48991],{},"を使用した初回表示か、24時間経過したかを判断するクラスを作成しました。これをローディングアニメーションをするJavaScriptコードに組み込みましょう！",[1177,49904,49906],{"id":49905},"loadingクラスに組み込む","Loadingクラスに組み込む",[15,49908,49909,49910,49912,49913,49916],{},"先ほど作成した",[124,49911,49163],{},"クラスを",[124,49914,49915],{},"Loading","クラスに組み込んでいきます。",[129,49918,49920],{"className":35286,"code":49919,"filename":35288,"language":35289,"meta":135,"style":135},"class Loading {\n constructor() {\n this.el = document.querySelector('.js-loading');\n const visited = new Visited();\n const isVisited = visited.isVisited();\n\n if (!this.el || isVisited) return;\n\n this.init();\n }\n\n init() {\n this.el.style.display = 'block';\n gsap.set(this.textUp, { y: 300, opacity: 0 });\n this.loadingAnimation();\n }\n}\n",[124,49921,49922,49931,49939,49969,49985,50003,50007,50029,50033,50045,50049,50053,50061,50088,50131,50144,50148],{"__ignoreMap":135},[65,49923,49924,49926,49929],{"class":140,"line":141},[65,49925,38615],{"class":168},[65,49927,49928],{"class":326}," Loading",[65,49930,418],{"class":154},[65,49932,49933,49935,49937],{"class":140,"line":158},[65,49934,788],{"class":168},[65,49936,1269],{"class":154},[65,49938,418],{"class":154},[65,49940,49941,49943,49945,49948,49950,49952,49954,49956,49958,49960,49963,49965,49967],{"class":140,"line":165},[65,49942,831],{"class":830},[65,49944,834],{"class":154},[65,49946,49947],{"class":214},"el",[65,49949,218],{"class":168},[65,49951,3413],{"class":214},[65,49953,834],{"class":154},[65,49955,35825],{"class":200},[65,49957,224],{"class":204},[65,49959,306],{"class":154},[65,49961,49962],{"class":302},".js-loading",[65,49964,306],{"class":154},[65,49966,235],{"class":204},[65,49968,155],{"class":154},[65,49970,49971,49973,49975,49977,49979,49981,49983],{"class":140,"line":180},[65,49972,848],{"class":168},[65,49974,49339],{"class":214},[65,49976,218],{"class":168},[65,49978,1776],{"class":168},[65,49980,49189],{"class":200},[65,49982,1269],{"class":204},[65,49984,155],{"class":154},[65,49986,49987,49989,49991,49993,49995,49997,49999,50001],{"class":140,"line":194},[65,49988,848],{"class":168},[65,49990,49267],{"class":214},[65,49992,218],{"class":168},[65,49994,49339],{"class":214},[65,49996,834],{"class":154},[65,49998,49605],{"class":200},[65,50000,1269],{"class":204},[65,50002,155],{"class":154},[65,50004,50005],{"class":140,"line":211},[65,50006,162],{"emptyLinePlaceholder":161},[65,50008,50009,50011,50013,50015,50017,50019,50021,50023,50025,50027],{"class":140,"line":240},[65,50010,3105],{"class":154},[65,50012,1696],{"class":204},[65,50014,2264],{"class":168},[65,50016,2004],{"class":830},[65,50018,834],{"class":154},[65,50020,49947],{"class":214},[65,50022,2269],{"class":168},[65,50024,49267],{"class":214},[65,50026,1713],{"class":204},[65,50028,2287],{"class":154},[65,50030,50031],{"class":140,"line":391},[65,50032,162],{"emptyLinePlaceholder":161},[65,50034,50035,50037,50039,50041,50043],{"class":140,"line":401},[65,50036,831],{"class":830},[65,50038,834],{"class":154},[65,50040,3193],{"class":200},[65,50042,1269],{"class":204},[65,50044,155],{"class":154},[65,50046,50047],{"class":140,"line":406},[65,50048,1171],{"class":154},[65,50050,50051],{"class":140,"line":421},[65,50052,162],{"emptyLinePlaceholder":161},[65,50054,50055,50057,50059],{"class":140,"line":435},[65,50056,38697],{"class":200},[65,50058,1269],{"class":154},[65,50060,418],{"class":154},[65,50062,50063,50065,50067,50069,50071,50073,50075,50078,50080,50082,50084,50086],{"class":140,"line":447},[65,50064,831],{"class":830},[65,50066,834],{"class":154},[65,50068,49947],{"class":214},[65,50070,834],{"class":154},[65,50072,5313],{"class":214},[65,50074,834],{"class":154},[65,50076,50077],{"class":214},"display",[65,50079,218],{"class":168},[65,50081,299],{"class":154},[65,50083,42386],{"class":302},[65,50085,306],{"class":154},[65,50087,155],{"class":154},[65,50089,50090,50093,50095,50097,50099,50101,50103,50106,50108,50110,50112,50114,50116,50118,50121,50123,50125,50127,50129],{"class":140,"line":459},[65,50091,50092],{"class":214}," gsap",[65,50094,834],{"class":154},[65,50096,3615],{"class":200},[65,50098,224],{"class":204},[65,50100,2004],{"class":830},[65,50102,834],{"class":154},[65,50104,50105],{"class":214},"textUp",[65,50107,230],{"class":154},[65,50109,287],{"class":154},[65,50111,15495],{"class":204},[65,50113,797],{"class":154},[65,50115,26799],{"class":793},[65,50117,230],{"class":154},[65,50119,50120],{"class":204}," opacity",[65,50122,797],{"class":154},[65,50124,1142],{"class":793},[65,50126,293],{"class":154},[65,50128,235],{"class":204},[65,50130,155],{"class":154},[65,50132,50133,50135,50137,50140,50142],{"class":140,"line":471},[65,50134,831],{"class":830},[65,50136,834],{"class":154},[65,50138,50139],{"class":200},"loadingAnimation",[65,50141,1269],{"class":204},[65,50143,155],{"class":154},[65,50145,50146],{"class":140,"line":63},[65,50147,1171],{"class":154},[65,50149,50150],{"class":140,"line":495},[65,50151,243],{"class":154},[15,50153,50154,3062,50156,49067,50158,50160,50161,50163,50164,50167],{},[124,50155,49915],{},[124,50157,31079],{},[124,50159,49163],{},"クラスのインスタンスを作成し、",[124,50162,49655],{},"メソッドを呼び出し、訪問済みかを判断します。訪問済みだったら",[124,50165,50166],{},"return","で返してローディングアニメーションを実行しないようになります。",[15,50169,50170],{},"以上がJavaScriptの説明になります。",[1177,50172,50174],{"id":50173},"cssの説明","CSSの説明",[15,50176,50177,50178,50180],{},"最後にCSSの説明です。",[5467,50179],{},"\n「初回アクセスか、24時間経過したか」を判断するのはJavaScriptの処理を待ってからになるので、このままだとローディングの画面が見えてしまいます。",[15,50182,50183,50184,50187],{},"なので、最初にローディングの画面を",[124,50185,50186],{},"display: none","で非表示にしておき、JavaScript側でローディングの画面を表示するようにしましょう。",[129,50189,50191],{"className":34988,"code":50190,"filename":34985,"language":34984,"meta":135,"style":135},".loading {\n display: none;\n}\n",[124,50192,50193,50202,50212],{"__ignoreMap":135},[65,50194,50195,50197,50200],{"class":140,"line":141},[65,50196,834],{"class":154},[65,50198,50199],{"class":326},"loading",[65,50201,418],{"class":154},[65,50203,50204,50206,50208,50210],{"class":140,"line":158},[65,50205,38479],{"class":340},[65,50207,797],{"class":154},[65,50209,35103],{"class":793},[65,50211,155],{"class":154},[65,50213,50214],{"class":140,"line":165},[65,50215,243],{"class":154},[15,50217,50218],{},"以上がデモの解説になります。",[11,50220,50222],{"id":50221},"localstorageの値を削除する方法","localStorageの値を削除する方法",[15,50224,20433,50225,50227,50228,50230],{},[124,50226,48991],{},"の値を削除する方法を紹介します。開発の時に、",[124,50229,48991],{},"の値を削除できないと、ローディングアニメーションが表示されず不便です。",[15,50232,50233,50234,50236],{},"実は、",[124,50235,48991],{},"の値は手動で削除することができます。ブラウザの開発者ツールを確認しましょう。Applicationタブを開いたら、左側のStorageの中のLocal Storageを見てください。",[15,50238,50239,50240,50242],{},"CodePenの場合は、「cdpn.io」の中に、今回のデモの場合は、",[124,50241,49223],{},"というkeyがあるので、右クリックしてDeleteを押したら削除できます！",[15,50244,50245],{},[57,50246],{"alt":50247,"src":50248},"開発者ツールでlocalStorageを削除する","https://res.cloudinary.com/dy8ftemi0/image/upload/v1754123053/localstorage-first-loading-animation-01_bbfloy.jpg",[15,50250,50251,50252,50254],{},"今回のデモのローディングアニメーションを何度も見たい方は、上記の方法で",[124,50253,48991],{},"を削除して見てみてください！",[11,50256,5299],{"id":5299},[15,50258,35757,50259,50261],{},[124,50260,48991],{},"を使用して、初回表示か、24時間経過したかを判断するしてローディングアニメーションを表示する方法を紹介しました。",[15,50263,50264,50265,50267,50268,50270],{},"他にもWebストレージAPIには、",[124,50266,48997],{},"があり、",[124,50269,48991],{},"との違いを意識して使い分けてみてください！",[11,50272,35214],{"id":35214},[89,50274,50275,50282],{},[92,50276,50277],{},[29,50278,50281],{"href":50279,"rel":50280,"target":3049},"https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage",[3048],"Window: localStorage プロパティ - MDN",[92,50283,50284],{},[29,50285,50288],{"href":50286,"rel":50287,"target":3049},"https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API",[3048],"ウェブストレージ API の使用 - MDN",[5313,50290,50291],{},"html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s9qRY, html code.shiki .s9qRY{--shiki-default:#FF5370;--shiki-default-font-style:italic}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}",{"title":135,"searchDepth":165,"depth":165,"links":50293},[50294,50295,50302,50310,50311,50312],{"id":13,"depth":158,"text":13},{"id":48985,"depth":158,"text":48986,"children":50296},[50297],{"id":49010,"depth":165,"text":49011,"children":50298},[50299,50300,50301],{"id":49017,"depth":180,"text":49017},{"id":49061,"depth":180,"text":49061},{"id":49103,"depth":180,"text":49103},{"id":49143,"depth":158,"text":49143,"children":50303},[50304,50308,50309],{"id":49153,"depth":165,"text":49154,"children":50305},[50306,50307],{"id":31079,"depth":180,"text":31079},{"id":49604,"depth":180,"text":49605},{"id":49905,"depth":165,"text":49906},{"id":50173,"depth":165,"text":50174},{"id":50221,"depth":158,"text":50222},{"id":5299,"depth":158,"text":5299},{"id":35214,"depth":158,"text":35214},"2025-08-04T00:00:00.000Z","ローディングアニメーションはWebサイトによく使用されているのを見たことがあるでしょう。初回アクセス時はいいのですが、二回目以降にも同様のローディングアニメーションが表示されてしまうと、ユーザー体験が悪くなるでしょう。そこで、JavaScriptのlocalStorageを利用して初回アクセスか24時間経過したらローディングアニメーションを実行する方法を解説します。","/images/blog/localstorage-first-loading-animation.jpg",{},"/blog/localstorage-first-loading-animation",{"title":48965,"description":50314},"blog/localstorage-first-loading-animation",[50321,50322],"localStorageを利用して、初回アクセスだったらKeyとアクセスした時間を保存する。","差分の時間を見て訪問済みだったらアニメーションをスキップする",[35288],"FADT5DtuVIgrvIDvEe38pkTJ7I1Y4BOLNS7WLBCvHZ0",{"id":50326,"title":50327,"body":50328,"date":51713,"description":51714,"draft":5339,"extension":5340,"image":51715,"meta":51716,"navigation":161,"path":51717,"seo":51718,"stem":51719,"summaryList":51720,"summaryText":5348,"tags":51724,"__hash__":51725},"blog/blog/intersection-observer-fade-in.md","JavaScriptのIntersection Observer APIを利用してフェードインアニメーションを実装する",{"type":8,"value":50329,"toc":51694},[50330,50332,50335,50337,50341,50345,50352,50355,50358,50368,50371,50375,50382,50384,50394,50543,50545,50553,50668,50687,50689,50692,51090,51093,51095,51107,51113,51171,51182,51197,51214,51220,51222,51230,51341,51346,51351,51354,51359,51478,51486,51497,51507,51511,51517,51646,51649,51653,51656,51659,51662,51664,51667,51670,51673,51675,51691],[11,50331,13],{"id":13},[15,50333,50334],{},"Web制作でスクロール連動のアニメーションを作る際は、GSAPのScrollTriggerを使うほうが簡単に実装することができます。ですが、JavaScriptの標準にあるIntersection Observer APIを使っても実装できるので、この記事ではIntersection Observer APIを使ったフェードインアニメーションの実装方法を紹介します。",[15,50336,48975],{},[34815,50338],{"id":50339,"title":50340},"XJmXZaZ","Intersection Observer API Fade In",[11,50342,50344],{"id":50343},"intersection-observer-apiとは","Intersection Observer APIとは",[15,50346,50347,50348,50351],{},"Intersection Observer APIは、日本語に訳すと「交差オブザーバー API」という名前になります。この名前の通り、Intersection Observer APIは、",[34759,50349,50350],{},"特定の要素が指定領域内に入ったかどうかを監視する","ことができます。",[15,50353,50354],{},"このAPIを使用して、要素が指定領域内に入ったらふわっと表示するフェードインアニメーションを実装することができます。具体的には、表示用のクラスを付与してふわっと表示させます。",[1177,50356,50357],{"id":50357},"従来のフェードインアニメーションの問題点",[15,50359,50360,50361,50364,50365,50367],{},"従来、JavaScriptで特定の位置で要素を操作するには",[124,50362,50363],{},"scroll","イベントを利用していました。",[124,50366,50363],{},"イベントで実装する際の問題点は、常にスクロールする度にイベントが発火してしまうため、パフォーマンスが悪くなりますし、ビューポートが変わると再度必要スクロール量を計算するなどの問題がありました。",[15,50369,50370],{},"この問題点を解決するために、Intersection Observer APIを使ってフェードインアニメーションを実装していきます。",[11,50372,50374],{"id":50373},"intersection-observer-apiを使ったフェードインアニメーションの実装方法","Intersection Observer APIを使ったフェードインアニメーションの実装方法",[15,50376,50377,50378,50381],{},"それでは、CodePenのデモのフェードインアニメーションの実装方法を解説します！このデモでは、JavaScriptでIntersection Observer APIを使って、要素が画面に見えたら",[124,50379,50380],{},"is-visible","クラスを付与してCSSでふわっと表示するようにします。",[1177,50383,34822],{"id":34821},[15,50385,50386,50387,50389,50390,50393],{},"フェードインするbox要素のHTMLは以下のようになります。",[5467,50388],{},"\nあとでJavaScriptで取得したいため、フェードインさせたい要素に",[124,50391,50392],{},"data-inview=\"fade-in\"","という属性を付与します。",[129,50395,50397],{"className":34828,"code":50396,"filename":34822,"language":34821,"meta":135,"style":135},"\u003Cdiv class=\"box\" data-inview=\"fade-in\">\n \u003Cdiv class=\"box__text\">\n \u003Ch2>タイトル1\u003C/h2>\n \u003Cp>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur obcaecati nam dolore consequuntur cumque et veritatis nesciunt beatae eos rem magnam, vero exercitationem rerum perspiciatis omnis accusantium ipsum distinctio. Esse.\u003C/p>\n \u003C/div>\n \u003Cdiv class=\"box__img\">\u003Cimg src=\"https://picsum.photos/640/360?random=0\" alt=\"\">\u003C/div>\n\u003C/div>\n",[124,50398,50399,50429,50448,50465,50482,50490,50535],{"__ignoreMap":135},[65,50400,50401,50403,50405,50407,50409,50411,50413,50415,50418,50420,50422,50425,50427],{"class":140,"line":141},[65,50402,1830],{"class":154},[65,50404,36],{"class":214},[65,50406,774],{"class":34851},[65,50408,6252],{"class":154},[65,50410,34857],{"class":154},[65,50412,4419],{"class":302},[65,50414,34857],{"class":154},[65,50416,50417],{"class":34851}," data-inview",[65,50419,6252],{"class":154},[65,50421,34857],{"class":154},[65,50423,50424],{"class":302},"fade-in",[65,50426,34857],{"class":154},[65,50428,34841],{"class":154},[65,50430,50431,50433,50435,50437,50439,50441,50444,50446],{"class":140,"line":158},[65,50432,34846],{"class":154},[65,50434,36],{"class":214},[65,50436,774],{"class":34851},[65,50438,6252],{"class":154},[65,50440,34857],{"class":154},[65,50442,50443],{"class":302},"box__text",[65,50445,34857],{"class":154},[65,50447,34841],{"class":154},[65,50449,50450,50452,50454,50456,50459,50461,50463],{"class":140,"line":165},[65,50451,36953],{"class":154},[65,50453,11],{"class":214},[65,50455,1836],{"class":154},[65,50457,50458],{"class":204},"タイトル1",[65,50460,34881],{"class":154},[65,50462,11],{"class":214},[65,50464,34841],{"class":154},[65,50466,50467,50469,50471,50473,50476,50478,50480],{"class":140,"line":180},[65,50468,36953],{"class":154},[65,50470,15],{"class":214},[65,50472,1836],{"class":154},[65,50474,50475],{"class":204},"Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur obcaecati nam dolore consequuntur cumque et veritatis nesciunt beatae eos rem magnam, vero exercitationem rerum perspiciatis omnis accusantium ipsum distinctio. Esse.",[65,50477,34881],{"class":154},[65,50479,15],{"class":214},[65,50481,34841],{"class":154},[65,50483,50484,50486,50488],{"class":140,"line":194},[65,50485,34909],{"class":154},[65,50487,36],{"class":214},[65,50489,34841],{"class":154},[65,50491,50492,50494,50496,50498,50500,50502,50505,50507,50510,50512,50514,50516,50518,50521,50523,50525,50527,50529,50531,50533],{"class":140,"line":211},[65,50493,34846],{"class":154},[65,50495,36],{"class":214},[65,50497,774],{"class":34851},[65,50499,6252],{"class":154},[65,50501,34857],{"class":154},[65,50503,50504],{"class":302},"box__img",[65,50506,34857],{"class":154},[65,50508,50509],{"class":154},">\u003C",[65,50511,57],{"class":214},[65,50513,1916],{"class":34851},[65,50515,6252],{"class":154},[65,50517,34857],{"class":154},[65,50519,50520],{"class":302},"https://picsum.photos/640/360?random=0",[65,50522,34857],{"class":154},[65,50524,37786],{"class":34851},[65,50526,6252],{"class":154},[65,50528,37764],{"class":154},[65,50530,37918],{"class":154},[65,50532,36],{"class":214},[65,50534,34841],{"class":154},[65,50536,50537,50539,50541],{"class":140,"line":240},[65,50538,34881],{"class":154},[65,50540,36],{"class":214},[65,50542,34841],{"class":154},[1177,50544,34985],{"id":34984},[15,50546,50547,50548,37431,50550,50552],{},"CSSは、",[124,50549,4419],{},[124,50551,50380],{},"クラスが付与されたらアニメーションさせるようにするので、その部分だけ抜粋します。",[129,50554,50556],{"className":34988,"code":50555,"filename":34985,"language":34984,"meta":135,"style":135},".box {\n // ...\n opacity: 0;\n translate: 0 100px;\n transition-property: opacity, translate;\n transition-duration: 0.6s;\n}\n\n.box.is-visible {\n opacity: 1;\n translate: 0 0;\n}\n",[124,50557,50558,50566,50570,50580,50594,50610,50622,50626,50630,50642,50652,50664],{"__ignoreMap":135},[65,50559,50560,50562,50564],{"class":140,"line":141},[65,50561,834],{"class":154},[65,50563,4419],{"class":326},[65,50565,418],{"class":154},[65,50567,50568],{"class":140,"line":158},[65,50569,783],{"class":204},[65,50571,50572,50574,50576,50578],{"class":140,"line":165},[65,50573,35087],{"class":340},[65,50575,797],{"class":154},[65,50577,1142],{"class":793},[65,50579,155],{"class":154},[65,50581,50582,50585,50587,50589,50592],{"class":140,"line":180},[65,50583,50584],{"class":340}," translate",[65,50586,797],{"class":154},[65,50588,1142],{"class":793},[65,50590,50591],{"class":793}," 100px",[65,50593,155],{"class":154},[65,50595,50596,50599,50601,50603,50605,50608],{"class":140,"line":194},[65,50597,50598],{"class":340}," transition-property",[65,50600,797],{"class":154},[65,50602,50120],{"class":204},[65,50604,230],{"class":154},[65,50606,50607],{"class":204}," translate",[65,50609,155],{"class":154},[65,50611,50612,50615,50617,50620],{"class":140,"line":211},[65,50613,50614],{"class":340}," transition-duration",[65,50616,797],{"class":154},[65,50618,50619],{"class":793}," 0.6s",[65,50621,155],{"class":154},[65,50623,50624],{"class":140,"line":240},[65,50625,243],{"class":154},[65,50627,50628],{"class":140,"line":391},[65,50629,162],{"emptyLinePlaceholder":161},[65,50631,50632,50634,50636,50638,50640],{"class":140,"line":401},[65,50633,834],{"class":154},[65,50635,4419],{"class":326},[65,50637,834],{"class":154},[65,50639,50380],{"class":326},[65,50641,418],{"class":154},[65,50643,50644,50646,50648,50650],{"class":140,"line":406},[65,50645,35087],{"class":340},[65,50647,797],{"class":154},[65,50649,3137],{"class":793},[65,50651,155],{"class":154},[65,50653,50654,50656,50658,50660,50662],{"class":140,"line":421},[65,50655,50584],{"class":340},[65,50657,797],{"class":154},[65,50659,1142],{"class":793},[65,50661,1142],{"class":793},[65,50663,155],{"class":154},[65,50665,50666],{"class":140,"line":435},[65,50667,243],{"class":154},[15,50669,50670,50671,50674,50675,50677,50678,50680,50681,50683,50684,50686],{},"初期状態では、",[124,50672,50673],{},"opacity","を0、",[124,50676,21090],{},"を100pxにして下に位置しておいて非表示にします。そして、",[124,50679,50380],{},"クラスが付与されたら",[124,50682,50673],{},"を1、",[124,50685,21090],{},"を0にすることでふわっと上から表示されるようになります。",[1177,50688,35288],{"id":38599},[15,50690,50691],{},"最後にJavaScriptになります。",[129,50693,50695],{"className":35286,"code":50694,"filename":35288,"language":35289,"meta":135,"style":135},"class Inview {\n constructor() {\n this.els = document.querySelectorAll('[data-inview]');\n if (!this.els.length) return;\n\n this.options = {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n }\n\n this.init();\n }\n\n init() {\n this.observer = new IntersectionObserver(this.inviewFadeIn.bind(this), this.options);\n this.els.forEach(el => this.observer.observe(el));\n }\n\n inviewFadeIn(entries) {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n this.observer.unobserve(entry.target);\n }\n });\n }\n}\n\nconst inview = new Inview();\n",[124,50696,50697,50706,50714,50744,50764,50768,50780,50791,50807,50818,50822,50826,50838,50842,50846,50854,50901,50938,50942,50946,50959,50977,50994,51024,51049,51053,51061,51065,51069,51073],{"__ignoreMap":135},[65,50698,50699,50701,50704],{"class":140,"line":141},[65,50700,38615],{"class":168},[65,50702,50703],{"class":326}," Inview",[65,50705,418],{"class":154},[65,50707,50708,50710,50712],{"class":140,"line":158},[65,50709,788],{"class":168},[65,50711,1269],{"class":154},[65,50713,418],{"class":154},[65,50715,50716,50718,50720,50723,50725,50727,50729,50731,50733,50735,50738,50740,50742],{"class":140,"line":165},[65,50717,831],{"class":830},[65,50719,834],{"class":154},[65,50721,50722],{"class":214},"els",[65,50724,218],{"class":168},[65,50726,3413],{"class":214},[65,50728,834],{"class":154},[65,50730,38719],{"class":200},[65,50732,224],{"class":204},[65,50734,306],{"class":154},[65,50736,50737],{"class":302},"[data-inview]",[65,50739,306],{"class":154},[65,50741,235],{"class":204},[65,50743,155],{"class":154},[65,50745,50746,50748,50750,50752,50754,50756,50758,50760,50762],{"class":140,"line":180},[65,50747,3105],{"class":154},[65,50749,1696],{"class":204},[65,50751,2264],{"class":168},[65,50753,2004],{"class":830},[65,50755,834],{"class":154},[65,50757,50722],{"class":214},[65,50759,834],{"class":154},[65,50761,32495],{"class":204},[65,50763,2287],{"class":154},[65,50765,50766],{"class":140,"line":194},[65,50767,162],{"emptyLinePlaceholder":161},[65,50769,50770,50772,50774,50776,50778],{"class":140,"line":211},[65,50771,831],{"class":830},[65,50773,834],{"class":154},[65,50775,24993],{"class":214},[65,50777,218],{"class":168},[65,50779,418],{"class":154},[65,50781,50782,50785,50787,50789],{"class":140,"line":240},[65,50783,50784],{"class":204}," root",[65,50786,797],{"class":154},[65,50788,20550],{"class":793},[65,50790,3820],{"class":154},[65,50792,50793,50796,50798,50800,50803,50805],{"class":140,"line":391},[65,50794,50795],{"class":204}," rootMargin",[65,50797,797],{"class":154},[65,50799,299],{"class":154},[65,50801,50802],{"class":302},"0px",[65,50804,306],{"class":154},[65,50806,3820],{"class":154},[65,50808,50809,50812,50814,50816],{"class":140,"line":401},[65,50810,50811],{"class":204}," threshold",[65,50813,797],{"class":154},[65,50815,5559],{"class":793},[65,50817,3820],{"class":154},[65,50819,50820],{"class":140,"line":406},[65,50821,3204],{"class":154},[65,50823,50824],{"class":140,"line":421},[65,50825,162],{"emptyLinePlaceholder":161},[65,50827,50828,50830,50832,50834,50836],{"class":140,"line":435},[65,50829,831],{"class":830},[65,50831,834],{"class":154},[65,50833,3193],{"class":200},[65,50835,1269],{"class":204},[65,50837,155],{"class":154},[65,50839,50840],{"class":140,"line":447},[65,50841,1171],{"class":154},[65,50843,50844],{"class":140,"line":459},[65,50845,162],{"emptyLinePlaceholder":161},[65,50847,50848,50850,50852],{"class":140,"line":471},[65,50849,38697],{"class":200},[65,50851,1269],{"class":154},[65,50853,418],{"class":154},[65,50855,50856,50858,50860,50863,50865,50867,50870,50872,50874,50876,50879,50881,50883,50885,50887,50889,50891,50893,50895,50897,50899],{"class":140,"line":63},[65,50857,831],{"class":830},[65,50859,834],{"class":154},[65,50861,50862],{"class":214},"observer",[65,50864,218],{"class":168},[65,50866,1776],{"class":168},[65,50868,50869],{"class":200}," IntersectionObserver",[65,50871,224],{"class":204},[65,50873,2004],{"class":830},[65,50875,834],{"class":154},[65,50877,50878],{"class":214},"inviewFadeIn",[65,50880,834],{"class":154},[65,50882,2226],{"class":200},[65,50884,224],{"class":204},[65,50886,2004],{"class":830},[65,50888,235],{"class":204},[65,50890,230],{"class":154},[65,50892,1434],{"class":830},[65,50894,834],{"class":154},[65,50896,24993],{"class":214},[65,50898,235],{"class":204},[65,50900,155],{"class":154},[65,50902,50903,50905,50907,50909,50911,50913,50915,50917,50919,50921,50923,50925,50927,50930,50932,50934,50936],{"class":140,"line":495},[65,50904,831],{"class":830},[65,50906,834],{"class":154},[65,50908,50722],{"class":214},[65,50910,834],{"class":154},[65,50912,38987],{"class":200},[65,50914,224],{"class":204},[65,50916,49947],{"class":793},[65,50918,1862],{"class":168},[65,50920,1434],{"class":830},[65,50922,834],{"class":154},[65,50924,50862],{"class":214},[65,50926,834],{"class":154},[65,50928,50929],{"class":200},"observe",[65,50931,224],{"class":204},[65,50933,49947],{"class":214},[65,50935,11111],{"class":204},[65,50937,155],{"class":154},[65,50939,50940],{"class":140,"line":507},[65,50941,1171],{"class":154},[65,50943,50944],{"class":140,"line":519},[65,50945,162],{"emptyLinePlaceholder":161},[65,50947,50948,50951,50953,50955,50957],{"class":140,"line":531},[65,50949,50950],{"class":200}," inviewFadeIn",[65,50952,224],{"class":154},[65,50954,43583],{"class":793},[65,50956,235],{"class":154},[65,50958,418],{"class":154},[65,50960,50961,50964,50966,50968,50970,50973,50975],{"class":140,"line":543},[65,50962,50963],{"class":214}," entries",[65,50965,834],{"class":154},[65,50967,38987],{"class":200},[65,50969,224],{"class":204},[65,50971,50972],{"class":793},"entry",[65,50974,1862],{"class":168},[65,50976,418],{"class":154},[65,50978,50979,50981,50983,50985,50987,50990,50992],{"class":140,"line":555},[65,50980,17840],{"class":154},[65,50982,1696],{"class":204},[65,50984,50972],{"class":214},[65,50986,834],{"class":154},[65,50988,50989],{"class":214},"isIntersecting",[65,50991,1713],{"class":204},[65,50993,208],{"class":154},[65,50995,50996,50999,51001,51004,51006,51008,51010,51012,51014,51016,51018,51020,51022],{"class":140,"line":567},[65,50997,50998],{"class":214}," entry",[65,51000,834],{"class":154},[65,51002,51003],{"class":214},"target",[65,51005,834],{"class":154},[65,51007,39383],{"class":214},[65,51009,834],{"class":154},[65,51011,3962],{"class":200},[65,51013,224],{"class":204},[65,51015,306],{"class":154},[65,51017,50380],{"class":302},[65,51019,306],{"class":154},[65,51021,235],{"class":204},[65,51023,155],{"class":154},[65,51025,51026,51028,51030,51032,51034,51037,51039,51041,51043,51045,51047],{"class":140,"line":3757},[65,51027,20875],{"class":830},[65,51029,834],{"class":154},[65,51031,50862],{"class":214},[65,51033,834],{"class":154},[65,51035,51036],{"class":200},"unobserve",[65,51038,224],{"class":204},[65,51040,50972],{"class":214},[65,51042,834],{"class":154},[65,51044,51003],{"class":214},[65,51046,235],{"class":204},[65,51048,155],{"class":154},[65,51050,51051],{"class":140,"line":3787},[65,51052,6413],{"class":154},[65,51054,51055,51057,51059],{"class":140,"line":3792},[65,51056,6341],{"class":154},[65,51058,235],{"class":204},[65,51060,155],{"class":154},[65,51062,51063],{"class":140,"line":3814},[65,51064,1171],{"class":154},[65,51066,51067],{"class":140,"line":3823},[65,51068,243],{"class":154},[65,51070,51071],{"class":140,"line":3831},[65,51072,162],{"emptyLinePlaceholder":161},[65,51074,51075,51077,51080,51082,51084,51086,51088],{"class":140,"line":3841},[65,51076,1769],{"class":168},[65,51078,51079],{"class":144}," inview",[65,51081,218],{"class":168},[65,51083,1776],{"class":168},[65,51085,50703],{"class":200},[65,51087,1269],{"class":204},[65,51089,155],{"class":154},[15,51091,51092],{},"それでは、解説していきます。",[2418,51094,31079],{"id":31079},[15,51096,51097,51098,51100,51101,49067,51103,51106],{},"ここでは、クラス構文で書いているので、",[124,51099,31079],{},"では",[124,51102,38719],{},[124,51104,51105],{},"data-inview","属性を持つ要素を全て取得しています。",[15,51108,47915,51109,51112],{},[124,51110,51111],{},"IntersectionObserver","のオプションを下記のように設定しています。",[129,51114,51116],{"className":35286,"code":51115,"filename":35288,"language":35289,"meta":135,"style":135},"this.options = {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n}\n",[124,51117,51118,51130,51141,51156,51167],{"__ignoreMap":135},[65,51119,51120,51122,51124,51126,51128],{"class":140,"line":141},[65,51121,2004],{"class":830},[65,51123,834],{"class":154},[65,51125,24993],{"class":144},[65,51127,218],{"class":168},[65,51129,418],{"class":154},[65,51131,51132,51135,51137,51139],{"class":140,"line":158},[65,51133,51134],{"class":204}," root",[65,51136,797],{"class":154},[65,51138,20550],{"class":793},[65,51140,3820],{"class":154},[65,51142,51143,51146,51148,51150,51152,51154],{"class":140,"line":165},[65,51144,51145],{"class":204}," rootMargin",[65,51147,797],{"class":154},[65,51149,299],{"class":154},[65,51151,50802],{"class":302},[65,51153,306],{"class":154},[65,51155,3820],{"class":154},[65,51157,51158,51161,51163,51165],{"class":140,"line":180},[65,51159,51160],{"class":204}," threshold",[65,51162,797],{"class":154},[65,51164,5559],{"class":793},[65,51166,3820],{"class":154},[65,51168,51169],{"class":140,"line":194},[65,51170,243],{"class":154},[15,51172,51173,21197,51176,51178,51179,51181],{},[124,51174,51175],{},"root",[124,51177,51111],{},"の監視対象となる要素を指定します。ここでは、",[124,51180,29489],{},"を指定しているので、ビューポート全体を監視対象とします。",[15,51183,51184,51187,51188,51190,51191,51193,51194,51196],{},[124,51185,51186],{},"rootMargin","は、交差を検知する",[124,51189,51175],{},"からの距離になります。CSSの",[124,51192,38566],{},"プロパティに似た値を指定することができます。ここでは、",[124,51195,50802],{},"を指定しています。",[15,51198,51199,51202,51203,51206,51207,51209,51210,8078,51212,16198],{},[124,51200,51201],{},"threshold","は、監視対象の要素(",[124,51204,51205],{},".box",")が画面に入ったかどうかを判定するしきい値を設定します。ここでは、",[124,51208,5554],{},"を指定しているので、監視対象の要素が画面に50%以上入ったら、",[124,51211,50989],{},[124,51213,667],{},[15,51215,51216],{},[57,51217],{"alt":51218,"src":51219},"thresholdが0.5の場合","https://res.cloudinary.com/dy8ftemi0/image/upload/v1753027093/intersection-observer-fade-in-01_l7ppdi.jpg",[2418,51221,3193],{"id":3193},[15,51223,51224,51226,51227,51229],{},[124,51225,3193],{},"メソッドでは、",[124,51228,51111],{},"のインスタンスを生成しています。",[129,51231,51233],{"className":35286,"code":51232,"filename":35288,"language":35289,"meta":135,"style":135},"init() {\n // IntersectionObserverを作成し、画面内に入ったときのコールバックを設定\n this.observer = new IntersectionObserver(this.inviewFadeIn.bind(this), this.options);\n\n // 対象となる全要素を1つずつ監視対象にする\n this.els.forEach(el => this.observer.observe(el));\n} \n",[124,51234,51235,51243,51248,51292,51296,51301,51337],{"__ignoreMap":135},[65,51236,51237,51239,51241],{"class":140,"line":141},[65,51238,3193],{"class":200},[65,51240,205],{"class":204},[65,51242,208],{"class":154},[65,51244,51245],{"class":140,"line":158},[65,51246,51247],{"class":278}," // IntersectionObserverを作成し、画面内に入ったときのコールバックを設定\n",[65,51249,51250,51252,51254,51256,51258,51260,51262,51264,51266,51268,51270,51272,51274,51276,51278,51280,51282,51284,51286,51288,51290],{"class":140,"line":165},[65,51251,1720],{"class":830},[65,51253,834],{"class":154},[65,51255,50862],{"class":214},[65,51257,218],{"class":168},[65,51259,1776],{"class":168},[65,51261,50869],{"class":200},[65,51263,224],{"class":204},[65,51265,2004],{"class":830},[65,51267,834],{"class":154},[65,51269,50878],{"class":214},[65,51271,834],{"class":154},[65,51273,2226],{"class":200},[65,51275,224],{"class":204},[65,51277,2004],{"class":830},[65,51279,235],{"class":204},[65,51281,230],{"class":154},[65,51283,1434],{"class":830},[65,51285,834],{"class":154},[65,51287,24993],{"class":214},[65,51289,235],{"class":204},[65,51291,155],{"class":154},[65,51293,51294],{"class":140,"line":180},[65,51295,162],{"emptyLinePlaceholder":161},[65,51297,51298],{"class":140,"line":194},[65,51299,51300],{"class":278}," // 対象となる全要素を1つずつ監視対象にする\n",[65,51302,51303,51305,51307,51309,51311,51313,51315,51317,51319,51321,51323,51325,51327,51329,51331,51333,51335],{"class":140,"line":211},[65,51304,1720],{"class":830},[65,51306,834],{"class":154},[65,51308,50722],{"class":214},[65,51310,834],{"class":154},[65,51312,38987],{"class":200},[65,51314,224],{"class":204},[65,51316,49947],{"class":793},[65,51318,1862],{"class":168},[65,51320,1434],{"class":830},[65,51322,834],{"class":154},[65,51324,50862],{"class":214},[65,51326,834],{"class":154},[65,51328,50929],{"class":200},[65,51330,224],{"class":204},[65,51332,49947],{"class":214},[65,51334,11111],{"class":204},[65,51336,155],{"class":154},[65,51338,51339],{"class":140,"line":240},[65,51340,243],{"class":154},[15,51342,51343,51345],{},[124,51344,51111],{},"には、第1引数には画面内に入ったときのコールバック関数を、第2引数は先ほど設定したオプションを渡しています。",[15,51347,51348,51350],{},[124,51349,50929],{},"メソッドでは、対象となる全要素を1つずつ監視対象にしています。",[2418,51352,50878],{"id":51353},"inviewfadein",[15,51355,51356,51358],{},[124,51357,50878],{},"メソッドでは、画面内に入ったときのコールバック関数を設定しています。",[129,51360,51362],{"className":35286,"code":51361,"filename":35288,"language":35289,"meta":135,"style":135},"inviewFadeIn(entries) {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n this.observer.unobserve(entry.target);\n }\n });\n}\n",[124,51363,51364,51376,51393,51409,51438,51462,51466,51474],{"__ignoreMap":135},[65,51365,51366,51368,51370,51372,51374],{"class":140,"line":141},[65,51367,50878],{"class":200},[65,51369,224],{"class":204},[65,51371,43583],{"class":144},[65,51373,1713],{"class":204},[65,51375,208],{"class":154},[65,51377,51378,51381,51383,51385,51387,51389,51391],{"class":140,"line":158},[65,51379,51380],{"class":214}," entries",[65,51382,834],{"class":154},[65,51384,38987],{"class":200},[65,51386,224],{"class":204},[65,51388,50972],{"class":793},[65,51390,1862],{"class":168},[65,51392,418],{"class":154},[65,51394,51395,51397,51399,51401,51403,51405,51407],{"class":140,"line":165},[65,51396,3105],{"class":154},[65,51398,1696],{"class":204},[65,51400,50972],{"class":214},[65,51402,834],{"class":154},[65,51404,50989],{"class":214},[65,51406,1713],{"class":204},[65,51408,208],{"class":154},[65,51410,51411,51414,51416,51418,51420,51422,51424,51426,51428,51430,51432,51434,51436],{"class":140,"line":180},[65,51412,51413],{"class":214}," entry",[65,51415,834],{"class":154},[65,51417,51003],{"class":214},[65,51419,834],{"class":154},[65,51421,39383],{"class":214},[65,51423,834],{"class":154},[65,51425,3962],{"class":200},[65,51427,224],{"class":204},[65,51429,306],{"class":154},[65,51431,50380],{"class":302},[65,51433,306],{"class":154},[65,51435,235],{"class":204},[65,51437,155],{"class":154},[65,51439,51440,51442,51444,51446,51448,51450,51452,51454,51456,51458,51460],{"class":140,"line":194},[65,51441,20954],{"class":830},[65,51443,834],{"class":154},[65,51445,50862],{"class":214},[65,51447,834],{"class":154},[65,51449,51036],{"class":200},[65,51451,224],{"class":204},[65,51453,50972],{"class":214},[65,51455,834],{"class":154},[65,51457,51003],{"class":214},[65,51459,235],{"class":204},[65,51461,155],{"class":154},[65,51463,51464],{"class":140,"line":211},[65,51465,3204],{"class":154},[65,51467,51468,51470,51472],{"class":140,"line":240},[65,51469,1977],{"class":154},[65,51471,235],{"class":204},[65,51473,155],{"class":154},[65,51475,51476],{"class":140,"line":391},[65,51477,243],{"class":154},[15,51479,51480,51482,51483,51485],{},[124,51481,43583],{},"は、監視対象の要素が画面に入ったかどうかを判定するオブジェクトの配列です。複数の監視対象があるため、画面に入った/出た要素ごとに1つずつ",[124,51484,50972],{},"が入っています。",[15,51487,51488,8078,51491,51493,51494,51496],{},[124,51489,51490],{},"entry.isIntersecting",[124,51492,667],{},"の場合は、画面内に入ったと判定されます。その場合に、",[124,51495,50380],{},"クラスを付与することでフェードインアニメーションが実行されます。",[15,51498,51499,51500,51502,51503,51506],{},"そして、",[124,51501,51036],{},"メソッドでは、一度アニメーションを発火させた要素は、監視対象から削除します。これにより、「一度だけアニメーションを実行」することになります。無駄な再検出を防げるため、",[34759,51504,51505],{},"パフォーマンスを向上","させることができます。",[2418,51508,51510],{"id":51509},"補足繰り返しアニメーションさせたい場合","補足：繰り返しアニメーションさせたい場合",[15,51512,51513,51514,51516],{},"もし繰り返しスクロール連動でアニメーションさせたい場合は、画面外に出たら",[124,51515,50380],{},"クラスを削除するようにします。",[129,51518,51520],{"className":35286,"code":51519,"filename":35288,"language":35289,"meta":135,"style":135},"inviewFadeIn(entries) {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n } else {\n entry.target.classList.remove('is-visible');\n }\n });\n}\n",[124,51521,51522,51534,51550,51566,51594,51602,51630,51634,51642],{"__ignoreMap":135},[65,51523,51524,51526,51528,51530,51532],{"class":140,"line":141},[65,51525,50878],{"class":200},[65,51527,224],{"class":204},[65,51529,43583],{"class":144},[65,51531,1713],{"class":204},[65,51533,208],{"class":154},[65,51535,51536,51538,51540,51542,51544,51546,51548],{"class":140,"line":158},[65,51537,51380],{"class":214},[65,51539,834],{"class":154},[65,51541,38987],{"class":200},[65,51543,224],{"class":204},[65,51545,50972],{"class":793},[65,51547,1862],{"class":168},[65,51549,418],{"class":154},[65,51551,51552,51554,51556,51558,51560,51562,51564],{"class":140,"line":165},[65,51553,3105],{"class":154},[65,51555,1696],{"class":204},[65,51557,50972],{"class":214},[65,51559,834],{"class":154},[65,51561,50989],{"class":214},[65,51563,1713],{"class":204},[65,51565,208],{"class":154},[65,51567,51568,51570,51572,51574,51576,51578,51580,51582,51584,51586,51588,51590,51592],{"class":140,"line":180},[65,51569,51413],{"class":214},[65,51571,834],{"class":154},[65,51573,51003],{"class":214},[65,51575,834],{"class":154},[65,51577,39383],{"class":214},[65,51579,834],{"class":154},[65,51581,3962],{"class":200},[65,51583,224],{"class":204},[65,51585,306],{"class":154},[65,51587,50380],{"class":302},[65,51589,306],{"class":154},[65,51591,235],{"class":204},[65,51593,155],{"class":154},[65,51595,51596,51598,51600],{"class":140,"line":194},[65,51597,6341],{"class":154},[65,51599,2115],{"class":154},[65,51601,418],{"class":154},[65,51603,51604,51606,51608,51610,51612,51614,51616,51618,51620,51622,51624,51626,51628],{"class":140,"line":211},[65,51605,51413],{"class":214},[65,51607,834],{"class":154},[65,51609,51003],{"class":214},[65,51611,834],{"class":154},[65,51613,39383],{"class":214},[65,51615,834],{"class":154},[65,51617,28529],{"class":200},[65,51619,224],{"class":204},[65,51621,306],{"class":154},[65,51623,50380],{"class":302},[65,51625,306],{"class":154},[65,51627,235],{"class":204},[65,51629,155],{"class":154},[65,51631,51632],{"class":140,"line":240},[65,51633,3204],{"class":154},[65,51635,51636,51638,51640],{"class":140,"line":391},[65,51637,1977],{"class":154},[65,51639,235],{"class":204},[65,51641,155],{"class":154},[65,51643,51644],{"class":140,"line":401},[65,51645,243],{"class":154},[15,51647,51648],{},"以上で、Intersection Observer APIを使ったフェードインアニメーションの実装方法を解説しました！",[11,51650,51652],{"id":51651},"その他のintersection-observer-apiの使い方","その他のIntersection Observer APIの使い方",[15,51654,51655],{},"この記事ではIntersection Observer APIを使ってフェードインアニメーションの実装方法を紹介しましたが、その他にもIntersection Observer APIを使った使い方はたくさんあります。下記はIntersection Observer APIを使った使い方の一部です。",[35274,51657],{":list":51658,"title":51652},"[\"ブログ記事などで、記事の表示中のコンテンツに合わせて目次を強調する。\",\"要素が画面に入ってからの画像などの遅延読み込み。\",\"「無限スクロール」などの、スクロールに従ってコンテンツを次々と表示する。\"]",[15,51660,51661],{},"このサイトでも紹介する機会があれば紹介していきます！",[11,51663,5299],{"id":5299},[15,51665,51666],{},"Intersection Observer APIを使ったフェードインアニメーションの実装方法を解説しました。標準のJavaScriptで実装できるため、ライブラリを使わなくても実装できることが理解できたかと思います。",[15,51668,51669],{},"同様のフェードインアニメーションをGSAP・ScrollTriggerを使った実装方法は下記の記事で紹介しているので、違いを知りたい方はぜひご覧ください。",[19,51671],{":items":51672},"[{\"title\":\"スクロールで要素が入ったらふわっと表示（フェードイン）\",\"link\":\"/animation/visual/scroll/scroll-fadein\",\"image\":\"/images/animation/scroll-fadein.jpg\",\"description\":\"GSAP・ScrollTriggerを使用して、スクロールで要素が入ったらふわっと表示するアニメーションの実装方法を解説します。\"}]",[11,51674,35214],{"id":35214},[89,51676,51677,51684],{},[92,51678,51679],{},[29,51680,51683],{"href":51681,"rel":51682,"target":3049},"https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API",[3048],"交差オブザーバー API - MDN",[92,51685,51686],{},[29,51687,51690],{"href":51688,"rel":51689,"target":3049},"https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver",[3048],"IntersectionObserver - MDN",[5313,51692,51693],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .stCc5, html code.shiki .stCc5{--shiki-default:#FFCB6B;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s9qRY, html code.shiki .s9qRY{--shiki-default:#FF5370;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}",{"title":135,"searchDepth":165,"depth":165,"links":51695},[51696,51697,51700,51710,51711,51712],{"id":13,"depth":158,"text":13},{"id":50343,"depth":158,"text":50344,"children":51698},[51699],{"id":50357,"depth":165,"text":50357},{"id":50373,"depth":158,"text":50374,"children":51701},[51702,51703,51704],{"id":34821,"depth":165,"text":34822},{"id":34984,"depth":165,"text":34985},{"id":38599,"depth":165,"text":35288,"children":51705},[51706,51707,51708,51709],{"id":31079,"depth":180,"text":31079},{"id":3193,"depth":180,"text":3193},{"id":51353,"depth":180,"text":50878},{"id":51509,"depth":180,"text":51510},{"id":51651,"depth":158,"text":51652},{"id":5299,"depth":158,"text":5299},{"id":35214,"depth":158,"text":35214},"2025-07-23T00:00:00.000Z","JavaScriptのIntersection Observer APIを利用してフェードインアニメーションを実装する方法を解説します。従来のフェードインアニメーションとIntersection Observer APIを使った利点などを解説します。","/images/blog/intersection-observer-fade-in.jpg",{},"/blog/intersection-observer-fade-in",{"title":50327,"description":51714},"blog/intersection-observer-fade-in",[51721,51722,51723],"Intersection Observer APIの使用方法","Intersection Observer APIを利用したフェードインアニメーション","複数の要素に対応したアニメーション",[35288],"kqjULHZvBgNAXtRMTZkOno4LGnKUP8squgh3GmLMLJc",{"id":51727,"title":51728,"body":51729,"date":53689,"description":53690,"draft":5339,"extension":5340,"image":53691,"meta":53692,"navigation":161,"path":53693,"seo":53694,"stem":53695,"summaryList":53696,"summaryText":5348,"tags":53699,"__hash__":53701},"blog/blog/scrolltrigger-inview-image-clip-path.md","GSAPのScrollTriggerとclip-pathを使って要素が見えたら画像をかっこよく出現させるアニメーション",{"type":8,"value":51730,"toc":53672},[51731,51733,51736,51738,51741,51744,51748,51752,51755,51758,51760,51774,51776,51779,51893,51914,51916,51932,51959,51961,51971,52174,52188,52197,52202,52306,52341,52345,52681,52694,52722,52736,52739,52743,52747,52756,52759,52761,52858,52864,52867,52870,53309,53327,53344,53347,53350,53658,53664,53666,53669],[11,51732,13],{"id":13},[15,51734,51735],{},"GSAPのScrollTriggerとclip-pathを使って要素が見えたら画像がぬるっとフェードしながら出現させるアニメーションの実装方法を紹介します。クラス構文とdata属性を使って実装しているので汎用的に使えると思いますので、ぜひ参考にしてみてください。",[1177,51737,37659],{"id":37659},[15,51739,51740],{},"この記事で使用しているGSAPのバージョンは以下の通りです。",[37664,51742],{":libs":51743},"[{\"icon\":{\"name\":\"twemoji:four-leaf-clover\"},\"name\":\"GSAP\",\"version\":\"3.13.0\"}]",[11,51745,51747],{"id":51746},"デモ1-clip-pathを利用して画像が出現する方法","デモ1 - clip-pathを利用して画像が出現する方法",[34815,51749],{"id":51750,"title":51751},"EaVPaPg","Scrolltrigger Inview Image Clip Path01",[15,51753,51754],{},"アニメーションを再度見たい場合はリロードしてみてください。",[20229,51756],{"backgroundColor":35187,"text":51757},"デモでは、慣性スクロールライブラリーのLenisを使用してますが、解説は省略してますので気になる方はCodePenのコードをご覧ください。",[1177,51759,81],{"id":81},[15,51761,51762,51763,51766,51767,51770,51771,51773],{},"初期状態では、画像を",[124,51764,51765],{},"clip-path","で非表示にし、画像を縮小して表示されるようにしたいので、",[124,51768,51769],{},"scale","で画像を大きくしておきます。また、",[124,51772,9164],{},"属性を利用して、上下左右から出現するようにします。",[1177,51775,34822],{"id":34821},[15,51777,51778],{},"HTMLは以下のようになります。",[129,51780,51782],{"className":34828,"code":51781,"filename":34822,"language":34821,"meta":135,"style":135},"// 左から出現する場合\n\u003Cdiv class=\"content\" data-inview=\"left\">\n \u003Cdiv class=\"content__empty\">\u003C/div>\n \u003Cdiv class=\"content__image\">\u003Cimg src=\"https://picsum.photos/300/300?random=0\" alt=\"\">\u003C/div>\n\u003C/div>\n",[124,51783,51784,51789,51818,51841,51885],{"__ignoreMap":135},[65,51785,51786],{"class":140,"line":141},[65,51787,51788],{"class":204},"// 左から出現する場合\n",[65,51790,51791,51793,51795,51797,51799,51801,51804,51806,51808,51810,51812,51814,51816],{"class":140,"line":158},[65,51792,1830],{"class":154},[65,51794,36],{"class":214},[65,51796,774],{"class":34851},[65,51798,6252],{"class":154},[65,51800,34857],{"class":154},[65,51802,51803],{"class":302},"content",[65,51805,34857],{"class":154},[65,51807,50417],{"class":34851},[65,51809,6252],{"class":154},[65,51811,34857],{"class":154},[65,51813,24730],{"class":302},[65,51815,34857],{"class":154},[65,51817,34841],{"class":154},[65,51819,51820,51822,51824,51826,51828,51830,51833,51835,51837,51839],{"class":140,"line":165},[65,51821,34846],{"class":154},[65,51823,36],{"class":214},[65,51825,774],{"class":34851},[65,51827,6252],{"class":154},[65,51829,34857],{"class":154},[65,51831,51832],{"class":302},"content__empty",[65,51834,34857],{"class":154},[65,51836,37918],{"class":154},[65,51838,36],{"class":214},[65,51840,34841],{"class":154},[65,51842,51843,51845,51847,51849,51851,51853,51856,51858,51860,51862,51864,51866,51868,51871,51873,51875,51877,51879,51881,51883],{"class":140,"line":180},[65,51844,34846],{"class":154},[65,51846,36],{"class":214},[65,51848,774],{"class":34851},[65,51850,6252],{"class":154},[65,51852,34857],{"class":154},[65,51854,51855],{"class":302},"content__image",[65,51857,34857],{"class":154},[65,51859,50509],{"class":154},[65,51861,57],{"class":214},[65,51863,1916],{"class":34851},[65,51865,6252],{"class":154},[65,51867,34857],{"class":154},[65,51869,51870],{"class":302},"https://picsum.photos/300/300?random=0",[65,51872,34857],{"class":154},[65,51874,37786],{"class":34851},[65,51876,6252],{"class":154},[65,51878,37764],{"class":154},[65,51880,37918],{"class":154},[65,51882,36],{"class":214},[65,51884,34841],{"class":154},[65,51886,51887,51889,51891],{"class":140,"line":194},[65,51888,34881],{"class":154},[65,51890,36],{"class":214},[65,51892,34841],{"class":154},[15,51894,51895,51897,51898,51901,51902,51904,51905,13737,51907,13737,51909,13737,51911,51913],{},[124,51896,51765],{},"で非表示にする要素は、",[124,51899,51900],{},"contnet","クラスとし、",[124,51903,51105],{},"属性を付与します。表示する方向としては、",[124,51906,24730],{},[124,51908,24745],{},[124,51910,24775],{},[124,51912,24760],{},"の4つを用意します。",[1177,51915,34985],{"id":34984},[15,51917,51918,51919,51921,51922,51925,51926,51928,51929,51931],{},"全てのコードはCodePenを参考にしてください。",[5467,51920],{},"\n最初の非表示の状態は、GSAPの",[124,51923,51924],{},"set()","を使用します。初期状態で画像を",[124,51927,51769],{},"で大きくするので、画像が要素からはみ出してしまうので、",[124,51930,37458],{},"を指定するのを忘れないようにしてください。",[129,51933,51935],{"className":34988,"code":51934,"filename":34985,"language":34984,"meta":135,"style":135},".content__image {\n overflow: hidden;\n}\n",[124,51936,51937,51945,51955],{"__ignoreMap":135},[65,51938,51939,51941,51943],{"class":140,"line":141},[65,51940,834],{"class":154},[65,51942,51855],{"class":326},[65,51944,418],{"class":154},[65,51946,51947,51949,51951,51953],{"class":140,"line":158},[65,51948,37481],{"class":340},[65,51950,797],{"class":154},[65,51952,37486],{"class":793},[65,51954,155],{"class":154},[65,51956,51957],{"class":140,"line":165},[65,51958,243],{"class":154},[1177,51960,35288],{"id":38599},[15,51962,51963,51964,51966,51967,51970],{},"JavaScriptは、クラス構文で実装していきます。",[5467,51965],{},"\nまずは、",[124,51968,51969],{},"constructor()","を見ていきます。",[129,51972,51974],{"className":35286,"code":51973,"filename":35288,"language":35289,"meta":135,"style":135},"class Inview {\n constructor() {\n this.els = document.querySelectorAll('[data-inview]');\n if (!this.els.length) return;\n\n this.clipPathStart = {\n left: 'polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)',\n right: 'polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)',\n top: 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)',\n bottom: 'polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)',\n };\n\n this.clipPathEnd = 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)';\n\n this.init();\n }\n}\n",[124,51975,51976,51984,51992,52020,52040,52044,52057,52073,52089,52105,52121,52126,52130,52150,52154,52166,52170],{"__ignoreMap":135},[65,51977,51978,51980,51982],{"class":140,"line":141},[65,51979,38615],{"class":168},[65,51981,50703],{"class":326},[65,51983,418],{"class":154},[65,51985,51986,51988,51990],{"class":140,"line":158},[65,51987,788],{"class":168},[65,51989,1269],{"class":154},[65,51991,418],{"class":154},[65,51993,51994,51996,51998,52000,52002,52004,52006,52008,52010,52012,52014,52016,52018],{"class":140,"line":165},[65,51995,831],{"class":830},[65,51997,834],{"class":154},[65,51999,50722],{"class":214},[65,52001,218],{"class":168},[65,52003,3413],{"class":214},[65,52005,834],{"class":154},[65,52007,38719],{"class":200},[65,52009,224],{"class":204},[65,52011,306],{"class":154},[65,52013,50737],{"class":302},[65,52015,306],{"class":154},[65,52017,235],{"class":204},[65,52019,155],{"class":154},[65,52021,52022,52024,52026,52028,52030,52032,52034,52036,52038],{"class":140,"line":180},[65,52023,3105],{"class":154},[65,52025,1696],{"class":204},[65,52027,2264],{"class":168},[65,52029,2004],{"class":830},[65,52031,834],{"class":154},[65,52033,50722],{"class":214},[65,52035,834],{"class":154},[65,52037,32495],{"class":204},[65,52039,2287],{"class":154},[65,52041,52042],{"class":140,"line":194},[65,52043,162],{"emptyLinePlaceholder":161},[65,52045,52046,52048,52050,52053,52055],{"class":140,"line":211},[65,52047,831],{"class":830},[65,52049,834],{"class":154},[65,52051,52052],{"class":214},"clipPathStart",[65,52054,218],{"class":168},[65,52056,418],{"class":154},[65,52058,52059,52062,52064,52066,52069,52071],{"class":140,"line":240},[65,52060,52061],{"class":204}," left",[65,52063,797],{"class":154},[65,52065,299],{"class":154},[65,52067,52068],{"class":302},"polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)",[65,52070,306],{"class":154},[65,52072,3820],{"class":154},[65,52074,52075,52078,52080,52082,52085,52087],{"class":140,"line":391},[65,52076,52077],{"class":204}," right",[65,52079,797],{"class":154},[65,52081,299],{"class":154},[65,52083,52084],{"class":302},"polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",[65,52086,306],{"class":154},[65,52088,3820],{"class":154},[65,52090,52091,52094,52096,52098,52101,52103],{"class":140,"line":401},[65,52092,52093],{"class":204}," top",[65,52095,797],{"class":154},[65,52097,299],{"class":154},[65,52099,52100],{"class":302},"polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",[65,52102,306],{"class":154},[65,52104,3820],{"class":154},[65,52106,52107,52110,52112,52114,52117,52119],{"class":140,"line":406},[65,52108,52109],{"class":204}," bottom",[65,52111,797],{"class":154},[65,52113,299],{"class":154},[65,52115,52116],{"class":302},"polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)",[65,52118,306],{"class":154},[65,52120,3820],{"class":154},[65,52122,52123],{"class":140,"line":421},[65,52124,52125],{"class":154}," };\n",[65,52127,52128],{"class":140,"line":435},[65,52129,162],{"emptyLinePlaceholder":161},[65,52131,52132,52134,52136,52139,52141,52143,52146,52148],{"class":140,"line":447},[65,52133,831],{"class":830},[65,52135,834],{"class":154},[65,52137,52138],{"class":214},"clipPathEnd",[65,52140,218],{"class":168},[65,52142,299],{"class":154},[65,52144,52145],{"class":302},"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",[65,52147,306],{"class":154},[65,52149,155],{"class":154},[65,52151,52152],{"class":140,"line":459},[65,52153,162],{"emptyLinePlaceholder":161},[65,52155,52156,52158,52160,52162,52164],{"class":140,"line":471},[65,52157,831],{"class":830},[65,52159,834],{"class":154},[65,52161,3193],{"class":200},[65,52163,1269],{"class":204},[65,52165,155],{"class":154},[65,52167,52168],{"class":140,"line":63},[65,52169,1171],{"class":154},[65,52171,52172],{"class":140,"line":495},[65,52173,243],{"class":154},[15,52175,52176,52177,49067,52179,52181,52182,52184,52185,52187],{},"複数の要素に対応するため、",[124,52178,38719],{},[124,52180,51105],{},"の要素を全て取得しています。clip-pathで上下左右から出現させるために、",[124,52183,52052],{},"を用意しています。また、",[124,52186,52138],{},"は最終的に表示するclip-pathを指定します。",[15,52189,52190,52191,52196],{},"clip-pathの値は、",[29,52192,52195],{"href":52193,"rel":52194,"target":3049},"https://bennettfeely.com/clippy/",[3048],"このサイト","で確認できるので、実際に値を確かめてみてください。",[15,52198,2423,52199,51970],{},[124,52200,52201],{},"init()",[129,52203,52205],{"className":35286,"code":52204,"filename":35288,"language":35289,"meta":135,"style":135},"class Inview {\n // ...\n init() {\n this.els.forEach(el => {\n const direction = el.dataset.inview;\n this.inviewClipSlide(el, direction);\n })\n }\n}\n",[124,52206,52207,52215,52219,52227,52247,52271,52292,52298,52302],{"__ignoreMap":135},[65,52208,52209,52211,52213],{"class":140,"line":141},[65,52210,38615],{"class":168},[65,52212,50703],{"class":326},[65,52214,418],{"class":154},[65,52216,52217],{"class":140,"line":158},[65,52218,783],{"class":278},[65,52220,52221,52223,52225],{"class":140,"line":165},[65,52222,38697],{"class":200},[65,52224,1269],{"class":154},[65,52226,418],{"class":154},[65,52228,52229,52231,52233,52235,52237,52239,52241,52243,52245],{"class":140,"line":180},[65,52230,831],{"class":830},[65,52232,834],{"class":154},[65,52234,50722],{"class":214},[65,52236,834],{"class":154},[65,52238,38987],{"class":200},[65,52240,224],{"class":204},[65,52242,49947],{"class":793},[65,52244,1862],{"class":168},[65,52246,418],{"class":154},[65,52248,52249,52251,52254,52256,52259,52261,52264,52266,52269],{"class":140,"line":194},[65,52250,6028],{"class":168},[65,52252,52253],{"class":214}," direction",[65,52255,218],{"class":168},[65,52257,52258],{"class":214}," el",[65,52260,834],{"class":154},[65,52262,52263],{"class":214},"dataset",[65,52265,834],{"class":154},[65,52267,52268],{"class":214},"inview",[65,52270,155],{"class":154},[65,52272,52273,52275,52277,52280,52282,52284,52286,52288,52290],{"class":140,"line":211},[65,52274,20954],{"class":830},[65,52276,834],{"class":154},[65,52278,52279],{"class":200},"inviewClipSlide",[65,52281,224],{"class":204},[65,52283,49947],{"class":214},[65,52285,230],{"class":154},[65,52287,52253],{"class":214},[65,52289,235],{"class":204},[65,52291,155],{"class":154},[65,52293,52294,52296],{"class":140,"line":240},[65,52295,6341],{"class":154},[65,52297,12359],{"class":204},[65,52299,52300],{"class":140,"line":391},[65,52301,1171],{"class":154},[65,52303,52304],{"class":140,"line":401},[65,52305,243],{"class":154},[15,52307,52308,49586,52310,52312,52313,52315,52316,52319,52320,52322,52325,52326,52328,52329,13737,52331,13737,52333,13737,52335,52337,52338,52340],{},[124,52309,52201],{},[124,52311,51105],{},"の要素を",[124,52314,38987],{},"で全て",[124,52317,52318],{},"inviewClipSlide()","に渡しています。",[5467,52321],{},[124,52323,52324],{},"direction","変数は、",[124,52327,51105],{},"の値(",[124,52330,24730],{},[124,52332,24745],{},[124,52334,24775],{},[124,52336,24760],{},")を取得して、",[124,52339,52318],{},"の第2引数に渡しています。",[15,52342,2423,52343,51970],{},[124,52344,52318],{},[129,52346,52348],{"className":35286,"code":52347,"filename":35288,"language":35289,"meta":135,"style":135},"class Inview {\n // ...\n inviewClipSlide(el, direction = 'left') {\n if (!this.clipPathStart[direction]) return;\n\n const img = el.querySelector('img');\n\n // 初期状態の設定\n gsap.set(img, {\n clipPath: this.clipPathStart[direction],\n scale: 1.2\n });\n\n // スクロールして要素が見えたらアニメーションを実行\n gsap.to(el, {\n scrollTrigger: {\n trigger: el,\n start: \"top 60%\",\n onEnter: () => {\n gsap.to(img, {\n clipPath: this.clipPathEnd,\n scale: 1,\n duration: 1.5,\n ease: 'power2.out',\n });\n }\n }\n })\n }\n}\n",[124,52349,52350,52358,52362,52387,52410,52414,52440,52444,52449,52465,52486,52496,52504,52508,52513,52530,52539,52550,52566,52579,52596,52611,52622,52633,52649,52658,52663,52667,52673,52677],{"__ignoreMap":135},[65,52351,52352,52354,52356],{"class":140,"line":141},[65,52353,38615],{"class":168},[65,52355,50703],{"class":326},[65,52357,418],{"class":154},[65,52359,52360],{"class":140,"line":158},[65,52361,783],{"class":278},[65,52363,52364,52367,52369,52371,52373,52375,52377,52379,52381,52383,52385],{"class":140,"line":165},[65,52365,52366],{"class":200}," inviewClipSlide",[65,52368,224],{"class":154},[65,52370,49947],{"class":793},[65,52372,230],{"class":154},[65,52374,52253],{"class":793},[65,52376,218],{"class":168},[65,52378,299],{"class":154},[65,52380,24730],{"class":302},[65,52382,306],{"class":154},[65,52384,235],{"class":154},[65,52386,418],{"class":154},[65,52388,52389,52391,52393,52395,52397,52399,52401,52403,52405,52408],{"class":140,"line":180},[65,52390,3105],{"class":154},[65,52392,1696],{"class":204},[65,52394,2264],{"class":168},[65,52396,2004],{"class":830},[65,52398,834],{"class":154},[65,52400,52052],{"class":214},[65,52402,6243],{"class":204},[65,52404,52324],{"class":214},[65,52406,52407],{"class":204},"]) ",[65,52409,2287],{"class":154},[65,52411,52412],{"class":140,"line":194},[65,52413,162],{"emptyLinePlaceholder":161},[65,52415,52416,52418,52420,52422,52424,52426,52428,52430,52432,52434,52436,52438],{"class":140,"line":211},[65,52417,848],{"class":168},[65,52419,1871],{"class":214},[65,52421,218],{"class":168},[65,52423,52258],{"class":214},[65,52425,834],{"class":154},[65,52427,35825],{"class":200},[65,52429,224],{"class":204},[65,52431,306],{"class":154},[65,52433,57],{"class":302},[65,52435,306],{"class":154},[65,52437,235],{"class":204},[65,52439,155],{"class":154},[65,52441,52442],{"class":140,"line":240},[65,52443,162],{"emptyLinePlaceholder":161},[65,52445,52446],{"class":140,"line":391},[65,52447,52448],{"class":278}," // 初期状態の設定\n",[65,52450,52451,52453,52455,52457,52459,52461,52463],{"class":140,"line":401},[65,52452,50092],{"class":214},[65,52454,834],{"class":154},[65,52456,3615],{"class":200},[65,52458,224],{"class":204},[65,52460,57],{"class":214},[65,52462,230],{"class":154},[65,52464,418],{"class":154},[65,52466,52467,52470,52472,52474,52476,52478,52480,52482,52484],{"class":140,"line":406},[65,52468,52469],{"class":204}," clipPath",[65,52471,797],{"class":154},[65,52473,1434],{"class":830},[65,52475,834],{"class":154},[65,52477,52052],{"class":214},[65,52479,6243],{"class":204},[65,52481,52324],{"class":214},[65,52483,6106],{"class":204},[65,52485,3820],{"class":154},[65,52487,52488,52491,52493],{"class":140,"line":421},[65,52489,52490],{"class":204}," scale",[65,52492,797],{"class":154},[65,52494,52495],{"class":793}," 1.2\n",[65,52497,52498,52500,52502],{"class":140,"line":435},[65,52499,6341],{"class":154},[65,52501,235],{"class":204},[65,52503,155],{"class":154},[65,52505,52506],{"class":140,"line":447},[65,52507,162],{"emptyLinePlaceholder":161},[65,52509,52510],{"class":140,"line":459},[65,52511,52512],{"class":278}," // スクロールして要素が見えたらアニメーションを実行\n",[65,52514,52515,52517,52519,52522,52524,52526,52528],{"class":140,"line":471},[65,52516,50092],{"class":214},[65,52518,834],{"class":154},[65,52520,52521],{"class":200},"to",[65,52523,224],{"class":204},[65,52525,49947],{"class":214},[65,52527,230],{"class":154},[65,52529,418],{"class":154},[65,52531,52532,52535,52537],{"class":140,"line":63},[65,52533,52534],{"class":204}," scrollTrigger",[65,52536,797],{"class":154},[65,52538,418],{"class":154},[65,52540,52541,52544,52546,52548],{"class":140,"line":495},[65,52542,52543],{"class":204}," trigger",[65,52545,797],{"class":154},[65,52547,52258],{"class":214},[65,52549,3820],{"class":154},[65,52551,52552,52555,52557,52559,52562,52564],{"class":140,"line":507},[65,52553,52554],{"class":204}," start",[65,52556,797],{"class":154},[65,52558,35344],{"class":154},[65,52560,52561],{"class":302},"top 60%",[65,52563,34857],{"class":154},[65,52565,3820],{"class":154},[65,52567,52568,52571,52573,52575,52577],{"class":140,"line":519},[65,52569,52570],{"class":200}," onEnter",[65,52572,797],{"class":154},[65,52574,1932],{"class":154},[65,52576,1862],{"class":168},[65,52578,418],{"class":154},[65,52580,52581,52584,52586,52588,52590,52592,52594],{"class":140,"line":531},[65,52582,52583],{"class":214}," gsap",[65,52585,834],{"class":154},[65,52587,52521],{"class":200},[65,52589,224],{"class":204},[65,52591,57],{"class":214},[65,52593,230],{"class":154},[65,52595,418],{"class":154},[65,52597,52598,52601,52603,52605,52607,52609],{"class":140,"line":543},[65,52599,52600],{"class":204}," clipPath",[65,52602,797],{"class":154},[65,52604,1434],{"class":830},[65,52606,834],{"class":154},[65,52608,52138],{"class":214},[65,52610,3820],{"class":154},[65,52612,52613,52616,52618,52620],{"class":140,"line":555},[65,52614,52615],{"class":204}," scale",[65,52617,797],{"class":154},[65,52619,3137],{"class":793},[65,52621,3820],{"class":154},[65,52623,52624,52627,52629,52631],{"class":140,"line":567},[65,52625,52626],{"class":204}," duration",[65,52628,797],{"class":154},[65,52630,4005],{"class":793},[65,52632,3820],{"class":154},[65,52634,52635,52638,52640,52642,52645,52647],{"class":140,"line":3757},[65,52636,52637],{"class":204}," ease",[65,52639,797],{"class":154},[65,52641,299],{"class":154},[65,52643,52644],{"class":302},"power2.out",[65,52646,306],{"class":154},[65,52648,3820],{"class":154},[65,52650,52651,52654,52656],{"class":140,"line":3787},[65,52652,52653],{"class":154}," }",[65,52655,235],{"class":204},[65,52657,155],{"class":154},[65,52659,52660],{"class":140,"line":3792},[65,52661,52662],{"class":154}," }\n",[65,52664,52665],{"class":140,"line":3814},[65,52666,6413],{"class":154},[65,52668,52669,52671],{"class":140,"line":3823},[65,52670,6341],{"class":154},[65,52672,12359],{"class":204},[65,52674,52675],{"class":140,"line":3831},[65,52676,1171],{"class":154},[65,52678,52679],{"class":140,"line":3841},[65,52680,243],{"class":154},[15,52682,52683,49586,52685,52687,52688,52690,52691,52693],{},[124,52684,52318],{},[124,52686,52324],{},"の初期値は",[124,52689,24730],{},"にしているので、HTMLで",[124,52692,51105],{},"の値がないときは、左から出現します。",[15,52695,52696,52697,52700,52701,2765,52704,52706,52707,21197,52710,52712,52713,13737,52715,13737,52717,13737,52719,52721],{},"初期状態は",[124,52698,52699],{},"gsap.set()","で画像に対して、",[124,52702,52703],{},"clipPath",[124,52705,51769],{},"を設定しています。",[124,52708,52709],{},"this.clipPathStart[direction]",[124,52711,52324],{},"の値に応じて、先ほど定義した",[124,52714,24730],{},[124,52716,24745],{},[124,52718,24775],{},[124,52720,24760],{},"の値を取得しています。",[15,52723,52724,52725,49070,52728,52731,52732,52735],{},"スクロールして要素が見えたらアニメーションを実行するので、",[124,52726,52727],{},"scrollTrigger",[124,52729,52730],{},"onEnter","で、",[124,52733,52734],{},"gsap.to()","でアニメーションを実行しています。",[15,52737,52738],{},"これで、要素が見えたら画像がぬるっとフェードしながら出現するアニメーションが実装できました！",[11,52740,52742],{"id":52741},"デモ2-黒い帯が出現してから画像が表示する方法","デモ2 - 黒い帯が出現してから画像が表示する方法",[34815,52744],{"id":52745,"title":52746},"JoYGoGW","Scrolltrigger Inview Image Clip Path02",[15,52748,52749,52750,52752,52753,52755],{},"2つ目のデモは、黒い帯が出現してから左からだけ画像が表示されるアニメーションです。",[5467,52751],{},"\nこのデモでは、GSAPではアニメーションさせずにScrollTriggerで要素が入ったら、",[124,52754,50380],{},"クラスを付与してCSSでアニメーションを実装します。",[1177,52757,34822],{"id":52758},"html-1",[15,52760,51778],{},[129,52762,52764],{"className":34828,"code":52763,"filename":34822,"language":34821,"meta":135,"style":135},"\u003Cdiv class=\"content\" data-inview>\n \u003Cdiv class=\"content__empty\">\u003C/div>\n \u003Cdiv class=\"content__image\">\u003Cimg src=\"https://picsum.photos/300/300?random=0\" alt=\"\">\u003C/div>\n\u003C/div>\n",[124,52765,52766,52786,52808,52850],{"__ignoreMap":135},[65,52767,52768,52770,52772,52774,52776,52778,52780,52782,52784],{"class":140,"line":141},[65,52769,1830],{"class":154},[65,52771,36],{"class":214},[65,52773,774],{"class":34851},[65,52775,6252],{"class":154},[65,52777,34857],{"class":154},[65,52779,51803],{"class":302},[65,52781,34857],{"class":154},[65,52783,50417],{"class":34851},[65,52785,34841],{"class":154},[65,52787,52788,52790,52792,52794,52796,52798,52800,52802,52804,52806],{"class":140,"line":158},[65,52789,34846],{"class":154},[65,52791,36],{"class":214},[65,52793,774],{"class":34851},[65,52795,6252],{"class":154},[65,52797,34857],{"class":154},[65,52799,51832],{"class":302},[65,52801,34857],{"class":154},[65,52803,37918],{"class":154},[65,52805,36],{"class":214},[65,52807,34841],{"class":154},[65,52809,52810,52812,52814,52816,52818,52820,52822,52824,52826,52828,52830,52832,52834,52836,52838,52840,52842,52844,52846,52848],{"class":140,"line":165},[65,52811,34846],{"class":154},[65,52813,36],{"class":214},[65,52815,774],{"class":34851},[65,52817,6252],{"class":154},[65,52819,34857],{"class":154},[65,52821,51855],{"class":302},[65,52823,34857],{"class":154},[65,52825,50509],{"class":154},[65,52827,57],{"class":214},[65,52829,1916],{"class":34851},[65,52831,6252],{"class":154},[65,52833,34857],{"class":154},[65,52835,51870],{"class":302},[65,52837,34857],{"class":154},[65,52839,37786],{"class":34851},[65,52841,6252],{"class":154},[65,52843,37764],{"class":154},[65,52845,37918],{"class":154},[65,52847,36],{"class":214},[65,52849,34841],{"class":154},[65,52851,52852,52854,52856],{"class":140,"line":180},[65,52853,34881],{"class":154},[65,52855,36],{"class":214},[65,52857,34841],{"class":154},[15,52859,52860,52861,52863],{},"左から出現するだけなので、",[124,52862,51105],{},"のみ付与しています。",[1177,52865,34985],{"id":52866},"css-1",[15,52868,52869],{},"CSSでアニメーションさせるので、その部分のみ抜粋します。",[129,52871,52873],{"className":34988,"code":52872,"filename":34985,"language":34984,"meta":135,"style":135},".content__image {\n position: relative;\n overflow: hidden;\n}\n\n.content__image img {\n position: relative;\n scale: 1.2;\n clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);\n transition: 1.2s cubic-bezier(.16, 1.08, .38, .98);\n transition-delay: 0.4s;\n z-index: 2;\n}\n\n.content__image::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--black);\n clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);\n transition: 1.2s cubic-bezier(.16, 1.08, .38, .98);\n z-index: 1;\n}\n\n.content__image.is-visible img {\n scale: 1;\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n}\n\n.content__image.is-visible img::before {\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n}\n",[124,52874,52875,52883,52894,52904,52908,52912,52922,52932,52944,52981,53016,53028,53038,53042,53046,53059,53070,53081,53091,53107,53141,53169,53179,53183,53187,53201,53211,53245,53249,53253,53271,53305],{"__ignoreMap":135},[65,52876,52877,52879,52881],{"class":140,"line":141},[65,52878,834],{"class":154},[65,52880,51855],{"class":326},[65,52882,418],{"class":154},[65,52884,52885,52887,52889,52892],{"class":140,"line":158},[65,52886,8393],{"class":340},[65,52888,797],{"class":154},[65,52890,52891],{"class":793}," relative",[65,52893,155],{"class":154},[65,52895,52896,52898,52900,52902],{"class":140,"line":165},[65,52897,37481],{"class":340},[65,52899,797],{"class":154},[65,52901,37486],{"class":793},[65,52903,155],{"class":154},[65,52905,52906],{"class":140,"line":180},[65,52907,243],{"class":154},[65,52909,52910],{"class":140,"line":194},[65,52911,162],{"emptyLinePlaceholder":161},[65,52913,52914,52916,52918,52920],{"class":140,"line":211},[65,52915,834],{"class":154},[65,52917,51855],{"class":326},[65,52919,1871],{"class":214},[65,52921,418],{"class":154},[65,52923,52924,52926,52928,52930],{"class":140,"line":240},[65,52925,8393],{"class":340},[65,52927,797],{"class":154},[65,52929,52891],{"class":793},[65,52931,155],{"class":154},[65,52933,52934,52937,52939,52942],{"class":140,"line":391},[65,52935,52936],{"class":340}," scale",[65,52938,797],{"class":154},[65,52940,52941],{"class":793}," 1.2",[65,52943,155],{"class":154},[65,52945,52946,52949,52951,52954,52956,52958,52960,52962,52964,52966,52968,52970,52972,52974,52977,52979],{"class":140,"line":401},[65,52947,52948],{"class":340}," clip-path",[65,52950,797],{"class":154},[65,52952,52953],{"class":200}," polygon",[65,52955,224],{"class":154},[65,52957,743],{"class":793},[65,52959,1142],{"class":793},[65,52961,230],{"class":154},[65,52963,1142],{"class":793},[65,52965,1142],{"class":793},[65,52967,230],{"class":154},[65,52969,1142],{"class":793},[65,52971,40529],{"class":793},[65,52973,230],{"class":154},[65,52975,52976],{"class":793}," 0%",[65,52978,40529],{"class":793},[65,52980,1980],{"class":154},[65,52982,52983,52986,52988,52991,52994,52996,52999,53001,53004,53006,53009,53011,53014],{"class":140,"line":406},[65,52984,52985],{"class":340}," transition",[65,52987,797],{"class":154},[65,52989,52990],{"class":793}," 1.2s",[65,52992,52993],{"class":200}," cubic-bezier",[65,52995,224],{"class":154},[65,52997,52998],{"class":793},".16",[65,53000,230],{"class":154},[65,53002,53003],{"class":793}," 1.08",[65,53005,230],{"class":154},[65,53007,53008],{"class":793}," .38",[65,53010,230],{"class":154},[65,53012,53013],{"class":793}," .98",[65,53015,1980],{"class":154},[65,53017,53018,53021,53023,53026],{"class":140,"line":421},[65,53019,53020],{"class":340}," transition-delay",[65,53022,797],{"class":154},[65,53024,53025],{"class":793}," 0.4s",[65,53027,155],{"class":154},[65,53029,53030,53032,53034,53036],{"class":140,"line":435},[65,53031,35037],{"class":340},[65,53033,797],{"class":154},[65,53035,3748],{"class":793},[65,53037,155],{"class":154},[65,53039,53040],{"class":140,"line":447},[65,53041,243],{"class":154},[65,53043,53044],{"class":140,"line":459},[65,53045,162],{"emptyLinePlaceholder":161},[65,53047,53048,53050,53052,53054,53057],{"class":140,"line":471},[65,53049,834],{"class":154},[65,53051,51855],{"class":326},[65,53053,38469],{"class":154},[65,53055,53056],{"class":168},"before",[65,53058,418],{"class":154},[65,53060,53061,53064,53066,53068],{"class":140,"line":63},[65,53062,53063],{"class":340}," content",[65,53065,797],{"class":154},[65,53067,36171],{"class":154},[65,53069,155],{"class":154},[65,53071,53072,53074,53076,53079],{"class":140,"line":495},[65,53073,8393],{"class":340},[65,53075,797],{"class":154},[65,53077,53078],{"class":793}," absolute",[65,53080,155],{"class":154},[65,53082,53083,53085,53087,53089],{"class":140,"line":507},[65,53084,38517],{"class":340},[65,53086,797],{"class":154},[65,53088,1142],{"class":793},[65,53090,155],{"class":154},[65,53092,53093,53095,53097,53100,53102,53105],{"class":140,"line":519},[65,53094,35061],{"class":340},[65,53096,797],{"class":154},[65,53098,53099],{"class":200}," var",[65,53101,224],{"class":154},[65,53103,53104],{"class":144},"--black",[65,53106,1980],{"class":154},[65,53108,53109,53111,53113,53115,53117,53119,53121,53123,53125,53127,53129,53131,53133,53135,53137,53139],{"class":140,"line":531},[65,53110,52948],{"class":340},[65,53112,797],{"class":154},[65,53114,52953],{"class":200},[65,53116,224],{"class":154},[65,53118,743],{"class":793},[65,53120,1142],{"class":793},[65,53122,230],{"class":154},[65,53124,1142],{"class":793},[65,53126,1142],{"class":793},[65,53128,230],{"class":154},[65,53130,1142],{"class":793},[65,53132,40529],{"class":793},[65,53134,230],{"class":154},[65,53136,52976],{"class":793},[65,53138,40529],{"class":793},[65,53140,1980],{"class":154},[65,53142,53143,53145,53147,53149,53151,53153,53155,53157,53159,53161,53163,53165,53167],{"class":140,"line":543},[65,53144,52985],{"class":340},[65,53146,797],{"class":154},[65,53148,52990],{"class":793},[65,53150,52993],{"class":200},[65,53152,224],{"class":154},[65,53154,52998],{"class":793},[65,53156,230],{"class":154},[65,53158,53003],{"class":793},[65,53160,230],{"class":154},[65,53162,53008],{"class":793},[65,53164,230],{"class":154},[65,53166,53013],{"class":793},[65,53168,1980],{"class":154},[65,53170,53171,53173,53175,53177],{"class":140,"line":555},[65,53172,35037],{"class":340},[65,53174,797],{"class":154},[65,53176,3137],{"class":793},[65,53178,155],{"class":154},[65,53180,53181],{"class":140,"line":567},[65,53182,243],{"class":154},[65,53184,53185],{"class":140,"line":3757},[65,53186,162],{"emptyLinePlaceholder":161},[65,53188,53189,53191,53193,53195,53197,53199],{"class":140,"line":3787},[65,53190,834],{"class":154},[65,53192,51855],{"class":326},[65,53194,834],{"class":154},[65,53196,50380],{"class":326},[65,53198,1871],{"class":214},[65,53200,418],{"class":154},[65,53202,53203,53205,53207,53209],{"class":140,"line":3792},[65,53204,52936],{"class":340},[65,53206,797],{"class":154},[65,53208,3137],{"class":793},[65,53210,155],{"class":154},[65,53212,53213,53215,53217,53219,53221,53223,53225,53227,53229,53231,53233,53235,53237,53239,53241,53243],{"class":140,"line":3814},[65,53214,52948],{"class":340},[65,53216,797],{"class":154},[65,53218,52953],{"class":200},[65,53220,224],{"class":154},[65,53222,743],{"class":793},[65,53224,1142],{"class":793},[65,53226,230],{"class":154},[65,53228,40529],{"class":793},[65,53230,1142],{"class":793},[65,53232,230],{"class":154},[65,53234,40529],{"class":793},[65,53236,40529],{"class":793},[65,53238,230],{"class":154},[65,53240,1142],{"class":793},[65,53242,40529],{"class":793},[65,53244,1980],{"class":154},[65,53246,53247],{"class":140,"line":3823},[65,53248,243],{"class":154},[65,53250,53251],{"class":140,"line":3831},[65,53252,162],{"emptyLinePlaceholder":161},[65,53254,53255,53257,53259,53261,53263,53265,53267,53269],{"class":140,"line":3841},[65,53256,834],{"class":154},[65,53258,51855],{"class":326},[65,53260,834],{"class":154},[65,53262,50380],{"class":326},[65,53264,1871],{"class":214},[65,53266,38469],{"class":154},[65,53268,53056],{"class":168},[65,53270,418],{"class":154},[65,53272,53273,53275,53277,53279,53281,53283,53285,53287,53289,53291,53293,53295,53297,53299,53301,53303],{"class":140,"line":3861},[65,53274,52948],{"class":340},[65,53276,797],{"class":154},[65,53278,52953],{"class":200},[65,53280,224],{"class":154},[65,53282,743],{"class":793},[65,53284,1142],{"class":793},[65,53286,230],{"class":154},[65,53288,40529],{"class":793},[65,53290,1142],{"class":793},[65,53292,230],{"class":154},[65,53294,40529],{"class":793},[65,53296,40529],{"class":793},[65,53298,230],{"class":154},[65,53300,1142],{"class":793},[65,53302,40529],{"class":793},[65,53304,1980],{"class":154},[65,53306,53307],{"class":140,"line":3867},[65,53308,243],{"class":154},[15,53310,53311,53313,53314,53316,53317,49070,53320,53322,53323,53326],{},[124,53312,51765],{},"の値は、1つ目のデモの左から出現するときと同じです。",[5467,53315],{},"\n黒い帯に関しては、",[124,53318,53319],{},".content__image",[124,53321,53056],{},"疑似要素を使って",[124,53324,53325],{},"position: absolute","で画像全体を覆うように配置しています。",[15,53328,53329,53330,53332,53333,53336,53337,49070,53339,2765,53341,53343],{},"ここで、先に黒い帯が出現するので、",[124,53331,57],{},"に",[124,53334,53335],{},"transition-delay","を設定し、",[124,53338,57],{},[124,53340,51765],{},[124,53342,51769],{},"のアニメーションを遅らせています。",[1177,53345,35288],{"id":53346},"javascript-1",[15,53348,53349],{},"最後にJavaScriptを見ていきましょう。全コードを載せます。",[129,53351,53353],{"className":35286,"code":53352,"filename":35288,"language":35289,"meta":135,"style":135},"class Inview {\n constructor() {\n this.els = document.querySelectorAll('[data-inview]');\n if (!this.els.length) return;\n\n this.init();\n }\n\n init() {\n this.els.forEach(el => {\n this.inviewClipSlide(el);\n });\n }\n\n inviewClipSlide(el) {\n\n const img = el.querySelector('.content__image');\n\n gsap.to(el, {\n scrollTrigger: {\n trigger: el,\n start: \"top 60%\",\n onEnter: () => {\n img.classList.add('is-visible');\n }\n }\n });\n }\n}\n",[124,53354,53355,53363,53371,53399,53419,53423,53435,53439,53443,53451,53471,53487,53495,53499,53503,53515,53519,53545,53549,53565,53573,53583,53597,53609,53634,53638,53642,53650,53654],{"__ignoreMap":135},[65,53356,53357,53359,53361],{"class":140,"line":141},[65,53358,38615],{"class":168},[65,53360,50703],{"class":326},[65,53362,418],{"class":154},[65,53364,53365,53367,53369],{"class":140,"line":158},[65,53366,788],{"class":168},[65,53368,1269],{"class":154},[65,53370,418],{"class":154},[65,53372,53373,53375,53377,53379,53381,53383,53385,53387,53389,53391,53393,53395,53397],{"class":140,"line":165},[65,53374,831],{"class":830},[65,53376,834],{"class":154},[65,53378,50722],{"class":214},[65,53380,218],{"class":168},[65,53382,3413],{"class":214},[65,53384,834],{"class":154},[65,53386,38719],{"class":200},[65,53388,224],{"class":204},[65,53390,306],{"class":154},[65,53392,50737],{"class":302},[65,53394,306],{"class":154},[65,53396,235],{"class":204},[65,53398,155],{"class":154},[65,53400,53401,53403,53405,53407,53409,53411,53413,53415,53417],{"class":140,"line":180},[65,53402,3105],{"class":154},[65,53404,1696],{"class":204},[65,53406,2264],{"class":168},[65,53408,2004],{"class":830},[65,53410,834],{"class":154},[65,53412,50722],{"class":214},[65,53414,834],{"class":154},[65,53416,32495],{"class":204},[65,53418,2287],{"class":154},[65,53420,53421],{"class":140,"line":194},[65,53422,162],{"emptyLinePlaceholder":161},[65,53424,53425,53427,53429,53431,53433],{"class":140,"line":211},[65,53426,831],{"class":830},[65,53428,834],{"class":154},[65,53430,3193],{"class":200},[65,53432,1269],{"class":204},[65,53434,155],{"class":154},[65,53436,53437],{"class":140,"line":240},[65,53438,1171],{"class":154},[65,53440,53441],{"class":140,"line":391},[65,53442,162],{"emptyLinePlaceholder":161},[65,53444,53445,53447,53449],{"class":140,"line":401},[65,53446,38697],{"class":200},[65,53448,1269],{"class":154},[65,53450,418],{"class":154},[65,53452,53453,53455,53457,53459,53461,53463,53465,53467,53469],{"class":140,"line":406},[65,53454,831],{"class":830},[65,53456,834],{"class":154},[65,53458,50722],{"class":214},[65,53460,834],{"class":154},[65,53462,38987],{"class":200},[65,53464,224],{"class":204},[65,53466,49947],{"class":793},[65,53468,1862],{"class":168},[65,53470,418],{"class":154},[65,53472,53473,53475,53477,53479,53481,53483,53485],{"class":140,"line":421},[65,53474,20954],{"class":830},[65,53476,834],{"class":154},[65,53478,52279],{"class":200},[65,53480,224],{"class":204},[65,53482,49947],{"class":214},[65,53484,235],{"class":204},[65,53486,155],{"class":154},[65,53488,53489,53491,53493],{"class":140,"line":435},[65,53490,6341],{"class":154},[65,53492,235],{"class":204},[65,53494,155],{"class":154},[65,53496,53497],{"class":140,"line":447},[65,53498,1171],{"class":154},[65,53500,53501],{"class":140,"line":459},[65,53502,162],{"emptyLinePlaceholder":161},[65,53504,53505,53507,53509,53511,53513],{"class":140,"line":471},[65,53506,52366],{"class":200},[65,53508,224],{"class":154},[65,53510,49947],{"class":793},[65,53512,235],{"class":154},[65,53514,418],{"class":154},[65,53516,53517],{"class":140,"line":63},[65,53518,162],{"emptyLinePlaceholder":161},[65,53520,53521,53523,53525,53527,53529,53531,53533,53535,53537,53539,53541,53543],{"class":140,"line":495},[65,53522,848],{"class":168},[65,53524,1871],{"class":214},[65,53526,218],{"class":168},[65,53528,52258],{"class":214},[65,53530,834],{"class":154},[65,53532,35825],{"class":200},[65,53534,224],{"class":204},[65,53536,306],{"class":154},[65,53538,53319],{"class":302},[65,53540,306],{"class":154},[65,53542,235],{"class":204},[65,53544,155],{"class":154},[65,53546,53547],{"class":140,"line":507},[65,53548,162],{"emptyLinePlaceholder":161},[65,53550,53551,53553,53555,53557,53559,53561,53563],{"class":140,"line":519},[65,53552,50092],{"class":214},[65,53554,834],{"class":154},[65,53556,52521],{"class":200},[65,53558,224],{"class":204},[65,53560,49947],{"class":214},[65,53562,230],{"class":154},[65,53564,418],{"class":154},[65,53566,53567,53569,53571],{"class":140,"line":531},[65,53568,52534],{"class":204},[65,53570,797],{"class":154},[65,53572,418],{"class":154},[65,53574,53575,53577,53579,53581],{"class":140,"line":543},[65,53576,52543],{"class":204},[65,53578,797],{"class":154},[65,53580,52258],{"class":214},[65,53582,3820],{"class":154},[65,53584,53585,53587,53589,53591,53593,53595],{"class":140,"line":555},[65,53586,52554],{"class":204},[65,53588,797],{"class":154},[65,53590,35344],{"class":154},[65,53592,52561],{"class":302},[65,53594,34857],{"class":154},[65,53596,3820],{"class":154},[65,53598,53599,53601,53603,53605,53607],{"class":140,"line":567},[65,53600,52570],{"class":200},[65,53602,797],{"class":154},[65,53604,1932],{"class":154},[65,53606,1862],{"class":168},[65,53608,418],{"class":154},[65,53610,53611,53614,53616,53618,53620,53622,53624,53626,53628,53630,53632],{"class":140,"line":3757},[65,53612,53613],{"class":214}," img",[65,53615,834],{"class":154},[65,53617,39383],{"class":214},[65,53619,834],{"class":154},[65,53621,3962],{"class":200},[65,53623,224],{"class":204},[65,53625,306],{"class":154},[65,53627,50380],{"class":302},[65,53629,306],{"class":154},[65,53631,235],{"class":204},[65,53633,155],{"class":154},[65,53635,53636],{"class":140,"line":3787},[65,53637,52662],{"class":154},[65,53639,53640],{"class":140,"line":3792},[65,53641,6413],{"class":154},[65,53643,53644,53646,53648],{"class":140,"line":3814},[65,53645,6341],{"class":154},[65,53647,235],{"class":204},[65,53649,155],{"class":154},[65,53651,53652],{"class":140,"line":3823},[65,53653,1171],{"class":154},[65,53655,53656],{"class":140,"line":3831},[65,53657,243],{"class":154},[15,53659,53660,53661,53663],{},"ここでは単純にScrollTriggerを使用して、スクロールで要素が見えたら",[124,53662,50380],{},"クラスを付与しているだけになります。これで、黒い帯が出現してから画像が表示されるアニメーションが実装できました！",[11,53665,5299],{"id":5299},[15,53667,53668],{},"GSAPのScrollTriggerとclip-pathを使用して、要素が見えたら画像が出現するアニメーションのデモを2つ紹介しました。GSAP・ScrollTriggerとclip-pathの組み合わせは、アニメーションの表現の幅が広がるので、ぜひ使ってみてください。",[5313,53670,53671],{},"html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .stCc5, html code.shiki .stCc5{--shiki-default:#FFCB6B;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s9qRY, html code.shiki .s9qRY{--shiki-default:#FF5370;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}",{"title":135,"searchDepth":165,"depth":165,"links":53673},[53674,53677,53683,53688],{"id":13,"depth":158,"text":13,"children":53675},[53676],{"id":37659,"depth":165,"text":37659},{"id":51746,"depth":158,"text":51747,"children":53678},[53679,53680,53681,53682],{"id":81,"depth":165,"text":81},{"id":34821,"depth":165,"text":34822},{"id":34984,"depth":165,"text":34985},{"id":38599,"depth":165,"text":35288},{"id":52741,"depth":158,"text":52742,"children":53684},[53685,53686,53687],{"id":52758,"depth":165,"text":34822},{"id":52866,"depth":165,"text":34985},{"id":53346,"depth":165,"text":35288},{"id":5299,"depth":158,"text":5299},"2025-07-21T00:00:00.000Z","Web制作で要素が見えたら画像が出現する表現はよくあります。今回はGSAPのScrollTriggerとclip-pathを使って、要素が見えたら画像をかっこよく出現させるアニメーションを実装します。1つ目は普通に画像が出現する方法と、2つ目は黒い帯が出現してから画像が表示するデモを紹介します。","/images/blog/scrolltrigger-inview-image-clip-path.jpg",{},"/blog/scrolltrigger-inview-image-clip-path",{"title":51728,"description":53690},"blog/scrolltrigger-inview-image-clip-path",[53697,53698,51723],"ScrollTriggerを利用したInviewアニメーション","GSAPとclip-pathを使ったアニメーション",[53700],"GSAP","ZE0-FOIwn8KQMvKC9X2M5UmP_QKrIZ5FMgWtQduJEdI",{"id":53703,"title":53704,"body":53705,"date":54264,"description":54265,"draft":5339,"extension":5340,"image":54266,"meta":54267,"navigation":161,"path":54268,"seo":54269,"stem":54270,"summaryList":54271,"summaryText":5348,"tags":54274,"__hash__":54275},"blog/blog/any-hover-media-queries.md","CSSでhoverを実装するならany-hoverメディアクエリを使おう",{"type":8,"value":53706,"toc":54255},[53707,53709,53716,53719,53723,53726,53729,53772,53784,53793,53797,53800,53911,53914,53920,53971,53974,53980,53984,53987,53990,54052,54065,54142,54145,54238,54241,54243,54252],[11,53708,13],{"id":13},[15,53710,53711,53712,53715],{},"Web制作でCSSでhoverを実装することはよくあります。単純に",[124,53713,53714],{},":hover","を使用してホバーのアニメーションは付けられますが、モバイル端末でもホバーアニメーションが動いてしまうなど、ユーザビリティが悪くなってしまいます。",[15,53717,53718],{},"そこで、この問題を解決するhover / any-hoverメディアクエリを紹介します！",[11,53720,53722],{"id":53721},"hover-any-hoverメディアクエリとは","hover / any-hoverメディアクエリとは",[15,53724,53725],{},"hover / any-hoverメディアクエリは、ユーザーの入力デバイスが「ホバー操作」に対応しているかどうかを判定するメディアクエリです。",[15,53727,53728],{},"それぞれの仕様の違いと判定の仕組みは下記の通りです。",[583,53730,53731,53744],{},[586,53732,53733],{},[589,53734,53735,53738,53741],{},[592,53736,53737],{},"メディアクエリ",[592,53739,53740],{},"判定対象",[592,53742,53743],{},"例(タッチ+マウス)",[602,53745,53746,53759],{},[589,53747,53748,53753,53756],{},[607,53749,53750],{},[124,53751,53752],{},"hover: hover",[607,53754,53755],{},"主入力デバイスのみ",[607,53757,53758],{},"主がタッチならfalse",[589,53760,53761,53766,53769],{},[607,53762,53763],{},[124,53764,53765],{},"any-hover: hover",[607,53767,53768],{},"どれか一つでもOK",[607,53770,53771],{},"マウスがあればtrue",[15,53773,53774,53777,53778,53780,53783],{},[124,53775,53776],{},"hover","は主な入力デバイスがホバー操作に対応している場合に適用します。",[5467,53779],{},[124,53781,53782],{},"any-hover","は入力デバイスのどれか一つでもホバー操作に対応していれば適用します。",[15,53785,53786,53787,53789,53790,53792],{},"基本的には、",[124,53788,53782],{},"を利用したほうが、カバー範囲が広いので",[124,53791,53782],{},"を使用するようにしています。",[1177,53794,53796],{"id":53795},"hover-any-hoverメディアクエリを使用したhoverの実装","hover / any-hoverメディアクエリを使用したhoverの実装",[15,53798,53799],{},"hover / any-hoverメディアクエリを使用したhoverの実装例は下記の通りです。",[129,53801,53803],{"className":34988,"code":53802,"language":34984,"meta":135,"style":135},"/* hoverメディアクエリを使用したhoverの実装例 */\n@media (hover: hover) {\n .link:hover {\n color: #000;\n }\n}\n\n/* any-hoverメディアクエリを使用したhoverの実装例 */\n@media (any-hover: hover) {\n .link:hover {\n color: #000;\n }\n}\n",[124,53804,53805,53810,53828,53842,53850,53854,53858,53862,53867,53883,53895,53903,53907],{"__ignoreMap":135},[65,53806,53807],{"class":140,"line":141},[65,53808,53809],{"class":278},"/* hoverメディアクエリを使用したhoverの実装例 */\n",[65,53811,53812,53815,53817,53819,53821,53824,53826],{"class":140,"line":158},[65,53813,53814],{"class":154},"@media",[65,53816,1696],{"class":154},[65,53818,53776],{"class":340},[65,53820,797],{"class":154},[65,53822,53823],{"class":340}," hover",[65,53825,235],{"class":154},[65,53827,418],{"class":154},[65,53829,53830,53833,53836,53838,53840],{"class":140,"line":165},[65,53831,53832],{"class":154}," .",[65,53834,53835],{"class":326},"link",[65,53837,797],{"class":154},[65,53839,53776],{"class":168},[65,53841,418],{"class":154},[65,53843,53844,53846,53848],{"class":140,"line":180},[65,53845,11202],{"class":340},[65,53847,797],{"class":154},[65,53849,35082],{"class":154},[65,53851,53852],{"class":140,"line":194},[65,53853,1171],{"class":154},[65,53855,53856],{"class":140,"line":211},[65,53857,243],{"class":154},[65,53859,53860],{"class":140,"line":240},[65,53861,162],{"emptyLinePlaceholder":161},[65,53863,53864],{"class":140,"line":391},[65,53865,53866],{"class":278},"/* any-hoverメディアクエリを使用したhoverの実装例 */\n",[65,53868,53869,53871,53873,53875,53877,53879,53881],{"class":140,"line":401},[65,53870,53814],{"class":154},[65,53872,1696],{"class":154},[65,53874,53782],{"class":204},[65,53876,797],{"class":154},[65,53878,53823],{"class":340},[65,53880,235],{"class":154},[65,53882,418],{"class":154},[65,53884,53885,53887,53889,53891,53893],{"class":140,"line":406},[65,53886,53832],{"class":154},[65,53888,53835],{"class":326},[65,53890,797],{"class":154},[65,53892,53776],{"class":168},[65,53894,418],{"class":154},[65,53896,53897,53899,53901],{"class":140,"line":421},[65,53898,11202],{"class":340},[65,53900,797],{"class":154},[65,53902,35082],{"class":154},[65,53904,53905],{"class":140,"line":435},[65,53906,1171],{"class":154},[65,53908,53909],{"class":140,"line":447},[65,53910,243],{"class":154},[11,53912,53913],{"id":53913},"従来のメディアクエリを使用したhoverの実装の問題点",[15,53915,53916,53917,53919],{},"従来のメディアクエリを使用したhoverの実装の問題点について見ていきます。",[5467,53918],{},"\nPCとモバイルでのホバーアニメーションの分岐のやり方で、下記のように紹介されていることがあるかと思います。",[129,53921,53924],{"className":34988,"code":53922,"filename":53923,"language":34984,"meta":135,"style":135},"@media (max-width: 767px) {\n .link:hover {\n color: #000;\n }\n}\n","NG 🙅‍♂️",[124,53925,53926,53943,53955,53963,53967],{"__ignoreMap":135},[65,53927,53928,53930,53932,53934,53936,53939,53941],{"class":140,"line":141},[65,53929,53814],{"class":154},[65,53931,1696],{"class":154},[65,53933,36851],{"class":340},[65,53935,797],{"class":154},[65,53937,53938],{"class":793}," 767px",[65,53940,235],{"class":154},[65,53942,418],{"class":154},[65,53944,53945,53947,53949,53951,53953],{"class":140,"line":158},[65,53946,53832],{"class":154},[65,53948,53835],{"class":326},[65,53950,797],{"class":154},[65,53952,53776],{"class":168},[65,53954,418],{"class":154},[65,53956,53957,53959,53961],{"class":140,"line":165},[65,53958,11202],{"class":340},[65,53960,797],{"class":154},[65,53962,35082],{"class":154},[65,53964,53965],{"class":140,"line":180},[65,53966,1171],{"class":154},[65,53968,53969],{"class":140,"line":194},[65,53970,243],{"class":154},[15,53972,53973],{},"この実装ですと、iPhoneなどのモバイル端末だとホバーアニメーションは動かないのでよいのですが、PCで767px以下の場合にマウス操作なのにホバーアニメーションが動かないという問題があります。",[15,53975,53976,53977,53979],{},"以上の理由より、ホバーアニメーションを実装する場合は、",[124,53978,53782],{},"を使用するようにしましょう。",[11,53981,53983],{"id":53982},"scssのmixinを使ってhoverを実装する方法","SCSSのmixinを使ってhoverを実装する方法",[15,53985,53986],{},"最後に通常のCSSでメディアクエリを書くのは大変なので、SCSSのmixinを使ってhoverを実装する方法を紹介します。",[15,53988,53989],{},"mixin.scssのようなファイルを作成して、mixinを書いていきます。",[129,53991,53996],{"className":53992,"code":53993,"filename":53994,"language":53995,"meta":135,"style":135},"language-scss shiki shiki-themes aurora-x","@mixin hover {\n @media (any-hover: hover) {\n &:hover {\n @content;\n }\n }\n}\n","mixin.scss","scss",[124,53997,53998,54007,54024,54035,54040,54044,54048],{"__ignoreMap":135},[65,53999,54000,54003,54005],{"class":140,"line":141},[65,54001,54002],{"class":154},"@mixin",[65,54004,53823],{"class":200},[65,54006,418],{"class":154},[65,54008,54009,54012,54014,54016,54018,54020,54022],{"class":140,"line":158},[65,54010,54011],{"class":154}," @media",[65,54013,1696],{"class":154},[65,54015,53782],{"class":204},[65,54017,797],{"class":154},[65,54019,53823],{"class":204},[65,54021,235],{"class":154},[65,54023,418],{"class":154},[65,54025,54026,54029,54031,54033],{"class":140,"line":165},[65,54027,54028],{"class":214}," &",[65,54030,797],{"class":154},[65,54032,53776],{"class":168},[65,54034,418],{"class":154},[65,54036,54037],{"class":140,"line":180},[65,54038,54039],{"class":154}," @content;\n",[65,54041,54042],{"class":140,"line":194},[65,54043,3204],{"class":154},[65,54045,54046],{"class":140,"line":211},[65,54047,1171],{"class":154},[65,54049,54050],{"class":140,"line":240},[65,54051,243],{"class":154},[15,54053,54054,54055,54058,54059,54061,54062,54064],{},"これで、",[124,54056,54057],{},"@include mixin.hover","とすることで、",[124,54060,53782],{},"を使用したhoverの実装ができます。",[5467,54063],{},"\n以下はリンクのカラーをホバーで黒色に変更する例です。",[129,54066,54069],{"className":53992,"code":54067,"filename":54068,"language":53995,"meta":135,"style":135},".link {\n color: #fff;\n transition-property: color;\n transition-duration: 0.3s;\n\n @include mixin.hover {\n color: #000;\n }\n}\n","SCSS",[124,54070,54071,54079,54087,54097,54108,54112,54126,54134,54138],{"__ignoreMap":135},[65,54072,54073,54075,54077],{"class":140,"line":141},[65,54074,834],{"class":154},[65,54076,53835],{"class":326},[65,54078,418],{"class":154},[65,54080,54081,54083,54085],{"class":140,"line":158},[65,54082,5543],{"class":340},[65,54084,797],{"class":154},[65,54086,35066],{"class":154},[65,54088,54089,54091,54093,54095],{"class":140,"line":165},[65,54090,50598],{"class":340},[65,54092,797],{"class":154},[65,54094,5872],{"class":793},[65,54096,155],{"class":154},[65,54098,54099,54101,54103,54106],{"class":140,"line":180},[65,54100,50614],{"class":340},[65,54102,797],{"class":154},[65,54104,54105],{"class":793}," 0.3s",[65,54107,155],{"class":154},[65,54109,54110],{"class":140,"line":194},[65,54111,162],{"emptyLinePlaceholder":161},[65,54113,54114,54117,54120,54122,54124],{"class":140,"line":211},[65,54115,54116],{"class":154}," @include",[65,54118,54119],{"class":144}," mixin",[65,54121,834],{"class":154},[65,54123,53776],{"class":200},[65,54125,418],{"class":154},[65,54127,54128,54130,54132],{"class":140,"line":240},[65,54129,11202],{"class":340},[65,54131,797],{"class":154},[65,54133,35082],{"class":154},[65,54135,54136],{"class":140,"line":391},[65,54137,1171],{"class":154},[65,54139,54140],{"class":140,"line":401},[65,54141,243],{"class":154},[15,54143,54144],{},"これをCSSにコンパイルすると、下記のようになります。",[129,54146,54148],{"className":34988,"code":54147,"filename":34985,"language":34984,"meta":135,"style":135},".link {\n color: #fff;\n transition-property: color;\n transition-duration: 0.3s;\n}\n\n@media (any-hover: hover) {\n .link:hover {\n color: #000;\n }\n}\n",[124,54149,54150,54158,54166,54176,54186,54190,54194,54210,54222,54230,54234],{"__ignoreMap":135},[65,54151,54152,54154,54156],{"class":140,"line":141},[65,54153,834],{"class":154},[65,54155,53835],{"class":326},[65,54157,418],{"class":154},[65,54159,54160,54162,54164],{"class":140,"line":158},[65,54161,5543],{"class":340},[65,54163,797],{"class":154},[65,54165,35066],{"class":154},[65,54167,54168,54170,54172,54174],{"class":140,"line":165},[65,54169,50598],{"class":340},[65,54171,797],{"class":154},[65,54173,5872],{"class":793},[65,54175,155],{"class":154},[65,54177,54178,54180,54182,54184],{"class":140,"line":180},[65,54179,50614],{"class":340},[65,54181,797],{"class":154},[65,54183,54105],{"class":793},[65,54185,155],{"class":154},[65,54187,54188],{"class":140,"line":194},[65,54189,243],{"class":154},[65,54191,54192],{"class":140,"line":211},[65,54193,162],{"emptyLinePlaceholder":161},[65,54195,54196,54198,54200,54202,54204,54206,54208],{"class":140,"line":240},[65,54197,53814],{"class":154},[65,54199,1696],{"class":154},[65,54201,53782],{"class":204},[65,54203,797],{"class":154},[65,54205,53823],{"class":340},[65,54207,235],{"class":154},[65,54209,418],{"class":154},[65,54211,54212,54214,54216,54218,54220],{"class":140,"line":391},[65,54213,53832],{"class":154},[65,54215,53835],{"class":326},[65,54217,797],{"class":154},[65,54219,53776],{"class":168},[65,54221,418],{"class":154},[65,54223,54224,54226,54228],{"class":140,"line":401},[65,54225,11202],{"class":340},[65,54227,797],{"class":154},[65,54229,35082],{"class":154},[65,54231,54232],{"class":140,"line":406},[65,54233,1171],{"class":154},[65,54235,54236],{"class":140,"line":421},[65,54237,243],{"class":154},[15,54239,54240],{},"SCSSを使っているかたは、ぜひmixinを使用して楽にhoverを実装してみてください！",[11,54242,35214],{"id":35214},[89,54244,54245],{},[92,54246,54247],{},[29,54248,54251],{"href":54249,"rel":54250,"target":3049},"https://www.w3.org/TR/mediaqueries-4/#hover",[3048],"Media Queries Level 4 - 7.2 Hover Capability",[5313,54253,54254],{},"html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}",{"title":135,"searchDepth":165,"depth":165,"links":54256},[54257,54258,54261,54262,54263],{"id":13,"depth":158,"text":13},{"id":53721,"depth":158,"text":53722,"children":54259},[54260],{"id":53795,"depth":165,"text":53796},{"id":53913,"depth":158,"text":53913},{"id":53982,"depth":158,"text":53983},{"id":35214,"depth":158,"text":35214},"2025-07-14T00:00:00.000Z","Web制作でCSSでhoverを実装する上での最適解を紹介します！また、SCSSのmixinを使って楽に記述する方法も紹介します。","/images/blog/any-hover-media-queries.jpg",{},"/blog/any-hover-media-queries",{"title":53704,"description":54265},"blog/any-hover-media-queries",[54272,53913,54273],"hover / any-hoverメディアクエリについて","SCSSSのmixinを使ってhoverを実装する方法",[34985],"2h3Xjel6L54zY6xIXk0RJ-v-F_QIcE1195C_dNAf5Vk",{"id":54277,"title":54278,"body":54279,"date":62559,"description":62560,"draft":5339,"extension":5340,"image":62561,"meta":62562,"navigation":161,"path":62563,"seo":62564,"stem":62565,"summaryList":62566,"summaryText":5348,"tags":62569,"__hash__":62571},"blog/blog/vs-code-snippets.md","VSCodeのユーザースニペットを登録して効率よくコーディングしよう！【Web制作爆速コーディング】",{"type":8,"value":54280,"toc":62547},[54281,54285,54292,54295,54298,54301,54323,54329,54334,54337,54340,54442,54464,54467,54470,54473,54477,54484,55297,55301,55307,58536,58540,58546,62522,62524,62530,62533,62535,62544],[11,54282,54284],{"id":54283},"ユーザースニペットとは","ユーザースニペットとは？",[15,54286,54287,54288,54291],{},"ユーザースニペットとは、VSCodeでよく使うコードを登録しておくことで、",[34759,54289,54290],{},"コーディングを効率よく行うことができる機能","です。Web制作では、HTML(Pug)やCSS(SCSS)、JavaScriptなどのコードをよく書くので、これらのコードをユーザースニペットとして登録しておくと、コーディングを効率よく行うことができます。",[15,54293,54294],{},"昨今ではエディターのAI補間機能が発達していたりしますが、自分がよく書いているコードをユーザースニペットとして登録しておくことで、全てを書かずにコーディングを効率よく行うことができます。",[11,54296,54297],{"id":54297},"ユーザースニペットの登録方法",[15,54299,54300],{},"ユーザースニペットの登録方法はいくつかありますが、ここではコマンドパレットから登録する方法を紹介します。",[35774,54302,54303,54316],{},[92,54304,54305,54308,54309,54308,54312,54315],{},[34800,54306,54307],{},"Command"," + ",[34800,54310,54311],{},"Shift",[34800,54313,54314],{},"P","を押してコマンドパレットを開きます。",[92,54317,54318,54319,54322],{},"コマンドパレットに",[124,54320,54321],{},"snippets","と入力して、「スニペット：スニペットの構成」を選択します。",[15,54324,54325],{},[57,54326],{"alt":54327,"src":54328},"settings.jsonを開く","https://res.cloudinary.com/dy8ftemi0/image/upload/v1751501870/vs-code-snippets-01_jx2mtv.jpg",[35774,54330,54331],{"start":165},[92,54332,54333],{},"選択したら、HTML,CSS,JavaScriptなどのJSONファイルを開くことができるので、スニペットを登録したい言語を選択します。",[11,54335,54336],{"id":54336},"ユーザースニペットを登録する",[15,54338,54339],{},"ユーザースニペットは以下のようなフォーマットで記述していきます。",[129,54341,54345],{"className":54342,"code":54343,"language":54344,"meta":135,"style":135},"language-json shiki shiki-themes aurora-x","// ここから\n\"スニペット名\": {\n \"prefix\": \"呼び出すワード\",\n \"body\": [\n \"登録したいコード\"\n ],\n \"description\": \"スニペットの説明\"\n},\n// ここまでがワンセット\n","json",[124,54346,54347,54352,54365,54386,54398,54408,54413,54431,54437],{"__ignoreMap":135},[65,54348,54349],{"class":140,"line":141},[65,54350,54351],{"class":278},"// ここから\n",[65,54353,54354,54356,54359,54361,54363],{"class":140,"line":158},[65,54355,34857],{"class":154},[65,54357,54358],{"class":302},"スニペット名",[65,54360,34857],{"class":154},[65,54362,1819],{"class":204},[65,54364,208],{"class":154},[65,54366,54367,54370,54373,54375,54377,54379,54382,54384],{"class":140,"line":165},[65,54368,54369],{"class":154}," \"",[65,54371,54372],{"class":168},"prefix",[65,54374,34857],{"class":154},[65,54376,797],{"class":154},[65,54378,35344],{"class":154},[65,54380,54381],{"class":302},"呼び出すワード",[65,54383,34857],{"class":154},[65,54385,3820],{"class":154},[65,54387,54388,54390,54392,54394,54396],{"class":140,"line":180},[65,54389,54369],{"class":154},[65,54391,34838],{"class":168},[65,54393,34857],{"class":154},[65,54395,797],{"class":154},[65,54397,16316],{"class":154},[65,54399,54400,54403,54406],{"class":140,"line":194},[65,54401,54402],{"class":154}," \"",[65,54404,54405],{"class":302},"登録したいコード",[65,54407,36971],{"class":154},[65,54409,54410],{"class":140,"line":211},[65,54411,54412],{"class":154}," ],\n",[65,54414,54415,54417,54420,54422,54424,54426,54429],{"class":140,"line":240},[65,54416,54369],{"class":154},[65,54418,54419],{"class":168},"description",[65,54421,34857],{"class":154},[65,54423,797],{"class":154},[65,54425,35344],{"class":154},[65,54427,54428],{"class":302},"スニペットの説明",[65,54430,36971],{"class":154},[65,54432,54433,54435],{"class":140,"line":391},[65,54434,2899],{"class":154},[65,54436,3820],{"class":204},[65,54438,54439],{"class":140,"line":401},[65,54440,54441],{"class":278},"// ここまでがワンセット\n",[89,54443,54444,54449,54454,54459],{},[92,54445,54446,54448],{},[124,54447,54358],{},"：スニペットの名称(重複しないように)",[92,54450,54451,54453],{},[124,54452,54381],{},"：スニペットを呼び出すためのワード",[92,54455,54456,54458],{},[124,54457,54405],{},"：このbody内に記述したコードがスニペットとして登録されます",[92,54460,54461,54463],{},[124,54462,54428],{},"：スニペットの説明になります(省略可)",[11,54465,54466],{"id":54466},"私のユーザースニペットの紹介",[15,54468,54469],{},"ここでは、雑にですが私がWeb制作で爆速でコーディングするためのVSCodeのユーザースニペットを紹介します。",[15,54471,54472],{},"私は開発では、HTMLではPugを、CSSではSCSSで書いているので、そちらのユーザースニペットを載せます。",[1177,54474,54476],{"id":54475},"pugのユーザースニペット","Pugのユーザースニペット",[15,54478,54479,54480,54483],{},"VSCodeでPugを登録するには、",[124,54481,54482],{},"jade.json(Pug)","を開きます。",[129,54485,54488],{"className":54342,"code":54486,"filename":54487,"language":54344,"meta":135,"style":135},"{\n \"[picsum]\": {\n \"prefix\": \"pics\",\n \"body\": [\n \"https://picsum.photos/\",\n ]\n },\n \"dummy\": {\n \"prefix\": \"dummy\",\n \"body\": [\n \"https://placehold.jp/150x150.png\",\n ]\n },\n \"copy\": {\n \"prefix\": \"copy\",\n \"body\": [\n \"©\",\n ]\n },\n \"[for]\": {\n \"prefix\": \"for\",\n \"body\": [\n \"- for (var i = 0; i \u003C $1; i++)\",\n ]\n },\n \"each\": {\n \"prefix\": \"each\",\n \"body\": [\n \"- const list = ['$1','$2']\",\n \"\\teach item in list\",\n ]\n },\n \"blank\": {\n \"prefix\": \"blank\",\n \"body\": [\n \"target=\\\"_blank\\\"\"\n ]\n },\n \"for-mobile\": {\n \"prefix\": \"fm\",\n \"body\": [\n \"class=\\\"for-mobile\\\"\"\n ]\n },\n \"for-large\": {\n \"prefix\": \"fl\",\n \"body\": [\n \"class=\\\"for-large\\\"\"\n ]\n },\n \".swiper\": {\n \"prefix\": \".swiper\",\n \"body\": [\n \".__swiper(data-slider=\\\"\\\")\",\n \" .swiper\",\n \" .swiper-wrapper\",\n \" .swiper-slide\",\n ],\n },\n \"title-link\": {\n \"prefix\": \"title-link\",\n \"body\": [\n \"{ title: '', link: '' },\",\n ],\n },\n // コンポーネント\n \".c-list\": {\n \"prefix\": \"lis\",\n \"body\": [\n \"ul.c-list\",\n \"\\teach val in data\",\n \"\\t\\tli.c-list__item\",\n \"\\t\\t\\ta(href=`${val.link}`).c-list__link\",\n \"\\t\\t\\t\\t|!{val.${1:text}}\",\n ],\n },\n}\n","jade.json",[124,54489,54490,54494,54507,54527,54539,54551,54556,54560,54573,54591,54603,54614,54618,54622,54634,54652,54664,54675,54679,54683,54696,54714,54726,54738,54743,54747,54760,54778,54790,54801,54813,54817,54821,54834,54852,54864,54879,54883,54887,54900,54919,54931,54944,54948,54952,54965,54984,54996,55008,55012,55016,55028,55046,55058,55074,55085,55096,55107,55112,55116,55129,55147,55159,55170,55174,55178,55183,55196,55215,55227,55238,55249,55261,55273,55285,55289,55293],{"__ignoreMap":135},[65,54491,54492],{"class":140,"line":141},[65,54493,208],{"class":154},[65,54495,54496,54498,54501,54503,54505],{"class":140,"line":158},[65,54497,54402],{"class":154},[65,54499,54500],{"class":168},"[picsum]",[65,54502,34857],{"class":154},[65,54504,797],{"class":154},[65,54506,418],{"class":154},[65,54508,54509,54512,54514,54516,54518,54520,54523,54525],{"class":140,"line":165},[65,54510,54511],{"class":154}," \"",[65,54513,54372],{"class":326},[65,54515,34857],{"class":154},[65,54517,797],{"class":154},[65,54519,35344],{"class":154},[65,54521,54522],{"class":302},"pics",[65,54524,34857],{"class":154},[65,54526,3820],{"class":154},[65,54528,54529,54531,54533,54535,54537],{"class":140,"line":180},[65,54530,54511],{"class":154},[65,54532,34838],{"class":326},[65,54534,34857],{"class":154},[65,54536,797],{"class":154},[65,54538,16316],{"class":154},[65,54540,54541,54544,54547,54549],{"class":140,"line":194},[65,54542,54543],{"class":154}," \"",[65,54545,54546],{"class":302},"https://picsum.photos/",[65,54548,34857],{"class":154},[65,54550,3820],{"class":154},[65,54552,54553],{"class":140,"line":211},[65,54554,54555],{"class":154}," ]\n",[65,54557,54558],{"class":140,"line":240},[65,54559,3864],{"class":154},[65,54561,54562,54564,54567,54569,54571],{"class":140,"line":391},[65,54563,54402],{"class":154},[65,54565,54566],{"class":168},"dummy",[65,54568,34857],{"class":154},[65,54570,797],{"class":154},[65,54572,418],{"class":154},[65,54574,54575,54577,54579,54581,54583,54585,54587,54589],{"class":140,"line":401},[65,54576,54511],{"class":154},[65,54578,54372],{"class":326},[65,54580,34857],{"class":154},[65,54582,797],{"class":154},[65,54584,35344],{"class":154},[65,54586,54566],{"class":302},[65,54588,34857],{"class":154},[65,54590,3820],{"class":154},[65,54592,54593,54595,54597,54599,54601],{"class":140,"line":406},[65,54594,54511],{"class":154},[65,54596,34838],{"class":326},[65,54598,34857],{"class":154},[65,54600,797],{"class":154},[65,54602,16316],{"class":154},[65,54604,54605,54607,54610,54612],{"class":140,"line":421},[65,54606,54543],{"class":154},[65,54608,54609],{"class":302},"https://placehold.jp/150x150.png",[65,54611,34857],{"class":154},[65,54613,3820],{"class":154},[65,54615,54616],{"class":140,"line":435},[65,54617,54555],{"class":154},[65,54619,54620],{"class":140,"line":447},[65,54621,3864],{"class":154},[65,54623,54624,54626,54628,54630,54632],{"class":140,"line":459},[65,54625,54402],{"class":154},[65,54627,20884],{"class":168},[65,54629,34857],{"class":154},[65,54631,797],{"class":154},[65,54633,418],{"class":154},[65,54635,54636,54638,54640,54642,54644,54646,54648,54650],{"class":140,"line":471},[65,54637,54511],{"class":154},[65,54639,54372],{"class":326},[65,54641,34857],{"class":154},[65,54643,797],{"class":154},[65,54645,35344],{"class":154},[65,54647,20884],{"class":302},[65,54649,34857],{"class":154},[65,54651,3820],{"class":154},[65,54653,54654,54656,54658,54660,54662],{"class":140,"line":63},[65,54655,54511],{"class":154},[65,54657,34838],{"class":326},[65,54659,34857],{"class":154},[65,54661,797],{"class":154},[65,54663,16316],{"class":154},[65,54665,54666,54668,54671,54673],{"class":140,"line":495},[65,54667,54543],{"class":154},[65,54669,54670],{"class":302},"©",[65,54672,34857],{"class":154},[65,54674,3820],{"class":154},[65,54676,54677],{"class":140,"line":507},[65,54678,54555],{"class":154},[65,54680,54681],{"class":140,"line":519},[65,54682,3864],{"class":154},[65,54684,54685,54687,54690,54692,54694],{"class":140,"line":531},[65,54686,54369],{"class":154},[65,54688,54689],{"class":168},"[for]",[65,54691,34857],{"class":154},[65,54693,797],{"class":154},[65,54695,418],{"class":154},[65,54697,54698,54700,54702,54704,54706,54708,54710,54712],{"class":140,"line":543},[65,54699,54402],{"class":154},[65,54701,54372],{"class":326},[65,54703,34857],{"class":154},[65,54705,797],{"class":154},[65,54707,35344],{"class":154},[65,54709,6643],{"class":302},[65,54711,34857],{"class":154},[65,54713,3820],{"class":154},[65,54715,54716,54718,54720,54722,54724],{"class":140,"line":555},[65,54717,54402],{"class":154},[65,54719,34838],{"class":326},[65,54721,34857],{"class":154},[65,54723,797],{"class":154},[65,54725,16316],{"class":154},[65,54727,54728,54731,54734,54736],{"class":140,"line":567},[65,54729,54730],{"class":154}," \"",[65,54732,54733],{"class":302},"- for (var i = 0; i \u003C $1; i++)",[65,54735,34857],{"class":154},[65,54737,3820],{"class":154},[65,54739,54740],{"class":140,"line":3757},[65,54741,54742],{"class":154}," ]\n",[65,54744,54745],{"class":140,"line":3787},[65,54746,4879],{"class":154},[65,54748,54749,54751,54754,54756,54758],{"class":140,"line":3792},[65,54750,54369],{"class":154},[65,54752,54753],{"class":168},"each",[65,54755,34857],{"class":154},[65,54757,797],{"class":154},[65,54759,418],{"class":154},[65,54761,54762,54764,54766,54768,54770,54772,54774,54776],{"class":140,"line":3814},[65,54763,54402],{"class":154},[65,54765,54372],{"class":326},[65,54767,34857],{"class":154},[65,54769,797],{"class":154},[65,54771,35344],{"class":154},[65,54773,54753],{"class":302},[65,54775,34857],{"class":154},[65,54777,3820],{"class":154},[65,54779,54780,54782,54784,54786,54788],{"class":140,"line":3823},[65,54781,54402],{"class":154},[65,54783,34838],{"class":326},[65,54785,34857],{"class":154},[65,54787,797],{"class":154},[65,54789,16316],{"class":154},[65,54791,54792,54794,54797,54799],{"class":140,"line":3831},[65,54793,54730],{"class":154},[65,54795,54796],{"class":302},"- const list = ['$1','$2']",[65,54798,34857],{"class":154},[65,54800,3820],{"class":154},[65,54802,54803,54806,54809,54811],{"class":140,"line":3841},[65,54804,54805],{"class":154}," \"\\t",[65,54807,54808],{"class":302},"each item in list",[65,54810,34857],{"class":154},[65,54812,3820],{"class":154},[65,54814,54815],{"class":140,"line":3861},[65,54816,54742],{"class":154},[65,54818,54819],{"class":140,"line":3867},[65,54820,4879],{"class":154},[65,54822,54823,54825,54828,54830,54832],{"class":140,"line":3876},[65,54824,54369],{"class":154},[65,54826,54827],{"class":168},"blank",[65,54829,34857],{"class":154},[65,54831,797],{"class":154},[65,54833,418],{"class":154},[65,54835,54836,54838,54840,54842,54844,54846,54848,54850],{"class":140,"line":3881},[65,54837,54402],{"class":154},[65,54839,54372],{"class":326},[65,54841,34857],{"class":154},[65,54843,797],{"class":154},[65,54845,35344],{"class":154},[65,54847,54827],{"class":302},[65,54849,34857],{"class":154},[65,54851,3820],{"class":154},[65,54853,54854,54856,54858,54860,54862],{"class":140,"line":3920},[65,54855,54402],{"class":154},[65,54857,34838],{"class":326},[65,54859,34857],{"class":154},[65,54861,797],{"class":154},[65,54863,16316],{"class":154},[65,54865,54866,54868,54871,54874,54876],{"class":140,"line":3954},[65,54867,54730],{"class":154},[65,54869,54870],{"class":302},"target=",[65,54872,54873],{"class":154},"\\\"",[65,54875,3049],{"class":302},[65,54877,54878],{"class":154},"\\\"\"\n",[65,54880,54881],{"class":140,"line":3974},[65,54882,54742],{"class":154},[65,54884,54885],{"class":140,"line":3979},[65,54886,4879],{"class":154},[65,54888,54889,54891,54894,54896,54898],{"class":140,"line":4031},[65,54890,54369],{"class":154},[65,54892,54893],{"class":168},"for-mobile",[65,54895,34857],{"class":154},[65,54897,797],{"class":154},[65,54899,418],{"class":154},[65,54901,54902,54904,54906,54908,54910,54912,54915,54917],{"class":140,"line":4036},[65,54903,54402],{"class":154},[65,54905,54372],{"class":326},[65,54907,34857],{"class":154},[65,54909,797],{"class":154},[65,54911,35344],{"class":154},[65,54913,54914],{"class":302},"fm",[65,54916,34857],{"class":154},[65,54918,3820],{"class":154},[65,54920,54921,54923,54925,54927,54929],{"class":140,"line":4070},[65,54922,54402],{"class":154},[65,54924,34838],{"class":326},[65,54926,34857],{"class":154},[65,54928,797],{"class":154},[65,54930,16316],{"class":154},[65,54932,54933,54935,54938,54940,54942],{"class":140,"line":4086},[65,54934,54730],{"class":154},[65,54936,54937],{"class":302},"class=",[65,54939,54873],{"class":154},[65,54941,54893],{"class":302},[65,54943,54878],{"class":154},[65,54945,54946],{"class":140,"line":4102},[65,54947,54742],{"class":154},[65,54949,54950],{"class":140,"line":4118},[65,54951,4879],{"class":154},[65,54953,54954,54956,54959,54961,54963],{"class":140,"line":4149},[65,54955,54369],{"class":154},[65,54957,54958],{"class":168},"for-large",[65,54960,34857],{"class":154},[65,54962,797],{"class":154},[65,54964,418],{"class":154},[65,54966,54967,54969,54971,54973,54975,54977,54980,54982],{"class":140,"line":4163},[65,54968,54402],{"class":154},[65,54970,54372],{"class":326},[65,54972,34857],{"class":154},[65,54974,797],{"class":154},[65,54976,35344],{"class":154},[65,54978,54979],{"class":302},"fl",[65,54981,34857],{"class":154},[65,54983,3820],{"class":154},[65,54985,54986,54988,54990,54992,54994],{"class":140,"line":4168},[65,54987,54402],{"class":154},[65,54989,34838],{"class":326},[65,54991,34857],{"class":154},[65,54993,797],{"class":154},[65,54995,16316],{"class":154},[65,54997,54998,55000,55002,55004,55006],{"class":140,"line":4194},[65,54999,54730],{"class":154},[65,55001,54937],{"class":302},[65,55003,54873],{"class":154},[65,55005,54958],{"class":302},[65,55007,54878],{"class":154},[65,55009,55010],{"class":140,"line":4199},[65,55011,54742],{"class":154},[65,55013,55014],{"class":140,"line":4221},[65,55015,4879],{"class":154},[65,55017,55018,55020,55022,55024,55026],{"class":140,"line":4228},[65,55019,54369],{"class":154},[65,55021,38871],{"class":168},[65,55023,34857],{"class":154},[65,55025,797],{"class":154},[65,55027,418],{"class":154},[65,55029,55030,55032,55034,55036,55038,55040,55042,55044],{"class":140,"line":4235},[65,55031,54402],{"class":154},[65,55033,54372],{"class":326},[65,55035,34857],{"class":154},[65,55037,797],{"class":154},[65,55039,35344],{"class":154},[65,55041,38871],{"class":302},[65,55043,34857],{"class":154},[65,55045,3820],{"class":154},[65,55047,55048,55050,55052,55054,55056],{"class":140,"line":4244},[65,55049,54402],{"class":154},[65,55051,34838],{"class":326},[65,55053,34857],{"class":154},[65,55055,797],{"class":154},[65,55057,16316],{"class":154},[65,55059,55060,55062,55065,55068,55070,55072],{"class":140,"line":4261},[65,55061,54511],{"class":154},[65,55063,55064],{"class":302},".__swiper(data-slider=",[65,55066,55067],{"class":154},"\\\"\\\"",[65,55069,235],{"class":302},[65,55071,34857],{"class":154},[65,55073,3820],{"class":154},[65,55075,55076,55078,55081,55083],{"class":140,"line":4266},[65,55077,54511],{"class":154},[65,55079,55080],{"class":302}," .swiper",[65,55082,34857],{"class":154},[65,55084,3820],{"class":154},[65,55086,55087,55089,55092,55094],{"class":140,"line":4275},[65,55088,54511],{"class":154},[65,55090,55091],{"class":302}," .swiper-wrapper",[65,55093,34857],{"class":154},[65,55095,3820],{"class":154},[65,55097,55098,55100,55103,55105],{"class":140,"line":4280},[65,55099,54511],{"class":154},[65,55101,55102],{"class":302}," .swiper-slide",[65,55104,34857],{"class":154},[65,55106,3820],{"class":154},[65,55108,55109],{"class":140,"line":4322},[65,55110,55111],{"class":154}," ],\n",[65,55113,55114],{"class":140,"line":4375},[65,55115,4879],{"class":154},[65,55117,55118,55120,55123,55125,55127],{"class":140,"line":4408},[65,55119,54369],{"class":154},[65,55121,55122],{"class":168},"title-link",[65,55124,34857],{"class":154},[65,55126,797],{"class":154},[65,55128,418],{"class":154},[65,55130,55131,55133,55135,55137,55139,55141,55143,55145],{"class":140,"line":4426},[65,55132,54402],{"class":154},[65,55134,54372],{"class":326},[65,55136,34857],{"class":154},[65,55138,797],{"class":154},[65,55140,35344],{"class":154},[65,55142,55122],{"class":302},[65,55144,34857],{"class":154},[65,55146,3820],{"class":154},[65,55148,55149,55151,55153,55155,55157],{"class":140,"line":4431},[65,55150,54402],{"class":154},[65,55152,34838],{"class":326},[65,55154,34857],{"class":154},[65,55156,797],{"class":154},[65,55158,16316],{"class":154},[65,55160,55161,55163,55166,55168],{"class":140,"line":4447},[65,55162,54511],{"class":154},[65,55164,55165],{"class":302},"{ title: '', link: '' },",[65,55167,34857],{"class":154},[65,55169,3820],{"class":154},[65,55171,55172],{"class":140,"line":4470},[65,55173,55111],{"class":154},[65,55175,55176],{"class":140,"line":4490},[65,55177,4879],{"class":154},[65,55179,55180],{"class":140,"line":4495},[65,55181,55182],{"class":278}," // コンポーネント\n",[65,55184,55185,55187,55190,55192,55194],{"class":140,"line":4523},[65,55186,54369],{"class":154},[65,55188,55189],{"class":168},".c-list",[65,55191,34857],{"class":154},[65,55193,797],{"class":154},[65,55195,418],{"class":154},[65,55197,55198,55200,55202,55204,55206,55208,55211,55213],{"class":140,"line":4528},[65,55199,54402],{"class":154},[65,55201,54372],{"class":326},[65,55203,34857],{"class":154},[65,55205,797],{"class":154},[65,55207,35344],{"class":154},[65,55209,55210],{"class":302},"lis",[65,55212,34857],{"class":154},[65,55214,3820],{"class":154},[65,55216,55217,55219,55221,55223,55225],{"class":140,"line":4542},[65,55218,54402],{"class":154},[65,55220,34838],{"class":326},[65,55222,34857],{"class":154},[65,55224,797],{"class":154},[65,55226,16316],{"class":154},[65,55228,55229,55231,55234,55236],{"class":140,"line":4547},[65,55230,54730],{"class":154},[65,55232,55233],{"class":302},"ul.c-list",[65,55235,34857],{"class":154},[65,55237,3820],{"class":154},[65,55239,55240,55242,55245,55247],{"class":140,"line":4561},[65,55241,54805],{"class":154},[65,55243,55244],{"class":302},"each val in data",[65,55246,34857],{"class":154},[65,55248,3820],{"class":154},[65,55250,55251,55254,55257,55259],{"class":140,"line":4567},[65,55252,55253],{"class":154}," \"\\t\\t",[65,55255,55256],{"class":302},"li.c-list__item",[65,55258,34857],{"class":154},[65,55260,3820],{"class":154},[65,55262,55263,55266,55269,55271],{"class":140,"line":4572},[65,55264,55265],{"class":154}," \"\\t\\t\\t",[65,55267,55268],{"class":302},"a(href=`${val.link}`).c-list__link",[65,55270,34857],{"class":154},[65,55272,3820],{"class":154},[65,55274,55275,55278,55281,55283],{"class":140,"line":4582},[65,55276,55277],{"class":154}," \"\\t\\t\\t\\t",[65,55279,55280],{"class":302},"|!{val.${1:text}}",[65,55282,34857],{"class":154},[65,55284,3820],{"class":154},[65,55286,55287],{"class":140,"line":4587},[65,55288,55111],{"class":154},[65,55290,55291],{"class":140,"line":4603},[65,55292,4879],{"class":154},[65,55294,55295],{"class":140,"line":4637},[65,55296,243],{"class":154},[1177,55298,55300],{"id":55299},"scssのユーザースニペット","SCSSのユーザースニペット",[15,55302,55303,55304,54483],{},"VSCodeでSCSSを登録するには、",[124,55305,55306],{},"scss.json(SCSS)",[129,55308,55311],{"className":54342,"code":55309,"filename":55310,"language":54344,"meta":135,"style":135},"{\n \"centerY\": {\n \"prefix\": \"cy\",\n \"body\": [\n \"position: absolute;\",\n \"top: 50%;\",\n \"translate: 0 -50%;\"\n ],\n },\n \"centerX\": {\n \"prefix\": \"cx\",\n \"body\": [\n \"position: absolute;\",\n \"left: 50%;\",\n \"translate: -50% 0;\"\n ],\n },\n \"positionXYCenter\": {\n \"prefix\": \"cxy\",\n \"body\": [\n \"position: absolute;\",\n \"left: 50%;\",\n \"top: 50%;\",\n \"translate: -50% -50%;\"\n ],\n },\n \"absoluteTopLeft0\": {\n \"prefix\": \"atl\",\n \"body\": [\n \"position: absolute;\",\n \"top: 0;\",\n \"left: 0;\"\n ],\n },\n \"absoluteTopRight0\": {\n \"prefix\": \"atr\",\n \"body\": [\n \"position: absolute;\",\n \"top: 0;\",\n \"right: 0;\"\n ],\n },\n \"flexCenter\": {\n \"prefix\": \"fc\",\n \"body\": [\n \"display: flex;\",\n \"justify-content: center;\",\n \"align-items: center;\",\n ],\n },\n \"flex column\": {\n \"prefix\": \"fxc\",\n \"body\": [\n \"display: flex;\",\n \"flex-direction: column;\"\n ]\n },\n \"before\": {\n \"prefix\": \"before\",\n \"body\": [\n \"&::before {\",\n \" \\tcontent: '';\",\n \"\\t$1\",\n \"}\"\n ],\n },\n \"after\": {\n \"prefix\": \"after\",\n \"body\": [\n \"&::after {\",\n \" \\tcontent: '';\",\n \"\\t$1\",\n \"}\"\n ],\n },\n \"wh100%\": {\n \"prefix\": \"wh100\",\n \"body\": [\n \"width: 100%;\",\n \"height: 100%;\"\n ]\n },\n \"wh100vh\": {\n \"prefix\": \"wh100vh\",\n \"body\": [\n \"width: 100%;\",\n \"height: 100vh;\"\n ]\n },\n \"circle\": {\n \"prefix\": \"ci\",\n \"body\": [\n \"width: $1;\",\n \"height: $1;\",\n \"background: $2;\",\n \"border-radius: 50%;\",\n ]\n },\n \"media-mobile\": {\n \"prefix\": \"@mobile\",\n \"body\": [\n \"@media (--mobile) {\",\n \"\\t$1\",\n \"}\"\n ]\n },\n \"media-large\": {\n \"prefix\": \"@large\",\n \"body\": [\n \"@media (--large) {\",\n \"\\t$1\",\n \"}\"\n ]\n },\n \"media-tablet\": {\n \"prefix\": \"@tablet\",\n \"body\": [\n \"@media (--tablet) {\",\n \"\\t$1\",\n \"}\"\n ]\n },\n \"media-phone\": {\n \"prefix\": \"@phone\",\n \"body\": [\n \"@media (--phone) {\",\n \"\\t$1\",\n \"}\"\n ]\n },\n \"breakpoint-tablet\": {\n \"prefix\": \"bta\",\n \"body\": [\n \"@include bp.breakpoint('tablet') {\",\n \"\\t$1\",\n \"}\"\n ]\n },\n \"breakpoint-sp\": {\n \"prefix\": \"bs\",\n \"body\": [\n \"@include bp.breakpoint('sp') {\",\n \"\\t$1\",\n \"}\"\n ]\n },\n \"hover\": {\n \"prefix\": \"ho\",\n \"body\": [\n \"&:hover {\",\n \"\\t$1\",\n \"}\"\n ]\n },\n \"object-fit-cover\": {\n \"prefix\": \"objc\",\n \"body\": [\n \"object-fit: cover;\"\n ]\n },\n \"width-height\": {\n \"prefix\": \"wh\",\n \"body\": [\n \"width: $1;\",\n \"height: $2;\",\n ]\n },\n \"translate\": {\n \"prefix\": \"tl\",\n \"body\": [\n \"translate: $1 $2;\"\n ]\n },\n \"scale\": {\n \"prefix\": \"sc\",\n \"body\": [\n \"scale: $1;\"\n ]\n },\n \"rotate\": {\n \"prefix\": \"ro\",\n \"body\": [\n \"rotate: $1deg;\"\n ]\n },\n \"place-items\": {\n \"prefix\": \"pic\",\n \"body\": [\n \"place-items: center;\"\n ]\n },\n \"border-radius\": {\n \"prefix\": \"bdr50\",\n \"body\": [\n \"border-radius: 50%;\"\n ]\n },\n \"padding-inline\": {\n \"prefix\": \"pai\",\n \"body\": [\n \"padding-inline: $1;\"\n ]\n },\n \"padding-block\": {\n \"prefix\": \"pab\",\n \"body\": [\n \"padding-block: $1;\"\n ]\n },\n \"margin-inline\": {\n \"prefix\": \"mai\",\n \"body\": [\n \"margin-inline: $1;\"\n ]\n },\n \"margin-inline auto\": {\n \"prefix\": \"maia\",\n \"body\": [\n \"margin-inline: auto;\"\n ]\n },\n \"margin-block\": {\n \"prefix\": \"mab\",\n \"body\": [\n \"margin-block: $1;\"\n ]\n },\n \"left calc 50%\": {\n \"prefix\": \"lcalc\",\n \"body\": [\n \"left: calc(50% - $1);\"\n ]\n },\n \"background var\": {\n \"prefix\": \"bgv\",\n \"body\": [\n \"background: var(--$1);\"\n ]\n },\n \"color_white\": {\n \"prefix\": \"co\",\n \"body\": [\n \"color: #fff;\"\n ]\n },\n \"owl\": {\n \"prefix\": \"ow\",\n \"body\": [\n \"> * + * {\",\n \"\\t$1\",\n \"}\",\n ]\n },\n \"clip-path\": {\n \"prefix\": \"cl\",\n \"body\": [\n \"clip-path: $1;\"\n ]\n },\n \"clip-path0\": {\n \"prefix\": \"cl0\",\n \"body\": [\n \"clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);\"\n ]\n },\n \"clip-path100\": {\n \"prefix\": \"cl100\",\n \"body\": [\n \"clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);\"\n ]\n },\n \"clip-pathl0\": {\n \"prefix\": \"cll0\",\n \"body\": [\n \"clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);\"\n ]\n },\n \"clip-pathr0\": {\n \"prefix\": \"clr0\",\n \"body\": [\n \"clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);\"\n ]\n },\n \"list\": {\n \"prefix\": \"list\",\n \"body\": [\n \"> * + * {\",\n \"\\tmargin-top: $1;\",\n \"}\",\n \"&__item {\",\n \"\\t$2\",\n \"}\",\n \"&__list {\",\n \"\\t$3\",\n \"}\",\n ]\n },\n}\n","scss.json",[124,55312,55313,55317,55330,55349,55361,55372,55383,55392,55396,55400,55413,55432,55444,55454,55465,55474,55478,55482,55495,55514,55526,55536,55546,55556,55565,55569,55573,55586,55605,55617,55627,55638,55647,55651,55655,55668,55687,55699,55709,55719,55728,55732,55736,55749,55768,55780,55791,55802,55813,55817,55821,55834,55853,55865,55875,55884,55888,55892,55904,55922,55934,55945,55959,55970,55978,55982,55986,55999,56017,56029,56040,56052,56062,56070,56074,56078,56091,56110,56122,56133,56142,56146,56150,56163,56181,56193,56203,56212,56216,56220,56233,56252,56264,56275,56286,56297,56308,56312,56316,56329,56348,56360,56371,56381,56389,56394,56399,56413,56433,56446,56458,56469,56478,56483,56488,56502,56522,56535,56547,56558,56567,56572,56577,56591,56611,56624,56636,56647,56656,56661,56666,56680,56700,56713,56725,56736,56745,56750,56755,56769,56789,56802,56814,56825,56834,56839,56844,56857,56877,56890,56902,56913,56922,56927,56932,56946,56966,56979,56989,56994,56999,57013,57033,57046,57057,57069,57074,57079,57092,57112,57125,57135,57140,57145,57158,57178,57191,57201,57206,57211,57225,57245,57258,57268,57273,57278,57292,57312,57325,57335,57340,57345,57359,57379,57392,57401,57406,57411,57425,57445,57458,57468,57473,57478,57492,57512,57525,57535,57540,57545,57559,57579,57592,57602,57607,57612,57626,57646,57659,57669,57674,57679,57693,57713,57726,57736,57741,57746,57760,57780,57793,57803,57808,57813,57827,57847,57860,57870,57875,57880,57894,57914,57927,57937,57942,57947,57961,57981,57994,58006,58017,58028,58033,58038,58051,58071,58084,58094,58099,58104,58118,58138,58151,58161,58166,58171,58185,58205,58218,58228,58233,58238,58252,58272,58285,58295,58300,58305,58319,58339,58352,58362,58367,58372,58385,58404,58417,58428,58440,58451,58463,58475,58486,58498,58510,58521,58526,58531],{"__ignoreMap":135},[65,55314,55315],{"class":140,"line":141},[65,55316,208],{"class":154},[65,55318,55319,55321,55324,55326,55328],{"class":140,"line":158},[65,55320,54369],{"class":154},[65,55322,55323],{"class":168},"centerY",[65,55325,34857],{"class":154},[65,55327,797],{"class":154},[65,55329,418],{"class":154},[65,55331,55332,55334,55336,55338,55340,55342,55345,55347],{"class":140,"line":165},[65,55333,54402],{"class":154},[65,55335,54372],{"class":326},[65,55337,34857],{"class":154},[65,55339,797],{"class":154},[65,55341,35344],{"class":154},[65,55343,55344],{"class":302},"cy",[65,55346,34857],{"class":154},[65,55348,3820],{"class":154},[65,55350,55351,55353,55355,55357,55359],{"class":140,"line":180},[65,55352,54402],{"class":154},[65,55354,34838],{"class":326},[65,55356,34857],{"class":154},[65,55358,797],{"class":154},[65,55360,16316],{"class":154},[65,55362,55363,55365,55368,55370],{"class":140,"line":194},[65,55364,54511],{"class":154},[65,55366,55367],{"class":302},"position: absolute;",[65,55369,34857],{"class":154},[65,55371,3820],{"class":154},[65,55373,55374,55376,55379,55381],{"class":140,"line":211},[65,55375,54511],{"class":154},[65,55377,55378],{"class":302},"top: 50%;",[65,55380,34857],{"class":154},[65,55382,3820],{"class":154},[65,55384,55385,55387,55390],{"class":140,"line":240},[65,55386,54511],{"class":154},[65,55388,55389],{"class":302},"translate: 0 -50%;",[65,55391,36971],{"class":154},[65,55393,55394],{"class":140,"line":391},[65,55395,55111],{"class":154},[65,55397,55398],{"class":140,"line":401},[65,55399,4879],{"class":154},[65,55401,55402,55404,55407,55409,55411],{"class":140,"line":406},[65,55403,54369],{"class":154},[65,55405,55406],{"class":168},"centerX",[65,55408,34857],{"class":154},[65,55410,797],{"class":154},[65,55412,418],{"class":154},[65,55414,55415,55417,55419,55421,55423,55425,55428,55430],{"class":140,"line":421},[65,55416,54402],{"class":154},[65,55418,54372],{"class":326},[65,55420,34857],{"class":154},[65,55422,797],{"class":154},[65,55424,35344],{"class":154},[65,55426,55427],{"class":302},"cx",[65,55429,34857],{"class":154},[65,55431,3820],{"class":154},[65,55433,55434,55436,55438,55440,55442],{"class":140,"line":435},[65,55435,54402],{"class":154},[65,55437,34838],{"class":326},[65,55439,34857],{"class":154},[65,55441,797],{"class":154},[65,55443,16316],{"class":154},[65,55445,55446,55448,55450,55452],{"class":140,"line":447},[65,55447,54511],{"class":154},[65,55449,55367],{"class":302},[65,55451,34857],{"class":154},[65,55453,3820],{"class":154},[65,55455,55456,55458,55461,55463],{"class":140,"line":459},[65,55457,54511],{"class":154},[65,55459,55460],{"class":302},"left: 50%;",[65,55462,34857],{"class":154},[65,55464,3820],{"class":154},[65,55466,55467,55469,55472],{"class":140,"line":471},[65,55468,54511],{"class":154},[65,55470,55471],{"class":302},"translate: -50% 0;",[65,55473,36971],{"class":154},[65,55475,55476],{"class":140,"line":63},[65,55477,55111],{"class":154},[65,55479,55480],{"class":140,"line":495},[65,55481,4879],{"class":154},[65,55483,55484,55486,55489,55491,55493],{"class":140,"line":507},[65,55485,54369],{"class":154},[65,55487,55488],{"class":168},"positionXYCenter",[65,55490,34857],{"class":154},[65,55492,797],{"class":154},[65,55494,418],{"class":154},[65,55496,55497,55499,55501,55503,55505,55507,55510,55512],{"class":140,"line":519},[65,55498,54402],{"class":154},[65,55500,54372],{"class":326},[65,55502,34857],{"class":154},[65,55504,797],{"class":154},[65,55506,35344],{"class":154},[65,55508,55509],{"class":302},"cxy",[65,55511,34857],{"class":154},[65,55513,3820],{"class":154},[65,55515,55516,55518,55520,55522,55524],{"class":140,"line":531},[65,55517,54402],{"class":154},[65,55519,34838],{"class":326},[65,55521,34857],{"class":154},[65,55523,797],{"class":154},[65,55525,16316],{"class":154},[65,55527,55528,55530,55532,55534],{"class":140,"line":543},[65,55529,54511],{"class":154},[65,55531,55367],{"class":302},[65,55533,34857],{"class":154},[65,55535,3820],{"class":154},[65,55537,55538,55540,55542,55544],{"class":140,"line":555},[65,55539,54511],{"class":154},[65,55541,55460],{"class":302},[65,55543,34857],{"class":154},[65,55545,3820],{"class":154},[65,55547,55548,55550,55552,55554],{"class":140,"line":567},[65,55549,54511],{"class":154},[65,55551,55378],{"class":302},[65,55553,34857],{"class":154},[65,55555,3820],{"class":154},[65,55557,55558,55560,55563],{"class":140,"line":3757},[65,55559,54511],{"class":154},[65,55561,55562],{"class":302},"translate: -50% -50%;",[65,55564,36971],{"class":154},[65,55566,55567],{"class":140,"line":3787},[65,55568,55111],{"class":154},[65,55570,55571],{"class":140,"line":3792},[65,55572,4879],{"class":154},[65,55574,55575,55577,55580,55582,55584],{"class":140,"line":3814},[65,55576,54369],{"class":154},[65,55578,55579],{"class":168},"absoluteTopLeft0",[65,55581,34857],{"class":154},[65,55583,797],{"class":154},[65,55585,418],{"class":154},[65,55587,55588,55590,55592,55594,55596,55598,55601,55603],{"class":140,"line":3823},[65,55589,54402],{"class":154},[65,55591,54372],{"class":326},[65,55593,34857],{"class":154},[65,55595,797],{"class":154},[65,55597,35344],{"class":154},[65,55599,55600],{"class":302},"atl",[65,55602,34857],{"class":154},[65,55604,3820],{"class":154},[65,55606,55607,55609,55611,55613,55615],{"class":140,"line":3831},[65,55608,54402],{"class":154},[65,55610,34838],{"class":326},[65,55612,34857],{"class":154},[65,55614,797],{"class":154},[65,55616,16316],{"class":154},[65,55618,55619,55621,55623,55625],{"class":140,"line":3841},[65,55620,54730],{"class":154},[65,55622,55367],{"class":302},[65,55624,34857],{"class":154},[65,55626,3820],{"class":154},[65,55628,55629,55631,55634,55636],{"class":140,"line":3861},[65,55630,54730],{"class":154},[65,55632,55633],{"class":302},"top: 0;",[65,55635,34857],{"class":154},[65,55637,3820],{"class":154},[65,55639,55640,55642,55645],{"class":140,"line":3867},[65,55641,54730],{"class":154},[65,55643,55644],{"class":302},"left: 0;",[65,55646,36971],{"class":154},[65,55648,55649],{"class":140,"line":3876},[65,55650,55111],{"class":154},[65,55652,55653],{"class":140,"line":3881},[65,55654,4879],{"class":154},[65,55656,55657,55659,55662,55664,55666],{"class":140,"line":3920},[65,55658,54369],{"class":154},[65,55660,55661],{"class":168},"absoluteTopRight0",[65,55663,34857],{"class":154},[65,55665,797],{"class":154},[65,55667,418],{"class":154},[65,55669,55670,55672,55674,55676,55678,55680,55683,55685],{"class":140,"line":3954},[65,55671,54402],{"class":154},[65,55673,54372],{"class":326},[65,55675,34857],{"class":154},[65,55677,797],{"class":154},[65,55679,35344],{"class":154},[65,55681,55682],{"class":302},"atr",[65,55684,34857],{"class":154},[65,55686,3820],{"class":154},[65,55688,55689,55691,55693,55695,55697],{"class":140,"line":3974},[65,55690,54402],{"class":154},[65,55692,34838],{"class":326},[65,55694,34857],{"class":154},[65,55696,797],{"class":154},[65,55698,16316],{"class":154},[65,55700,55701,55703,55705,55707],{"class":140,"line":3979},[65,55702,54730],{"class":154},[65,55704,55367],{"class":302},[65,55706,34857],{"class":154},[65,55708,3820],{"class":154},[65,55710,55711,55713,55715,55717],{"class":140,"line":4031},[65,55712,54730],{"class":154},[65,55714,55633],{"class":302},[65,55716,34857],{"class":154},[65,55718,3820],{"class":154},[65,55720,55721,55723,55726],{"class":140,"line":4036},[65,55722,54730],{"class":154},[65,55724,55725],{"class":302},"right: 0;",[65,55727,36971],{"class":154},[65,55729,55730],{"class":140,"line":4070},[65,55731,55111],{"class":154},[65,55733,55734],{"class":140,"line":4086},[65,55735,4879],{"class":154},[65,55737,55738,55740,55743,55745,55747],{"class":140,"line":4102},[65,55739,54369],{"class":154},[65,55741,55742],{"class":168},"flexCenter",[65,55744,34857],{"class":154},[65,55746,797],{"class":154},[65,55748,418],{"class":154},[65,55750,55751,55753,55755,55757,55759,55761,55764,55766],{"class":140,"line":4118},[65,55752,54402],{"class":154},[65,55754,54372],{"class":326},[65,55756,34857],{"class":154},[65,55758,797],{"class":154},[65,55760,35344],{"class":154},[65,55762,55763],{"class":302},"fc",[65,55765,34857],{"class":154},[65,55767,3820],{"class":154},[65,55769,55770,55772,55774,55776,55778],{"class":140,"line":4149},[65,55771,54402],{"class":154},[65,55773,34838],{"class":326},[65,55775,34857],{"class":154},[65,55777,797],{"class":154},[65,55779,16316],{"class":154},[65,55781,55782,55784,55787,55789],{"class":140,"line":4163},[65,55783,54511],{"class":154},[65,55785,55786],{"class":302},"display: flex;",[65,55788,34857],{"class":154},[65,55790,3820],{"class":154},[65,55792,55793,55795,55798,55800],{"class":140,"line":4168},[65,55794,54511],{"class":154},[65,55796,55797],{"class":302},"justify-content: center;",[65,55799,34857],{"class":154},[65,55801,3820],{"class":154},[65,55803,55804,55806,55809,55811],{"class":140,"line":4194},[65,55805,54511],{"class":154},[65,55807,55808],{"class":302},"align-items: center;",[65,55810,34857],{"class":154},[65,55812,3820],{"class":154},[65,55814,55815],{"class":140,"line":4199},[65,55816,55111],{"class":154},[65,55818,55819],{"class":140,"line":4221},[65,55820,4879],{"class":154},[65,55822,55823,55825,55828,55830,55832],{"class":140,"line":4228},[65,55824,54369],{"class":154},[65,55826,55827],{"class":168},"flex column",[65,55829,34857],{"class":154},[65,55831,797],{"class":154},[65,55833,418],{"class":154},[65,55835,55836,55838,55840,55842,55844,55846,55849,55851],{"class":140,"line":4235},[65,55837,54402],{"class":154},[65,55839,54372],{"class":326},[65,55841,34857],{"class":154},[65,55843,797],{"class":154},[65,55845,35344],{"class":154},[65,55847,55848],{"class":302},"fxc",[65,55850,34857],{"class":154},[65,55852,3820],{"class":154},[65,55854,55855,55857,55859,55861,55863],{"class":140,"line":4244},[65,55856,54402],{"class":154},[65,55858,34838],{"class":326},[65,55860,34857],{"class":154},[65,55862,797],{"class":154},[65,55864,16316],{"class":154},[65,55866,55867,55869,55871,55873],{"class":140,"line":4261},[65,55868,54730],{"class":154},[65,55870,55786],{"class":302},[65,55872,34857],{"class":154},[65,55874,3820],{"class":154},[65,55876,55877,55879,55882],{"class":140,"line":4266},[65,55878,54730],{"class":154},[65,55880,55881],{"class":302},"flex-direction: column;",[65,55883,36971],{"class":154},[65,55885,55886],{"class":140,"line":4275},[65,55887,54742],{"class":154},[65,55889,55890],{"class":140,"line":4280},[65,55891,4879],{"class":154},[65,55893,55894,55896,55898,55900,55902],{"class":140,"line":4322},[65,55895,54369],{"class":154},[65,55897,53056],{"class":168},[65,55899,34857],{"class":154},[65,55901,797],{"class":154},[65,55903,418],{"class":154},[65,55905,55906,55908,55910,55912,55914,55916,55918,55920],{"class":140,"line":4375},[65,55907,54402],{"class":154},[65,55909,54372],{"class":326},[65,55911,34857],{"class":154},[65,55913,797],{"class":154},[65,55915,35344],{"class":154},[65,55917,53056],{"class":302},[65,55919,34857],{"class":154},[65,55921,3820],{"class":154},[65,55923,55924,55926,55928,55930,55932],{"class":140,"line":4408},[65,55925,54402],{"class":154},[65,55927,34838],{"class":326},[65,55929,34857],{"class":154},[65,55931,797],{"class":154},[65,55933,16316],{"class":154},[65,55935,55936,55938,55941,55943],{"class":140,"line":4426},[65,55937,54730],{"class":154},[65,55939,55940],{"class":302},"&::before {",[65,55942,34857],{"class":154},[65,55944,3820],{"class":154},[65,55946,55947,55949,55952,55955,55957],{"class":140,"line":4431},[65,55948,54730],{"class":154},[65,55950,55951],{"class":154}," \\t",[65,55953,55954],{"class":302},"content: '';",[65,55956,34857],{"class":154},[65,55958,3820],{"class":154},[65,55960,55961,55963,55966,55968],{"class":140,"line":4447},[65,55962,54805],{"class":154},[65,55964,55965],{"class":302},"$1",[65,55967,34857],{"class":154},[65,55969,3820],{"class":154},[65,55971,55972,55974,55976],{"class":140,"line":4470},[65,55973,54730],{"class":154},[65,55975,2899],{"class":302},[65,55977,36971],{"class":154},[65,55979,55980],{"class":140,"line":4490},[65,55981,55111],{"class":154},[65,55983,55984],{"class":140,"line":4495},[65,55985,4879],{"class":154},[65,55987,55988,55990,55993,55995,55997],{"class":140,"line":4523},[65,55989,54369],{"class":154},[65,55991,55992],{"class":168},"after",[65,55994,34857],{"class":154},[65,55996,797],{"class":154},[65,55998,418],{"class":154},[65,56000,56001,56003,56005,56007,56009,56011,56013,56015],{"class":140,"line":4528},[65,56002,54402],{"class":154},[65,56004,54372],{"class":326},[65,56006,34857],{"class":154},[65,56008,797],{"class":154},[65,56010,35344],{"class":154},[65,56012,55992],{"class":302},[65,56014,34857],{"class":154},[65,56016,3820],{"class":154},[65,56018,56019,56021,56023,56025,56027],{"class":140,"line":4542},[65,56020,54402],{"class":154},[65,56022,34838],{"class":326},[65,56024,34857],{"class":154},[65,56026,797],{"class":154},[65,56028,16316],{"class":154},[65,56030,56031,56033,56036,56038],{"class":140,"line":4547},[65,56032,54730],{"class":154},[65,56034,56035],{"class":302},"&::after {",[65,56037,34857],{"class":154},[65,56039,3820],{"class":154},[65,56041,56042,56044,56046,56048,56050],{"class":140,"line":4561},[65,56043,54730],{"class":154},[65,56045,55951],{"class":154},[65,56047,55954],{"class":302},[65,56049,34857],{"class":154},[65,56051,3820],{"class":154},[65,56053,56054,56056,56058,56060],{"class":140,"line":4567},[65,56055,54805],{"class":154},[65,56057,55965],{"class":302},[65,56059,34857],{"class":154},[65,56061,3820],{"class":154},[65,56063,56064,56066,56068],{"class":140,"line":4572},[65,56065,54730],{"class":154},[65,56067,2899],{"class":302},[65,56069,36971],{"class":154},[65,56071,56072],{"class":140,"line":4582},[65,56073,55111],{"class":154},[65,56075,56076],{"class":140,"line":4587},[65,56077,4879],{"class":154},[65,56079,56080,56082,56085,56087,56089],{"class":140,"line":4603},[65,56081,54369],{"class":154},[65,56083,56084],{"class":168},"wh100%",[65,56086,34857],{"class":154},[65,56088,797],{"class":154},[65,56090,418],{"class":154},[65,56092,56093,56095,56097,56099,56101,56103,56106,56108],{"class":140,"line":4637},[65,56094,54402],{"class":154},[65,56096,54372],{"class":326},[65,56098,34857],{"class":154},[65,56100,797],{"class":154},[65,56102,35344],{"class":154},[65,56104,56105],{"class":302},"wh100",[65,56107,34857],{"class":154},[65,56109,3820],{"class":154},[65,56111,56112,56114,56116,56118,56120],{"class":140,"line":4685},[65,56113,54402],{"class":154},[65,56115,34838],{"class":326},[65,56117,34857],{"class":154},[65,56119,797],{"class":154},[65,56121,16316],{"class":154},[65,56123,56124,56126,56129,56131],{"class":140,"line":4690},[65,56125,54730],{"class":154},[65,56127,56128],{"class":302},"width: 100%;",[65,56130,34857],{"class":154},[65,56132,3820],{"class":154},[65,56134,56135,56137,56140],{"class":140,"line":4718},[65,56136,54730],{"class":154},[65,56138,56139],{"class":302},"height: 100%;",[65,56141,36971],{"class":154},[65,56143,56144],{"class":140,"line":4728},[65,56145,54742],{"class":154},[65,56147,56148],{"class":140,"line":10019},[65,56149,4879],{"class":154},[65,56151,56152,56154,56157,56159,56161],{"class":140,"line":10042},[65,56153,54369],{"class":154},[65,56155,56156],{"class":168},"wh100vh",[65,56158,34857],{"class":154},[65,56160,797],{"class":154},[65,56162,418],{"class":154},[65,56164,56165,56167,56169,56171,56173,56175,56177,56179],{"class":140,"line":10065},[65,56166,54402],{"class":154},[65,56168,54372],{"class":326},[65,56170,34857],{"class":154},[65,56172,797],{"class":154},[65,56174,35344],{"class":154},[65,56176,56156],{"class":302},[65,56178,34857],{"class":154},[65,56180,3820],{"class":154},[65,56182,56183,56185,56187,56189,56191],{"class":140,"line":10070},[65,56184,54402],{"class":154},[65,56186,34838],{"class":326},[65,56188,34857],{"class":154},[65,56190,797],{"class":154},[65,56192,16316],{"class":154},[65,56194,56195,56197,56199,56201],{"class":140,"line":10079},[65,56196,54730],{"class":154},[65,56198,56128],{"class":302},[65,56200,34857],{"class":154},[65,56202,3820],{"class":154},[65,56204,56205,56207,56210],{"class":140,"line":10084},[65,56206,54730],{"class":154},[65,56208,56209],{"class":302},"height: 100vh;",[65,56211,36971],{"class":154},[65,56213,56214],{"class":140,"line":10109},[65,56215,54742],{"class":154},[65,56217,56218],{"class":140,"line":10114},[65,56219,4879],{"class":154},[65,56221,56222,56224,56227,56229,56231],{"class":140,"line":12945},[65,56223,54369],{"class":154},[65,56225,56226],{"class":168},"circle",[65,56228,34857],{"class":154},[65,56230,797],{"class":154},[65,56232,418],{"class":154},[65,56234,56235,56237,56239,56241,56243,56245,56248,56250],{"class":140,"line":12950},[65,56236,54402],{"class":154},[65,56238,54372],{"class":326},[65,56240,34857],{"class":154},[65,56242,797],{"class":154},[65,56244,35344],{"class":154},[65,56246,56247],{"class":302},"ci",[65,56249,34857],{"class":154},[65,56251,3820],{"class":154},[65,56253,56254,56256,56258,56260,56262],{"class":140,"line":12955},[65,56255,54402],{"class":154},[65,56257,34838],{"class":326},[65,56259,34857],{"class":154},[65,56261,797],{"class":154},[65,56263,16316],{"class":154},[65,56265,56266,56268,56271,56273],{"class":140,"line":12960},[65,56267,54730],{"class":154},[65,56269,56270],{"class":302},"width: $1;",[65,56272,34857],{"class":154},[65,56274,3820],{"class":154},[65,56276,56277,56279,56282,56284],{"class":140,"line":12965},[65,56278,54730],{"class":154},[65,56280,56281],{"class":302},"height: $1;",[65,56283,34857],{"class":154},[65,56285,3820],{"class":154},[65,56287,56288,56290,56293,56295],{"class":140,"line":12972},[65,56289,54730],{"class":154},[65,56291,56292],{"class":302},"background: $2;",[65,56294,34857],{"class":154},[65,56296,3820],{"class":154},[65,56298,56299,56301,56304,56306],{"class":140,"line":12981},[65,56300,54730],{"class":154},[65,56302,56303],{"class":302},"border-radius: 50%;",[65,56305,34857],{"class":154},[65,56307,3820],{"class":154},[65,56309,56310],{"class":140,"line":12998},[65,56311,54742],{"class":154},[65,56313,56314],{"class":140,"line":13019},[65,56315,4879],{"class":154},[65,56317,56318,56320,56323,56325,56327],{"class":140,"line":13040},[65,56319,54369],{"class":154},[65,56321,56322],{"class":168},"media-mobile",[65,56324,34857],{"class":154},[65,56326,797],{"class":154},[65,56328,418],{"class":154},[65,56330,56331,56333,56335,56337,56339,56341,56344,56346],{"class":140,"line":13045},[65,56332,54402],{"class":154},[65,56334,54372],{"class":326},[65,56336,34857],{"class":154},[65,56338,797],{"class":154},[65,56340,35344],{"class":154},[65,56342,56343],{"class":302},"@mobile",[65,56345,34857],{"class":154},[65,56347,3820],{"class":154},[65,56349,56350,56352,56354,56356,56358],{"class":140,"line":13054},[65,56351,54402],{"class":154},[65,56353,34838],{"class":326},[65,56355,34857],{"class":154},[65,56357,797],{"class":154},[65,56359,16316],{"class":154},[65,56361,56362,56364,56367,56369],{"class":140,"line":13059},[65,56363,54730],{"class":154},[65,56365,56366],{"class":302},"@media (--mobile) {",[65,56368,34857],{"class":154},[65,56370,3820],{"class":154},[65,56372,56373,56375,56377,56379],{"class":140,"line":13084},[65,56374,54805],{"class":154},[65,56376,55965],{"class":302},[65,56378,34857],{"class":154},[65,56380,3820],{"class":154},[65,56382,56383,56385,56387],{"class":140,"line":13089},[65,56384,54730],{"class":154},[65,56386,2899],{"class":302},[65,56388,36971],{"class":154},[65,56390,56392],{"class":140,"line":56391},105,[65,56393,54742],{"class":154},[65,56395,56397],{"class":140,"line":56396},106,[65,56398,4879],{"class":154},[65,56400,56402,56404,56407,56409,56411],{"class":140,"line":56401},107,[65,56403,54369],{"class":154},[65,56405,56406],{"class":168},"media-large",[65,56408,34857],{"class":154},[65,56410,797],{"class":154},[65,56412,418],{"class":154},[65,56414,56416,56418,56420,56422,56424,56426,56429,56431],{"class":140,"line":56415},108,[65,56417,54402],{"class":154},[65,56419,54372],{"class":326},[65,56421,34857],{"class":154},[65,56423,797],{"class":154},[65,56425,35344],{"class":154},[65,56427,56428],{"class":302},"@large",[65,56430,34857],{"class":154},[65,56432,3820],{"class":154},[65,56434,56436,56438,56440,56442,56444],{"class":140,"line":56435},109,[65,56437,54402],{"class":154},[65,56439,34838],{"class":326},[65,56441,34857],{"class":154},[65,56443,797],{"class":154},[65,56445,16316],{"class":154},[65,56447,56449,56451,56454,56456],{"class":140,"line":56448},110,[65,56450,54730],{"class":154},[65,56452,56453],{"class":302},"@media (--large) {",[65,56455,34857],{"class":154},[65,56457,3820],{"class":154},[65,56459,56461,56463,56465,56467],{"class":140,"line":56460},111,[65,56462,54805],{"class":154},[65,56464,55965],{"class":302},[65,56466,34857],{"class":154},[65,56468,3820],{"class":154},[65,56470,56472,56474,56476],{"class":140,"line":56471},112,[65,56473,54730],{"class":154},[65,56475,2899],{"class":302},[65,56477,36971],{"class":154},[65,56479,56481],{"class":140,"line":56480},113,[65,56482,54742],{"class":154},[65,56484,56486],{"class":140,"line":56485},114,[65,56487,4879],{"class":154},[65,56489,56491,56493,56496,56498,56500],{"class":140,"line":56490},115,[65,56492,54369],{"class":154},[65,56494,56495],{"class":168},"media-tablet",[65,56497,34857],{"class":154},[65,56499,797],{"class":154},[65,56501,418],{"class":154},[65,56503,56505,56507,56509,56511,56513,56515,56518,56520],{"class":140,"line":56504},116,[65,56506,54402],{"class":154},[65,56508,54372],{"class":326},[65,56510,34857],{"class":154},[65,56512,797],{"class":154},[65,56514,35344],{"class":154},[65,56516,56517],{"class":302},"@tablet",[65,56519,34857],{"class":154},[65,56521,3820],{"class":154},[65,56523,56525,56527,56529,56531,56533],{"class":140,"line":56524},117,[65,56526,54402],{"class":154},[65,56528,34838],{"class":326},[65,56530,34857],{"class":154},[65,56532,797],{"class":154},[65,56534,16316],{"class":154},[65,56536,56538,56540,56543,56545],{"class":140,"line":56537},118,[65,56539,54730],{"class":154},[65,56541,56542],{"class":302},"@media (--tablet) {",[65,56544,34857],{"class":154},[65,56546,3820],{"class":154},[65,56548,56550,56552,56554,56556],{"class":140,"line":56549},119,[65,56551,54805],{"class":154},[65,56553,55965],{"class":302},[65,56555,34857],{"class":154},[65,56557,3820],{"class":154},[65,56559,56561,56563,56565],{"class":140,"line":56560},120,[65,56562,54730],{"class":154},[65,56564,2899],{"class":302},[65,56566,36971],{"class":154},[65,56568,56570],{"class":140,"line":56569},121,[65,56571,54742],{"class":154},[65,56573,56575],{"class":140,"line":56574},122,[65,56576,4879],{"class":154},[65,56578,56580,56582,56585,56587,56589],{"class":140,"line":56579},123,[65,56581,54369],{"class":154},[65,56583,56584],{"class":168},"media-phone",[65,56586,34857],{"class":154},[65,56588,797],{"class":154},[65,56590,418],{"class":154},[65,56592,56594,56596,56598,56600,56602,56604,56607,56609],{"class":140,"line":56593},124,[65,56595,54402],{"class":154},[65,56597,54372],{"class":326},[65,56599,34857],{"class":154},[65,56601,797],{"class":154},[65,56603,35344],{"class":154},[65,56605,56606],{"class":302},"@phone",[65,56608,34857],{"class":154},[65,56610,3820],{"class":154},[65,56612,56614,56616,56618,56620,56622],{"class":140,"line":56613},125,[65,56615,54402],{"class":154},[65,56617,34838],{"class":326},[65,56619,34857],{"class":154},[65,56621,797],{"class":154},[65,56623,16316],{"class":154},[65,56625,56627,56629,56632,56634],{"class":140,"line":56626},126,[65,56628,54730],{"class":154},[65,56630,56631],{"class":302},"@media (--phone) {",[65,56633,34857],{"class":154},[65,56635,3820],{"class":154},[65,56637,56639,56641,56643,56645],{"class":140,"line":56638},127,[65,56640,54805],{"class":154},[65,56642,55965],{"class":302},[65,56644,34857],{"class":154},[65,56646,3820],{"class":154},[65,56648,56650,56652,56654],{"class":140,"line":56649},128,[65,56651,54730],{"class":154},[65,56653,2899],{"class":302},[65,56655,36971],{"class":154},[65,56657,56659],{"class":140,"line":56658},129,[65,56660,54742],{"class":154},[65,56662,56664],{"class":140,"line":56663},130,[65,56665,4879],{"class":154},[65,56667,56669,56671,56674,56676,56678],{"class":140,"line":56668},131,[65,56670,54369],{"class":154},[65,56672,56673],{"class":168},"breakpoint-tablet",[65,56675,34857],{"class":154},[65,56677,797],{"class":154},[65,56679,418],{"class":154},[65,56681,56683,56685,56687,56689,56691,56693,56696,56698],{"class":140,"line":56682},132,[65,56684,54402],{"class":154},[65,56686,54372],{"class":326},[65,56688,34857],{"class":154},[65,56690,797],{"class":154},[65,56692,35344],{"class":154},[65,56694,56695],{"class":302},"bta",[65,56697,34857],{"class":154},[65,56699,3820],{"class":154},[65,56701,56703,56705,56707,56709,56711],{"class":140,"line":56702},133,[65,56704,54402],{"class":154},[65,56706,34838],{"class":326},[65,56708,34857],{"class":154},[65,56710,797],{"class":154},[65,56712,16316],{"class":154},[65,56714,56716,56718,56721,56723],{"class":140,"line":56715},134,[65,56717,54730],{"class":154},[65,56719,56720],{"class":302},"@include bp.breakpoint('tablet') {",[65,56722,34857],{"class":154},[65,56724,3820],{"class":154},[65,56726,56728,56730,56732,56734],{"class":140,"line":56727},135,[65,56729,54805],{"class":154},[65,56731,55965],{"class":302},[65,56733,34857],{"class":154},[65,56735,3820],{"class":154},[65,56737,56739,56741,56743],{"class":140,"line":56738},136,[65,56740,54730],{"class":154},[65,56742,2899],{"class":302},[65,56744,36971],{"class":154},[65,56746,56748],{"class":140,"line":56747},137,[65,56749,54742],{"class":154},[65,56751,56753],{"class":140,"line":56752},138,[65,56754,4879],{"class":154},[65,56756,56758,56760,56763,56765,56767],{"class":140,"line":56757},139,[65,56759,54369],{"class":154},[65,56761,56762],{"class":168},"breakpoint-sp",[65,56764,34857],{"class":154},[65,56766,797],{"class":154},[65,56768,418],{"class":154},[65,56770,56772,56774,56776,56778,56780,56782,56785,56787],{"class":140,"line":56771},140,[65,56773,54402],{"class":154},[65,56775,54372],{"class":326},[65,56777,34857],{"class":154},[65,56779,797],{"class":154},[65,56781,35344],{"class":154},[65,56783,56784],{"class":302},"bs",[65,56786,34857],{"class":154},[65,56788,3820],{"class":154},[65,56790,56792,56794,56796,56798,56800],{"class":140,"line":56791},141,[65,56793,54402],{"class":154},[65,56795,34838],{"class":326},[65,56797,34857],{"class":154},[65,56799,797],{"class":154},[65,56801,16316],{"class":154},[65,56803,56805,56807,56810,56812],{"class":140,"line":56804},142,[65,56806,54730],{"class":154},[65,56808,56809],{"class":302},"@include bp.breakpoint('sp') {",[65,56811,34857],{"class":154},[65,56813,3820],{"class":154},[65,56815,56817,56819,56821,56823],{"class":140,"line":56816},143,[65,56818,54805],{"class":154},[65,56820,55965],{"class":302},[65,56822,34857],{"class":154},[65,56824,3820],{"class":154},[65,56826,56828,56830,56832],{"class":140,"line":56827},144,[65,56829,54730],{"class":154},[65,56831,2899],{"class":302},[65,56833,36971],{"class":154},[65,56835,56837],{"class":140,"line":56836},145,[65,56838,54742],{"class":154},[65,56840,56842],{"class":140,"line":56841},146,[65,56843,4879],{"class":154},[65,56845,56847,56849,56851,56853,56855],{"class":140,"line":56846},147,[65,56848,54369],{"class":154},[65,56850,53776],{"class":168},[65,56852,34857],{"class":154},[65,56854,797],{"class":154},[65,56856,418],{"class":154},[65,56858,56860,56862,56864,56866,56868,56870,56873,56875],{"class":140,"line":56859},148,[65,56861,54402],{"class":154},[65,56863,54372],{"class":326},[65,56865,34857],{"class":154},[65,56867,797],{"class":154},[65,56869,35344],{"class":154},[65,56871,56872],{"class":302},"ho",[65,56874,34857],{"class":154},[65,56876,3820],{"class":154},[65,56878,56880,56882,56884,56886,56888],{"class":140,"line":56879},149,[65,56881,54402],{"class":154},[65,56883,34838],{"class":326},[65,56885,34857],{"class":154},[65,56887,797],{"class":154},[65,56889,16316],{"class":154},[65,56891,56893,56895,56898,56900],{"class":140,"line":56892},150,[65,56894,54730],{"class":154},[65,56896,56897],{"class":302},"&:hover {",[65,56899,34857],{"class":154},[65,56901,3820],{"class":154},[65,56903,56905,56907,56909,56911],{"class":140,"line":56904},151,[65,56906,54805],{"class":154},[65,56908,55965],{"class":302},[65,56910,34857],{"class":154},[65,56912,3820],{"class":154},[65,56914,56916,56918,56920],{"class":140,"line":56915},152,[65,56917,54730],{"class":154},[65,56919,2899],{"class":302},[65,56921,36971],{"class":154},[65,56923,56925],{"class":140,"line":56924},153,[65,56926,54742],{"class":154},[65,56928,56930],{"class":140,"line":56929},154,[65,56931,4879],{"class":154},[65,56933,56935,56937,56940,56942,56944],{"class":140,"line":56934},155,[65,56936,54369],{"class":154},[65,56938,56939],{"class":168},"object-fit-cover",[65,56941,34857],{"class":154},[65,56943,797],{"class":154},[65,56945,418],{"class":154},[65,56947,56949,56951,56953,56955,56957,56959,56962,56964],{"class":140,"line":56948},156,[65,56950,54402],{"class":154},[65,56952,54372],{"class":326},[65,56954,34857],{"class":154},[65,56956,797],{"class":154},[65,56958,35344],{"class":154},[65,56960,56961],{"class":302},"objc",[65,56963,34857],{"class":154},[65,56965,3820],{"class":154},[65,56967,56969,56971,56973,56975,56977],{"class":140,"line":56968},157,[65,56970,54402],{"class":154},[65,56972,34838],{"class":326},[65,56974,34857],{"class":154},[65,56976,797],{"class":154},[65,56978,16316],{"class":154},[65,56980,56982,56984,56987],{"class":140,"line":56981},158,[65,56983,54730],{"class":154},[65,56985,56986],{"class":302},"object-fit: cover;",[65,56988,36971],{"class":154},[65,56990,56992],{"class":140,"line":56991},159,[65,56993,54742],{"class":154},[65,56995,56997],{"class":140,"line":56996},160,[65,56998,4879],{"class":154},[65,57000,57002,57004,57007,57009,57011],{"class":140,"line":57001},161,[65,57003,54369],{"class":154},[65,57005,57006],{"class":168},"width-height",[65,57008,34857],{"class":154},[65,57010,797],{"class":154},[65,57012,418],{"class":154},[65,57014,57016,57018,57020,57022,57024,57026,57029,57031],{"class":140,"line":57015},162,[65,57017,54402],{"class":154},[65,57019,54372],{"class":326},[65,57021,34857],{"class":154},[65,57023,797],{"class":154},[65,57025,35344],{"class":154},[65,57027,57028],{"class":302},"wh",[65,57030,34857],{"class":154},[65,57032,3820],{"class":154},[65,57034,57036,57038,57040,57042,57044],{"class":140,"line":57035},163,[65,57037,54402],{"class":154},[65,57039,34838],{"class":326},[65,57041,34857],{"class":154},[65,57043,797],{"class":154},[65,57045,16316],{"class":154},[65,57047,57049,57051,57053,57055],{"class":140,"line":57048},164,[65,57050,54730],{"class":154},[65,57052,56270],{"class":302},[65,57054,34857],{"class":154},[65,57056,3820],{"class":154},[65,57058,57060,57062,57065,57067],{"class":140,"line":57059},165,[65,57061,54730],{"class":154},[65,57063,57064],{"class":302},"height: $2;",[65,57066,34857],{"class":154},[65,57068,3820],{"class":154},[65,57070,57072],{"class":140,"line":57071},166,[65,57073,54742],{"class":154},[65,57075,57077],{"class":140,"line":57076},167,[65,57078,4879],{"class":154},[65,57080,57082,57084,57086,57088,57090],{"class":140,"line":57081},168,[65,57083,54369],{"class":154},[65,57085,21090],{"class":168},[65,57087,34857],{"class":154},[65,57089,797],{"class":154},[65,57091,418],{"class":154},[65,57093,57095,57097,57099,57101,57103,57105,57108,57110],{"class":140,"line":57094},169,[65,57096,54402],{"class":154},[65,57098,54372],{"class":326},[65,57100,34857],{"class":154},[65,57102,797],{"class":154},[65,57104,35344],{"class":154},[65,57106,57107],{"class":302},"tl",[65,57109,34857],{"class":154},[65,57111,3820],{"class":154},[65,57113,57115,57117,57119,57121,57123],{"class":140,"line":57114},170,[65,57116,54402],{"class":154},[65,57118,34838],{"class":326},[65,57120,34857],{"class":154},[65,57122,797],{"class":154},[65,57124,16316],{"class":154},[65,57126,57128,57130,57133],{"class":140,"line":57127},171,[65,57129,54730],{"class":154},[65,57131,57132],{"class":302},"translate: $1 $2;",[65,57134,36971],{"class":154},[65,57136,57138],{"class":140,"line":57137},172,[65,57139,54742],{"class":154},[65,57141,57143],{"class":140,"line":57142},173,[65,57144,4879],{"class":154},[65,57146,57148,57150,57152,57154,57156],{"class":140,"line":57147},174,[65,57149,54369],{"class":154},[65,57151,51769],{"class":168},[65,57153,34857],{"class":154},[65,57155,797],{"class":154},[65,57157,418],{"class":154},[65,57159,57161,57163,57165,57167,57169,57171,57174,57176],{"class":140,"line":57160},175,[65,57162,54402],{"class":154},[65,57164,54372],{"class":326},[65,57166,34857],{"class":154},[65,57168,797],{"class":154},[65,57170,35344],{"class":154},[65,57172,57173],{"class":302},"sc",[65,57175,34857],{"class":154},[65,57177,3820],{"class":154},[65,57179,57181,57183,57185,57187,57189],{"class":140,"line":57180},176,[65,57182,54402],{"class":154},[65,57184,34838],{"class":326},[65,57186,34857],{"class":154},[65,57188,797],{"class":154},[65,57190,16316],{"class":154},[65,57192,57194,57196,57199],{"class":140,"line":57193},177,[65,57195,54730],{"class":154},[65,57197,57198],{"class":302},"scale: $1;",[65,57200,36971],{"class":154},[65,57202,57204],{"class":140,"line":57203},178,[65,57205,54742],{"class":154},[65,57207,57209],{"class":140,"line":57208},179,[65,57210,4879],{"class":154},[65,57212,57214,57216,57219,57221,57223],{"class":140,"line":57213},180,[65,57215,54369],{"class":154},[65,57217,57218],{"class":168},"rotate",[65,57220,34857],{"class":154},[65,57222,797],{"class":154},[65,57224,418],{"class":154},[65,57226,57228,57230,57232,57234,57236,57238,57241,57243],{"class":140,"line":57227},181,[65,57229,54402],{"class":154},[65,57231,54372],{"class":326},[65,57233,34857],{"class":154},[65,57235,797],{"class":154},[65,57237,35344],{"class":154},[65,57239,57240],{"class":302},"ro",[65,57242,34857],{"class":154},[65,57244,3820],{"class":154},[65,57246,57248,57250,57252,57254,57256],{"class":140,"line":57247},182,[65,57249,54402],{"class":154},[65,57251,34838],{"class":326},[65,57253,34857],{"class":154},[65,57255,797],{"class":154},[65,57257,16316],{"class":154},[65,57259,57261,57263,57266],{"class":140,"line":57260},183,[65,57262,54730],{"class":154},[65,57264,57265],{"class":302},"rotate: $1deg;",[65,57267,36971],{"class":154},[65,57269,57271],{"class":140,"line":57270},184,[65,57272,54742],{"class":154},[65,57274,57276],{"class":140,"line":57275},185,[65,57277,4879],{"class":154},[65,57279,57281,57283,57286,57288,57290],{"class":140,"line":57280},186,[65,57282,54369],{"class":154},[65,57284,57285],{"class":168},"place-items",[65,57287,34857],{"class":154},[65,57289,797],{"class":154},[65,57291,418],{"class":154},[65,57293,57295,57297,57299,57301,57303,57305,57308,57310],{"class":140,"line":57294},187,[65,57296,54402],{"class":154},[65,57298,54372],{"class":326},[65,57300,34857],{"class":154},[65,57302,797],{"class":154},[65,57304,35344],{"class":154},[65,57306,57307],{"class":302},"pic",[65,57309,34857],{"class":154},[65,57311,3820],{"class":154},[65,57313,57315,57317,57319,57321,57323],{"class":140,"line":57314},188,[65,57316,54402],{"class":154},[65,57318,34838],{"class":326},[65,57320,34857],{"class":154},[65,57322,797],{"class":154},[65,57324,16316],{"class":154},[65,57326,57328,57330,57333],{"class":140,"line":57327},189,[65,57329,54730],{"class":154},[65,57331,57332],{"class":302},"place-items: center;",[65,57334,36971],{"class":154},[65,57336,57338],{"class":140,"line":57337},190,[65,57339,54742],{"class":154},[65,57341,57343],{"class":140,"line":57342},191,[65,57344,4879],{"class":154},[65,57346,57348,57350,57353,57355,57357],{"class":140,"line":57347},192,[65,57349,54369],{"class":154},[65,57351,57352],{"class":168},"border-radius",[65,57354,34857],{"class":154},[65,57356,797],{"class":154},[65,57358,418],{"class":154},[65,57360,57362,57364,57366,57368,57370,57372,57375,57377],{"class":140,"line":57361},193,[65,57363,54402],{"class":154},[65,57365,54372],{"class":326},[65,57367,34857],{"class":154},[65,57369,797],{"class":154},[65,57371,35344],{"class":154},[65,57373,57374],{"class":302},"bdr50",[65,57376,34857],{"class":154},[65,57378,3820],{"class":154},[65,57380,57382,57384,57386,57388,57390],{"class":140,"line":57381},194,[65,57383,54402],{"class":154},[65,57385,34838],{"class":326},[65,57387,34857],{"class":154},[65,57389,797],{"class":154},[65,57391,16316],{"class":154},[65,57393,57395,57397,57399],{"class":140,"line":57394},195,[65,57396,54730],{"class":154},[65,57398,56303],{"class":302},[65,57400,36971],{"class":154},[65,57402,57404],{"class":140,"line":57403},196,[65,57405,54742],{"class":154},[65,57407,57409],{"class":140,"line":57408},197,[65,57410,4879],{"class":154},[65,57412,57414,57416,57419,57421,57423],{"class":140,"line":57413},198,[65,57415,54369],{"class":154},[65,57417,57418],{"class":168},"padding-inline",[65,57420,34857],{"class":154},[65,57422,797],{"class":154},[65,57424,418],{"class":154},[65,57426,57428,57430,57432,57434,57436,57438,57441,57443],{"class":140,"line":57427},199,[65,57429,54402],{"class":154},[65,57431,54372],{"class":326},[65,57433,34857],{"class":154},[65,57435,797],{"class":154},[65,57437,35344],{"class":154},[65,57439,57440],{"class":302},"pai",[65,57442,34857],{"class":154},[65,57444,3820],{"class":154},[65,57446,57448,57450,57452,57454,57456],{"class":140,"line":57447},200,[65,57449,54402],{"class":154},[65,57451,34838],{"class":326},[65,57453,34857],{"class":154},[65,57455,797],{"class":154},[65,57457,16316],{"class":154},[65,57459,57461,57463,57466],{"class":140,"line":57460},201,[65,57462,54730],{"class":154},[65,57464,57465],{"class":302},"padding-inline: $1;",[65,57467,36971],{"class":154},[65,57469,57471],{"class":140,"line":57470},202,[65,57472,54742],{"class":154},[65,57474,57476],{"class":140,"line":57475},203,[65,57477,4879],{"class":154},[65,57479,57481,57483,57486,57488,57490],{"class":140,"line":57480},204,[65,57482,54369],{"class":154},[65,57484,57485],{"class":168},"padding-block",[65,57487,34857],{"class":154},[65,57489,797],{"class":154},[65,57491,418],{"class":154},[65,57493,57495,57497,57499,57501,57503,57505,57508,57510],{"class":140,"line":57494},205,[65,57496,54402],{"class":154},[65,57498,54372],{"class":326},[65,57500,34857],{"class":154},[65,57502,797],{"class":154},[65,57504,35344],{"class":154},[65,57506,57507],{"class":302},"pab",[65,57509,34857],{"class":154},[65,57511,3820],{"class":154},[65,57513,57515,57517,57519,57521,57523],{"class":140,"line":57514},206,[65,57516,54402],{"class":154},[65,57518,34838],{"class":326},[65,57520,34857],{"class":154},[65,57522,797],{"class":154},[65,57524,16316],{"class":154},[65,57526,57528,57530,57533],{"class":140,"line":57527},207,[65,57529,54730],{"class":154},[65,57531,57532],{"class":302},"padding-block: $1;",[65,57534,36971],{"class":154},[65,57536,57538],{"class":140,"line":57537},208,[65,57539,54742],{"class":154},[65,57541,57543],{"class":140,"line":57542},209,[65,57544,4879],{"class":154},[65,57546,57548,57550,57553,57555,57557],{"class":140,"line":57547},210,[65,57549,54369],{"class":154},[65,57551,57552],{"class":168},"margin-inline",[65,57554,34857],{"class":154},[65,57556,797],{"class":154},[65,57558,418],{"class":154},[65,57560,57562,57564,57566,57568,57570,57572,57575,57577],{"class":140,"line":57561},211,[65,57563,54402],{"class":154},[65,57565,54372],{"class":326},[65,57567,34857],{"class":154},[65,57569,797],{"class":154},[65,57571,35344],{"class":154},[65,57573,57574],{"class":302},"mai",[65,57576,34857],{"class":154},[65,57578,3820],{"class":154},[65,57580,57582,57584,57586,57588,57590],{"class":140,"line":57581},212,[65,57583,54402],{"class":154},[65,57585,34838],{"class":326},[65,57587,34857],{"class":154},[65,57589,797],{"class":154},[65,57591,16316],{"class":154},[65,57593,57595,57597,57600],{"class":140,"line":57594},213,[65,57596,54730],{"class":154},[65,57598,57599],{"class":302},"margin-inline: $1;",[65,57601,36971],{"class":154},[65,57603,57605],{"class":140,"line":57604},214,[65,57606,54742],{"class":154},[65,57608,57610],{"class":140,"line":57609},215,[65,57611,4879],{"class":154},[65,57613,57615,57617,57620,57622,57624],{"class":140,"line":57614},216,[65,57616,54369],{"class":154},[65,57618,57619],{"class":168},"margin-inline auto",[65,57621,34857],{"class":154},[65,57623,797],{"class":154},[65,57625,418],{"class":154},[65,57627,57629,57631,57633,57635,57637,57639,57642,57644],{"class":140,"line":57628},217,[65,57630,54402],{"class":154},[65,57632,54372],{"class":326},[65,57634,34857],{"class":154},[65,57636,797],{"class":154},[65,57638,35344],{"class":154},[65,57640,57641],{"class":302},"maia",[65,57643,34857],{"class":154},[65,57645,3820],{"class":154},[65,57647,57649,57651,57653,57655,57657],{"class":140,"line":57648},218,[65,57650,54402],{"class":154},[65,57652,34838],{"class":326},[65,57654,34857],{"class":154},[65,57656,797],{"class":154},[65,57658,16316],{"class":154},[65,57660,57662,57664,57667],{"class":140,"line":57661},219,[65,57663,54730],{"class":154},[65,57665,57666],{"class":302},"margin-inline: auto;",[65,57668,36971],{"class":154},[65,57670,57672],{"class":140,"line":57671},220,[65,57673,54742],{"class":154},[65,57675,57677],{"class":140,"line":57676},221,[65,57678,4879],{"class":154},[65,57680,57682,57684,57687,57689,57691],{"class":140,"line":57681},222,[65,57683,54369],{"class":154},[65,57685,57686],{"class":168},"margin-block",[65,57688,34857],{"class":154},[65,57690,797],{"class":154},[65,57692,418],{"class":154},[65,57694,57696,57698,57700,57702,57704,57706,57709,57711],{"class":140,"line":57695},223,[65,57697,54402],{"class":154},[65,57699,54372],{"class":326},[65,57701,34857],{"class":154},[65,57703,797],{"class":154},[65,57705,35344],{"class":154},[65,57707,57708],{"class":302},"mab",[65,57710,34857],{"class":154},[65,57712,3820],{"class":154},[65,57714,57716,57718,57720,57722,57724],{"class":140,"line":57715},224,[65,57717,54402],{"class":154},[65,57719,34838],{"class":326},[65,57721,34857],{"class":154},[65,57723,797],{"class":154},[65,57725,16316],{"class":154},[65,57727,57729,57731,57734],{"class":140,"line":57728},225,[65,57730,54730],{"class":154},[65,57732,57733],{"class":302},"margin-block: $1;",[65,57735,36971],{"class":154},[65,57737,57739],{"class":140,"line":57738},226,[65,57740,54742],{"class":154},[65,57742,57744],{"class":140,"line":57743},227,[65,57745,4879],{"class":154},[65,57747,57749,57751,57754,57756,57758],{"class":140,"line":57748},228,[65,57750,54369],{"class":154},[65,57752,57753],{"class":168},"left calc 50%",[65,57755,34857],{"class":154},[65,57757,797],{"class":154},[65,57759,418],{"class":154},[65,57761,57763,57765,57767,57769,57771,57773,57776,57778],{"class":140,"line":57762},229,[65,57764,54402],{"class":154},[65,57766,54372],{"class":326},[65,57768,34857],{"class":154},[65,57770,797],{"class":154},[65,57772,35344],{"class":154},[65,57774,57775],{"class":302},"lcalc",[65,57777,34857],{"class":154},[65,57779,3820],{"class":154},[65,57781,57783,57785,57787,57789,57791],{"class":140,"line":57782},230,[65,57784,54402],{"class":154},[65,57786,34838],{"class":326},[65,57788,34857],{"class":154},[65,57790,797],{"class":154},[65,57792,16316],{"class":154},[65,57794,57796,57798,57801],{"class":140,"line":57795},231,[65,57797,54730],{"class":154},[65,57799,57800],{"class":302},"left: calc(50% - $1);",[65,57802,36971],{"class":154},[65,57804,57806],{"class":140,"line":57805},232,[65,57807,54742],{"class":154},[65,57809,57811],{"class":140,"line":57810},233,[65,57812,4879],{"class":154},[65,57814,57816,57818,57821,57823,57825],{"class":140,"line":57815},234,[65,57817,54369],{"class":154},[65,57819,57820],{"class":168},"background var",[65,57822,34857],{"class":154},[65,57824,797],{"class":154},[65,57826,418],{"class":154},[65,57828,57830,57832,57834,57836,57838,57840,57843,57845],{"class":140,"line":57829},235,[65,57831,54402],{"class":154},[65,57833,54372],{"class":326},[65,57835,34857],{"class":154},[65,57837,797],{"class":154},[65,57839,35344],{"class":154},[65,57841,57842],{"class":302},"bgv",[65,57844,34857],{"class":154},[65,57846,3820],{"class":154},[65,57848,57850,57852,57854,57856,57858],{"class":140,"line":57849},236,[65,57851,54402],{"class":154},[65,57853,34838],{"class":326},[65,57855,34857],{"class":154},[65,57857,797],{"class":154},[65,57859,16316],{"class":154},[65,57861,57863,57865,57868],{"class":140,"line":57862},237,[65,57864,54730],{"class":154},[65,57866,57867],{"class":302},"background: var(--$1);",[65,57869,36971],{"class":154},[65,57871,57873],{"class":140,"line":57872},238,[65,57874,54742],{"class":154},[65,57876,57878],{"class":140,"line":57877},239,[65,57879,4879],{"class":154},[65,57881,57883,57885,57888,57890,57892],{"class":140,"line":57882},240,[65,57884,54369],{"class":154},[65,57886,57887],{"class":168},"color_white",[65,57889,34857],{"class":154},[65,57891,797],{"class":154},[65,57893,418],{"class":154},[65,57895,57897,57899,57901,57903,57905,57907,57910,57912],{"class":140,"line":57896},241,[65,57898,54402],{"class":154},[65,57900,54372],{"class":326},[65,57902,34857],{"class":154},[65,57904,797],{"class":154},[65,57906,35344],{"class":154},[65,57908,57909],{"class":302},"co",[65,57911,34857],{"class":154},[65,57913,3820],{"class":154},[65,57915,57917,57919,57921,57923,57925],{"class":140,"line":57916},242,[65,57918,54402],{"class":154},[65,57920,34838],{"class":326},[65,57922,34857],{"class":154},[65,57924,797],{"class":154},[65,57926,16316],{"class":154},[65,57928,57930,57932,57935],{"class":140,"line":57929},243,[65,57931,54730],{"class":154},[65,57933,57934],{"class":302},"color: #fff;",[65,57936,36971],{"class":154},[65,57938,57940],{"class":140,"line":57939},244,[65,57941,54742],{"class":154},[65,57943,57945],{"class":140,"line":57944},245,[65,57946,4879],{"class":154},[65,57948,57950,57952,57955,57957,57959],{"class":140,"line":57949},246,[65,57951,54369],{"class":154},[65,57953,57954],{"class":168},"owl",[65,57956,34857],{"class":154},[65,57958,797],{"class":154},[65,57960,418],{"class":154},[65,57962,57964,57966,57968,57970,57972,57974,57977,57979],{"class":140,"line":57963},247,[65,57965,54402],{"class":154},[65,57967,54372],{"class":326},[65,57969,34857],{"class":154},[65,57971,797],{"class":154},[65,57973,35344],{"class":154},[65,57975,57976],{"class":302},"ow",[65,57978,34857],{"class":154},[65,57980,3820],{"class":154},[65,57982,57984,57986,57988,57990,57992],{"class":140,"line":57983},248,[65,57985,54402],{"class":154},[65,57987,34838],{"class":326},[65,57989,34857],{"class":154},[65,57991,797],{"class":154},[65,57993,16316],{"class":154},[65,57995,57997,57999,58002,58004],{"class":140,"line":57996},249,[65,57998,54730],{"class":154},[65,58000,58001],{"class":302},"> * + * {",[65,58003,34857],{"class":154},[65,58005,3820],{"class":154},[65,58007,58009,58011,58013,58015],{"class":140,"line":58008},250,[65,58010,54805],{"class":154},[65,58012,55965],{"class":302},[65,58014,34857],{"class":154},[65,58016,3820],{"class":154},[65,58018,58020,58022,58024,58026],{"class":140,"line":58019},251,[65,58021,54730],{"class":154},[65,58023,2899],{"class":302},[65,58025,34857],{"class":154},[65,58027,3820],{"class":154},[65,58029,58031],{"class":140,"line":58030},252,[65,58032,54742],{"class":154},[65,58034,58036],{"class":140,"line":58035},253,[65,58037,4879],{"class":154},[65,58039,58041,58043,58045,58047,58049],{"class":140,"line":58040},254,[65,58042,54369],{"class":154},[65,58044,51765],{"class":168},[65,58046,34857],{"class":154},[65,58048,797],{"class":154},[65,58050,418],{"class":154},[65,58052,58054,58056,58058,58060,58062,58064,58067,58069],{"class":140,"line":58053},255,[65,58055,54402],{"class":154},[65,58057,54372],{"class":326},[65,58059,34857],{"class":154},[65,58061,797],{"class":154},[65,58063,35344],{"class":154},[65,58065,58066],{"class":302},"cl",[65,58068,34857],{"class":154},[65,58070,3820],{"class":154},[65,58072,58074,58076,58078,58080,58082],{"class":140,"line":58073},256,[65,58075,54402],{"class":154},[65,58077,34838],{"class":326},[65,58079,34857],{"class":154},[65,58081,797],{"class":154},[65,58083,16316],{"class":154},[65,58085,58087,58089,58092],{"class":140,"line":58086},257,[65,58088,54730],{"class":154},[65,58090,58091],{"class":302},"clip-path: $1;",[65,58093,36971],{"class":154},[65,58095,58097],{"class":140,"line":58096},258,[65,58098,54742],{"class":154},[65,58100,58102],{"class":140,"line":58101},259,[65,58103,4879],{"class":154},[65,58105,58107,58109,58112,58114,58116],{"class":140,"line":58106},260,[65,58108,54369],{"class":154},[65,58110,58111],{"class":168},"clip-path0",[65,58113,34857],{"class":154},[65,58115,797],{"class":154},[65,58117,418],{"class":154},[65,58119,58121,58123,58125,58127,58129,58131,58134,58136],{"class":140,"line":58120},261,[65,58122,54402],{"class":154},[65,58124,54372],{"class":326},[65,58126,34857],{"class":154},[65,58128,797],{"class":154},[65,58130,35344],{"class":154},[65,58132,58133],{"class":302},"cl0",[65,58135,34857],{"class":154},[65,58137,3820],{"class":154},[65,58139,58141,58143,58145,58147,58149],{"class":140,"line":58140},262,[65,58142,54402],{"class":154},[65,58144,34838],{"class":326},[65,58146,34857],{"class":154},[65,58148,797],{"class":154},[65,58150,16316],{"class":154},[65,58152,58154,58156,58159],{"class":140,"line":58153},263,[65,58155,54730],{"class":154},[65,58157,58158],{"class":302},"clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);",[65,58160,36971],{"class":154},[65,58162,58164],{"class":140,"line":58163},264,[65,58165,54742],{"class":154},[65,58167,58169],{"class":140,"line":58168},265,[65,58170,4879],{"class":154},[65,58172,58174,58176,58179,58181,58183],{"class":140,"line":58173},266,[65,58175,54369],{"class":154},[65,58177,58178],{"class":168},"clip-path100",[65,58180,34857],{"class":154},[65,58182,797],{"class":154},[65,58184,418],{"class":154},[65,58186,58188,58190,58192,58194,58196,58198,58201,58203],{"class":140,"line":58187},267,[65,58189,54402],{"class":154},[65,58191,54372],{"class":326},[65,58193,34857],{"class":154},[65,58195,797],{"class":154},[65,58197,35344],{"class":154},[65,58199,58200],{"class":302},"cl100",[65,58202,34857],{"class":154},[65,58204,3820],{"class":154},[65,58206,58208,58210,58212,58214,58216],{"class":140,"line":58207},268,[65,58209,54402],{"class":154},[65,58211,34838],{"class":326},[65,58213,34857],{"class":154},[65,58215,797],{"class":154},[65,58217,16316],{"class":154},[65,58219,58221,58223,58226],{"class":140,"line":58220},269,[65,58222,54730],{"class":154},[65,58224,58225],{"class":302},"clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);",[65,58227,36971],{"class":154},[65,58229,58231],{"class":140,"line":58230},270,[65,58232,54742],{"class":154},[65,58234,58236],{"class":140,"line":58235},271,[65,58237,4879],{"class":154},[65,58239,58241,58243,58246,58248,58250],{"class":140,"line":58240},272,[65,58242,54369],{"class":154},[65,58244,58245],{"class":168},"clip-pathl0",[65,58247,34857],{"class":154},[65,58249,797],{"class":154},[65,58251,418],{"class":154},[65,58253,58255,58257,58259,58261,58263,58265,58268,58270],{"class":140,"line":58254},273,[65,58256,54402],{"class":154},[65,58258,54372],{"class":326},[65,58260,34857],{"class":154},[65,58262,797],{"class":154},[65,58264,35344],{"class":154},[65,58266,58267],{"class":302},"cll0",[65,58269,34857],{"class":154},[65,58271,3820],{"class":154},[65,58273,58275,58277,58279,58281,58283],{"class":140,"line":58274},274,[65,58276,54402],{"class":154},[65,58278,34838],{"class":326},[65,58280,34857],{"class":154},[65,58282,797],{"class":154},[65,58284,16316],{"class":154},[65,58286,58288,58290,58293],{"class":140,"line":58287},275,[65,58289,54730],{"class":154},[65,58291,58292],{"class":302},"clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);",[65,58294,36971],{"class":154},[65,58296,58298],{"class":140,"line":58297},276,[65,58299,54742],{"class":154},[65,58301,58303],{"class":140,"line":58302},277,[65,58304,4879],{"class":154},[65,58306,58308,58310,58313,58315,58317],{"class":140,"line":58307},278,[65,58309,54369],{"class":154},[65,58311,58312],{"class":168},"clip-pathr0",[65,58314,34857],{"class":154},[65,58316,797],{"class":154},[65,58318,418],{"class":154},[65,58320,58322,58324,58326,58328,58330,58332,58335,58337],{"class":140,"line":58321},279,[65,58323,54402],{"class":154},[65,58325,54372],{"class":326},[65,58327,34857],{"class":154},[65,58329,797],{"class":154},[65,58331,35344],{"class":154},[65,58333,58334],{"class":302},"clr0",[65,58336,34857],{"class":154},[65,58338,3820],{"class":154},[65,58340,58342,58344,58346,58348,58350],{"class":140,"line":58341},280,[65,58343,54402],{"class":154},[65,58345,34838],{"class":326},[65,58347,34857],{"class":154},[65,58349,797],{"class":154},[65,58351,16316],{"class":154},[65,58353,58355,58357,58360],{"class":140,"line":58354},281,[65,58356,54730],{"class":154},[65,58358,58359],{"class":302},"clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);",[65,58361,36971],{"class":154},[65,58363,58365],{"class":140,"line":58364},282,[65,58366,54742],{"class":154},[65,58368,58370],{"class":140,"line":58369},283,[65,58371,4879],{"class":154},[65,58373,58375,58377,58379,58381,58383],{"class":140,"line":58374},284,[65,58376,54369],{"class":154},[65,58378,43130],{"class":168},[65,58380,34857],{"class":154},[65,58382,797],{"class":154},[65,58384,418],{"class":154},[65,58386,58388,58390,58392,58394,58396,58398,58400,58402],{"class":140,"line":58387},285,[65,58389,54402],{"class":154},[65,58391,54372],{"class":326},[65,58393,34857],{"class":154},[65,58395,797],{"class":154},[65,58397,35344],{"class":154},[65,58399,43130],{"class":302},[65,58401,34857],{"class":154},[65,58403,3820],{"class":154},[65,58405,58407,58409,58411,58413,58415],{"class":140,"line":58406},286,[65,58408,54402],{"class":154},[65,58410,34838],{"class":326},[65,58412,34857],{"class":154},[65,58414,797],{"class":154},[65,58416,16316],{"class":154},[65,58418,58420,58422,58424,58426],{"class":140,"line":58419},287,[65,58421,54730],{"class":154},[65,58423,58001],{"class":302},[65,58425,34857],{"class":154},[65,58427,3820],{"class":154},[65,58429,58431,58433,58436,58438],{"class":140,"line":58430},288,[65,58432,54805],{"class":154},[65,58434,58435],{"class":302},"margin-top: $1;",[65,58437,34857],{"class":154},[65,58439,3820],{"class":154},[65,58441,58443,58445,58447,58449],{"class":140,"line":58442},289,[65,58444,54730],{"class":154},[65,58446,2899],{"class":302},[65,58448,34857],{"class":154},[65,58450,3820],{"class":154},[65,58452,58454,58456,58459,58461],{"class":140,"line":58453},290,[65,58455,54730],{"class":154},[65,58457,58458],{"class":302},"&__item {",[65,58460,34857],{"class":154},[65,58462,3820],{"class":154},[65,58464,58466,58468,58471,58473],{"class":140,"line":58465},291,[65,58467,54805],{"class":154},[65,58469,58470],{"class":302},"$2",[65,58472,34857],{"class":154},[65,58474,3820],{"class":154},[65,58476,58478,58480,58482,58484],{"class":140,"line":58477},292,[65,58479,54730],{"class":154},[65,58481,2899],{"class":302},[65,58483,34857],{"class":154},[65,58485,3820],{"class":154},[65,58487,58489,58491,58494,58496],{"class":140,"line":58488},293,[65,58490,54730],{"class":154},[65,58492,58493],{"class":302},"&__list {",[65,58495,34857],{"class":154},[65,58497,3820],{"class":154},[65,58499,58501,58503,58506,58508],{"class":140,"line":58500},294,[65,58502,54805],{"class":154},[65,58504,58505],{"class":302},"$3",[65,58507,34857],{"class":154},[65,58509,3820],{"class":154},[65,58511,58513,58515,58517,58519],{"class":140,"line":58512},295,[65,58514,54730],{"class":154},[65,58516,2899],{"class":302},[65,58518,34857],{"class":154},[65,58520,3820],{"class":154},[65,58522,58524],{"class":140,"line":58523},296,[65,58525,54742],{"class":154},[65,58527,58529],{"class":140,"line":58528},297,[65,58530,4879],{"class":154},[65,58532,58534],{"class":140,"line":58533},298,[65,58535,243],{"class":154},[1177,58537,58539],{"id":58538},"javascriptのユーザースニペット","JavaScriptのユーザースニペット",[15,58541,58542,58543,54483],{},"VSCodeでJavaScriptを登録するには、",[124,58544,58545],{},"javascript.json(JavaScript)",[129,58547,58550],{"className":54342,"code":58548,"filename":58549,"language":54344,"meta":135,"style":135},"{\n // import関連\n \"import three\": {\n \"prefix\": \"imthree\",\n \"body\": [\n \"import * as THREE from 'three';\",\n ],\n },\n \"import dat\": {\n \"prefix\": \"imdat\",\n \"body\": [\n \"import dat from 'dat.gui';\",\n ],\n },\n \"import shader\": {\n \"prefix\": \"imshader\",\n \"body\": [\n \"import vertexShader from './shaders/vertex.glsl';\",\n \"import fragmentShader from './shaders/fragment.glsl';\",\n ],\n },\n \"class\": {\n \"prefix\": \"cl\",\n \"body\": [\n \"class $1 {\",\n \" constructor($2) {\",\n \" this.${3:el} = document.querySelector('');\",\n \" if(!this.${3:el}) return\",\n \" this.init();\",\n \" }\",\n \" init() {\",\n \" }\",\n \"}\"\n ],\n },\n \"log\": {\n \"prefix\": \"lo\",\n \"body\": [\n \"console.log($1);\",\n ],\n },\n \"querySelector\": {\n \"prefix\": \"dqs\",\n \"body\": [\n \"document.querySelector('$1');\",\n ],\n },\n \"querySelectorAll\": {\n \"prefix\": \"dqsa\",\n \"body\": [\n \"document.querySelectorAll('$1');\",\n ],\n },\n \"window.innerWidth\": {\n \"prefix\": \"wiw\",\n \"body\": [\n \"window.innerWidth\"\n ]\n },\n \"window.innerHeight\": {\n \"prefix\": \"wih\",\n \"body\": [\n \"window.innerHeight\"\n ]\n },\n \"clientX\": {\n \"prefix\": \"clx\",\n \"body\": [\n \"clientX\"\n ]\n },\n \"clientY\": {\n \"prefix\": \"cly\",\n \"body\": [\n \"clientY\"\n ]\n },\n \"const\": {\n \"prefix\": \"c\",\n \"body\": [\n \"const $1 = $2;\"\n ]\n },\n \"let\": {\n \"prefix\": \"l\",\n \"body\": [\n \"let $1 = $2;\"\n ]\n },\n \"color\": {\n \"prefix\": \"col\",\n \"body\": [\n \"color\"\n ]\n },\n \"position\": {\n \"prefix\": \"po\",\n \"body\": [\n \"position\"\n ]\n },\n \"length\": {\n \"prefix\": \"len\",\n \"body\": [\n \"length\"\n ]\n },\n \"classNameModule\": {\n \"prefix\": \"cn\",\n \"body\": [\n \"className={styles.$1}$2\"\n ]\n },\n \"for\": {\n \"prefix\": \"fo\",\n \"body\": [\n \"for (let ${1:i} = 0; ${1:i} \u003C ${2:count}; ${1:i}++) {\",\n \" ${3}\",\n \"}\"\n ],\n },\n \"map\": {\n \"prefix\": \"map\",\n \"body\": [\n \"{$1:[]}.map(($2) => $3);\"\n ],\n },\n \"return\": {\n \"prefix\": \"re\",\n \"body\": [\n \"return $1\"\n ]\n },\n \"async\": {\n \"prefix\": \"asy\",\n \"body\": [\n \"async\"\n ]\n },\n \"mousemove\": {\n \"prefix\": \"mousemove\",\n \"body\": [\n \"${1:document}.addEventListener('mousemove', (e) => {\",\n \" const pos = { x: e.clientX, y: e.clientY };\",\n \"})\"\n ]\n },\n \"resize\": {\n \"prefix\": \"resi\",\n \"body\": [\n \"window.addEventListener('resize', () => {\",\n \"\\t$1\",\n \"})\"\n ]\n },\n //数学\n \"Math random\": {\n \"prefix\": \"ran\",\n \"body\": [\n \"Math.random()\"\n ]\n },\n \"Math PI\": {\n \"prefix\": \"pi\",\n \"body\": [\n \"Math.PI\"\n ]\n },\n \"2PI\": {\n \"prefix\": \"2pi\",\n \"body\": [\n \"Math.PI * 2\"\n ]\n },\n \"abs\": {\n \"prefix\": \"abs\",\n \"body\": [\n \"Math.abs($1)\"\n ]\n },\n \"sin\": {\n \"prefix\": \"sin\",\n \"body\": [\n \"Math.sin($1)\"\n ]\n },\n \"cos\": {\n \"prefix\": \"cos\",\n \"body\": [\n \"Math.cos($1)\"\n ]\n },\n \"tan\": {\n \"prefix\": \"tan\",\n \"body\": [\n \"Math.tan($1)\"\n ]\n },\n \"atan\": {\n \"prefix\": \"atan\",\n \"body\": [\n \"Math.atan($1)\"\n ]\n },\n \"atan2\": {\n \"prefix\": \"atan2\",\n \"body\": [\n \"Math.atan2($1)\"\n ]\n },\n \"floor\": {\n \"prefix\": \"floor\",\n \"body\": [\n \"Math.floor($1)\"\n ]\n },\n \"ceil\": {\n \"prefix\": \"ceil\",\n \"body\": [\n \"Math.ceil($1)\"\n ]\n },\n \"fround\": {\n \"prefix\": \"fround\",\n \"body\": [\n \"Math.fround($1)\"\n ]\n },\n \"max\": {\n \"prefix\": \"max\",\n \"body\": [\n \"Math.max($1)\"\n ]\n },\n \"min\": {\n \"prefix\": \"min\",\n \"body\": [\n \"Math.min($1)\"\n ]\n },\n \"pow\": {\n \"prefix\": \"pow\",\n \"body\": [\n \"Math.pow($1)\"\n ]\n },\n \"round\": {\n \"prefix\": \"round\",\n \"body\": [\n \"Math.round($1)\"\n ]\n },\n \"sqrt\": {\n \"prefix\": \"sqrt\",\n \"body\": [\n \"Math.sqrt($1)\"\n ]\n },\n \"sign\": {\n \"prefix\": \"sign\",\n \"body\": [\n \"Math.sign($1)\"\n ]\n },\n // three.js\n \"WebGLRenderer\": {\n \"prefix\": \"wglr\",\n \"body\": [\n \"new THREE.WebGLRenderer($1)\"\n ]\n },\n \"WebGLRenderTarget\": {\n \"prefix\": \"wwglrt\",\n \"body\": [\n \"new THREE.WebGLRenderTarget(${1:width}, ${2:height}, {\",\n \" ${3:magFilter}: THREE.$4\",\n \" ${5:minFilter}: THREE.$6\",\n \" ${7:format}: THREE.$8\",\n \" ${9:wrapS}: THREE.$10\",\n \" ${11:wrapT}: THREE.$12\",\n \"})\"\n ]\n },\n \"Vector2\": {\n \"prefix\": \"v2\",\n \"body\": [\n \"new THREE.Vector2($1)\"\n ]\n },\n \"Vector3\": {\n \"prefix\": \"v3\",\n \"body\": [\n \"new THREE.Vector3($1)\"\n ]\n },\n \"Vector4\": {\n \"prefix\": \"v4\",\n \"body\": [\n \"new THREE.Vector4($1)\"\n ]\n },\n \"TextureLoader\": {\n \"prefix\": \"tl\",\n \"body\": [\n \"new THREE.TextureLoader()$1\"\n ]\n },\n\n //Canvas\n \"clearRect\": {\n \"prefix\": \"cr\",\n \"body\": [\n \"clearRect(0, 0, canvas.width, canvas.height);\"\n ]\n },\n \"canvas width\": {\n \"prefix\": \"cw\",\n \"body\": [\n \"canvas.width\"\n ]\n },\n \"canvas height\": {\n \"prefix\": \"ch\",\n \"body\": [\n \"canvas.height\"\n ]\n },\n \"fillRect\": {\n \"prefix\": \"fillR\",\n \"body\": [\n \"fillRect($1, $2, $3, $4)\"\n ]\n },\n \"strokeRect\": {\n \"prefix\": \"strokeR\",\n \"body\": [\n \"strokeRect($1, $2, $3, $4)\"\n ]\n },\n \"beginPath\": {\n \"prefix\": \"beginP\",\n \"body\": [\n \"beginPath();\"\n ]\n },\n \"moveTo\": {\n \"prefix\": \"moveT\",\n \"body\": [\n \"moveTo($1, $2);\"\n ]\n },\n \"closePath\": {\n \"prefix\": \"closeP\",\n \"body\": [\n \"closePath();\"\n ]\n },\n \"lineTo\": {\n \"prefix\": \"lineT\",\n \"body\": [\n \"lineTo($1, $2);\"\n ]\n },\n \"strokeStyle\": {\n \"prefix\": \"strokeS\",\n \"body\": [\n \"strokeStyle = '$1';\"\n ]\n },\n \"fillStyle\": {\n \"prefix\": \"fillS\",\n \"body\": [\n \"fillStyle = '$1';\"\n ]\n },\n \"lineWidth\": {\n \"prefix\": \"lineW\",\n \"body\": [\n \"lineWidth = \"\n ]\n },\n \"globalAlpha\": {\n \"prefix\": \"globalA\",\n \"body\": [\n \"globalAlpha = \"\n ]\n },\n}\n","javascript.json",[124,58551,58552,58556,58561,58574,58593,58605,58616,58620,58624,58637,58656,58668,58679,58683,58687,58700,58719,58731,58742,58753,58757,58761,58773,58791,58803,58814,58825,58836,58847,58858,58868,58879,58889,58897,58901,58905,58917,58936,58948,58959,58963,58967,58979,58998,59010,59021,59025,59029,59041,59060,59072,59083,59087,59091,59104,59123,59135,59143,59147,59151,59164,59183,59195,59203,59207,59211,59224,59243,59255,59263,59267,59271,59284,59303,59315,59323,59327,59331,59343,59362,59374,59383,59387,59391,59403,59421,59433,59442,59446,59450,59463,59482,59494,59502,59506,59510,59522,59541,59553,59561,59565,59569,59581,59600,59612,59620,59624,59628,59641,59660,59672,59681,59685,59689,59701,59720,59732,59743,59754,59762,59767,59771,59783,59801,59813,59822,59826,59830,59842,59861,59873,59882,59886,59890,59902,59921,59933,59941,59945,59949,59962,59980,59992,60003,60014,60023,60027,60031,60043,60062,60074,60085,60095,60103,60107,60111,60116,60129,60148,60160,60168,60172,60176,60189,60208,60220,60229,60233,60237,60250,60269,60281,60290,60294,60298,60310,60328,60340,60349,60353,60357,60370,60388,60400,60409,60413,60417,60430,60448,60460,60469,60473,60477,60490,60508,60520,60529,60533,60537,60550,60568,60580,60589,60593,60597,60610,60628,60640,60649,60653,60657,60669,60687,60699,60708,60712,60716,60728,60746,60758,60767,60771,60775,60788,60806,60818,60827,60831,60835,60848,60866,60878,60887,60891,60895,60908,60926,60938,60947,60951,60955,60967,60985,60997,61006,61010,61014,61026,61044,61056,61065,61069,61073,61085,61103,61115,61124,61128,61132,61144,61162,61174,61183,61187,61191,61196,61209,61228,61240,61249,61253,61257,61270,61289,61301,61312,61323,61334,61345,61356,61367,61375,61379,61383,61396,61415,61427,61436,61440,61444,61457,61476,61488,61497,61501,61505,61518,61537,61549,61559,61564,61569,61583,61602,61615,61625,61630,61635,61640,61646,61660,61680,61693,61703,61708,61713,61727,61747,61760,61770,61775,61780,61794,61814,61827,61837,61842,61847,61861,61881,61894,61904,61909,61914,61928,61948,61961,61971,61976,61981,61995,62015,62028,62038,62043,62048,62062,62082,62095,62105,62110,62115,62129,62149,62162,62172,62177,62182,62196,62216,62229,62239,62244,62249,62263,62283,62296,62306,62311,62316,62330,62350,62363,62373,62378,62383,62397,62417,62430,62440,62445,62450,62464,62484,62497,62507,62512,62517],{"__ignoreMap":135},[65,58553,58554],{"class":140,"line":141},[65,58555,208],{"class":154},[65,58557,58558],{"class":140,"line":158},[65,58559,58560],{"class":278}," // import関連\n",[65,58562,58563,58565,58568,58570,58572],{"class":140,"line":165},[65,58564,54402],{"class":154},[65,58566,58567],{"class":168},"import three",[65,58569,34857],{"class":154},[65,58571,797],{"class":154},[65,58573,418],{"class":154},[65,58575,58576,58578,58580,58582,58584,58586,58589,58591],{"class":140,"line":180},[65,58577,54402],{"class":154},[65,58579,54372],{"class":326},[65,58581,34857],{"class":154},[65,58583,797],{"class":154},[65,58585,35344],{"class":154},[65,58587,58588],{"class":302},"imthree",[65,58590,34857],{"class":154},[65,58592,3820],{"class":154},[65,58594,58595,58597,58599,58601,58603],{"class":140,"line":194},[65,58596,54402],{"class":154},[65,58598,34838],{"class":326},[65,58600,34857],{"class":154},[65,58602,797],{"class":154},[65,58604,16316],{"class":154},[65,58606,58607,58609,58612,58614],{"class":140,"line":211},[65,58608,54511],{"class":154},[65,58610,58611],{"class":302},"import * as THREE from 'three';",[65,58613,34857],{"class":154},[65,58615,3820],{"class":154},[65,58617,58618],{"class":140,"line":240},[65,58619,55111],{"class":154},[65,58621,58622],{"class":140,"line":391},[65,58623,4879],{"class":154},[65,58625,58626,58628,58631,58633,58635],{"class":140,"line":401},[65,58627,54402],{"class":154},[65,58629,58630],{"class":168},"import dat",[65,58632,34857],{"class":154},[65,58634,797],{"class":154},[65,58636,418],{"class":154},[65,58638,58639,58641,58643,58645,58647,58649,58652,58654],{"class":140,"line":406},[65,58640,54402],{"class":154},[65,58642,54372],{"class":326},[65,58644,34857],{"class":154},[65,58646,797],{"class":154},[65,58648,35344],{"class":154},[65,58650,58651],{"class":302},"imdat",[65,58653,34857],{"class":154},[65,58655,3820],{"class":154},[65,58657,58658,58660,58662,58664,58666],{"class":140,"line":421},[65,58659,54402],{"class":154},[65,58661,34838],{"class":326},[65,58663,34857],{"class":154},[65,58665,797],{"class":154},[65,58667,16316],{"class":154},[65,58669,58670,58672,58675,58677],{"class":140,"line":435},[65,58671,54511],{"class":154},[65,58673,58674],{"class":302},"import dat from 'dat.gui';",[65,58676,34857],{"class":154},[65,58678,3820],{"class":154},[65,58680,58681],{"class":140,"line":447},[65,58682,55111],{"class":154},[65,58684,58685],{"class":140,"line":459},[65,58686,4879],{"class":154},[65,58688,58689,58691,58694,58696,58698],{"class":140,"line":471},[65,58690,54402],{"class":154},[65,58692,58693],{"class":168},"import shader",[65,58695,34857],{"class":154},[65,58697,797],{"class":154},[65,58699,418],{"class":154},[65,58701,58702,58704,58706,58708,58710,58712,58715,58717],{"class":140,"line":63},[65,58703,54402],{"class":154},[65,58705,54372],{"class":326},[65,58707,34857],{"class":154},[65,58709,797],{"class":154},[65,58711,35344],{"class":154},[65,58713,58714],{"class":302},"imshader",[65,58716,34857],{"class":154},[65,58718,3820],{"class":154},[65,58720,58721,58723,58725,58727,58729],{"class":140,"line":495},[65,58722,54402],{"class":154},[65,58724,34838],{"class":326},[65,58726,34857],{"class":154},[65,58728,797],{"class":154},[65,58730,16316],{"class":154},[65,58732,58733,58735,58738,58740],{"class":140,"line":507},[65,58734,54511],{"class":154},[65,58736,58737],{"class":302},"import vertexShader from './shaders/vertex.glsl';",[65,58739,34857],{"class":154},[65,58741,3820],{"class":154},[65,58743,58744,58746,58749,58751],{"class":140,"line":519},[65,58745,54511],{"class":154},[65,58747,58748],{"class":302},"import fragmentShader from './shaders/fragment.glsl';",[65,58750,34857],{"class":154},[65,58752,3820],{"class":154},[65,58754,58755],{"class":140,"line":531},[65,58756,55111],{"class":154},[65,58758,58759],{"class":140,"line":543},[65,58760,4879],{"class":154},[65,58762,58763,58765,58767,58769,58771],{"class":140,"line":555},[65,58764,54402],{"class":154},[65,58766,38615],{"class":168},[65,58768,34857],{"class":154},[65,58770,797],{"class":154},[65,58772,418],{"class":154},[65,58774,58775,58777,58779,58781,58783,58785,58787,58789],{"class":140,"line":567},[65,58776,54402],{"class":154},[65,58778,54372],{"class":326},[65,58780,34857],{"class":154},[65,58782,797],{"class":154},[65,58784,35344],{"class":154},[65,58786,58066],{"class":302},[65,58788,34857],{"class":154},[65,58790,3820],{"class":154},[65,58792,58793,58795,58797,58799,58801],{"class":140,"line":3757},[65,58794,54402],{"class":154},[65,58796,34838],{"class":326},[65,58798,34857],{"class":154},[65,58800,797],{"class":154},[65,58802,16316],{"class":154},[65,58804,58805,58807,58810,58812],{"class":140,"line":3787},[65,58806,54511],{"class":154},[65,58808,58809],{"class":302},"class $1 {",[65,58811,34857],{"class":154},[65,58813,3820],{"class":154},[65,58815,58816,58818,58821,58823],{"class":140,"line":3792},[65,58817,54511],{"class":154},[65,58819,58820],{"class":302}," constructor($2) {",[65,58822,34857],{"class":154},[65,58824,3820],{"class":154},[65,58826,58827,58829,58832,58834],{"class":140,"line":3814},[65,58828,54511],{"class":154},[65,58830,58831],{"class":302}," this.${3:el} = document.querySelector('');",[65,58833,34857],{"class":154},[65,58835,3820],{"class":154},[65,58837,58838,58840,58843,58845],{"class":140,"line":3823},[65,58839,54511],{"class":154},[65,58841,58842],{"class":302}," if(!this.${3:el}) return",[65,58844,34857],{"class":154},[65,58846,3820],{"class":154},[65,58848,58849,58851,58854,58856],{"class":140,"line":3831},[65,58850,54511],{"class":154},[65,58852,58853],{"class":302}," this.init();",[65,58855,34857],{"class":154},[65,58857,3820],{"class":154},[65,58859,58860,58862,58864,58866],{"class":140,"line":3841},[65,58861,54511],{"class":154},[65,58863,1977],{"class":302},[65,58865,34857],{"class":154},[65,58867,3820],{"class":154},[65,58869,58870,58872,58875,58877],{"class":140,"line":3861},[65,58871,54511],{"class":154},[65,58873,58874],{"class":302}," init() {",[65,58876,34857],{"class":154},[65,58878,3820],{"class":154},[65,58880,58881,58883,58885,58887],{"class":140,"line":3867},[65,58882,54511],{"class":154},[65,58884,1977],{"class":302},[65,58886,34857],{"class":154},[65,58888,3820],{"class":154},[65,58890,58891,58893,58895],{"class":140,"line":3876},[65,58892,54511],{"class":154},[65,58894,2899],{"class":302},[65,58896,36971],{"class":154},[65,58898,58899],{"class":140,"line":3881},[65,58900,55111],{"class":154},[65,58902,58903],{"class":140,"line":3920},[65,58904,4879],{"class":154},[65,58906,58907,58909,58911,58913,58915],{"class":140,"line":3954},[65,58908,54402],{"class":154},[65,58910,35306],{"class":168},[65,58912,34857],{"class":154},[65,58914,797],{"class":154},[65,58916,418],{"class":154},[65,58918,58919,58921,58923,58925,58927,58929,58932,58934],{"class":140,"line":3974},[65,58920,54402],{"class":154},[65,58922,54372],{"class":326},[65,58924,34857],{"class":154},[65,58926,797],{"class":154},[65,58928,35344],{"class":154},[65,58930,58931],{"class":302},"lo",[65,58933,34857],{"class":154},[65,58935,3820],{"class":154},[65,58937,58938,58940,58942,58944,58946],{"class":140,"line":3979},[65,58939,54402],{"class":154},[65,58941,34838],{"class":326},[65,58943,34857],{"class":154},[65,58945,797],{"class":154},[65,58947,16316],{"class":154},[65,58949,58950,58952,58955,58957],{"class":140,"line":4031},[65,58951,54511],{"class":154},[65,58953,58954],{"class":302},"console.log($1);",[65,58956,34857],{"class":154},[65,58958,3820],{"class":154},[65,58960,58961],{"class":140,"line":4036},[65,58962,55111],{"class":154},[65,58964,58965],{"class":140,"line":4070},[65,58966,4879],{"class":154},[65,58968,58969,58971,58973,58975,58977],{"class":140,"line":4086},[65,58970,54402],{"class":154},[65,58972,35825],{"class":168},[65,58974,34857],{"class":154},[65,58976,797],{"class":154},[65,58978,418],{"class":154},[65,58980,58981,58983,58985,58987,58989,58991,58994,58996],{"class":140,"line":4102},[65,58982,54402],{"class":154},[65,58984,54372],{"class":326},[65,58986,34857],{"class":154},[65,58988,797],{"class":154},[65,58990,35344],{"class":154},[65,58992,58993],{"class":302},"dqs",[65,58995,34857],{"class":154},[65,58997,3820],{"class":154},[65,58999,59000,59002,59004,59006,59008],{"class":140,"line":4118},[65,59001,54402],{"class":154},[65,59003,34838],{"class":326},[65,59005,34857],{"class":154},[65,59007,797],{"class":154},[65,59009,16316],{"class":154},[65,59011,59012,59014,59017,59019],{"class":140,"line":4149},[65,59013,54511],{"class":154},[65,59015,59016],{"class":302},"document.querySelector('$1');",[65,59018,34857],{"class":154},[65,59020,3820],{"class":154},[65,59022,59023],{"class":140,"line":4163},[65,59024,55111],{"class":154},[65,59026,59027],{"class":140,"line":4168},[65,59028,4879],{"class":154},[65,59030,59031,59033,59035,59037,59039],{"class":140,"line":4194},[65,59032,54402],{"class":154},[65,59034,38719],{"class":168},[65,59036,34857],{"class":154},[65,59038,797],{"class":154},[65,59040,418],{"class":154},[65,59042,59043,59045,59047,59049,59051,59053,59056,59058],{"class":140,"line":4199},[65,59044,54402],{"class":154},[65,59046,54372],{"class":326},[65,59048,34857],{"class":154},[65,59050,797],{"class":154},[65,59052,35344],{"class":154},[65,59054,59055],{"class":302},"dqsa",[65,59057,34857],{"class":154},[65,59059,3820],{"class":154},[65,59061,59062,59064,59066,59068,59070],{"class":140,"line":4221},[65,59063,54402],{"class":154},[65,59065,34838],{"class":326},[65,59067,34857],{"class":154},[65,59069,797],{"class":154},[65,59071,16316],{"class":154},[65,59073,59074,59076,59079,59081],{"class":140,"line":4228},[65,59075,54511],{"class":154},[65,59077,59078],{"class":302},"document.querySelectorAll('$1');",[65,59080,34857],{"class":154},[65,59082,3820],{"class":154},[65,59084,59085],{"class":140,"line":4235},[65,59086,55111],{"class":154},[65,59088,59089],{"class":140,"line":4244},[65,59090,4879],{"class":154},[65,59092,59093,59095,59098,59100,59102],{"class":140,"line":4261},[65,59094,54369],{"class":154},[65,59096,59097],{"class":168},"window.innerWidth",[65,59099,34857],{"class":154},[65,59101,797],{"class":154},[65,59103,418],{"class":154},[65,59105,59106,59108,59110,59112,59114,59116,59119,59121],{"class":140,"line":4266},[65,59107,54402],{"class":154},[65,59109,54372],{"class":326},[65,59111,34857],{"class":154},[65,59113,797],{"class":154},[65,59115,35344],{"class":154},[65,59117,59118],{"class":302},"wiw",[65,59120,34857],{"class":154},[65,59122,3820],{"class":154},[65,59124,59125,59127,59129,59131,59133],{"class":140,"line":4275},[65,59126,54402],{"class":154},[65,59128,34838],{"class":326},[65,59130,34857],{"class":154},[65,59132,797],{"class":154},[65,59134,16316],{"class":154},[65,59136,59137,59139,59141],{"class":140,"line":4280},[65,59138,54730],{"class":154},[65,59140,59097],{"class":302},[65,59142,36971],{"class":154},[65,59144,59145],{"class":140,"line":4322},[65,59146,54742],{"class":154},[65,59148,59149],{"class":140,"line":4375},[65,59150,4879],{"class":154},[65,59152,59153,59155,59158,59160,59162],{"class":140,"line":4408},[65,59154,54369],{"class":154},[65,59156,59157],{"class":168},"window.innerHeight",[65,59159,34857],{"class":154},[65,59161,797],{"class":154},[65,59163,418],{"class":154},[65,59165,59166,59168,59170,59172,59174,59176,59179,59181],{"class":140,"line":4426},[65,59167,54402],{"class":154},[65,59169,54372],{"class":326},[65,59171,34857],{"class":154},[65,59173,797],{"class":154},[65,59175,35344],{"class":154},[65,59177,59178],{"class":302},"wih",[65,59180,34857],{"class":154},[65,59182,3820],{"class":154},[65,59184,59185,59187,59189,59191,59193],{"class":140,"line":4431},[65,59186,54402],{"class":154},[65,59188,34838],{"class":326},[65,59190,34857],{"class":154},[65,59192,797],{"class":154},[65,59194,16316],{"class":154},[65,59196,59197,59199,59201],{"class":140,"line":4447},[65,59198,54730],{"class":154},[65,59200,59157],{"class":302},[65,59202,36971],{"class":154},[65,59204,59205],{"class":140,"line":4470},[65,59206,54742],{"class":154},[65,59208,59209],{"class":140,"line":4490},[65,59210,4879],{"class":154},[65,59212,59213,59215,59218,59220,59222],{"class":140,"line":4495},[65,59214,54369],{"class":154},[65,59216,59217],{"class":168},"clientX",[65,59219,34857],{"class":154},[65,59221,797],{"class":154},[65,59223,418],{"class":154},[65,59225,59226,59228,59230,59232,59234,59236,59239,59241],{"class":140,"line":4523},[65,59227,54402],{"class":154},[65,59229,54372],{"class":326},[65,59231,34857],{"class":154},[65,59233,797],{"class":154},[65,59235,35344],{"class":154},[65,59237,59238],{"class":302},"clx",[65,59240,34857],{"class":154},[65,59242,3820],{"class":154},[65,59244,59245,59247,59249,59251,59253],{"class":140,"line":4528},[65,59246,54402],{"class":154},[65,59248,34838],{"class":326},[65,59250,34857],{"class":154},[65,59252,797],{"class":154},[65,59254,16316],{"class":154},[65,59256,59257,59259,59261],{"class":140,"line":4542},[65,59258,54730],{"class":154},[65,59260,59217],{"class":302},[65,59262,36971],{"class":154},[65,59264,59265],{"class":140,"line":4547},[65,59266,54742],{"class":154},[65,59268,59269],{"class":140,"line":4561},[65,59270,4879],{"class":154},[65,59272,59273,59275,59278,59280,59282],{"class":140,"line":4567},[65,59274,54369],{"class":154},[65,59276,59277],{"class":168},"clientY",[65,59279,34857],{"class":154},[65,59281,797],{"class":154},[65,59283,418],{"class":154},[65,59285,59286,59288,59290,59292,59294,59296,59299,59301],{"class":140,"line":4572},[65,59287,54402],{"class":154},[65,59289,54372],{"class":326},[65,59291,34857],{"class":154},[65,59293,797],{"class":154},[65,59295,35344],{"class":154},[65,59297,59298],{"class":302},"cly",[65,59300,34857],{"class":154},[65,59302,3820],{"class":154},[65,59304,59305,59307,59309,59311,59313],{"class":140,"line":4582},[65,59306,54402],{"class":154},[65,59308,34838],{"class":326},[65,59310,34857],{"class":154},[65,59312,797],{"class":154},[65,59314,16316],{"class":154},[65,59316,59317,59319,59321],{"class":140,"line":4587},[65,59318,54730],{"class":154},[65,59320,59277],{"class":302},[65,59322,36971],{"class":154},[65,59324,59325],{"class":140,"line":4603},[65,59326,54742],{"class":154},[65,59328,59329],{"class":140,"line":4637},[65,59330,4879],{"class":154},[65,59332,59333,59335,59337,59339,59341],{"class":140,"line":4685},[65,59334,54369],{"class":154},[65,59336,1769],{"class":168},[65,59338,34857],{"class":154},[65,59340,797],{"class":154},[65,59342,418],{"class":154},[65,59344,59345,59347,59349,59351,59353,59355,59358,59360],{"class":140,"line":4690},[65,59346,54402],{"class":154},[65,59348,54372],{"class":326},[65,59350,34857],{"class":154},[65,59352,797],{"class":154},[65,59354,35344],{"class":154},[65,59356,59357],{"class":302},"c",[65,59359,34857],{"class":154},[65,59361,3820],{"class":154},[65,59363,59364,59366,59368,59370,59372],{"class":140,"line":4718},[65,59365,54402],{"class":154},[65,59367,34838],{"class":326},[65,59369,34857],{"class":154},[65,59371,797],{"class":154},[65,59373,16316],{"class":154},[65,59375,59376,59378,59381],{"class":140,"line":4728},[65,59377,54730],{"class":154},[65,59379,59380],{"class":302},"const $1 = $2;",[65,59382,36971],{"class":154},[65,59384,59385],{"class":140,"line":10019},[65,59386,54742],{"class":154},[65,59388,59389],{"class":140,"line":10042},[65,59390,4879],{"class":154},[65,59392,59393,59395,59397,59399,59401],{"class":140,"line":10065},[65,59394,54369],{"class":154},[65,59396,5995],{"class":168},[65,59398,34857],{"class":154},[65,59400,797],{"class":154},[65,59402,418],{"class":154},[65,59404,59405,59407,59409,59411,59413,59415,59417,59419],{"class":140,"line":10070},[65,59406,54402],{"class":154},[65,59408,54372],{"class":326},[65,59410,34857],{"class":154},[65,59412,797],{"class":154},[65,59414,35344],{"class":154},[65,59416,47234],{"class":302},[65,59418,34857],{"class":154},[65,59420,3820],{"class":154},[65,59422,59423,59425,59427,59429,59431],{"class":140,"line":10079},[65,59424,54402],{"class":154},[65,59426,34838],{"class":326},[65,59428,34857],{"class":154},[65,59430,797],{"class":154},[65,59432,16316],{"class":154},[65,59434,59435,59437,59440],{"class":140,"line":10084},[65,59436,54730],{"class":154},[65,59438,59439],{"class":302},"let $1 = $2;",[65,59441,36971],{"class":154},[65,59443,59444],{"class":140,"line":10109},[65,59445,54742],{"class":154},[65,59447,59448],{"class":140,"line":10114},[65,59449,4879],{"class":154},[65,59451,59452,59454,59457,59459,59461],{"class":140,"line":12945},[65,59453,54369],{"class":154},[65,59455,59456],{"class":168},"color",[65,59458,34857],{"class":154},[65,59460,797],{"class":154},[65,59462,418],{"class":154},[65,59464,59465,59467,59469,59471,59473,59475,59478,59480],{"class":140,"line":12950},[65,59466,54402],{"class":154},[65,59468,54372],{"class":326},[65,59470,34857],{"class":154},[65,59472,797],{"class":154},[65,59474,35344],{"class":154},[65,59476,59477],{"class":302},"col",[65,59479,34857],{"class":154},[65,59481,3820],{"class":154},[65,59483,59484,59486,59488,59490,59492],{"class":140,"line":12955},[65,59485,54402],{"class":154},[65,59487,34838],{"class":326},[65,59489,34857],{"class":154},[65,59491,797],{"class":154},[65,59493,16316],{"class":154},[65,59495,59496,59498,59500],{"class":140,"line":12960},[65,59497,54730],{"class":154},[65,59499,59456],{"class":302},[65,59501,36971],{"class":154},[65,59503,59504],{"class":140,"line":12965},[65,59505,54742],{"class":154},[65,59507,59508],{"class":140,"line":12972},[65,59509,4879],{"class":154},[65,59511,59512,59514,59516,59518,59520],{"class":140,"line":12981},[65,59513,54369],{"class":154},[65,59515,3610],{"class":168},[65,59517,34857],{"class":154},[65,59519,797],{"class":154},[65,59521,418],{"class":154},[65,59523,59524,59526,59528,59530,59532,59534,59537,59539],{"class":140,"line":12998},[65,59525,54402],{"class":154},[65,59527,54372],{"class":326},[65,59529,34857],{"class":154},[65,59531,797],{"class":154},[65,59533,35344],{"class":154},[65,59535,59536],{"class":302},"po",[65,59538,34857],{"class":154},[65,59540,3820],{"class":154},[65,59542,59543,59545,59547,59549,59551],{"class":140,"line":13019},[65,59544,54402],{"class":154},[65,59546,34838],{"class":326},[65,59548,34857],{"class":154},[65,59550,797],{"class":154},[65,59552,16316],{"class":154},[65,59554,59555,59557,59559],{"class":140,"line":13040},[65,59556,54730],{"class":154},[65,59558,3610],{"class":302},[65,59560,36971],{"class":154},[65,59562,59563],{"class":140,"line":13045},[65,59564,54742],{"class":154},[65,59566,59567],{"class":140,"line":13054},[65,59568,4879],{"class":154},[65,59570,59571,59573,59575,59577,59579],{"class":140,"line":13059},[65,59572,54369],{"class":154},[65,59574,9685],{"class":168},[65,59576,34857],{"class":154},[65,59578,797],{"class":154},[65,59580,418],{"class":154},[65,59582,59583,59585,59587,59589,59591,59593,59596,59598],{"class":140,"line":13084},[65,59584,54402],{"class":154},[65,59586,54372],{"class":326},[65,59588,34857],{"class":154},[65,59590,797],{"class":154},[65,59592,35344],{"class":154},[65,59594,59595],{"class":302},"len",[65,59597,34857],{"class":154},[65,59599,3820],{"class":154},[65,59601,59602,59604,59606,59608,59610],{"class":140,"line":13089},[65,59603,54402],{"class":154},[65,59605,34838],{"class":326},[65,59607,34857],{"class":154},[65,59609,797],{"class":154},[65,59611,16316],{"class":154},[65,59613,59614,59616,59618],{"class":140,"line":56391},[65,59615,54730],{"class":154},[65,59617,9685],{"class":302},[65,59619,36971],{"class":154},[65,59621,59622],{"class":140,"line":56396},[65,59623,54742],{"class":154},[65,59625,59626],{"class":140,"line":56401},[65,59627,4879],{"class":154},[65,59629,59630,59632,59635,59637,59639],{"class":140,"line":56415},[65,59631,54369],{"class":154},[65,59633,59634],{"class":168},"classNameModule",[65,59636,34857],{"class":154},[65,59638,797],{"class":154},[65,59640,418],{"class":154},[65,59642,59643,59645,59647,59649,59651,59653,59656,59658],{"class":140,"line":56435},[65,59644,54402],{"class":154},[65,59646,54372],{"class":326},[65,59648,34857],{"class":154},[65,59650,797],{"class":154},[65,59652,35344],{"class":154},[65,59654,59655],{"class":302},"cn",[65,59657,34857],{"class":154},[65,59659,3820],{"class":154},[65,59661,59662,59664,59666,59668,59670],{"class":140,"line":56448},[65,59663,54402],{"class":154},[65,59665,34838],{"class":326},[65,59667,34857],{"class":154},[65,59669,797],{"class":154},[65,59671,16316],{"class":154},[65,59673,59674,59676,59679],{"class":140,"line":56460},[65,59675,54730],{"class":154},[65,59677,59678],{"class":302},"className={styles.$1}$2",[65,59680,36971],{"class":154},[65,59682,59683],{"class":140,"line":56471},[65,59684,54742],{"class":154},[65,59686,59687],{"class":140,"line":56480},[65,59688,4879],{"class":154},[65,59690,59691,59693,59695,59697,59699],{"class":140,"line":56485},[65,59692,54369],{"class":154},[65,59694,6643],{"class":168},[65,59696,34857],{"class":154},[65,59698,797],{"class":154},[65,59700,418],{"class":154},[65,59702,59703,59705,59707,59709,59711,59713,59716,59718],{"class":140,"line":56490},[65,59704,54402],{"class":154},[65,59706,54372],{"class":326},[65,59708,34857],{"class":154},[65,59710,797],{"class":154},[65,59712,35344],{"class":154},[65,59714,59715],{"class":302},"fo",[65,59717,34857],{"class":154},[65,59719,3820],{"class":154},[65,59721,59722,59724,59726,59728,59730],{"class":140,"line":56504},[65,59723,54402],{"class":154},[65,59725,34838],{"class":326},[65,59727,34857],{"class":154},[65,59729,797],{"class":154},[65,59731,16316],{"class":154},[65,59733,59734,59736,59739,59741],{"class":140,"line":56524},[65,59735,54543],{"class":154},[65,59737,59738],{"class":302},"for (let ${1:i} = 0; ${1:i} \u003C ${2:count}; ${1:i}++) {",[65,59740,34857],{"class":154},[65,59742,3820],{"class":154},[65,59744,59745,59747,59750,59752],{"class":140,"line":56537},[65,59746,54543],{"class":154},[65,59748,59749],{"class":302}," ${3}",[65,59751,34857],{"class":154},[65,59753,3820],{"class":154},[65,59755,59756,59758,59760],{"class":140,"line":56549},[65,59757,54543],{"class":154},[65,59759,2899],{"class":302},[65,59761,36971],{"class":154},[65,59763,59764],{"class":140,"line":56560},[65,59765,59766],{"class":154}," ],\n",[65,59768,59769],{"class":140,"line":56569},[65,59770,4879],{"class":154},[65,59772,59773,59775,59777,59779,59781],{"class":140,"line":56574},[65,59774,54369],{"class":154},[65,59776,46416],{"class":168},[65,59778,34857],{"class":154},[65,59780,797],{"class":154},[65,59782,418],{"class":154},[65,59784,59785,59787,59789,59791,59793,59795,59797,59799],{"class":140,"line":56579},[65,59786,54402],{"class":154},[65,59788,54372],{"class":326},[65,59790,34857],{"class":154},[65,59792,797],{"class":154},[65,59794,35344],{"class":154},[65,59796,46416],{"class":302},[65,59798,34857],{"class":154},[65,59800,3820],{"class":154},[65,59802,59803,59805,59807,59809,59811],{"class":140,"line":56593},[65,59804,54402],{"class":154},[65,59806,34838],{"class":326},[65,59808,34857],{"class":154},[65,59810,797],{"class":154},[65,59812,16316],{"class":154},[65,59814,59815,59817,59820],{"class":140,"line":56613},[65,59816,54730],{"class":154},[65,59818,59819],{"class":302},"{$1:[]}.map(($2) => $3);",[65,59821,36971],{"class":154},[65,59823,59824],{"class":140,"line":56626},[65,59825,55111],{"class":154},[65,59827,59828],{"class":140,"line":56638},[65,59829,4879],{"class":154},[65,59831,59832,59834,59836,59838,59840],{"class":140,"line":56649},[65,59833,54369],{"class":154},[65,59835,50166],{"class":168},[65,59837,34857],{"class":154},[65,59839,797],{"class":154},[65,59841,418],{"class":154},[65,59843,59844,59846,59848,59850,59852,59854,59857,59859],{"class":140,"line":56658},[65,59845,54402],{"class":154},[65,59847,54372],{"class":326},[65,59849,34857],{"class":154},[65,59851,797],{"class":154},[65,59853,35344],{"class":154},[65,59855,59856],{"class":302},"re",[65,59858,34857],{"class":154},[65,59860,3820],{"class":154},[65,59862,59863,59865,59867,59869,59871],{"class":140,"line":56663},[65,59864,54402],{"class":154},[65,59866,34838],{"class":326},[65,59868,34857],{"class":154},[65,59870,797],{"class":154},[65,59872,16316],{"class":154},[65,59874,59875,59877,59880],{"class":140,"line":56668},[65,59876,54730],{"class":154},[65,59878,59879],{"class":302},"return $1",[65,59881,36971],{"class":154},[65,59883,59884],{"class":140,"line":56682},[65,59885,54742],{"class":154},[65,59887,59888],{"class":140,"line":56702},[65,59889,4879],{"class":154},[65,59891,59892,59894,59896,59898,59900],{"class":140,"line":56715},[65,59893,54369],{"class":154},[65,59895,2044],{"class":168},[65,59897,34857],{"class":154},[65,59899,797],{"class":154},[65,59901,418],{"class":154},[65,59903,59904,59906,59908,59910,59912,59914,59917,59919],{"class":140,"line":56727},[65,59905,54402],{"class":154},[65,59907,54372],{"class":326},[65,59909,34857],{"class":154},[65,59911,797],{"class":154},[65,59913,35344],{"class":154},[65,59915,59916],{"class":302},"asy",[65,59918,34857],{"class":154},[65,59920,3820],{"class":154},[65,59922,59923,59925,59927,59929,59931],{"class":140,"line":56738},[65,59924,54402],{"class":154},[65,59926,34838],{"class":326},[65,59928,34857],{"class":154},[65,59930,797],{"class":154},[65,59932,16316],{"class":154},[65,59934,59935,59937,59939],{"class":140,"line":56747},[65,59936,54730],{"class":154},[65,59938,2044],{"class":302},[65,59940,36971],{"class":154},[65,59942,59943],{"class":140,"line":56752},[65,59944,54742],{"class":154},[65,59946,59947],{"class":140,"line":56757},[65,59948,4879],{"class":154},[65,59950,59951,59953,59956,59958,59960],{"class":140,"line":56771},[65,59952,54369],{"class":154},[65,59954,59955],{"class":168},"mousemove",[65,59957,34857],{"class":154},[65,59959,797],{"class":154},[65,59961,418],{"class":154},[65,59963,59964,59966,59968,59970,59972,59974,59976,59978],{"class":140,"line":56791},[65,59965,54402],{"class":154},[65,59967,54372],{"class":326},[65,59969,34857],{"class":154},[65,59971,797],{"class":154},[65,59973,35344],{"class":154},[65,59975,59955],{"class":302},[65,59977,34857],{"class":154},[65,59979,3820],{"class":154},[65,59981,59982,59984,59986,59988,59990],{"class":140,"line":56804},[65,59983,54402],{"class":154},[65,59985,34838],{"class":326},[65,59987,34857],{"class":154},[65,59989,797],{"class":154},[65,59991,16316],{"class":154},[65,59993,59994,59996,59999,60001],{"class":140,"line":56816},[65,59995,54730],{"class":154},[65,59997,59998],{"class":302},"${1:document}.addEventListener('mousemove', (e) => {",[65,60000,34857],{"class":154},[65,60002,3820],{"class":154},[65,60004,60005,60007,60010,60012],{"class":140,"line":56827},[65,60006,54730],{"class":154},[65,60008,60009],{"class":302}," const pos = { x: e.clientX, y: e.clientY };",[65,60011,34857],{"class":154},[65,60013,3820],{"class":154},[65,60015,60016,60018,60021],{"class":140,"line":56836},[65,60017,54730],{"class":154},[65,60019,60020],{"class":302},"})",[65,60022,36971],{"class":154},[65,60024,60025],{"class":140,"line":56841},[65,60026,54742],{"class":154},[65,60028,60029],{"class":140,"line":56846},[65,60030,4879],{"class":154},[65,60032,60033,60035,60037,60039,60041],{"class":140,"line":56859},[65,60034,54369],{"class":154},[65,60036,4705],{"class":168},[65,60038,34857],{"class":154},[65,60040,797],{"class":154},[65,60042,418],{"class":154},[65,60044,60045,60047,60049,60051,60053,60055,60058,60060],{"class":140,"line":56879},[65,60046,54402],{"class":154},[65,60048,54372],{"class":326},[65,60050,34857],{"class":154},[65,60052,797],{"class":154},[65,60054,35344],{"class":154},[65,60056,60057],{"class":302},"resi",[65,60059,34857],{"class":154},[65,60061,3820],{"class":154},[65,60063,60064,60066,60068,60070,60072],{"class":140,"line":56892},[65,60065,54402],{"class":154},[65,60067,34838],{"class":326},[65,60069,34857],{"class":154},[65,60071,797],{"class":154},[65,60073,16316],{"class":154},[65,60075,60076,60078,60081,60083],{"class":140,"line":56904},[65,60077,54730],{"class":154},[65,60079,60080],{"class":302},"window.addEventListener('resize', () => {",[65,60082,34857],{"class":154},[65,60084,3820],{"class":154},[65,60086,60087,60089,60091,60093],{"class":140,"line":56915},[65,60088,54805],{"class":154},[65,60090,55965],{"class":302},[65,60092,34857],{"class":154},[65,60094,3820],{"class":154},[65,60096,60097,60099,60101],{"class":140,"line":56924},[65,60098,54730],{"class":154},[65,60100,60020],{"class":302},[65,60102,36971],{"class":154},[65,60104,60105],{"class":140,"line":56929},[65,60106,54742],{"class":154},[65,60108,60109],{"class":140,"line":56934},[65,60110,4879],{"class":154},[65,60112,60113],{"class":140,"line":56948},[65,60114,60115],{"class":278}," //数学\n",[65,60117,60118,60120,60123,60125,60127],{"class":140,"line":56968},[65,60119,54369],{"class":154},[65,60121,60122],{"class":168},"Math random",[65,60124,34857],{"class":154},[65,60126,797],{"class":154},[65,60128,418],{"class":154},[65,60130,60131,60133,60135,60137,60139,60141,60144,60146],{"class":140,"line":56981},[65,60132,54402],{"class":154},[65,60134,54372],{"class":326},[65,60136,34857],{"class":154},[65,60138,797],{"class":154},[65,60140,35344],{"class":154},[65,60142,60143],{"class":302},"ran",[65,60145,34857],{"class":154},[65,60147,3820],{"class":154},[65,60149,60150,60152,60154,60156,60158],{"class":140,"line":56991},[65,60151,54402],{"class":154},[65,60153,34838],{"class":326},[65,60155,34857],{"class":154},[65,60157,797],{"class":154},[65,60159,16316],{"class":154},[65,60161,60162,60164,60166],{"class":140,"line":56996},[65,60163,54730],{"class":154},[65,60165,48561],{"class":302},[65,60167,36971],{"class":154},[65,60169,60170],{"class":140,"line":57001},[65,60171,54742],{"class":154},[65,60173,60174],{"class":140,"line":57015},[65,60175,4879],{"class":154},[65,60177,60178,60180,60183,60185,60187],{"class":140,"line":57035},[65,60179,54369],{"class":154},[65,60181,60182],{"class":168},"Math PI",[65,60184,34857],{"class":154},[65,60186,797],{"class":154},[65,60188,418],{"class":154},[65,60190,60191,60193,60195,60197,60199,60201,60204,60206],{"class":140,"line":57048},[65,60192,54402],{"class":154},[65,60194,54372],{"class":326},[65,60196,34857],{"class":154},[65,60198,797],{"class":154},[65,60200,35344],{"class":154},[65,60202,60203],{"class":302},"pi",[65,60205,34857],{"class":154},[65,60207,3820],{"class":154},[65,60209,60210,60212,60214,60216,60218],{"class":140,"line":57059},[65,60211,54402],{"class":154},[65,60213,34838],{"class":326},[65,60215,34857],{"class":154},[65,60217,797],{"class":154},[65,60219,16316],{"class":154},[65,60221,60222,60224,60227],{"class":140,"line":57071},[65,60223,54730],{"class":154},[65,60225,60226],{"class":302},"Math.PI",[65,60228,36971],{"class":154},[65,60230,60231],{"class":140,"line":57076},[65,60232,54742],{"class":154},[65,60234,60235],{"class":140,"line":57081},[65,60236,4879],{"class":154},[65,60238,60239,60241,60244,60246,60248],{"class":140,"line":57094},[65,60240,54369],{"class":154},[65,60242,60243],{"class":168},"2PI",[65,60245,34857],{"class":154},[65,60247,797],{"class":154},[65,60249,418],{"class":154},[65,60251,60252,60254,60256,60258,60260,60262,60265,60267],{"class":140,"line":57114},[65,60253,54402],{"class":154},[65,60255,54372],{"class":326},[65,60257,34857],{"class":154},[65,60259,797],{"class":154},[65,60261,35344],{"class":154},[65,60263,60264],{"class":302},"2pi",[65,60266,34857],{"class":154},[65,60268,3820],{"class":154},[65,60270,60271,60273,60275,60277,60279],{"class":140,"line":57127},[65,60272,54402],{"class":154},[65,60274,34838],{"class":326},[65,60276,34857],{"class":154},[65,60278,797],{"class":154},[65,60280,16316],{"class":154},[65,60282,60283,60285,60288],{"class":140,"line":57137},[65,60284,54730],{"class":154},[65,60286,60287],{"class":302},"Math.PI * 2",[65,60289,36971],{"class":154},[65,60291,60292],{"class":140,"line":57142},[65,60293,54742],{"class":154},[65,60295,60296],{"class":140,"line":57147},[65,60297,4879],{"class":154},[65,60299,60300,60302,60304,60306,60308],{"class":140,"line":57160},[65,60301,54369],{"class":154},[65,60303,48753],{"class":168},[65,60305,34857],{"class":154},[65,60307,797],{"class":154},[65,60309,418],{"class":154},[65,60311,60312,60314,60316,60318,60320,60322,60324,60326],{"class":140,"line":57180},[65,60313,54402],{"class":154},[65,60315,54372],{"class":326},[65,60317,34857],{"class":154},[65,60319,797],{"class":154},[65,60321,35344],{"class":154},[65,60323,48753],{"class":302},[65,60325,34857],{"class":154},[65,60327,3820],{"class":154},[65,60329,60330,60332,60334,60336,60338],{"class":140,"line":57193},[65,60331,54402],{"class":154},[65,60333,34838],{"class":326},[65,60335,34857],{"class":154},[65,60337,797],{"class":154},[65,60339,16316],{"class":154},[65,60341,60342,60344,60347],{"class":140,"line":57203},[65,60343,54730],{"class":154},[65,60345,60346],{"class":302},"Math.abs($1)",[65,60348,36971],{"class":154},[65,60350,60351],{"class":140,"line":57208},[65,60352,54742],{"class":154},[65,60354,60355],{"class":140,"line":57213},[65,60356,4879],{"class":154},[65,60358,60359,60361,60364,60366,60368],{"class":140,"line":57227},[65,60360,54369],{"class":154},[65,60362,60363],{"class":168},"sin",[65,60365,34857],{"class":154},[65,60367,797],{"class":154},[65,60369,418],{"class":154},[65,60371,60372,60374,60376,60378,60380,60382,60384,60386],{"class":140,"line":57247},[65,60373,54402],{"class":154},[65,60375,54372],{"class":326},[65,60377,34857],{"class":154},[65,60379,797],{"class":154},[65,60381,35344],{"class":154},[65,60383,60363],{"class":302},[65,60385,34857],{"class":154},[65,60387,3820],{"class":154},[65,60389,60390,60392,60394,60396,60398],{"class":140,"line":57260},[65,60391,54402],{"class":154},[65,60393,34838],{"class":326},[65,60395,34857],{"class":154},[65,60397,797],{"class":154},[65,60399,16316],{"class":154},[65,60401,60402,60404,60407],{"class":140,"line":57270},[65,60403,54730],{"class":154},[65,60405,60406],{"class":302},"Math.sin($1)",[65,60408,36971],{"class":154},[65,60410,60411],{"class":140,"line":57275},[65,60412,54742],{"class":154},[65,60414,60415],{"class":140,"line":57280},[65,60416,4879],{"class":154},[65,60418,60419,60421,60424,60426,60428],{"class":140,"line":57294},[65,60420,54369],{"class":154},[65,60422,60423],{"class":168},"cos",[65,60425,34857],{"class":154},[65,60427,797],{"class":154},[65,60429,418],{"class":154},[65,60431,60432,60434,60436,60438,60440,60442,60444,60446],{"class":140,"line":57314},[65,60433,54402],{"class":154},[65,60435,54372],{"class":326},[65,60437,34857],{"class":154},[65,60439,797],{"class":154},[65,60441,35344],{"class":154},[65,60443,60423],{"class":302},[65,60445,34857],{"class":154},[65,60447,3820],{"class":154},[65,60449,60450,60452,60454,60456,60458],{"class":140,"line":57327},[65,60451,54402],{"class":154},[65,60453,34838],{"class":326},[65,60455,34857],{"class":154},[65,60457,797],{"class":154},[65,60459,16316],{"class":154},[65,60461,60462,60464,60467],{"class":140,"line":57337},[65,60463,54730],{"class":154},[65,60465,60466],{"class":302},"Math.cos($1)",[65,60468,36971],{"class":154},[65,60470,60471],{"class":140,"line":57342},[65,60472,54742],{"class":154},[65,60474,60475],{"class":140,"line":57347},[65,60476,4879],{"class":154},[65,60478,60479,60481,60484,60486,60488],{"class":140,"line":57361},[65,60480,54369],{"class":154},[65,60482,60483],{"class":168},"tan",[65,60485,34857],{"class":154},[65,60487,797],{"class":154},[65,60489,418],{"class":154},[65,60491,60492,60494,60496,60498,60500,60502,60504,60506],{"class":140,"line":57381},[65,60493,54402],{"class":154},[65,60495,54372],{"class":326},[65,60497,34857],{"class":154},[65,60499,797],{"class":154},[65,60501,35344],{"class":154},[65,60503,60483],{"class":302},[65,60505,34857],{"class":154},[65,60507,3820],{"class":154},[65,60509,60510,60512,60514,60516,60518],{"class":140,"line":57394},[65,60511,54402],{"class":154},[65,60513,34838],{"class":326},[65,60515,34857],{"class":154},[65,60517,797],{"class":154},[65,60519,16316],{"class":154},[65,60521,60522,60524,60527],{"class":140,"line":57403},[65,60523,54730],{"class":154},[65,60525,60526],{"class":302},"Math.tan($1)",[65,60528,36971],{"class":154},[65,60530,60531],{"class":140,"line":57408},[65,60532,54742],{"class":154},[65,60534,60535],{"class":140,"line":57413},[65,60536,4879],{"class":154},[65,60538,60539,60541,60544,60546,60548],{"class":140,"line":57427},[65,60540,54369],{"class":154},[65,60542,60543],{"class":168},"atan",[65,60545,34857],{"class":154},[65,60547,797],{"class":154},[65,60549,418],{"class":154},[65,60551,60552,60554,60556,60558,60560,60562,60564,60566],{"class":140,"line":57447},[65,60553,54402],{"class":154},[65,60555,54372],{"class":326},[65,60557,34857],{"class":154},[65,60559,797],{"class":154},[65,60561,35344],{"class":154},[65,60563,60543],{"class":302},[65,60565,34857],{"class":154},[65,60567,3820],{"class":154},[65,60569,60570,60572,60574,60576,60578],{"class":140,"line":57460},[65,60571,54402],{"class":154},[65,60573,34838],{"class":326},[65,60575,34857],{"class":154},[65,60577,797],{"class":154},[65,60579,16316],{"class":154},[65,60581,60582,60584,60587],{"class":140,"line":57470},[65,60583,54730],{"class":154},[65,60585,60586],{"class":302},"Math.atan($1)",[65,60588,36971],{"class":154},[65,60590,60591],{"class":140,"line":57475},[65,60592,54742],{"class":154},[65,60594,60595],{"class":140,"line":57480},[65,60596,4879],{"class":154},[65,60598,60599,60601,60604,60606,60608],{"class":140,"line":57494},[65,60600,54369],{"class":154},[65,60602,60603],{"class":168},"atan2",[65,60605,34857],{"class":154},[65,60607,797],{"class":154},[65,60609,418],{"class":154},[65,60611,60612,60614,60616,60618,60620,60622,60624,60626],{"class":140,"line":57514},[65,60613,54402],{"class":154},[65,60615,54372],{"class":326},[65,60617,34857],{"class":154},[65,60619,797],{"class":154},[65,60621,35344],{"class":154},[65,60623,60603],{"class":302},[65,60625,34857],{"class":154},[65,60627,3820],{"class":154},[65,60629,60630,60632,60634,60636,60638],{"class":140,"line":57527},[65,60631,54402],{"class":154},[65,60633,34838],{"class":326},[65,60635,34857],{"class":154},[65,60637,797],{"class":154},[65,60639,16316],{"class":154},[65,60641,60642,60644,60647],{"class":140,"line":57537},[65,60643,54730],{"class":154},[65,60645,60646],{"class":302},"Math.atan2($1)",[65,60648,36971],{"class":154},[65,60650,60651],{"class":140,"line":57542},[65,60652,54742],{"class":154},[65,60654,60655],{"class":140,"line":57547},[65,60656,4879],{"class":154},[65,60658,60659,60661,60663,60665,60667],{"class":140,"line":57561},[65,60660,54369],{"class":154},[65,60662,11971],{"class":168},[65,60664,34857],{"class":154},[65,60666,797],{"class":154},[65,60668,418],{"class":154},[65,60670,60671,60673,60675,60677,60679,60681,60683,60685],{"class":140,"line":57581},[65,60672,54402],{"class":154},[65,60674,54372],{"class":326},[65,60676,34857],{"class":154},[65,60678,797],{"class":154},[65,60680,35344],{"class":154},[65,60682,11971],{"class":302},[65,60684,34857],{"class":154},[65,60686,3820],{"class":154},[65,60688,60689,60691,60693,60695,60697],{"class":140,"line":57594},[65,60690,54402],{"class":154},[65,60692,34838],{"class":326},[65,60694,34857],{"class":154},[65,60696,797],{"class":154},[65,60698,16316],{"class":154},[65,60700,60701,60703,60706],{"class":140,"line":57604},[65,60702,54730],{"class":154},[65,60704,60705],{"class":302},"Math.floor($1)",[65,60707,36971],{"class":154},[65,60709,60710],{"class":140,"line":57609},[65,60711,54742],{"class":154},[65,60713,60714],{"class":140,"line":57614},[65,60715,4879],{"class":154},[65,60717,60718,60720,60722,60724,60726],{"class":140,"line":57628},[65,60719,54369],{"class":154},[65,60721,48397],{"class":168},[65,60723,34857],{"class":154},[65,60725,797],{"class":154},[65,60727,418],{"class":154},[65,60729,60730,60732,60734,60736,60738,60740,60742,60744],{"class":140,"line":57648},[65,60731,54402],{"class":154},[65,60733,54372],{"class":326},[65,60735,34857],{"class":154},[65,60737,797],{"class":154},[65,60739,35344],{"class":154},[65,60741,48397],{"class":302},[65,60743,34857],{"class":154},[65,60745,3820],{"class":154},[65,60747,60748,60750,60752,60754,60756],{"class":140,"line":57661},[65,60749,54402],{"class":154},[65,60751,34838],{"class":326},[65,60753,34857],{"class":154},[65,60755,797],{"class":154},[65,60757,16316],{"class":154},[65,60759,60760,60762,60765],{"class":140,"line":57671},[65,60761,54730],{"class":154},[65,60763,60764],{"class":302},"Math.ceil($1)",[65,60766,36971],{"class":154},[65,60768,60769],{"class":140,"line":57676},[65,60770,54742],{"class":154},[65,60772,60773],{"class":140,"line":57681},[65,60774,4879],{"class":154},[65,60776,60777,60779,60782,60784,60786],{"class":140,"line":57695},[65,60778,54369],{"class":154},[65,60780,60781],{"class":168},"fround",[65,60783,34857],{"class":154},[65,60785,797],{"class":154},[65,60787,418],{"class":154},[65,60789,60790,60792,60794,60796,60798,60800,60802,60804],{"class":140,"line":57715},[65,60791,54402],{"class":154},[65,60793,54372],{"class":326},[65,60795,34857],{"class":154},[65,60797,797],{"class":154},[65,60799,35344],{"class":154},[65,60801,60781],{"class":302},[65,60803,34857],{"class":154},[65,60805,3820],{"class":154},[65,60807,60808,60810,60812,60814,60816],{"class":140,"line":57728},[65,60809,54402],{"class":154},[65,60811,34838],{"class":326},[65,60813,34857],{"class":154},[65,60815,797],{"class":154},[65,60817,16316],{"class":154},[65,60819,60820,60822,60825],{"class":140,"line":57738},[65,60821,54730],{"class":154},[65,60823,60824],{"class":302},"Math.fround($1)",[65,60826,36971],{"class":154},[65,60828,60829],{"class":140,"line":57743},[65,60830,54742],{"class":154},[65,60832,60833],{"class":140,"line":57748},[65,60834,4879],{"class":154},[65,60836,60837,60839,60842,60844,60846],{"class":140,"line":57762},[65,60838,54369],{"class":154},[65,60840,60841],{"class":168},"max",[65,60843,34857],{"class":154},[65,60845,797],{"class":154},[65,60847,418],{"class":154},[65,60849,60850,60852,60854,60856,60858,60860,60862,60864],{"class":140,"line":57782},[65,60851,54402],{"class":154},[65,60853,54372],{"class":326},[65,60855,34857],{"class":154},[65,60857,797],{"class":154},[65,60859,35344],{"class":154},[65,60861,60841],{"class":302},[65,60863,34857],{"class":154},[65,60865,3820],{"class":154},[65,60867,60868,60870,60872,60874,60876],{"class":140,"line":57795},[65,60869,54402],{"class":154},[65,60871,34838],{"class":326},[65,60873,34857],{"class":154},[65,60875,797],{"class":154},[65,60877,16316],{"class":154},[65,60879,60880,60882,60885],{"class":140,"line":57805},[65,60881,54730],{"class":154},[65,60883,60884],{"class":302},"Math.max($1)",[65,60886,36971],{"class":154},[65,60888,60889],{"class":140,"line":57810},[65,60890,54742],{"class":154},[65,60892,60893],{"class":140,"line":57815},[65,60894,4879],{"class":154},[65,60896,60897,60899,60902,60904,60906],{"class":140,"line":57829},[65,60898,54369],{"class":154},[65,60900,60901],{"class":168},"min",[65,60903,34857],{"class":154},[65,60905,797],{"class":154},[65,60907,418],{"class":154},[65,60909,60910,60912,60914,60916,60918,60920,60922,60924],{"class":140,"line":57849},[65,60911,54402],{"class":154},[65,60913,54372],{"class":326},[65,60915,34857],{"class":154},[65,60917,797],{"class":154},[65,60919,35344],{"class":154},[65,60921,60901],{"class":302},[65,60923,34857],{"class":154},[65,60925,3820],{"class":154},[65,60927,60928,60930,60932,60934,60936],{"class":140,"line":57862},[65,60929,54402],{"class":154},[65,60931,34838],{"class":326},[65,60933,34857],{"class":154},[65,60935,797],{"class":154},[65,60937,16316],{"class":154},[65,60939,60940,60942,60945],{"class":140,"line":57872},[65,60941,54730],{"class":154},[65,60943,60944],{"class":302},"Math.min($1)",[65,60946,36971],{"class":154},[65,60948,60949],{"class":140,"line":57877},[65,60950,54742],{"class":154},[65,60952,60953],{"class":140,"line":57882},[65,60954,4879],{"class":154},[65,60956,60957,60959,60961,60963,60965],{"class":140,"line":57896},[65,60958,54369],{"class":154},[65,60960,48776],{"class":168},[65,60962,34857],{"class":154},[65,60964,797],{"class":154},[65,60966,418],{"class":154},[65,60968,60969,60971,60973,60975,60977,60979,60981,60983],{"class":140,"line":57916},[65,60970,54402],{"class":154},[65,60972,54372],{"class":326},[65,60974,34857],{"class":154},[65,60976,797],{"class":154},[65,60978,35344],{"class":154},[65,60980,48776],{"class":302},[65,60982,34857],{"class":154},[65,60984,3820],{"class":154},[65,60986,60987,60989,60991,60993,60995],{"class":140,"line":57929},[65,60988,54402],{"class":154},[65,60990,34838],{"class":326},[65,60992,34857],{"class":154},[65,60994,797],{"class":154},[65,60996,16316],{"class":154},[65,60998,60999,61001,61004],{"class":140,"line":57939},[65,61000,54730],{"class":154},[65,61002,61003],{"class":302},"Math.pow($1)",[65,61005,36971],{"class":154},[65,61007,61008],{"class":140,"line":57944},[65,61009,54742],{"class":154},[65,61011,61012],{"class":140,"line":57949},[65,61013,4879],{"class":154},[65,61015,61016,61018,61020,61022,61024],{"class":140,"line":57963},[65,61017,54369],{"class":154},[65,61019,48292],{"class":168},[65,61021,34857],{"class":154},[65,61023,797],{"class":154},[65,61025,418],{"class":154},[65,61027,61028,61030,61032,61034,61036,61038,61040,61042],{"class":140,"line":57983},[65,61029,54402],{"class":154},[65,61031,54372],{"class":326},[65,61033,34857],{"class":154},[65,61035,797],{"class":154},[65,61037,35344],{"class":154},[65,61039,48292],{"class":302},[65,61041,34857],{"class":154},[65,61043,3820],{"class":154},[65,61045,61046,61048,61050,61052,61054],{"class":140,"line":57996},[65,61047,54402],{"class":154},[65,61049,34838],{"class":326},[65,61051,34857],{"class":154},[65,61053,797],{"class":154},[65,61055,16316],{"class":154},[65,61057,61058,61060,61063],{"class":140,"line":58008},[65,61059,54730],{"class":154},[65,61061,61062],{"class":302},"Math.round($1)",[65,61064,36971],{"class":154},[65,61066,61067],{"class":140,"line":58019},[65,61068,54742],{"class":154},[65,61070,61071],{"class":140,"line":58030},[65,61072,4879],{"class":154},[65,61074,61075,61077,61079,61081,61083],{"class":140,"line":58035},[65,61076,54369],{"class":154},[65,61078,48841],{"class":168},[65,61080,34857],{"class":154},[65,61082,797],{"class":154},[65,61084,418],{"class":154},[65,61086,61087,61089,61091,61093,61095,61097,61099,61101],{"class":140,"line":58040},[65,61088,54402],{"class":154},[65,61090,54372],{"class":326},[65,61092,34857],{"class":154},[65,61094,797],{"class":154},[65,61096,35344],{"class":154},[65,61098,48841],{"class":302},[65,61100,34857],{"class":154},[65,61102,3820],{"class":154},[65,61104,61105,61107,61109,61111,61113],{"class":140,"line":58053},[65,61106,54402],{"class":154},[65,61108,34838],{"class":326},[65,61110,34857],{"class":154},[65,61112,797],{"class":154},[65,61114,16316],{"class":154},[65,61116,61117,61119,61122],{"class":140,"line":58073},[65,61118,54730],{"class":154},[65,61120,61121],{"class":302},"Math.sqrt($1)",[65,61123,36971],{"class":154},[65,61125,61126],{"class":140,"line":58086},[65,61127,54742],{"class":154},[65,61129,61130],{"class":140,"line":58096},[65,61131,4879],{"class":154},[65,61133,61134,61136,61138,61140,61142],{"class":140,"line":58101},[65,61135,54369],{"class":154},[65,61137,48800],{"class":168},[65,61139,34857],{"class":154},[65,61141,797],{"class":154},[65,61143,418],{"class":154},[65,61145,61146,61148,61150,61152,61154,61156,61158,61160],{"class":140,"line":58106},[65,61147,54402],{"class":154},[65,61149,54372],{"class":326},[65,61151,34857],{"class":154},[65,61153,797],{"class":154},[65,61155,35344],{"class":154},[65,61157,48800],{"class":302},[65,61159,34857],{"class":154},[65,61161,3820],{"class":154},[65,61163,61164,61166,61168,61170,61172],{"class":140,"line":58120},[65,61165,54402],{"class":154},[65,61167,34838],{"class":326},[65,61169,34857],{"class":154},[65,61171,797],{"class":154},[65,61173,16316],{"class":154},[65,61175,61176,61178,61181],{"class":140,"line":58140},[65,61177,54730],{"class":154},[65,61179,61180],{"class":302},"Math.sign($1)",[65,61182,36971],{"class":154},[65,61184,61185],{"class":140,"line":58153},[65,61186,54742],{"class":154},[65,61188,61189],{"class":140,"line":58163},[65,61190,4879],{"class":154},[65,61192,61193],{"class":140,"line":58168},[65,61194,61195],{"class":278}," // three.js\n",[65,61197,61198,61200,61203,61205,61207],{"class":140,"line":58173},[65,61199,54369],{"class":154},[65,61201,61202],{"class":168},"WebGLRenderer",[65,61204,34857],{"class":154},[65,61206,797],{"class":154},[65,61208,418],{"class":154},[65,61210,61211,61213,61215,61217,61219,61221,61224,61226],{"class":140,"line":58187},[65,61212,54402],{"class":154},[65,61214,54372],{"class":326},[65,61216,34857],{"class":154},[65,61218,797],{"class":154},[65,61220,35344],{"class":154},[65,61222,61223],{"class":302},"wglr",[65,61225,34857],{"class":154},[65,61227,3820],{"class":154},[65,61229,61230,61232,61234,61236,61238],{"class":140,"line":58207},[65,61231,54402],{"class":154},[65,61233,34838],{"class":326},[65,61235,34857],{"class":154},[65,61237,797],{"class":154},[65,61239,16316],{"class":154},[65,61241,61242,61244,61247],{"class":140,"line":58220},[65,61243,54730],{"class":154},[65,61245,61246],{"class":302},"new THREE.WebGLRenderer($1)",[65,61248,36971],{"class":154},[65,61250,61251],{"class":140,"line":58230},[65,61252,54742],{"class":154},[65,61254,61255],{"class":140,"line":58235},[65,61256,4879],{"class":154},[65,61258,61259,61261,61264,61266,61268],{"class":140,"line":58240},[65,61260,54369],{"class":154},[65,61262,61263],{"class":168},"WebGLRenderTarget",[65,61265,34857],{"class":154},[65,61267,797],{"class":154},[65,61269,418],{"class":154},[65,61271,61272,61274,61276,61278,61280,61282,61285,61287],{"class":140,"line":58254},[65,61273,54402],{"class":154},[65,61275,54372],{"class":326},[65,61277,34857],{"class":154},[65,61279,797],{"class":154},[65,61281,35344],{"class":154},[65,61283,61284],{"class":302},"wwglrt",[65,61286,34857],{"class":154},[65,61288,3820],{"class":154},[65,61290,61291,61293,61295,61297,61299],{"class":140,"line":58274},[65,61292,54402],{"class":154},[65,61294,34838],{"class":326},[65,61296,34857],{"class":154},[65,61298,797],{"class":154},[65,61300,16316],{"class":154},[65,61302,61303,61305,61308,61310],{"class":140,"line":58287},[65,61304,54730],{"class":154},[65,61306,61307],{"class":302},"new THREE.WebGLRenderTarget(${1:width}, ${2:height}, {",[65,61309,34857],{"class":154},[65,61311,3820],{"class":154},[65,61313,61314,61316,61319,61321],{"class":140,"line":58297},[65,61315,54730],{"class":154},[65,61317,61318],{"class":302}," ${3:magFilter}: THREE.$4",[65,61320,34857],{"class":154},[65,61322,3820],{"class":154},[65,61324,61325,61327,61330,61332],{"class":140,"line":58302},[65,61326,54730],{"class":154},[65,61328,61329],{"class":302}," ${5:minFilter}: THREE.$6",[65,61331,34857],{"class":154},[65,61333,3820],{"class":154},[65,61335,61336,61338,61341,61343],{"class":140,"line":58307},[65,61337,54730],{"class":154},[65,61339,61340],{"class":302}," ${7:format}: THREE.$8",[65,61342,34857],{"class":154},[65,61344,3820],{"class":154},[65,61346,61347,61349,61352,61354],{"class":140,"line":58321},[65,61348,54730],{"class":154},[65,61350,61351],{"class":302}," ${9:wrapS}: THREE.$10",[65,61353,34857],{"class":154},[65,61355,3820],{"class":154},[65,61357,61358,61360,61363,61365],{"class":140,"line":58341},[65,61359,54730],{"class":154},[65,61361,61362],{"class":302}," ${11:wrapT}: THREE.$12",[65,61364,34857],{"class":154},[65,61366,3820],{"class":154},[65,61368,61369,61371,61373],{"class":140,"line":58354},[65,61370,54730],{"class":154},[65,61372,60020],{"class":302},[65,61374,36971],{"class":154},[65,61376,61377],{"class":140,"line":58364},[65,61378,54742],{"class":154},[65,61380,61381],{"class":140,"line":58369},[65,61382,4879],{"class":154},[65,61384,61385,61387,61390,61392,61394],{"class":140,"line":58374},[65,61386,54369],{"class":154},[65,61388,61389],{"class":168},"Vector2",[65,61391,34857],{"class":154},[65,61393,797],{"class":154},[65,61395,418],{"class":154},[65,61397,61398,61400,61402,61404,61406,61408,61411,61413],{"class":140,"line":58387},[65,61399,54402],{"class":154},[65,61401,54372],{"class":326},[65,61403,34857],{"class":154},[65,61405,797],{"class":154},[65,61407,35344],{"class":154},[65,61409,61410],{"class":302},"v2",[65,61412,34857],{"class":154},[65,61414,3820],{"class":154},[65,61416,61417,61419,61421,61423,61425],{"class":140,"line":58406},[65,61418,54402],{"class":154},[65,61420,34838],{"class":326},[65,61422,34857],{"class":154},[65,61424,797],{"class":154},[65,61426,16316],{"class":154},[65,61428,61429,61431,61434],{"class":140,"line":58419},[65,61430,54730],{"class":154},[65,61432,61433],{"class":302},"new THREE.Vector2($1)",[65,61435,36971],{"class":154},[65,61437,61438],{"class":140,"line":58430},[65,61439,54742],{"class":154},[65,61441,61442],{"class":140,"line":58442},[65,61443,4879],{"class":154},[65,61445,61446,61448,61451,61453,61455],{"class":140,"line":58453},[65,61447,54369],{"class":154},[65,61449,61450],{"class":168},"Vector3",[65,61452,34857],{"class":154},[65,61454,797],{"class":154},[65,61456,418],{"class":154},[65,61458,61459,61461,61463,61465,61467,61469,61472,61474],{"class":140,"line":58465},[65,61460,54402],{"class":154},[65,61462,54372],{"class":326},[65,61464,34857],{"class":154},[65,61466,797],{"class":154},[65,61468,35344],{"class":154},[65,61470,61471],{"class":302},"v3",[65,61473,34857],{"class":154},[65,61475,3820],{"class":154},[65,61477,61478,61480,61482,61484,61486],{"class":140,"line":58477},[65,61479,54402],{"class":154},[65,61481,34838],{"class":326},[65,61483,34857],{"class":154},[65,61485,797],{"class":154},[65,61487,16316],{"class":154},[65,61489,61490,61492,61495],{"class":140,"line":58488},[65,61491,54730],{"class":154},[65,61493,61494],{"class":302},"new THREE.Vector3($1)",[65,61496,36971],{"class":154},[65,61498,61499],{"class":140,"line":58500},[65,61500,54742],{"class":154},[65,61502,61503],{"class":140,"line":58512},[65,61504,4879],{"class":154},[65,61506,61507,61509,61512,61514,61516],{"class":140,"line":58523},[65,61508,54369],{"class":154},[65,61510,61511],{"class":168},"Vector4",[65,61513,34857],{"class":154},[65,61515,797],{"class":154},[65,61517,418],{"class":154},[65,61519,61520,61522,61524,61526,61528,61530,61533,61535],{"class":140,"line":58528},[65,61521,54402],{"class":154},[65,61523,54372],{"class":326},[65,61525,34857],{"class":154},[65,61527,797],{"class":154},[65,61529,35344],{"class":154},[65,61531,61532],{"class":302},"v4",[65,61534,34857],{"class":154},[65,61536,3820],{"class":154},[65,61538,61539,61541,61543,61545,61547],{"class":140,"line":58533},[65,61540,54402],{"class":154},[65,61542,34838],{"class":326},[65,61544,34857],{"class":154},[65,61546,797],{"class":154},[65,61548,16316],{"class":154},[65,61550,61552,61554,61557],{"class":140,"line":61551},299,[65,61553,54730],{"class":154},[65,61555,61556],{"class":302},"new THREE.Vector4($1)",[65,61558,36971],{"class":154},[65,61560,61562],{"class":140,"line":61561},300,[65,61563,54742],{"class":154},[65,61565,61567],{"class":140,"line":61566},301,[65,61568,4879],{"class":154},[65,61570,61572,61574,61577,61579,61581],{"class":140,"line":61571},302,[65,61573,54369],{"class":154},[65,61575,61576],{"class":168},"TextureLoader",[65,61578,34857],{"class":154},[65,61580,797],{"class":154},[65,61582,418],{"class":154},[65,61584,61586,61588,61590,61592,61594,61596,61598,61600],{"class":140,"line":61585},303,[65,61587,54402],{"class":154},[65,61589,54372],{"class":326},[65,61591,34857],{"class":154},[65,61593,797],{"class":154},[65,61595,35344],{"class":154},[65,61597,57107],{"class":302},[65,61599,34857],{"class":154},[65,61601,3820],{"class":154},[65,61603,61605,61607,61609,61611,61613],{"class":140,"line":61604},304,[65,61606,54402],{"class":154},[65,61608,34838],{"class":326},[65,61610,34857],{"class":154},[65,61612,797],{"class":154},[65,61614,16316],{"class":154},[65,61616,61618,61620,61623],{"class":140,"line":61617},305,[65,61619,54730],{"class":154},[65,61621,61622],{"class":302},"new THREE.TextureLoader()$1",[65,61624,36971],{"class":154},[65,61626,61628],{"class":140,"line":61627},306,[65,61629,54742],{"class":154},[65,61631,61633],{"class":140,"line":61632},307,[65,61634,4879],{"class":154},[65,61636,61638],{"class":140,"line":61637},308,[65,61639,162],{"emptyLinePlaceholder":161},[65,61641,61643],{"class":140,"line":61642},309,[65,61644,61645],{"class":278}," //Canvas\n",[65,61647,61649,61651,61654,61656,61658],{"class":140,"line":61648},310,[65,61650,54369],{"class":154},[65,61652,61653],{"class":168},"clearRect",[65,61655,34857],{"class":154},[65,61657,797],{"class":154},[65,61659,418],{"class":154},[65,61661,61663,61665,61667,61669,61671,61673,61676,61678],{"class":140,"line":61662},311,[65,61664,54402],{"class":154},[65,61666,54372],{"class":326},[65,61668,34857],{"class":154},[65,61670,797],{"class":154},[65,61672,35344],{"class":154},[65,61674,61675],{"class":302},"cr",[65,61677,34857],{"class":154},[65,61679,3820],{"class":154},[65,61681,61683,61685,61687,61689,61691],{"class":140,"line":61682},312,[65,61684,54402],{"class":154},[65,61686,34838],{"class":326},[65,61688,34857],{"class":154},[65,61690,797],{"class":154},[65,61692,16316],{"class":154},[65,61694,61696,61698,61701],{"class":140,"line":61695},313,[65,61697,54730],{"class":154},[65,61699,61700],{"class":302},"clearRect(0, 0, canvas.width, canvas.height);",[65,61702,36971],{"class":154},[65,61704,61706],{"class":140,"line":61705},314,[65,61707,54742],{"class":154},[65,61709,61711],{"class":140,"line":61710},315,[65,61712,4879],{"class":154},[65,61714,61716,61718,61721,61723,61725],{"class":140,"line":61715},316,[65,61717,54369],{"class":154},[65,61719,61720],{"class":168},"canvas width",[65,61722,34857],{"class":154},[65,61724,797],{"class":154},[65,61726,418],{"class":154},[65,61728,61730,61732,61734,61736,61738,61740,61743,61745],{"class":140,"line":61729},317,[65,61731,54402],{"class":154},[65,61733,54372],{"class":326},[65,61735,34857],{"class":154},[65,61737,797],{"class":154},[65,61739,35344],{"class":154},[65,61741,61742],{"class":302},"cw",[65,61744,34857],{"class":154},[65,61746,3820],{"class":154},[65,61748,61750,61752,61754,61756,61758],{"class":140,"line":61749},318,[65,61751,54402],{"class":154},[65,61753,34838],{"class":326},[65,61755,34857],{"class":154},[65,61757,797],{"class":154},[65,61759,16316],{"class":154},[65,61761,61763,61765,61768],{"class":140,"line":61762},319,[65,61764,54730],{"class":154},[65,61766,61767],{"class":302},"canvas.width",[65,61769,36971],{"class":154},[65,61771,61773],{"class":140,"line":61772},320,[65,61774,54742],{"class":154},[65,61776,61778],{"class":140,"line":61777},321,[65,61779,4879],{"class":154},[65,61781,61783,61785,61788,61790,61792],{"class":140,"line":61782},322,[65,61784,54369],{"class":154},[65,61786,61787],{"class":168},"canvas height",[65,61789,34857],{"class":154},[65,61791,797],{"class":154},[65,61793,418],{"class":154},[65,61795,61797,61799,61801,61803,61805,61807,61810,61812],{"class":140,"line":61796},323,[65,61798,54402],{"class":154},[65,61800,54372],{"class":326},[65,61802,34857],{"class":154},[65,61804,797],{"class":154},[65,61806,35344],{"class":154},[65,61808,61809],{"class":302},"ch",[65,61811,34857],{"class":154},[65,61813,3820],{"class":154},[65,61815,61817,61819,61821,61823,61825],{"class":140,"line":61816},324,[65,61818,54402],{"class":154},[65,61820,34838],{"class":326},[65,61822,34857],{"class":154},[65,61824,797],{"class":154},[65,61826,16316],{"class":154},[65,61828,61830,61832,61835],{"class":140,"line":61829},325,[65,61831,54730],{"class":154},[65,61833,61834],{"class":302},"canvas.height",[65,61836,36971],{"class":154},[65,61838,61840],{"class":140,"line":61839},326,[65,61841,54742],{"class":154},[65,61843,61845],{"class":140,"line":61844},327,[65,61846,4879],{"class":154},[65,61848,61850,61852,61855,61857,61859],{"class":140,"line":61849},328,[65,61851,54369],{"class":154},[65,61853,61854],{"class":168},"fillRect",[65,61856,34857],{"class":154},[65,61858,797],{"class":154},[65,61860,418],{"class":154},[65,61862,61864,61866,61868,61870,61872,61874,61877,61879],{"class":140,"line":61863},329,[65,61865,54402],{"class":154},[65,61867,54372],{"class":326},[65,61869,34857],{"class":154},[65,61871,797],{"class":154},[65,61873,35344],{"class":154},[65,61875,61876],{"class":302},"fillR",[65,61878,34857],{"class":154},[65,61880,3820],{"class":154},[65,61882,61884,61886,61888,61890,61892],{"class":140,"line":61883},330,[65,61885,54402],{"class":154},[65,61887,34838],{"class":326},[65,61889,34857],{"class":154},[65,61891,797],{"class":154},[65,61893,16316],{"class":154},[65,61895,61897,61899,61902],{"class":140,"line":61896},331,[65,61898,54730],{"class":154},[65,61900,61901],{"class":302},"fillRect($1, $2, $3, $4)",[65,61903,36971],{"class":154},[65,61905,61907],{"class":140,"line":61906},332,[65,61908,54742],{"class":154},[65,61910,61912],{"class":140,"line":61911},333,[65,61913,4879],{"class":154},[65,61915,61917,61919,61922,61924,61926],{"class":140,"line":61916},334,[65,61918,54369],{"class":154},[65,61920,61921],{"class":168},"strokeRect",[65,61923,34857],{"class":154},[65,61925,797],{"class":154},[65,61927,418],{"class":154},[65,61929,61931,61933,61935,61937,61939,61941,61944,61946],{"class":140,"line":61930},335,[65,61932,54402],{"class":154},[65,61934,54372],{"class":326},[65,61936,34857],{"class":154},[65,61938,797],{"class":154},[65,61940,35344],{"class":154},[65,61942,61943],{"class":302},"strokeR",[65,61945,34857],{"class":154},[65,61947,3820],{"class":154},[65,61949,61951,61953,61955,61957,61959],{"class":140,"line":61950},336,[65,61952,54402],{"class":154},[65,61954,34838],{"class":326},[65,61956,34857],{"class":154},[65,61958,797],{"class":154},[65,61960,16316],{"class":154},[65,61962,61964,61966,61969],{"class":140,"line":61963},337,[65,61965,54730],{"class":154},[65,61967,61968],{"class":302},"strokeRect($1, $2, $3, $4)",[65,61970,36971],{"class":154},[65,61972,61974],{"class":140,"line":61973},338,[65,61975,54742],{"class":154},[65,61977,61979],{"class":140,"line":61978},339,[65,61980,4879],{"class":154},[65,61982,61984,61986,61989,61991,61993],{"class":140,"line":61983},340,[65,61985,54369],{"class":154},[65,61987,61988],{"class":168},"beginPath",[65,61990,34857],{"class":154},[65,61992,797],{"class":154},[65,61994,418],{"class":154},[65,61996,61998,62000,62002,62004,62006,62008,62011,62013],{"class":140,"line":61997},341,[65,61999,54402],{"class":154},[65,62001,54372],{"class":326},[65,62003,34857],{"class":154},[65,62005,797],{"class":154},[65,62007,35344],{"class":154},[65,62009,62010],{"class":302},"beginP",[65,62012,34857],{"class":154},[65,62014,3820],{"class":154},[65,62016,62018,62020,62022,62024,62026],{"class":140,"line":62017},342,[65,62019,54402],{"class":154},[65,62021,34838],{"class":326},[65,62023,34857],{"class":154},[65,62025,797],{"class":154},[65,62027,16316],{"class":154},[65,62029,62031,62033,62036],{"class":140,"line":62030},343,[65,62032,54730],{"class":154},[65,62034,62035],{"class":302},"beginPath();",[65,62037,36971],{"class":154},[65,62039,62041],{"class":140,"line":62040},344,[65,62042,54742],{"class":154},[65,62044,62046],{"class":140,"line":62045},345,[65,62047,4879],{"class":154},[65,62049,62051,62053,62056,62058,62060],{"class":140,"line":62050},346,[65,62052,54369],{"class":154},[65,62054,62055],{"class":168},"moveTo",[65,62057,34857],{"class":154},[65,62059,797],{"class":154},[65,62061,418],{"class":154},[65,62063,62065,62067,62069,62071,62073,62075,62078,62080],{"class":140,"line":62064},347,[65,62066,54402],{"class":154},[65,62068,54372],{"class":326},[65,62070,34857],{"class":154},[65,62072,797],{"class":154},[65,62074,35344],{"class":154},[65,62076,62077],{"class":302},"moveT",[65,62079,34857],{"class":154},[65,62081,3820],{"class":154},[65,62083,62085,62087,62089,62091,62093],{"class":140,"line":62084},348,[65,62086,54402],{"class":154},[65,62088,34838],{"class":326},[65,62090,34857],{"class":154},[65,62092,797],{"class":154},[65,62094,16316],{"class":154},[65,62096,62098,62100,62103],{"class":140,"line":62097},349,[65,62099,54730],{"class":154},[65,62101,62102],{"class":302},"moveTo($1, $2);",[65,62104,36971],{"class":154},[65,62106,62108],{"class":140,"line":62107},350,[65,62109,54742],{"class":154},[65,62111,62113],{"class":140,"line":62112},351,[65,62114,4879],{"class":154},[65,62116,62118,62120,62123,62125,62127],{"class":140,"line":62117},352,[65,62119,54369],{"class":154},[65,62121,62122],{"class":168},"closePath",[65,62124,34857],{"class":154},[65,62126,797],{"class":154},[65,62128,418],{"class":154},[65,62130,62132,62134,62136,62138,62140,62142,62145,62147],{"class":140,"line":62131},353,[65,62133,54402],{"class":154},[65,62135,54372],{"class":326},[65,62137,34857],{"class":154},[65,62139,797],{"class":154},[65,62141,35344],{"class":154},[65,62143,62144],{"class":302},"closeP",[65,62146,34857],{"class":154},[65,62148,3820],{"class":154},[65,62150,62152,62154,62156,62158,62160],{"class":140,"line":62151},354,[65,62153,54402],{"class":154},[65,62155,34838],{"class":326},[65,62157,34857],{"class":154},[65,62159,797],{"class":154},[65,62161,16316],{"class":154},[65,62163,62165,62167,62170],{"class":140,"line":62164},355,[65,62166,54730],{"class":154},[65,62168,62169],{"class":302},"closePath();",[65,62171,36971],{"class":154},[65,62173,62175],{"class":140,"line":62174},356,[65,62176,54742],{"class":154},[65,62178,62180],{"class":140,"line":62179},357,[65,62181,4879],{"class":154},[65,62183,62185,62187,62190,62192,62194],{"class":140,"line":62184},358,[65,62186,54369],{"class":154},[65,62188,62189],{"class":168},"lineTo",[65,62191,34857],{"class":154},[65,62193,797],{"class":154},[65,62195,418],{"class":154},[65,62197,62199,62201,62203,62205,62207,62209,62212,62214],{"class":140,"line":62198},359,[65,62200,54402],{"class":154},[65,62202,54372],{"class":326},[65,62204,34857],{"class":154},[65,62206,797],{"class":154},[65,62208,35344],{"class":154},[65,62210,62211],{"class":302},"lineT",[65,62213,34857],{"class":154},[65,62215,3820],{"class":154},[65,62217,62219,62221,62223,62225,62227],{"class":140,"line":62218},360,[65,62220,54402],{"class":154},[65,62222,34838],{"class":326},[65,62224,34857],{"class":154},[65,62226,797],{"class":154},[65,62228,16316],{"class":154},[65,62230,62232,62234,62237],{"class":140,"line":62231},361,[65,62233,54730],{"class":154},[65,62235,62236],{"class":302},"lineTo($1, $2);",[65,62238,36971],{"class":154},[65,62240,62242],{"class":140,"line":62241},362,[65,62243,54742],{"class":154},[65,62245,62247],{"class":140,"line":62246},363,[65,62248,4879],{"class":154},[65,62250,62252,62254,62257,62259,62261],{"class":140,"line":62251},364,[65,62253,54369],{"class":154},[65,62255,62256],{"class":168},"strokeStyle",[65,62258,34857],{"class":154},[65,62260,797],{"class":154},[65,62262,418],{"class":154},[65,62264,62266,62268,62270,62272,62274,62276,62279,62281],{"class":140,"line":62265},365,[65,62267,54402],{"class":154},[65,62269,54372],{"class":326},[65,62271,34857],{"class":154},[65,62273,797],{"class":154},[65,62275,35344],{"class":154},[65,62277,62278],{"class":302},"strokeS",[65,62280,34857],{"class":154},[65,62282,3820],{"class":154},[65,62284,62286,62288,62290,62292,62294],{"class":140,"line":62285},366,[65,62287,54402],{"class":154},[65,62289,34838],{"class":326},[65,62291,34857],{"class":154},[65,62293,797],{"class":154},[65,62295,16316],{"class":154},[65,62297,62299,62301,62304],{"class":140,"line":62298},367,[65,62300,54730],{"class":154},[65,62302,62303],{"class":302},"strokeStyle = '$1';",[65,62305,36971],{"class":154},[65,62307,62309],{"class":140,"line":62308},368,[65,62310,54742],{"class":154},[65,62312,62314],{"class":140,"line":62313},369,[65,62315,4879],{"class":154},[65,62317,62319,62321,62324,62326,62328],{"class":140,"line":62318},370,[65,62320,54369],{"class":154},[65,62322,62323],{"class":168},"fillStyle",[65,62325,34857],{"class":154},[65,62327,797],{"class":154},[65,62329,418],{"class":154},[65,62331,62333,62335,62337,62339,62341,62343,62346,62348],{"class":140,"line":62332},371,[65,62334,54402],{"class":154},[65,62336,54372],{"class":326},[65,62338,34857],{"class":154},[65,62340,797],{"class":154},[65,62342,35344],{"class":154},[65,62344,62345],{"class":302},"fillS",[65,62347,34857],{"class":154},[65,62349,3820],{"class":154},[65,62351,62353,62355,62357,62359,62361],{"class":140,"line":62352},372,[65,62354,54402],{"class":154},[65,62356,34838],{"class":326},[65,62358,34857],{"class":154},[65,62360,797],{"class":154},[65,62362,16316],{"class":154},[65,62364,62366,62368,62371],{"class":140,"line":62365},373,[65,62367,54730],{"class":154},[65,62369,62370],{"class":302},"fillStyle = '$1';",[65,62372,36971],{"class":154},[65,62374,62376],{"class":140,"line":62375},374,[65,62377,54742],{"class":154},[65,62379,62381],{"class":140,"line":62380},375,[65,62382,4879],{"class":154},[65,62384,62386,62388,62391,62393,62395],{"class":140,"line":62385},376,[65,62387,54369],{"class":154},[65,62389,62390],{"class":168},"lineWidth",[65,62392,34857],{"class":154},[65,62394,797],{"class":154},[65,62396,418],{"class":154},[65,62398,62400,62402,62404,62406,62408,62410,62413,62415],{"class":140,"line":62399},377,[65,62401,54402],{"class":154},[65,62403,54372],{"class":326},[65,62405,34857],{"class":154},[65,62407,797],{"class":154},[65,62409,35344],{"class":154},[65,62411,62412],{"class":302},"lineW",[65,62414,34857],{"class":154},[65,62416,3820],{"class":154},[65,62418,62420,62422,62424,62426,62428],{"class":140,"line":62419},378,[65,62421,54402],{"class":154},[65,62423,34838],{"class":326},[65,62425,34857],{"class":154},[65,62427,797],{"class":154},[65,62429,16316],{"class":154},[65,62431,62433,62435,62438],{"class":140,"line":62432},379,[65,62434,54730],{"class":154},[65,62436,62437],{"class":302},"lineWidth = ",[65,62439,36971],{"class":154},[65,62441,62443],{"class":140,"line":62442},380,[65,62444,54742],{"class":154},[65,62446,62448],{"class":140,"line":62447},381,[65,62449,4879],{"class":154},[65,62451,62453,62455,62458,62460,62462],{"class":140,"line":62452},382,[65,62454,54369],{"class":154},[65,62456,62457],{"class":168},"globalAlpha",[65,62459,34857],{"class":154},[65,62461,797],{"class":154},[65,62463,418],{"class":154},[65,62465,62467,62469,62471,62473,62475,62477,62480,62482],{"class":140,"line":62466},383,[65,62468,54402],{"class":154},[65,62470,54372],{"class":326},[65,62472,34857],{"class":154},[65,62474,797],{"class":154},[65,62476,35344],{"class":154},[65,62478,62479],{"class":302},"globalA",[65,62481,34857],{"class":154},[65,62483,3820],{"class":154},[65,62485,62487,62489,62491,62493,62495],{"class":140,"line":62486},384,[65,62488,54402],{"class":154},[65,62490,34838],{"class":326},[65,62492,34857],{"class":154},[65,62494,797],{"class":154},[65,62496,16316],{"class":154},[65,62498,62500,62502,62505],{"class":140,"line":62499},385,[65,62501,54730],{"class":154},[65,62503,62504],{"class":302},"globalAlpha = ",[65,62506,36971],{"class":154},[65,62508,62510],{"class":140,"line":62509},386,[65,62511,54742],{"class":154},[65,62513,62515],{"class":140,"line":62514},387,[65,62516,4879],{"class":154},[65,62518,62520],{"class":140,"line":62519},388,[65,62521,243],{"class":154},[11,62523,5299],{"id":5299},[15,62525,62526,62527,62529],{},"VSCodeのユーザースニペットについて紹介しました。",[5467,62528],{},"\nまた雑ではありますが、私が普段使っているユーザースニペットを紹介しました。",[15,62531,62532],{},"みなさんもぜひ、自分なりのユーザースニペットを登録して効率よくコーディングしてみてください！",[11,62534,35214],{"id":35214},[89,62536,62537],{},[92,62538,62539],{},[29,62540,62543],{"href":62541,"rel":62542,"target":3049},"https://code.visualstudio.com/docs/editing/userdefinedsnippets",[3048],"Snippets in Visual Studio Code",[5313,62545,62546],{},"html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}",{"title":135,"searchDepth":165,"depth":165,"links":62548},[62549,62550,62551,62552,62557,62558],{"id":54283,"depth":158,"text":54284},{"id":54297,"depth":158,"text":54297},{"id":54336,"depth":158,"text":54336},{"id":54466,"depth":158,"text":54466,"children":62553},[62554,62555,62556],{"id":54475,"depth":165,"text":54476},{"id":55299,"depth":165,"text":55300},{"id":58538,"depth":165,"text":58539},{"id":5299,"depth":158,"text":5299},{"id":35214,"depth":158,"text":35214},"2025-07-04T00:00:00.000Z","VSCodeではよく使うユーザーをスニペットとして登録しておくことで、コーディングを効率よく行うことができます。この記事では、VSCodeでのユーザースニペットの登録方法と私のユーザースニペットの紹介をします。","/images/blog/vs-code-snippets.jpg",{},"/blog/vs-code-snippets",{"title":54278,"description":62560},"blog/vs-code-snippets",[62567,62568],"VSCodeでのユーザースニペットの登録方法","私のVSCodeのユーザースニペットの紹介",[62570],"VSCode","kZq4BtMwIfR70HUBY5b50eptmymHZmFjuqPXMIimTWk",{"id":62573,"title":62574,"body":62575,"date":62969,"description":62970,"draft":5339,"extension":5340,"image":62971,"meta":62972,"navigation":161,"path":62973,"seo":62974,"stem":62975,"summaryList":62976,"summaryText":5348,"tags":62978,"__hash__":62979},"blog/blog/vs-code-minimal-castomize.md","VSCodeをカスタマイズして自分好みの環境でコードを書こう！【ミニマリスト必見】",{"type":8,"value":62576,"toc":62949},[62577,62579,62582,62585,62591,62595,62602,62607,62611,62616,62632,62637,62640,62642,62645,62648,62651,62685,62688,62691,62730,62733,62736,62739,62780,62784,62790,62852,62855,62858,62861,62883,62889,62892,62895,62914,62917,62920,62938,62940,62946],[11,62578,13],{"id":13},[15,62580,62581],{},"VSCodeは、多くのプログラマーや開発者に使用されているエディターです。エディターはプログラマーにとって1日の中で最も多く使っているツールでしょう。エディターの見た目を自分好みにカスタマイズすることで、コードに集中できる環境を作ることができるでしょう。",[15,62583,62584],{},"そこでこの記事では、VSCodeの見た目をシンプルにカスタマイズする方法を私のVSCodeの設定を元に解説します！VSCodeの見た目は下記画像の通りとなります。",[15,62586,62587],{},[57,62588],{"alt":62589,"src":62590},"私のVSCode","https://res.cloudinary.com/dy8ftemi0/image/upload/v1751347124/vs-code-minimal-castomize-01_jprvga.jpg",[11,62592,62594],{"id":62593},"vscodeのカスタマイズ方法","VSCodeのカスタマイズ方法",[15,62596,62597,62598,62601],{},"VSCodeでは、",[124,62599,62600],{},"settings.json","に設定を書き込むことで、例えば以下のように自分好みにカスタマイズすることができます。",[35274,62603],{":list":62604,"backgroundColor":62605,"title":62606},"[\"フォントやサイズ、行間などのフォント関連の設定\",\"サイドバーの表示・非表示の設定\",\"アイコン類の設定\"]","var(--sky-blue)","カスタマイズの例",[1177,62608,62610],{"id":62609},"settingsjsonの開き方","settings.jsonの開き方",[15,62612,62613,62615],{},[124,62614,62600],{},"の開き方はいろいろありますが、ここではVSCodeのコマンドパレットから開く方法を紹介します。",[35774,62617,62618,62626],{},[92,62619,62620,54308,62622,54308,62624,54315],{},[34800,62621,54307],{},[34800,62623,54311],{},[34800,62625,54314],{},[92,62627,54318,62628,62631],{},[124,62629,62630],{},"settings","と入力して、「基本設定：ユーザー設定を開く（JSON）」を選択します。",[15,62633,62634],{},[57,62635],{"alt":54327,"src":62636},"https://res.cloudinary.com/dy8ftemi0/image/upload/v1751352595/vs-code-minimal-castomize-02_zhgwnd.jpg",[15,62638,62639],{},"それでは、私のVSCodeの設定を例に、カスタマイズの方法を紹介していきます！",[11,62641,62606],{"id":62606},[15,62643,62644],{},"ここでは、私のVSCodeの設定を例に、紹介していきますので参考にしてみてください。",[1177,62646,62647],{"id":62647},"配色テーマ",[15,62649,62650],{},"VSCodeのテーマはたくさんありますが、有名なものは使ってみてどれもしっくりこなかったのですが、この「Night Shift」は配色が美しくコードも見やすいので気に入ってます。",[29,62652,34,62655,34,62678],{"className":62653,"href":62654},[32],"https://marketplace.visualstudio.com/items?itemName=jean.desaturated",[36,62656,40,62658,40,62662,40,62666,34],{"className":62657},[39],[36,62659,62661],{"className":62660},[44],"Night Shift Theme - Visual Studio Marketplace",[36,62663,62665],{"className":62664},[49],"Extension for Visual Studio Code - A clean desaturated vscode dark theme.",[36,62667,55,62669,55,62674,40],{"className":62668},[54],[57,62670],{"className":62671,"src":62672,"alt":62673,"width":63,"height":63},[60],"/remark-link-card/httpswww.google.coms2faviconsdomain=marketplace.visualstudio.com","Night Shift Theme - Visual Studio Marketplace favicon",[65,62675,62677],{"className":62676},[68],"marketplace.visualstudio.com",[36,62679,55,62681,40],{"className":62680},[73],[57,62682],{"className":62683,"src":62684,"alt":62661},[77],"/remark-link-card/httpsjean.gallerycdn.vsassets.ioextensionsjeandesaturated4.1.41738830587066Microsoft.VisualStudio.Services.Icons.Default",[1177,62686,62687],{"id":62687},"ファイルアイコンテーマ",[15,62689,62690],{},"ファイルアイコンはしっくりくるものがなく、妥協して「vscode-seedling-icon-theme-plus」を使っています。なるべく、インデントがなく、アイコンが小さいのが好みです。なので、インデントも最小の「4」を選択しています。",[129,62692,62694],{"className":54342,"code":62693,"language":54344,"meta":135,"style":135},"\"workbench.iconTheme\": \"vscode-seedling-icon-theme-plus\",\n\"workbench.tree.indent\": 4\n",[124,62695,62696,62716],{"__ignoreMap":135},[65,62697,62698,62700,62703,62705,62707,62709,62712,62714],{"class":140,"line":141},[65,62699,34857],{"class":154},[65,62701,62702],{"class":302},"workbench.iconTheme",[65,62704,34857],{"class":154},[65,62706,1819],{"class":204},[65,62708,34857],{"class":154},[65,62710,62711],{"class":302},"vscode-seedling-icon-theme-plus",[65,62713,34857],{"class":154},[65,62715,3820],{"class":204},[65,62717,62718,62720,62723,62725,62727],{"class":140,"line":158},[65,62719,34857],{"class":154},[65,62721,62722],{"class":302},"workbench.tree.indent",[65,62724,34857],{"class":154},[65,62726,1819],{"class":204},[65,62728,62729],{"class":793},"4\n",[1177,62731,62732],{"id":62732},"フォント関連の設定",[2418,62734,62735],{"id":62735},"フォント",[15,62737,62738],{},"エディターのフォントには「Fira Code」を使用しています。このフォントはリガチャにも対応しているので、コードを書くときにとても見やすいです。",[129,62740,62742],{"className":54342,"code":62741,"language":54344,"meta":135,"style":135},"\"editor.fontFamily\": \"Fira Code\",\n\"editor.fontLigatures\": true // リガチャを有効にする\n",[124,62743,62744,62764],{"__ignoreMap":135},[65,62745,62746,62748,62751,62753,62755,62757,62760,62762],{"class":140,"line":141},[65,62747,34857],{"class":154},[65,62749,62750],{"class":302},"editor.fontFamily",[65,62752,34857],{"class":154},[65,62754,1819],{"class":204},[65,62756,34857],{"class":154},[65,62758,62759],{"class":302},"Fira Code",[65,62761,34857],{"class":154},[65,62763,3820],{"class":204},[65,62765,62766,62768,62771,62773,62775,62777],{"class":140,"line":158},[65,62767,34857],{"class":154},[65,62769,62770],{"class":302},"editor.fontLigatures",[65,62772,34857],{"class":154},[65,62774,1819],{"class":204},[65,62776,667],{"class":793},[65,62778,62779],{"class":278}," // リガチャを有効にする\n",[2418,62781,62783],{"id":62782},"フォントサイズと行間文字間","フォントサイズと行間、文字間",[15,62785,62786,62787,62789],{},"フォントサイズや行間などが小さく狭いとエディターで見える範囲が広くなります。自分はこの環境が好きなので、なるべく小さくしてます。参考までに",[124,62788,62600],{},"には以下のように設定しています。",[129,62791,62793],{"className":54342,"code":62792,"language":54344,"meta":135,"style":135},"\"editor.fontSize\": 13, // フォントサイズ\n\"editor.lineHeight\": 1.3, // 行間\n\"editor.letterSpacing\": -0.8, // 文字間\n",[124,62794,62795,62814,62833],{"__ignoreMap":135},[65,62796,62797,62799,62802,62804,62806,62809,62811],{"class":140,"line":141},[65,62798,34857],{"class":154},[65,62800,62801],{"class":302},"editor.fontSize",[65,62803,34857],{"class":154},[65,62805,1819],{"class":204},[65,62807,62808],{"class":793},"13",[65,62810,39989],{"class":204},[65,62812,62813],{"class":278},"// フォントサイズ\n",[65,62815,62816,62818,62821,62823,62825,62828,62830],{"class":140,"line":158},[65,62817,34857],{"class":154},[65,62819,62820],{"class":302},"editor.lineHeight",[65,62822,34857],{"class":154},[65,62824,1819],{"class":204},[65,62826,62827],{"class":793},"1.3",[65,62829,39989],{"class":204},[65,62831,62832],{"class":278},"// 行間\n",[65,62834,62835,62837,62840,62842,62844,62847,62849],{"class":140,"line":165},[65,62836,34857],{"class":154},[65,62838,62839],{"class":302},"editor.letterSpacing",[65,62841,34857],{"class":154},[65,62843,1819],{"class":204},[65,62845,62846],{"class":793},"-0.8",[65,62848,39989],{"class":204},[65,62850,62851],{"class":278},"// 文字間\n",[1177,62853,62854],{"id":62854},"必要ない領域の非表示",[2418,62856,62857],{"id":62857},"アクティビティバーの移動",[15,62859,62860],{},"デフォルトだと画面の左側にアイコンが並んでいる領域をアクティビティバーと呼びます。アイコンなどが大きくて邪魔だと感じるので上側に移動させましょう。もっとも、マウスでクリックして移動するのも面倒なので基本的にはショートカットで切り替えられるようにしておきましょう。",[129,62862,62864],{"className":54342,"code":62863,"language":54344,"meta":135,"style":135},"\"workbench.activityBar.location\": \"top\"\n",[124,62865,62866],{"__ignoreMap":135},[65,62867,62868,62870,62873,62875,62877,62879,62881],{"class":140,"line":141},[65,62869,34857],{"class":154},[65,62871,62872],{"class":302},"workbench.activityBar.location",[65,62874,34857],{"class":154},[65,62876,1819],{"class":204},[65,62878,34857],{"class":154},[65,62880,24775],{"class":302},[65,62882,36971],{"class":154},[15,62884,62885],{},[57,62886],{"alt":62887,"src":62888},"アクティビティバーを上に移動","https://res.cloudinary.com/dy8ftemi0/image/upload/v1751357033/vs-code-minimal-castomize-03_m0pw56.jpg",[2418,62890,62891],{"id":62891},"ミニマップの非表示",[15,62893,62894],{},"エディターの右側にあるミニマップは特に見ることもないので非表示にしましょう。",[129,62896,62898],{"className":54342,"code":62897,"language":54344,"meta":135,"style":135},"\"editor.minimap.enabled\": false\n",[124,62899,62900],{"__ignoreMap":135},[65,62901,62902,62904,62907,62909,62911],{"class":140,"line":141},[65,62903,34857],{"class":154},[65,62905,62906],{"class":302},"editor.minimap.enabled",[65,62908,34857],{"class":154},[65,62910,1819],{"class":204},[65,62912,62913],{"class":793},"false\n",[2418,62915,62916],{"id":62916},"ブレークポイントの領域の削除",[15,62918,62919],{},"行番号が表示される左側に、ブレークポイント用に使用される領域があります。しかし、デバックを実行しない限り、この領域は邪魔になるので非表示にしておきましょう。",[129,62921,62923],{"className":54342,"code":62922,"language":54344,"meta":135,"style":135},"\"editor.glyphMargin\": false\n",[124,62924,62925],{"__ignoreMap":135},[65,62926,62927,62929,62932,62934,62936],{"class":140,"line":141},[65,62928,34857],{"class":154},[65,62930,62931],{"class":302},"editor.glyphMargin",[65,62933,34857],{"class":154},[65,62935,1819],{"class":204},[65,62937,62913],{"class":793},[11,62939,5299],{"id":5299},[15,62941,62942,62943,62945],{},"ミニマルで使えるVSCodeのカスタマイズ方法を自分の環境を元に紹介しました！",[5467,62944],{},"\nみなさんもぜひ自分好みのVSCodeの環境を作ってみてください！",[5313,62947,62948],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}",{"title":135,"searchDepth":165,"depth":165,"links":62950},[62951,62952,62955,62968],{"id":13,"depth":158,"text":13},{"id":62593,"depth":158,"text":62594,"children":62953},[62954],{"id":62609,"depth":165,"text":62610},{"id":62606,"depth":158,"text":62606,"children":62956},[62957,62958,62959,62963],{"id":62647,"depth":165,"text":62647},{"id":62687,"depth":165,"text":62687},{"id":62732,"depth":165,"text":62732,"children":62960},[62961,62962],{"id":62735,"depth":180,"text":62735},{"id":62782,"depth":180,"text":62783},{"id":62854,"depth":165,"text":62854,"children":62964},[62965,62966,62967],{"id":62857,"depth":180,"text":62857},{"id":62891,"depth":180,"text":62891},{"id":62916,"depth":180,"text":62916},{"id":5299,"depth":158,"text":5299},"2025-07-03T00:00:00.000Z","デフォルトのVSCodeの設定だと、アイコンなどの無駄な領域が多く、エディター部分の領域が狭いと感じます。この記事では、VSCodeをカスタマイズして見た目をすっきりさせ、コードに集中できる環境の作り方を解説します。","/images/blog/vs-code-minimal-castomize.jpg",{},"/blog/vs-code-minimal-castomize",{"title":62574,"description":62970},"blog/vs-code-minimal-castomize",[62594,62977],"私のVSCodeの設定の紹介",[62570],"GSoCztOUqdizpafivlfNJrw4YNp3zjdPOP_bGsde6xE",{"id":62981,"title":62982,"body":62983,"date":64305,"description":64306,"draft":5339,"extension":5340,"image":64307,"meta":64308,"navigation":161,"path":64309,"seo":64310,"stem":64311,"summaryList":64312,"summaryText":5348,"tags":64315,"__hash__":64317},"blog/blog/nuxt-module.md","Nuxtモジュールのおすすめ",{"type":8,"value":62984,"toc":64289},[62985,62989,62996,62999,63033,63036,63043,63045,63052,63100,63103,63107,63110,63114,63121,63124,63156,63160,63163,63195,63199,63202,63221,63333,63365,63369,63385,63429,63438,63470,63473,63476,64019,64051,64055,64066,64077,64094,64102,64134,64138,64145,64241,64275,64277,64283,64286],[11,62986,62988],{"id":62987},"nuxtモジュールとは","Nuxtモジュールとは",[15,62990,62991,62992],{},"現在、273個以上が提供されてる",[34759,62993,62995],{"color":62994},"var(--green)","Nuxtプロジェクトを強化するモジュール・ライブラリです。",[15,62997,62998],{},"機能などを自作するのもいいですが、公式サイトを見て似たような機能があれば楽に導入することができます。",[29,63000,34,63003,34,63026],{"className":63001,"href":63002},[32],"https://nuxt.com/modules",[36,63004,40,63006,40,63010,40,63014,34],{"className":63005},[39],[36,63007,63009],{"className":63008},[44],"Nuxt Modules",[36,63011,63013],{"className":63012},[49],"Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.",[36,63015,55,63017,55,63022,40],{"className":63016},[54],[57,63018],{"className":63019,"src":63020,"alt":63021,"width":63,"height":63},[60],"/remark-link-card/httpswww.google.coms2faviconsdomain=nuxt.com","Nuxt Modules favicon",[65,63023,63025],{"className":63024},[68],"nuxt.com",[36,63027,55,63029,40],{"className":63028},[73],[57,63030],{"className":63031,"src":63032,"alt":63009},[77],"/remark-link-card/httpsnuxt.commodules-social-card.jpg",[1177,63034,63035],{"id":63035},"インストール方法",[15,63037,63038,63039,63042],{},"公式サイトから使用したいモジュールが見つかったら、インストール方法を確認しましょう。ターミナルで",[48193,63040,63041],{},"npm","などでインストールします。",[1177,63044,25701],{"id":25701},[15,63046,63047,63048,63051],{},"Nuxtモジュールを使用するには、",[124,63049,63050],{},"nuxt.config.js","にモジュールを追加します。",[129,63053,63055],{"className":35286,"code":63054,"filename":63050,"language":35289,"meta":135,"style":135},"export default defineNuxtConfig({\n modules: [\n // ここにモジュールを追加\n ],\n});\n",[124,63056,63057,63071,63080,63085,63092],{"__ignoreMap":135},[65,63058,63059,63061,63064,63067,63069],{"class":140,"line":141},[65,63060,284],{"class":154},[65,63062,63063],{"class":154}," default",[65,63065,63066],{"class":200}," defineNuxtConfig",[65,63068,224],{"class":204},[65,63070,208],{"class":154},[65,63072,63073,63076,63078],{"class":140,"line":158},[65,63074,63075],{"class":204}," modules",[65,63077,797],{"class":154},[65,63079,16316],{"class":204},[65,63081,63082],{"class":140,"line":165},[65,63083,63084],{"class":278}," // ここにモジュールを追加\n",[65,63086,63087,63090],{"class":140,"line":180},[65,63088,63089],{"class":204}," ]",[65,63091,3820],{"class":154},[65,63093,63094,63096,63098],{"class":140,"line":194},[65,63095,2899],{"class":154},[65,63097,235],{"class":204},[65,63099,155],{"class":154},[15,63101,63102],{},"以上でNuxtモジュールが使用できるようになります。",[11,63104,63106],{"id":63105},"おすすめのnuxtモジュール","おすすめのNuxtモジュール",[15,63108,63109],{},"それでは、このサイトで使用しているNuxtモジュールを紹介します！",[1177,63111,63113],{"id":63112},"nuxtcontent","@nuxt/content",[15,63115,63116,63117,63120],{},"Nuxt Contentを利用することで、アプリケーションのコンテンツをシンプルに管理できます。ContentフォルダにMarkdown,YAML,CSV,JSONでファイルを作成することで、それらを",[34759,63118,63119],{},"Nuxtのページに表示することができます。","SQLデータベースに影響を受けており、コンテンツから柔軟にページを生成できます。",[15,63122,63123],{},"また、VueコンポーネントをMarkdownに埋め込むことができ、表現豊かなブログやドキュメントサイトを作成することができます。このサイトの根幹になっています！",[29,63125,34,63128,34,63149],{"className":63126,"href":63127},[32],"https://nuxt.com/modules/content",[36,63129,40,63131,40,63135,40,63139,34],{"className":63130},[39],[36,63132,63134],{"className":63133},[44],"@nuxt/content · Nuxt Modules",[36,63136,63138],{"className":63137},[49],"The file-based CMS with support for Markdown, YAML, JSON.",[36,63140,55,63142,55,63146,40],{"className":63141},[54],[57,63143],{"className":63144,"src":63020,"alt":63145,"width":63,"height":63},[60],"@nuxt/content · Nuxt Modules favicon",[65,63147,63025],{"className":63148},[68],[36,63150,55,63152,40],{"className":63151},[73],[57,63153],{"className":63154,"src":63155,"alt":63134},[77],"/remark-link-card/httpsnuxt.com_ogdc_Module.takumi,icon_nuxt.svg,headline_Nuxt+Modules,title_~QG51eHQvY29udGVudA,description_~VGhlIGZpbGUtYmFzZWQgQ01TIHdpdGggc3VwcG9ydCBmb3IgTWFya2Rvd24sIFlBTUwsIEpTT04u,p_Ii9tb2R1bGVzL2NvbnRlbnQi,s_QG1LS49Tp4hYRB0o.png",[1177,63157,63159],{"id":63158},"nuxteslint","@nuxt/eslint",[15,63161,63162],{},"Nuxt用のオールインワンESLint統合になります。プロジェクトに応じたESLintを設定でき、オプションで開発サーバーと並行してESLintチェックを実行する機能も提供します。ESLintをNuxtで使用する場合は入れておきましょう。",[29,63164,34,63167,34,63188],{"className":63165,"href":63166},[32],"https://nuxt.com/modules/eslint",[36,63168,40,63170,40,63174,40,63178,34],{"className":63169},[39],[36,63171,63173],{"className":63172},[44],"@nuxt/eslint · Nuxt Modules",[36,63175,63177],{"className":63176},[49],"Project-aware, easy-to-use, extensible and future-proof ESLint integration.",[36,63179,55,63181,55,63185,40],{"className":63180},[54],[57,63182],{"className":63183,"src":63020,"alt":63184,"width":63,"height":63},[60],"@nuxt/eslint · Nuxt Modules favicon",[65,63186,63025],{"className":63187},[68],[36,63189,55,63191,40],{"className":63190},[73],[57,63192],{"className":63193,"src":63194,"alt":63173},[77],"/remark-link-card/httpsnuxt.com_ogdc_Module.takumi,icon_nuxt.svg,headline_Nuxt+Modules,title_~QG51eHQvZXNsaW50,description_~UHJvamVjdC1hd2FyZSwgZWFzeS10by11c2UsIGV4dGVuc2libGUgYW5kIGZ1dHVyZS1wcm9vZiBFU0xpbnQgaW50ZWdyYXRpb24u,p_Ii9tb2R1bGVzL2VzbGludCI,s_UZnZI249wf9G46ST.png",[1177,63196,63198],{"id":63197},"nuxtfonts","@nuxt/fonts",[15,63200,63201],{},"NuxtプロジェクトにGoogleフォントを簡単に追加できます。このサイトではGoogleフォントのみ使用していますが、ローカルにあるフォントも使用できるみたいです。",[15,63203,63204,63205,2765,63208,63211,63212,63214,63215,63220],{},"使用方法は簡単で、cssで",[124,63206,63207],{},"font-family",[124,63209,63210],{},"font-weight","で指定するだけです。",[5467,63213],{},"\nこのサイトでは、",[29,63216,63219],{"href":63217,"rel":63218,"target":3049},"https://github.com/nono-k/feylo/blob/main/styles/utility/font.scss",[3048],"ここ","で下記のようにユーティリティで定義して利用するようにしています。",[129,63222,63225],{"className":53992,"code":63223,"filename":63224,"language":53995,"meta":135,"style":135},".ff-zen-kaku-gothic-500 {\n font-family: \"Zen Kaku Gothic New\", sans-serif;\n font-weight: 500;\n}\n\n.ff-zilla-slab-700-italic {\n font-family: \"Zilla Slab\", serif;\n font-weight: 700;\n font-style: italic;\n}\n","font.scss",[124,63226,63227,63236,63257,63269,63273,63277,63286,63306,63317,63329],{"__ignoreMap":135},[65,63228,63229,63231,63234],{"class":140,"line":141},[65,63230,834],{"class":154},[65,63232,63233],{"class":326},"ff-zen-kaku-gothic-500",[65,63235,418],{"class":154},[65,63237,63238,63241,63243,63245,63248,63250,63252,63255],{"class":140,"line":158},[65,63239,63240],{"class":340}," font-family",[65,63242,797],{"class":154},[65,63244,35344],{"class":154},[65,63246,63247],{"class":302},"Zen Kaku Gothic New",[65,63249,34857],{"class":154},[65,63251,39989],{"class":204},[65,63253,63254],{"class":793},"sans-serif",[65,63256,155],{"class":154},[65,63258,63259,63262,63264,63267],{"class":140,"line":165},[65,63260,63261],{"class":340}," font-weight",[65,63263,797],{"class":154},[65,63265,63266],{"class":793}," 500",[65,63268,155],{"class":154},[65,63270,63271],{"class":140,"line":180},[65,63272,243],{"class":154},[65,63274,63275],{"class":140,"line":194},[65,63276,162],{"emptyLinePlaceholder":161},[65,63278,63279,63281,63284],{"class":140,"line":211},[65,63280,834],{"class":154},[65,63282,63283],{"class":326},"ff-zilla-slab-700-italic",[65,63285,418],{"class":154},[65,63287,63288,63290,63292,63294,63297,63299,63301,63304],{"class":140,"line":240},[65,63289,63240],{"class":340},[65,63291,797],{"class":154},[65,63293,35344],{"class":154},[65,63295,63296],{"class":302},"Zilla Slab",[65,63298,34857],{"class":154},[65,63300,39989],{"class":204},[65,63302,63303],{"class":793},"serif",[65,63305,155],{"class":154},[65,63307,63308,63310,63312,63315],{"class":140,"line":391},[65,63309,63261],{"class":340},[65,63311,797],{"class":154},[65,63313,63314],{"class":793}," 700",[65,63316,155],{"class":154},[65,63318,63319,63322,63324,63327],{"class":140,"line":401},[65,63320,63321],{"class":340}," font-style",[65,63323,797],{"class":154},[65,63325,63326],{"class":793}," italic",[65,63328,155],{"class":154},[65,63330,63331],{"class":140,"line":406},[65,63332,243],{"class":154},[29,63334,34,63337,34,63358],{"className":63335,"href":63336},[32],"https://nuxt.com/modules/fonts",[36,63338,40,63340,40,63344,40,63348,34],{"className":63339},[39],[36,63341,63343],{"className":63342},[44],"@nuxt/fonts · Nuxt Modules",[36,63345,63347],{"className":63346},[49],"Add custom web fonts with performance in mind.",[36,63349,55,63351,55,63355,40],{"className":63350},[54],[57,63352],{"className":63353,"src":63020,"alt":63354,"width":63,"height":63},[60],"@nuxt/fonts · Nuxt Modules favicon",[65,63356,63025],{"className":63357},[68],[36,63359,55,63361,40],{"className":63360},[73],[57,63362],{"className":63363,"src":63364,"alt":63343},[77],"/remark-link-card/httpsnuxt.com_ogdc_Module.takumi,icon_nuxt.svg,headline_Nuxt+Modules,title_~QG51eHQvZm9udHM,description_Add+custom+web+fonts+with+performance+in+mind.,p_Ii9tb2R1bGVzL2ZvbnRzIg,s_Tuf3gOQ4RQoG7_IZ.png",[1177,63366,63368],{"id":63367},"nuxticon","@nuxt/icon",[15,63370,63371,63372,63377,63378,63381,63382,63384],{},"Nuxtプロジェクトにアイコンを簡単に追加できます。アイコンは",[29,63373,63376],{"href":63374,"rel":63375,"target":3049},"https://icon-sets.iconify.design/",[3048],"Iconify","を使用しているので、利用したいアイコンを探したら、",[124,63379,63380],{},"Icon","コンポーネントの",[124,63383,29191],{},"にアイコン名を指定するだけで表示することができます。",[129,63386,63389],{"className":35286,"code":63387,"filename":63388,"language":35289,"meta":135,"style":135},"\u003CIcon name=\"uil:github\" size=\"1.5rem\" style=\"color: black\" />\n","Iconコンポーネント",[124,63390,63391],{"__ignoreMap":135},[65,63392,63393,63395,63397,63400,63402,63405,63407,63410,63412,63415,63417,63420,63422,63425,63427],{"class":140,"line":141},[65,63394,1830],{"class":154},[65,63396,63380],{"class":326},[65,63398,63399],{"class":168}," name=",[65,63401,34857],{"class":154},[65,63403,63404],{"class":302},"uil:github",[65,63406,34857],{"class":154},[65,63408,63409],{"class":168}," size=",[65,63411,34857],{"class":154},[65,63413,63414],{"class":302},"1.5rem",[65,63416,34857],{"class":154},[65,63418,63419],{"class":168}," style=",[65,63421,34857],{"class":154},[65,63423,63424],{"class":302},"color: black",[65,63426,34857],{"class":154},[65,63428,37119],{"class":154},[15,63430,63431,63432,63434,63435,63437],{},"サイズを変えたいときは、",[124,63433,7526],{},"で指定します。また、アイコンの色を変えたいときは",[124,63436,5313],{},"で設定することができます。",[29,63439,34,63442,34,63463],{"className":63440,"href":63441},[32],"https://nuxt.com/modules/icon",[36,63443,40,63445,40,63449,40,63453,34],{"className":63444},[39],[36,63446,63448],{"className":63447},[44],"@nuxt/icon · Nuxt Modules",[36,63450,63452],{"className":63451},[49],"Icon module for Nuxt with 200,000+ ready to use icons from Iconify.",[36,63454,55,63456,55,63460,40],{"className":63455},[54],[57,63457],{"className":63458,"src":63020,"alt":63459,"width":63,"height":63},[60],"@nuxt/icon · Nuxt Modules favicon",[65,63461,63025],{"className":63462},[68],[36,63464,55,63466,40],{"className":63465},[73],[57,63467],{"className":63468,"src":63469,"alt":63448},[77],"/remark-link-card/httpsnuxt.com_ogdc_Module.takumi,icon_nuxt.svg,headline_Nuxt+Modules,title_~QG51eHQvaWNvbg,description_~SWNvbiBtb2R1bGUgZm9yIE51eHQgd2l0aCAyMDAsMDAwKyByZWFkeSB0byB1c2UgaWNvbnMgZnJvbSBJY29uaWZ5Lg,p_Ii9tb2R1bGVzL2ljb24i,s_C4k2vEj_1izqQYX6.png",[1177,63471,63472],{"id":63472},"nuxt-marquee",[15,63474,63475],{},"このサイトのTopページなどに、テキストが流れ続けるアニメーションを実装するために使用しています。一例としてnuxt-marqueeを使用した見出しのコンポーネントを下記に紹介します。",[129,63477,63482],{"className":63478,"code":63479,"filename":63480,"language":63481,"meta":135,"style":135},"language-vue shiki shiki-themes aurora-x","\u003Cscript setup lang=\"ts\">\ninterface Props {\n level?: 1 | 2 | 3 | 4 | 5 | 6;\n text?: string;\n marqueeSpeed?: number;\n marqueeDirection?: 'left' | 'right';\n marqueePauseOnHover?: boolean;\n};\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n level: 2,\n text: '',\n marqueeSpeed: 40,\n marqueeDirection: 'left',\n marqueePauseOnHover: false,\n});\n\nconst tag = `h${props.level || 2}`;\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"heading__wrap\">\n \u003Cdiv class=\"heading__deco ff-open-sans-700\">\n \u003CNuxtMarquee\n :auto-fill=\"true\"\n :speed=\"40\"\n :direction=\"props.marqueeDirection\"\n :pause-on-hover=\"props.marqueePauseOnHover\"\n >\n \u003Cslot />\n \u003C/NuxtMarquee>\n \u003C/div>\n \u003Ccomponent :is=\"tag\" class=\"heading container ff-open-sans-700\">\n \u003Cslot />\n \u003C/component>\n \u003Cp v-if=\"text\" class=\"text container\">{{ text }}\u003C/p>\n \u003C/div>\n\u003C/template>\n","Marqueeコンポーネント","vue",[124,63483,63484,63507,63516,63547,63558,63569,63592,63603,63607,63611,63641,63651,63661,63672,63686,63696,63704,63708,63740,63748,63752,63761,63780,63799,63806,63822,63838,63857,63877,63882,63894,63903,63911,63945,63955,63963,64003,64011],{"__ignoreMap":135},[65,63485,63486,63488,63491,63494,63497,63499,63501,63503,63505],{"class":140,"line":141},[65,63487,1830],{"class":154},[65,63489,63490],{"class":214},"script",[65,63492,63493],{"class":168}," setup",[65,63495,63496],{"class":168}," lang",[65,63498,6252],{"class":154},[65,63500,34857],{"class":154},[65,63502,134],{"class":302},[65,63504,34857],{"class":154},[65,63506,34841],{"class":154},[65,63508,63509,63511,63514],{"class":140,"line":158},[65,63510,14463],{"class":168},[65,63512,63513],{"class":326}," Props",[65,63515,418],{"class":154},[65,63517,63518,63521,63523,63525,63527,63529,63531,63533,63535,63537,63539,63541,63543,63545],{"class":140,"line":165},[65,63519,63520],{"class":144}," level",[65,63522,427],{"class":168},[65,63524,3137],{"class":793},[65,63526,11880],{"class":168},[65,63528,3748],{"class":793},[65,63530,11880],{"class":168},[65,63532,3739],{"class":793},[65,63534,11880],{"class":168},[65,63536,3629],{"class":793},[65,63538,11880],{"class":168},[65,63540,7741],{"class":793},[65,63542,11880],{"class":168},[65,63544,6168],{"class":793},[65,63546,155],{"class":154},[65,63548,63549,63552,63554,63556],{"class":140,"line":180},[65,63550,63551],{"class":144}," text",[65,63553,427],{"class":168},[65,63555,2657],{"class":340},[65,63557,155],{"class":154},[65,63559,63560,63563,63565,63567],{"class":140,"line":194},[65,63561,63562],{"class":144}," marqueeSpeed",[65,63564,427],{"class":168},[65,63566,430],{"class":340},[65,63568,155],{"class":154},[65,63570,63571,63574,63576,63578,63580,63582,63584,63586,63588,63590],{"class":140,"line":211},[65,63572,63573],{"class":144}," marqueeDirection",[65,63575,427],{"class":168},[65,63577,299],{"class":154},[65,63579,24730],{"class":302},[65,63581,306],{"class":154},[65,63583,11880],{"class":168},[65,63585,299],{"class":154},[65,63587,24745],{"class":302},[65,63589,306],{"class":154},[65,63591,155],{"class":154},[65,63593,63594,63597,63599,63601],{"class":140,"line":240},[65,63595,63596],{"class":144}," marqueePauseOnHover",[65,63598,427],{"class":168},[65,63600,479],{"class":340},[65,63602,155],{"class":154},[65,63604,63605],{"class":140,"line":391},[65,63606,4731],{"class":154},[65,63608,63609],{"class":140,"line":401},[65,63610,162],{"emptyLinePlaceholder":161},[65,63612,63613,63615,63618,63620,63623,63625,63628,63630,63633,63635,63637,63639],{"class":140,"line":406},[65,63614,1769],{"class":168},[65,63616,63617],{"class":144}," props",[65,63619,218],{"class":168},[65,63621,63622],{"class":200}," withDefaults",[65,63624,224],{"class":204},[65,63626,63627],{"class":200},"defineProps",[65,63629,1830],{"class":154},[65,63631,63632],{"class":326},"Props",[65,63634,1836],{"class":154},[65,63636,1269],{"class":204},[65,63638,230],{"class":154},[65,63640,418],{"class":154},[65,63642,63643,63645,63647,63649],{"class":140,"line":421},[65,63644,63520],{"class":204},[65,63646,797],{"class":154},[65,63648,3748],{"class":793},[65,63650,3820],{"class":154},[65,63652,63653,63655,63657,63659],{"class":140,"line":435},[65,63654,63551],{"class":204},[65,63656,797],{"class":154},[65,63658,36171],{"class":154},[65,63660,3820],{"class":154},[65,63662,63663,63665,63667,63670],{"class":140,"line":447},[65,63664,63562],{"class":204},[65,63666,797],{"class":154},[65,63668,63669],{"class":793}," 40",[65,63671,3820],{"class":154},[65,63673,63674,63676,63678,63680,63682,63684],{"class":140,"line":459},[65,63675,63573],{"class":204},[65,63677,797],{"class":154},[65,63679,299],{"class":154},[65,63681,24730],{"class":302},[65,63683,306],{"class":154},[65,63685,3820],{"class":154},[65,63687,63688,63690,63692,63694],{"class":140,"line":471},[65,63689,63596],{"class":204},[65,63691,797],{"class":154},[65,63693,1039],{"class":793},[65,63695,3820],{"class":154},[65,63697,63698,63700,63702],{"class":140,"line":63},[65,63699,2899],{"class":154},[65,63701,235],{"class":204},[65,63703,155],{"class":154},[65,63705,63706],{"class":140,"line":495},[65,63707,162],{"emptyLinePlaceholder":161},[65,63709,63710,63712,63715,63717,63719,63722,63724,63727,63729,63732,63734,63736,63738],{"class":140,"line":507},[65,63711,1769],{"class":168},[65,63713,63714],{"class":144}," tag",[65,63716,218],{"class":168},[65,63718,36536],{"class":154},[65,63720,63721],{"class":302},"h",[65,63723,30704],{"class":154},[65,63725,63726],{"class":144},"props",[65,63728,834],{"class":154},[65,63730,63731],{"class":144},"level",[65,63733,2269],{"class":168},[65,63735,3748],{"class":793},[65,63737,30710],{"class":154},[65,63739,155],{"class":154},[65,63741,63742,63744,63746],{"class":140,"line":519},[65,63743,34881],{"class":154},[65,63745,63490],{"class":214},[65,63747,34841],{"class":154},[65,63749,63750],{"class":140,"line":531},[65,63751,162],{"emptyLinePlaceholder":161},[65,63753,63754,63756,63759],{"class":140,"line":543},[65,63755,1830],{"class":154},[65,63757,63758],{"class":214},"template",[65,63760,34841],{"class":154},[65,63762,63763,63765,63767,63769,63771,63773,63776,63778],{"class":140,"line":555},[65,63764,34846],{"class":154},[65,63766,36],{"class":214},[65,63768,774],{"class":168},[65,63770,6252],{"class":154},[65,63772,34857],{"class":154},[65,63774,63775],{"class":302},"heading__wrap",[65,63777,34857],{"class":154},[65,63779,34841],{"class":154},[65,63781,63782,63784,63786,63788,63790,63792,63795,63797],{"class":140,"line":567},[65,63783,36953],{"class":154},[65,63785,36],{"class":214},[65,63787,774],{"class":168},[65,63789,6252],{"class":154},[65,63791,34857],{"class":154},[65,63793,63794],{"class":302},"heading__deco ff-open-sans-700",[65,63796,34857],{"class":154},[65,63798,34841],{"class":154},[65,63800,63801,63803],{"class":140,"line":3757},[65,63802,37014],{"class":154},[65,63804,63805],{"class":214},"NuxtMarquee\n",[65,63807,63808,63811,63814,63816,63818,63820],{"class":140,"line":3787},[65,63809,63810],{"class":154}," :",[65,63812,63813],{"class":168},"auto-fill",[65,63815,6252],{"class":154},[65,63817,34857],{"class":154},[65,63819,667],{"class":793},[65,63821,36971],{"class":154},[65,63823,63824,63826,63829,63831,63833,63836],{"class":140,"line":3792},[65,63825,63810],{"class":154},[65,63827,63828],{"class":168},"speed",[65,63830,6252],{"class":154},[65,63832,34857],{"class":154},[65,63834,63835],{"class":793},"40",[65,63837,36971],{"class":154},[65,63839,63840,63842,63844,63846,63848,63850,63852,63855],{"class":140,"line":3814},[65,63841,63810],{"class":154},[65,63843,52324],{"class":168},[65,63845,6252],{"class":154},[65,63847,34857],{"class":154},[65,63849,63726],{"class":144},[65,63851,834],{"class":154},[65,63853,63854],{"class":144},"marqueeDirection",[65,63856,36971],{"class":154},[65,63858,63859,63861,63864,63866,63868,63870,63872,63875],{"class":140,"line":3823},[65,63860,63810],{"class":154},[65,63862,63863],{"class":168},"pause-on-hover",[65,63865,6252],{"class":154},[65,63867,34857],{"class":154},[65,63869,63726],{"class":144},[65,63871,834],{"class":154},[65,63873,63874],{"class":144},"marqueePauseOnHover",[65,63876,36971],{"class":154},[65,63878,63879],{"class":140,"line":3831},[65,63880,63881],{"class":154}," >\n",[65,63883,63884,63886,63889,63892],{"class":140,"line":3841},[65,63885,37056],{"class":154},[65,63887,63888],{"class":214},"slot",[65,63890,4349],{"class":63891},"sXJtY",[65,63893,34841],{"class":154},[65,63895,63896,63898,63901],{"class":140,"line":3861},[65,63897,37084],{"class":154},[65,63899,63900],{"class":214},"NuxtMarquee",[65,63902,34841],{"class":154},[65,63904,63905,63907,63909],{"class":140,"line":3867},[65,63906,37124],{"class":154},[65,63908,36],{"class":214},[65,63910,34841],{"class":154},[65,63912,63913,63915,63918,63920,63923,63925,63927,63930,63932,63934,63936,63938,63941,63943],{"class":140,"line":3876},[65,63914,36953],{"class":154},[65,63916,63917],{"class":214},"component",[65,63919,7529],{"class":154},[65,63921,63922],{"class":168},"is",[65,63924,6252],{"class":154},[65,63926,34857],{"class":154},[65,63928,63929],{"class":144},"tag",[65,63931,34857],{"class":154},[65,63933,774],{"class":168},[65,63935,6252],{"class":154},[65,63937,34857],{"class":154},[65,63939,63940],{"class":302},"heading container ff-open-sans-700",[65,63942,34857],{"class":154},[65,63944,34841],{"class":154},[65,63946,63947,63949,63951,63953],{"class":140,"line":3881},[65,63948,37014],{"class":154},[65,63950,63888],{"class":214},[65,63952,4349],{"class":63891},[65,63954,34841],{"class":154},[65,63956,63957,63959,63961],{"class":140,"line":3920},[65,63958,37124],{"class":154},[65,63960,63917],{"class":214},[65,63962,34841],{"class":154},[65,63964,63965,63967,63969,63972,63974,63977,63979,63981,63983,63985,63988,63990,63993,63996,63999,64001],{"class":140,"line":3954},[65,63966,36953],{"class":154},[65,63968,15],{"class":214},[65,63970,63971],{"class":154}," v-if=",[65,63973,34857],{"class":154},[65,63975,63976],{"class":144},"text",[65,63978,34857],{"class":154},[65,63980,774],{"class":168},[65,63982,6252],{"class":154},[65,63984,34857],{"class":154},[65,63986,63987],{"class":302},"text container",[65,63989,34857],{"class":154},[65,63991,63992],{"class":154},">{{",[65,63994,63995],{"class":144}," text",[65,63997,63998],{"class":154}," }}\u003C/",[65,64000,15],{"class":214},[65,64002,34841],{"class":154},[65,64004,64005,64007,64009],{"class":140,"line":3974},[65,64006,34909],{"class":154},[65,64008,36],{"class":214},[65,64010,34841],{"class":154},[65,64012,64013,64015,64017],{"class":140,"line":3979},[65,64014,34881],{"class":154},[65,64016,63758],{"class":214},[65,64018,34841],{"class":154},[29,64020,34,64023,34,64044],{"className":64021,"href":64022},[32],"https://nuxt.com/modules/marquee",[36,64024,40,64026,40,64030,40,64034,34],{"className":64025},[39],[36,64027,64029],{"className":64028},[44],"nuxt-marquee · Nuxt Modules",[36,64031,64033],{"className":64032},[49],"A lightweight Nuxt 3 module that harnesses the power of CSS animations to create silky smooth marquees.",[36,64035,55,64037,55,64041,40],{"className":64036},[54],[57,64038],{"className":64039,"src":63020,"alt":64040,"width":63,"height":63},[60],"nuxt-marquee · Nuxt Modules favicon",[65,64042,63025],{"className":64043},[68],[36,64045,55,64047,40],{"className":64046},[73],[57,64048],{"className":64049,"src":64050,"alt":64029},[77],"/remark-link-card/httpsnuxt.com_ogdc_Module.takumi,icon_marquee.png,headline_Nuxt+Modules,title_nuxt-marquee,description_A+lightweight+Nuxt+3+module+that+harnesses+the+power+of+CSS+animations+to+create+silky+smooth+marquees.,p_Ii9tb2R1bGVzL21hcnF1ZWUi,s__AicTISdEuuu9mhT.pn",[1177,64052,64054],{"id":64053},"nuxtjscloudinary","@nuxtjs/cloudinary",[15,64056,64057,64058,64061,64062,64065],{},"このサイトでは、記事内の画像をCloudinaryで管理しています。画像の場合は、",[124,64059,64060],{},"CldImage","コンポーネント、動画の場合は",[124,64063,64064],{},"CldVideoPlayer","コンポーネントを使用しています。",[15,64067,64068,64069,64072,64073,64076],{},"使用するには、",[124,64070,64071],{},".env","ファイルに",[124,64074,64075],{},"CLOUDINARY_CLOUD_NAME","を設定する必要があります。",[129,64078,64080],{"className":16211,"code":64079,"filename":64071,"language":16214,"meta":135,"style":135},"CLOUDINARY_CLOUD_NAME=\u003CYOUR_CLOUDINARY_CLOUD_NAME>\n",[124,64081,64082],{"__ignoreMap":135},[65,64083,64084,64086,64089,64092],{"class":140,"line":141},[65,64085,64075],{"class":144},[65,64087,64088],{"class":168},"=\u003C",[65,64090,64091],{"class":302},"YOUR_CLOUDINARY_CLOUD_NAME",[65,64093,34841],{"class":168},[15,64095,64096,64097,64101],{},"Markdown内では自前の画像も使っているので、条件分岐で分けています。このサイトの画像についての実装は",[29,64098,16197],{"href":64099,"rel":64100,"target":3049},"https://github.com/nono-k/feylo/blob/main/components/contnet/ProseImg.vue",[3048],"をご覧ください。",[29,64103,34,64106,34,64127],{"className":64104,"href":64105},[32],"https://nuxt.com/modules/cloudinary",[36,64107,40,64109,40,64113,40,64117,34],{"className":64108},[39],[36,64110,64112],{"className":64111},[44],"@nuxtjs/cloudinary · Nuxt Modules",[36,64114,64116],{"className":64115},[49],"Optimize images and videos in your Nuxt application",[36,64118,55,64120,55,64124,40],{"className":64119},[54],[57,64121],{"className":64122,"src":63020,"alt":64123,"width":63,"height":63},[60],"@nuxtjs/cloudinary · Nuxt Modules favicon",[65,64125,63025],{"className":64126},[68],[36,64128,55,64130,40],{"className":64129},[73],[57,64131],{"className":64132,"src":64133,"alt":64112},[77],"/remark-link-card/httpsnuxt.com_ogdc_Module.takumi,icon_cloudinary.png,headline_Nuxt+Modules,title_~QG51eHRqcy9jbG91ZGluYXJ5,description_Optimize+images+and+videos+in+your+Nuxt+application,p_Ii9tb2R1bGVzL2Nsb3VkaW5hcnki,s_GBCWkNbRRj6k-1E-.png",[1177,64135,64137],{"id":64136},"nuxtscripts","@nuxt/scripts",[15,64139,64140,64141,64144],{},"Nuxt Scriptsは、サードパーティスクリプトの最適化をサポートするモジュールになります。このブログではGoogle Analyticsを導入しているので使用しています。Nuxt ScriptsでGoogle Analyticsを設定するには、",[124,64142,64143],{},"nuxt.config.ts","に下記のように記述すればよいでしょう。",[129,64146,64148],{"className":35286,"code":64147,"filename":64143,"language":35289,"meta":135,"style":135},"export default defineNuxtConfig({\n // ...\n $production: {\n scripts: {\n registry: {\n googleAnalytics: {\n id: 'YOUR-ID',\n },\n },\n },\n },\n})\n",[124,64149,64150,64162,64166,64175,64184,64193,64202,64218,64223,64227,64231,64235],{"__ignoreMap":135},[65,64151,64152,64154,64156,64158,64160],{"class":140,"line":141},[65,64153,284],{"class":154},[65,64155,63063],{"class":154},[65,64157,63066],{"class":200},[65,64159,224],{"class":204},[65,64161,208],{"class":154},[65,64163,64164],{"class":140,"line":158},[65,64165,783],{"class":278},[65,64167,64168,64171,64173],{"class":140,"line":165},[65,64169,64170],{"class":204}," $production",[65,64172,797],{"class":154},[65,64174,418],{"class":154},[65,64176,64177,64180,64182],{"class":140,"line":180},[65,64178,64179],{"class":204}," scripts",[65,64181,797],{"class":154},[65,64183,418],{"class":154},[65,64185,64186,64189,64191],{"class":140,"line":194},[65,64187,64188],{"class":204}," registry",[65,64190,797],{"class":154},[65,64192,418],{"class":154},[65,64194,64195,64198,64200],{"class":140,"line":211},[65,64196,64197],{"class":204}," googleAnalytics",[65,64199,797],{"class":154},[65,64201,418],{"class":154},[65,64203,64204,64207,64209,64211,64214,64216],{"class":140,"line":240},[65,64205,64206],{"class":204}," id",[65,64208,797],{"class":154},[65,64210,299],{"class":154},[65,64212,64213],{"class":302},"YOUR-ID",[65,64215,306],{"class":154},[65,64217,3820],{"class":154},[65,64219,64220],{"class":140,"line":391},[65,64221,64222],{"class":154}," },\n",[65,64224,64225],{"class":140,"line":401},[65,64226,6493],{"class":154},[65,64228,64229],{"class":140,"line":406},[65,64230,3864],{"class":154},[65,64232,64233],{"class":140,"line":421},[65,64234,4879],{"class":154},[65,64236,64237,64239],{"class":140,"line":435},[65,64238,2899],{"class":154},[65,64240,12359],{"class":204},[29,64242,34,64245,34,64268],{"className":64243,"href":64244},[32],"https://scripts.nuxt.com/",[36,64246,40,64248,40,64252,40,64256,34],{"className":64247},[39],[36,64249,64251],{"className":64250},[44],"Load Third-Party Scripts in Nuxt · Nuxt Scripts",[36,64253,64255],{"className":64254},[49],"Better performance, privacy, security and DX for third-party scripts.",[36,64257,55,64259,55,64264,40],{"className":64258},[54],[57,64260],{"className":64261,"src":64262,"alt":64263,"width":63,"height":63},[60],"/remark-link-card/httpswww.google.coms2faviconsdomain=scripts.nuxt.com","Load Third-Party Scripts in Nuxt · Nuxt Scripts favicon",[65,64265,64267],{"className":64266},[68],"scripts.nuxt.com",[36,64269,55,64271,40],{"className":64270},[73],[57,64272],{"className":64273,"src":64274,"alt":64251},[77],"/remark-link-card/httpsscripts.nuxt.com_ogsc_Home,title_Nuxt+Scripts,description_Load+Third-Party+Scripts+in+Nuxt,headline_scripts.nuxt.com.png",[11,64276,5299],{"id":5299},[15,64278,64279,64280,64282],{},"Nuxtプロジェクトで便利に開発できるNuxtモジュールを紹介しました。",[5467,64281],{},"\nNuxtモジュールは、公式サイトから探していけば、目的のものが見つかるかと思います。",[15,64284,64285],{},"ぜひみなさんも利用してみてください！",[5313,64287,64288],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .s0_hs, html code.shiki .s0_hs{--shiki-default:#546E7A;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .svy0-, html code.shiki .svy0-{--shiki-default:#EEFFFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sXJtY, html code.shiki .sXJtY{--shiki-default:#FF5370}",{"title":135,"searchDepth":165,"depth":165,"links":64290},[64291,64295,64304],{"id":62987,"depth":158,"text":62988,"children":64292},[64293,64294],{"id":63035,"depth":165,"text":63035},{"id":25701,"depth":165,"text":25701},{"id":63105,"depth":158,"text":63106,"children":64296},[64297,64298,64299,64300,64301,64302,64303],{"id":63112,"depth":165,"text":63113},{"id":63158,"depth":165,"text":63159},{"id":63197,"depth":165,"text":63198},{"id":63367,"depth":165,"text":63368},{"id":63472,"depth":165,"text":63472},{"id":64053,"depth":165,"text":64054},{"id":64136,"depth":165,"text":64137},{"id":5299,"depth":158,"text":5299},"2025-07-02T00:00:00.000Z","このサイトの製作で初めてNuxtを使用して作りました。その際に、Nuxtモジュールを使用して便利だったのでおすすめのNuxtモジュールについて紹介します！","/images/blog/no-image-green.jpg",{},"/blog/nuxt-module",{"title":62982,"description":64306},"blog/nuxt-module",[64313,64314,63106],"Nuxtモジュールについて","このサイトで使用しているNuxtモジュール",[64316],"Nuxt.js","nQ-JNQrw_RfPlvLquO4iPHKFARLVzqUUTfzZmCmhfxc",{"id":64319,"title":64320,"body":64321,"date":64554,"description":64555,"draft":5339,"extension":5340,"image":64556,"meta":64557,"navigation":161,"path":64558,"seo":64559,"stem":64560,"summaryList":5348,"summaryText":5348,"tags":64561,"__hash__":64563},"blog/blog/first-post.md","Web制作についてのメディアサイト「Feylo」を開設しました",{"type":8,"value":64322,"toc":64538},[64323,64325,64331,64337,64369,64372,64375,64378,64392,64395,64398,64402,64408,64411,64414,64417,64425,64428,64431,64465,64468,64474,64477,64483,64489,64493,64499,64505,64508,64514,64520,64524,64530,64532],[11,64324,13],{"id":13},[15,64326,64327],{},[57,64328],{"alt":64329,"src":64330},"Web制作についてのメディアサイト「Feylo」","https://res.cloudinary.com/dy8ftemi0/image/upload/v1751343018/first-post-01_q6hikx.jpg",[15,64332,64333,64334,64336],{},"Nuxt Contentを使ってWeb制作についてのメディアサイト「Feylo」を作成しました。",[5467,64335],{},"\nソースコードはGitHubに公開してます。",[29,64338,34,64341,34,64362],{"className":64339,"href":64340},[32],"https://github.com/nono-k/feylo",[36,64342,40,64344,40,64348,40,64352,34],{"className":64343},[39],[36,64345,64347],{"className":64346},[44],"GitHub - nono-k/feylo",[36,64349,64351],{"className":64350},[49],"Contribute to nono-k/feylo development by creating an account on GitHub.",[36,64353,55,64355,55,64359,40],{"className":64354},[54],[57,64356],{"className":64357,"src":61,"alt":64358,"width":63,"height":63},[60],"GitHub - nono-k/feylo favicon",[65,64360,69],{"className":64361},[68],[36,64363,55,64365,40],{"className":64364},[73],[57,64366],{"className":64367,"src":64368,"alt":64347},[77],"/remark-link-card/httpsopengraph.githubassets.comfffbeb68dd9b188a72dba8743542cc125fb65ab90024ac90c26a30cc4ad9ad59nono-kfeylo",[11,64370,64371],{"id":64371},"作成した経緯",[15,64373,64374],{},"Web制作についてのメディアサイトを作成した経緯について紹介します。",[1177,64376,64377],{"id":64377},"なぜ作ったのか",[15,64379,64380,64381,2765,64386,64391],{},"すでに",[29,64382,64385],{"href":64383,"rel":64384,"target":3049},"https://hypb.dev",[3048],"技術ブログ",[29,64387,64390],{"href":64388,"rel":64389,"target":3049},"https://munus.dev",[3048],"雑記ブログ","を作っていました。ですが、もっとWeb制作の初学者向けの総合的なメディアサイトを運営したいと思い作成しました。",[15,64393,64394],{},"普段、仕事ではWeb制作会社でWeb制作をしており、主にアニメーション関連に関しては知見があると思うので、役に立てるような記事を作成したいと思います。",[15,64396,64397],{},"まだ、サイトを作成したばかりでコンテンツ量は少ないですが、今後GSAPやThree.js、WebGLなどのチュートリアル的な記事も作成していきたいと思っています。",[1177,64399,64401],{"id":64400},"nuxt-contentを使ってみたかった","Nuxt Contentを使ってみたかった",[15,64403,64404,64405,64407],{},"また、すでに作成した2サイトはAstroで作成していました。",[5467,64406],{},"\nNuxtも使ってみたいなと思ったので、このサイトではNuxt Contentを使って作成しました。",[15,64409,64410],{},"Nuxt ContentはAstroのようにマークダウンファイルを読み込んでコンテンツを作成できるので、コンテンツの作成が簡単でいい感じにサイトを作成できたと思います！",[1177,64412,64413],{"id":64413},"今後フリーでやっていきたいから",[15,64415,64416],{},"今はWeb制作会社で働いているのですが、今後フリーで独立したいと考えています。",[15,64418,64419,64420,64422],{},"自分の得意なこととして、CSSやJavaScriptを用いたアニメーションだという自負があります。このサイトでもデザインやコンテンツでアピールしたいと思います。",[5467,64421],{},[34759,64423,64424],{"color":35187},"仕事は募集していますので、依頼したい方はお問い合わせよりご連絡いただければ幸いです。",[11,64426,64427],{"id":64427},"デザイン紹介",[15,64429,64430],{},"デザインに関しては、雑記ブログの方に書いてみたので気になるかたはこちらをご覧ください。",[29,64432,34,64435,34,64458],{"className":64433,"href":64434},[32],"https://munus.dev/blog/web-media-feylo",[36,64436,40,64438,40,64442,40,64446,34],{"className":64437},[39],[36,64439,64441],{"className":64440},[44],"初学者向けのWeb制作についてのメディアサイト「Feylo」を作成したので紹介 | munus",[36,64443,64445],{"className":64444},[49],"Web制作についてのメディアサイトを作った🌐",[36,64447,55,64449,55,64454,40],{"className":64448},[54],[57,64450],{"className":64451,"src":64452,"alt":64453,"width":63,"height":63},[60],"/remark-link-card/httpswww.google.coms2faviconsdomain=munus.dev","初学者向けのWeb制作についてのメディアサイト「Feylo」を作成したので紹介 | munus favicon",[65,64455,64457],{"className":64456},[68],"munus.dev",[36,64459,55,64461,40],{"className":64460},[73],[57,64462],{"className":64463,"src":64464,"alt":64441},[77],"/remark-link-card/httpsmunus.devapiogweb-media-feylo.png",[11,64466,64467],{"id":64467},"コンテンツ紹介",[15,64469,64470,64471,64473],{},"前述の通り、このサイトでは初学者向けのWeb制作に関しての記事やコンテンツを提供していく予定です！",[5467,64472],{},"\n以下、コンテンツ紹介になります。",[1177,64475,64476],{"id":64476},"コンポーネントまとめ",[15,64478,64479],{},[57,64480],{"alt":64481,"src":64482},"コンポーネントまとめページ","https://res.cloudinary.com/dy8ftemi0/image/upload/v1751343017/first-post-02_f4oqcm.jpg",[15,64484,64485,64486,64488],{},"Web制作でよく使うコンポーネントをまとめていきます。",[5467,64487],{},"\nおそらく、コピペですぐに使えるような汎用的なコンポーネントを掲載していきます。",[1177,64490,64492],{"id":64491},"webデザインアニメーション集","Webデザインアニメーション集",[15,64494,64495],{},[57,64496],{"alt":64497,"src":64498},"Webデザインアニメーション集ページ","https://res.cloudinary.com/dy8ftemi0/image/upload/v1751343017/first-post-03_vy7zdc.jpg",[15,64500,64501,64502,64504],{},"Web制作でよく使うアニメーションのサンプルをまとめていきます。",[5467,64503],{},"\n初学者にとっては、アニメーションのコードを読むのは難しいと思いますので、分かりやすいようにサンプルデモ付きで掲載していきます。",[1177,64506,64507],{"id":64507},"おすすめ本",[15,64509,64510],{},[57,64511],{"alt":64512,"src":64513},"おすすめ本ページ","https://res.cloudinary.com/dy8ftemi0/image/upload/v1751343018/first-post-04_i67m34.jpg",[15,64515,64516,64517,64519],{},"管理人が読んで良かった本を紹介します！",[5467,64518],{},"\n書籍だと体系的に学べるので、Web制作について体系的に学びたい方はぜひチェックしてみてください。",[1177,64521,64523],{"id":64522},"web制作に役立つツール集","Web制作に役立つツール集",[15,64525,64526,64527,64529],{},"こちらはまだ作成中です。",[5467,64528],{},"\ndiffやeasingなどのツールを自作できたら公開したいと思います。",[11,64531,5299],{"id":5299},[15,64533,64534,64535,64537],{},"このサイトについて紹介しました。",[5467,64536],{},"\nまだまだコンテンツが少なかったり、機能が足りてない部分もありますが、今後コンテンツを増やしていきみなさんに役立つようなサイトにしていきたいと思います！",{"title":135,"searchDepth":165,"depth":165,"links":64539},[64540,64541,64546,64547,64553],{"id":13,"depth":158,"text":13},{"id":64371,"depth":158,"text":64371,"children":64542},[64543,64544,64545],{"id":64377,"depth":165,"text":64377},{"id":64400,"depth":165,"text":64401},{"id":64413,"depth":165,"text":64413},{"id":64427,"depth":158,"text":64427},{"id":64467,"depth":158,"text":64467,"children":64548},[64549,64550,64551,64552],{"id":64476,"depth":165,"text":64476},{"id":64491,"depth":165,"text":64492},{"id":64507,"depth":165,"text":64507},{"id":64522,"depth":165,"text":64523},{"id":5299,"depth":158,"text":5299},"2025-07-01T00:00:00.000Z","この度、Web制作についてのメディアサイト「Feylo」をNuxt Contentで作成しました。この記事では作成した経緯やコンテンツに関して紹介します！","/images/blog/no-image.jpg",{},"/blog/first-post",{"title":64320,"description":64555},"blog/first-post",[64562],"Blog","bDUm4W13dkenRsPfL3zrJ6pnY_z4iUdctQVTOM7t2XY",1789745663014]