[{"data":1,"prerenderedAt":557},["ShallowReactive",2],{"blog-reogrid-large-data-lazy-loading":3},{"id":4,"title":5,"author":6,"body":7,"date":539,"description":540,"extension":541,"meta":542,"navigation":135,"path":543,"seo":544,"stem":546,"tags":547,"thumbnail":555,"__hash__":556},"blog/blog/reogrid-large-data-lazy-loading.md","ReoGridを使って大規模データを超高速に表示する方法",null,{"type":8,"value":9,"toc":532},"minimark",[10,14,17,26,33,36,41,44,51,57,64,69,72,75,213,225,231,237,479,487,492,501,507,513,519,522,528],[11,12,13],"p",{},"ReoGridは、.NETアプリ用のスプレッドシートコンポーネントです。Excelを依存せず、DLLひとつでアプリにExcel同様の機能をもたせることができます。",[11,15,16],{},"今回は、ReoGridを使って、数十万行規模の大規模データを超高速に画面に読み込み、表示する方法を紹介します。",[11,18,19,20],{},"動画デモ 👉 ",[21,22,23],"a",{"href":23,"rel":24},"https://youtu.be/PospG1jddFw",[25],"nofollow",[27,28,30],"h2",{"id":29},"なぜ超高速表示が可能なのか",[31,32,29],"strong",{},[11,34,35],{},"ReoGridの新バージョン4には、「遅延ロード（Lazy Loading）」という新しい技術を採用しています。",[11,37,38],{},[31,39,40],{},"遅延ロードは、最初から全てのデータを一気に読み込むのではなく、必要に応じて最小限の一部分ずつを読み込んでいきます。",[11,42,43],{},"従来の方法では、すべてのデータを最初に一括で読み込むため、メモリ負荷が高く、表示までに時間がかかっていました。これに対し遅延ロードでは、必要になった部分のみを都度読み込むため、初期表示が圧倒的に高速になります。",[11,45,46,47,50],{},"他のグリッドコンポーネントにも、仮想モードなど類似の手法がありますが、開発者自身がその制御を実装し、管理しなければなりません。",[48,49],"br",{},"しかしReoGridでは、セルがいつ読み込まれるかを内部でスマートに管理しています。スクロールやズームをしたり、ワークシートの表示領域が変化した場合に、ReoGridは自動的に必要なセルを読み込みます。",[11,52,53,54,56],{},"さらに、数式で参照されたセル、アプリで引用するセルも含めて、あらゆるパターンでセルを管理し、必要に応じて読み込み処理を行います。",[48,55],{},"この高度な技術によって、ReoGrid のバージョン4では大規模なデータでもストレスなく、超高速に読み込み、表示することができます。",[11,58,59],{},[60,61],"img",{"alt":62,"src":63},"1760961789-kbTGt4CYq8vwIiSW63AumlDQ.png","/images/articles/1760961789-kbTGt4CYq8vwIiSW63AumlDQ.png.webp",[27,65,67],{"id":66},"実現方法も実はシンプル",[31,68,66],{},[11,70,71],{},"上述のように、セルの状態管理はReoGrid バージョン4が自動的に行うため、アプリ側はデータの準備を行うだけです。",[11,73,74],{},"まずReoGridのデータ読み込みインターフェイス、DataSourceを作成し、ご自身のデータをそのインターフェイスを通してReoGridに渡すように実装します。",[76,77,82],"pre",{"className":78,"code":79,"language":80,"meta":81,"style":81},"language-js shiki shiki-themes github-light github-dark","private void button1_Click(object sender, EventArgs e)\n{\n    // ワークシートの行数を変更\n    worksheet.SetRows(logs.Count);\n\n    // データソースを遅延読み込みモードで設定\n    worksheet.AddDataSource(\n        new RangePosition(0, 0, logs.Count, COLUMN_COUNT),\n        new FlightLogDataSource(logs),\n        // 遅延ロードを有効化\n        DataSourceLoadMode.LazyLoading);\n}\n","js","",[83,84,85,105,111,118,130,137,143,154,184,195,201,207],"code",{"__ignoreMap":81},[86,87,90,94,98,102],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"sVt8B","private ",[86,95,97],{"class":96},"szBVR","void",[86,99,101],{"class":100},"sScJk"," button1_Click",[86,103,104],{"class":92},"(object sender, EventArgs e)\n",[86,106,108],{"class":88,"line":107},2,[86,109,110],{"class":92},"{\n",[86,112,114],{"class":88,"line":113},3,[86,115,117],{"class":116},"sJ8bj","    // ワークシートの行数を変更\n",[86,119,121,124,127],{"class":88,"line":120},4,[86,122,123],{"class":92},"    worksheet.",[86,125,126],{"class":100},"SetRows",[86,128,129],{"class":92},"(logs.Count);\n",[86,131,133],{"class":88,"line":132},5,[86,134,136],{"emptyLinePlaceholder":135},true,"\n",[86,138,140],{"class":88,"line":139},6,[86,141,142],{"class":116},"    // データソースを遅延読み込みモードで設定\n",[86,144,146,148,151],{"class":88,"line":145},7,[86,147,123],{"class":92},[86,149,150],{"class":100},"AddDataSource",[86,152,153],{"class":92},"(\n",[86,155,157,160,163,166,170,173,175,178,181],{"class":88,"line":156},8,[86,158,159],{"class":96},"        new",[86,161,162],{"class":100}," RangePosition",[86,164,165],{"class":92},"(",[86,167,169],{"class":168},"sj4cs","0",[86,171,172],{"class":92},", ",[86,174,169],{"class":168},[86,176,177],{"class":92},", logs.Count, ",[86,179,180],{"class":168},"COLUMN_COUNT",[86,182,183],{"class":92},"),\n",[86,185,187,189,192],{"class":88,"line":186},9,[86,188,159],{"class":96},[86,190,191],{"class":100}," FlightLogDataSource",[86,193,194],{"class":92},"(logs),\n",[86,196,198],{"class":88,"line":197},10,[86,199,200],{"class":116},"        // 遅延ロードを有効化\n",[86,202,204],{"class":88,"line":203},11,[86,205,206],{"class":92},"        DataSourceLoadMode.LazyLoading);\n",[86,208,210],{"class":88,"line":209},12,[86,211,212],{"class":92},"}\n",[11,214,215,218,224],{},[86,216],{"style":217},"background-repeat: no-repeat; box-sizing: inherit; padding: 0px; margin: 0px; border: 0px solid;",[86,219,223],{"style":220,"className":221},"background-repeat: no-repeat; box-sizing: inherit; padding: 0px; margin: 0px; border: 0px solid; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);",[222],"visually-hidden","opy/"," このように、データソースの読み込み方式を遅延ロード（DataSourceLoadMode.LazyLoading）に指定するだけで完成です。",[27,226,228],{"id":227},"罫線やセル書式セルスタイルにも対応可能",[31,229,230],{},"罫線やセル書式、セルスタイルにも対応可能",[11,232,233,234,236],{},"データだけではなく、DataSourceのインターフェイスの中では、罫線やセル書式などの適用も実装できます。これにより、ワークシートの初期化がさらに高速化でき、よりスムーズなアプリの体験を実装できます。",[48,235],{},"以下のサンプルコードでは、すべてのセルの罫線を設定する例です。",[76,238,240],{"className":78,"code":239,"language":80,"meta":81,"style":81},"public class FlightLogDataSource : IDataSource\u003CFlightlogDataRecord>\n{    \n    ...\n\n    // GetRecord の部分を以下のように変更\n    public FlightlogDataRecord GetRecord(int row)\n    {\n        FlightlogDataRecord record = initedRecords[row];\n\n        if (record == null)\n        {\n          record = new FlightlogDataRecord(this, row, Logs[row]);\n          initedRecords[row] = record;\n\n          // 行が初めてアクセスされたときに、行の罫線を設定\n          Worksheet.SetRangeBorders(row, 0, 1, ColumnCount, BorderPositions.Outside, RangeBorderStyle.BlackSolid);\n          Worksheet.SetRangeBorders(row, 0, 1, ColumnCount, BorderPositions.InsideVertical, RangeBorderStyle.GrayDotted);\n        }\n\n        // 行データを返却\n        return record;\n    }\n\n    ...\n}\n",[83,241,242,267,272,277,281,286,309,314,325,329,345,350,371,382,387,393,415,433,439,444,450,458,464,469,474],{"__ignoreMap":81},[86,243,244,247,250,252,255,258,261,264],{"class":88,"line":89},[86,245,246],{"class":92},"public ",[86,248,249],{"class":96},"class",[86,251,191],{"class":100},[86,253,254],{"class":92}," : ",[86,256,257],{"class":100},"IDataSource",[86,259,260],{"class":92},"\u003C",[86,262,263],{"class":100},"FlightlogDataRecord",[86,265,266],{"class":92},">\n",[86,268,269],{"class":88,"line":107},[86,270,271],{"class":92},"{    \n",[86,273,274],{"class":88,"line":113},[86,275,276],{"class":96},"    ...\n",[86,278,279],{"class":88,"line":120},[86,280,136],{"emptyLinePlaceholder":135},[86,282,283],{"class":88,"line":132},[86,284,285],{"class":116},"    // GetRecord の部分を以下のように変更\n",[86,287,288,291,294,297,299,303,306],{"class":88,"line":139},[86,289,290],{"class":96},"    public",[86,292,293],{"class":92}," FlightlogDataRecord ",[86,295,296],{"class":100},"GetRecord",[86,298,165],{"class":92},[86,300,302],{"class":301},"s4XuR","int",[86,304,305],{"class":301}," row",[86,307,308],{"class":92},")\n",[86,310,311],{"class":88,"line":145},[86,312,313],{"class":92},"    {\n",[86,315,316,319,322],{"class":88,"line":156},[86,317,318],{"class":92},"        FlightlogDataRecord record ",[86,320,321],{"class":96},"=",[86,323,324],{"class":92}," initedRecords[row];\n",[86,326,327],{"class":88,"line":186},[86,328,136],{"emptyLinePlaceholder":135},[86,330,331,334,337,340,343],{"class":88,"line":197},[86,332,333],{"class":96},"        if",[86,335,336],{"class":92}," (record ",[86,338,339],{"class":96},"==",[86,341,342],{"class":168}," null",[86,344,308],{"class":92},[86,346,347],{"class":88,"line":203},[86,348,349],{"class":92},"        {\n",[86,351,352,355,357,360,363,365,368],{"class":88,"line":209},[86,353,354],{"class":92},"          record ",[86,356,321],{"class":96},[86,358,359],{"class":96}," new",[86,361,362],{"class":100}," FlightlogDataRecord",[86,364,165],{"class":92},[86,366,367],{"class":168},"this",[86,369,370],{"class":92},", row, Logs[row]);\n",[86,372,374,377,379],{"class":88,"line":373},13,[86,375,376],{"class":92},"          initedRecords[row] ",[86,378,321],{"class":96},[86,380,381],{"class":92}," record;\n",[86,383,385],{"class":88,"line":384},14,[86,386,136],{"emptyLinePlaceholder":135},[86,388,390],{"class":88,"line":389},15,[86,391,392],{"class":116},"          // 行が初めてアクセスされたときに、行の罫線を設定\n",[86,394,396,399,402,405,407,409,412],{"class":88,"line":395},16,[86,397,398],{"class":92},"          Worksheet.",[86,400,401],{"class":100},"SetRangeBorders",[86,403,404],{"class":92},"(row, ",[86,406,169],{"class":168},[86,408,172],{"class":92},[86,410,411],{"class":168},"1",[86,413,414],{"class":92},", ColumnCount, BorderPositions.Outside, RangeBorderStyle.BlackSolid);\n",[86,416,418,420,422,424,426,428,430],{"class":88,"line":417},17,[86,419,398],{"class":92},[86,421,401],{"class":100},[86,423,404],{"class":92},[86,425,169],{"class":168},[86,427,172],{"class":92},[86,429,411],{"class":168},[86,431,432],{"class":92},", ColumnCount, BorderPositions.InsideVertical, RangeBorderStyle.GrayDotted);\n",[86,434,436],{"class":88,"line":435},18,[86,437,438],{"class":92},"        }\n",[86,440,442],{"class":88,"line":441},19,[86,443,136],{"emptyLinePlaceholder":135},[86,445,447],{"class":88,"line":446},20,[86,448,449],{"class":116},"        // 行データを返却\n",[86,451,453,456],{"class":88,"line":452},21,[86,454,455],{"class":96},"        return",[86,457,381],{"class":92},[86,459,461],{"class":88,"line":460},22,[86,462,463],{"class":92},"    }\n",[86,465,467],{"class":88,"line":466},23,[86,468,136],{"emptyLinePlaceholder":135},[86,470,472],{"class":88,"line":471},24,[86,473,276],{"class":96},[86,475,477],{"class":88,"line":476},25,[86,478,212],{"class":92},[11,480,481,483],{},[86,482],{"style":217},[86,484,486],{"style":220,"className":485},[222],"copy",[27,488,490],{"id":489},"より詳しく",[31,491,489],{},[11,493,494,495,500],{},"ReoGridの公式サイトでは、より詳しいドキュメントとサンプルコードを掲載しています。詳しくはド",[21,496,499],{"href":497,"rel":498},"https://reogrid.net/jp/document/how-to/fast-load-large-data-with-lazy-load-mode/",[25],"キュメントページ","をご参照ください。",[27,502,504],{"id":503},"reogrid-バージョン4-について",[31,505,506],{},"ReoGrid バージョン4 について",[11,508,509,510,512],{},"ReoGridはこれまで、国内・海外の企業の様々なシステムで採用されています。特に金融システムや製造業、公共インフラシステムといった、日常的に大量のデータを取り扱うシステムへの導入実績が数多くあります。",[48,511],{},"ReoGrid バージョン4は、これら分野への導入・運用で得られた経験に加えてユーザー様からの声を反映した、性能・機能ともに大幅に進化した最新バージョンです。",[11,514,515,516,518],{},"ReoGrid バージョン4のリリース以降、すでに複数の企業に導入していただき、高速化、安定性、使いやすさの面で高い評価をいただいています。",[48,517],{},"今後もさらなる高性能化を目指し継続的な改善を続けるとともに、信頼性の高いサポートを提供してまいります。",[11,520,521],{},"▼ReoGridの詳細・ご購入",[11,523,524],{},[21,525,526],{"href":526,"rel":527},"https://reogrid.net/jp",[25],[529,530,531],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":81,"searchDepth":107,"depth":107,"links":533},[534,535,536,537,538],{"id":29,"depth":107,"text":29},{"id":66,"depth":107,"text":66},{"id":227,"depth":107,"text":230},{"id":489,"depth":107,"text":489},{"id":503,"depth":107,"text":506},"2025-10-21","ReoGridの「遅延ロード（Lazy Loading）」機能を使えば、数十万行規模の大規模データも超高速に表示できます。その仕組みと実装方法を解説します。","md",{},"/blog/reogrid-large-data-lazy-loading",{"title":5,"description":545},".NET向けスプレッドシートコンポーネント ReoGrid の遅延ロード機能により、数十万行のデータをミリ秒単位で表示できます。大規模データの高速表示を実現する仕組みを解説。","blog/reogrid-large-data-lazy-loading",[548,549,550,551,552,553,554],"reogrid","spreadsheet",".net","excel","performance","lazy-loading","c#","/images/articles/a5ed9da817f9b19571529b7e62d7248c.webp","gzB02dGpKRg26S5ST5idMkSNJa8He88V78aNllteXQU",1775790822678]