[{"data":1,"prerenderedAt":711},["ShallowReactive",2],{"blog-ja-reogrid-web-1-2-1-release":3},{"id":4,"title":5,"author":6,"body":7,"date":695,"description":696,"extension":697,"meta":698,"navigation":428,"path":699,"seo":700,"stem":702,"tags":703,"thumbnail":709,"__hash__":710},"blog/blog/reogrid-web-1-2-1-release.md","ReoGrid Web 1.2.1 リリース — 数式・編集機能を大幅に強化",null,{"type":8,"value":9,"toc":683},"minimark",[10,23,28,35,73,76,79,83,86,90,101,284,295,299,322,326,329,366,369,373,391,583,586,597,601,618,620,623,626,644,647,679],[11,12,13,14,18,19,22],"p",{},"UNVELL株式会社は、Webアプリ向けExcelライクスプレッドシートライブラリ ",[15,16,17],"strong",{},"ReoGrid Web"," の最新版 ",[15,20,21],{},"1.2.1"," をリリースしました。3月の正式リリース以降に積み重ねてきた 1.2.x シリーズの機能強化により、数式まわりと編集UXが「本当にExcelのように感じられる」水準へと進化しています。公開APIに破壊的変更はありません。",[24,25,27],"h2",{"id":26},"_121-のハイライト","1.2.1 のハイライト",[11,29,30,31,34],{},"1.2.1 では、数式編集時にグリッド上へ表示される ",[15,32,33],{},"参照範囲ハイライトのドラッグ操作"," を強化しました。",[36,37,38,45,51,59],"ul",{},[39,40,41,44],"li",{},[15,42,43],{},"破線のドラッグで範囲を移動",": 参照矩形の破線部分をドラッグすると、範囲全体を平行移動できます。",[39,46,47,50],{},[15,48,49],{},"コーナーグリップのドラッグでサイズ変更",": 矩形の四隅のグリップをドラッグすると範囲をリサイズできます。セルの中心が境界となり、ポインタがセルの中点を超えた瞬間に範囲への出入りが切り替わります（Excelおよび弊社.NET版と同じ挙動）。",[39,52,53,54,58],{},"数式テキスト中に同じ参照が複数回現れる場合も、すべての出現箇所が連動して書き換えられ、各トークンの絶対参照（",[55,56,57],"code",{},"$","）フラグも保持されます。",[39,60,61,62,65,66,65,69,72],{},"ハイライトの四隅にはリサイズ用の小さな色付き四角を描画し、ホバー時には ",[55,63,64],{},"move"," / ",[55,67,68],{},"nwse-resize",[55,70,71],{},"nesw-resize"," カーソルを表示するため、操作箇所がひと目で分かります。",[11,74,75],{},"これにより、マウス操作だけで数式の参照範囲を直感的に調整できるようになりました。",[77,78],"hr",{},[24,80,82],{"id":81},"_12x-シリーズで強化した主な機能","1.2.x シリーズで強化した主な機能",[11,84,85],{},"1.2.1 に至る 1.2.x シリーズでは、以下の大型機能を追加しています。",[87,88,89],"h3",{"id":89},"数式ライブラリを109関数へ拡張",[11,91,92,93,96,97,100],{},"検索・参照、複数条件集計、日付、数学・三角、統計、文字列、セル参照など幅広いカテゴリにわたり、",[15,94,95],{},"Excel互換の組み込み関数を109種類"," サポートします。インポートした ",[55,98,99],{},".xlsx"," ファイル内の数式もそのまま動作します。",[102,103,104,117],"table",{},[105,106,107],"thead",{},[108,109,110,114],"tr",{},[111,112,113],"th",{},"カテゴリ",[111,115,116],{},"関数の例",[118,119,120,147,166,200,234,262],"tbody",{},[108,121,122,126],{},[123,124,125],"td",{},"検索／参照",[123,127,128,131,132,131,135,131,138,131,141,131,144],{},[55,129,130],{},"VLOOKUP",", ",[55,133,134],{},"HLOOKUP",[55,136,137],{},"INDEX",[55,139,140],{},"MATCH",[55,142,143],{},"XLOOKUP",[55,145,146],{},"XMATCH",[108,148,149,152],{},[123,150,151],{},"複数条件集計",[123,153,154,131,157,131,160,131,163],{},[55,155,156],{},"SUMIFS",[55,158,159],{},"COUNTIFS",[55,161,162],{},"AVERAGEIFS",[55,164,165],{},"SUMPRODUCT",[108,167,168,171],{},[123,169,170],{},"日付",[123,172,173,131,176,131,179,131,182,131,185,131,188,131,191,131,194,131,197],{},[55,174,175],{},"TODAY",[55,177,178],{},"NOW",[55,180,181],{},"YEAR",[55,183,184],{},"MONTH",[55,186,187],{},"DAY",[55,189,190],{},"WEEKDAY",[55,192,193],{},"EDATE",[55,195,196],{},"EOMONTH",[55,198,199],{},"DATEDIF",[108,201,202,205],{},[123,203,204],{},"数学／三角",[123,206,207,131,210,131,213,131,216,131,219,131,222,131,225,131,228,131,231],{},[55,208,209],{},"EXP",[55,211,212],{},"LN",[55,214,215],{},"LOG",[55,217,218],{},"SIN",[55,220,221],{},"COS",[55,223,224],{},"TAN",[55,226,227],{},"ATAN2",[55,229,230],{},"RAND",[55,232,233],{},"RANDBETWEEN",[108,235,236,239],{},[123,237,238],{},"統計",[123,240,241,131,244,131,247,131,250,131,253,131,256,131,259],{},[55,242,243],{},"MEDIAN",[55,245,246],{},"LARGE",[55,248,249],{},"SMALL",[55,251,252],{},"RANK",[55,254,255],{},"CEILING",[55,257,258],{},"FLOOR",[55,260,261],{},"MROUND",[108,263,264,267],{},[123,265,266],{},"文字列",[123,268,269,131,272,131,275,131,278,131,281],{},[55,270,271],{},"SEARCH",[55,273,274],{},"EXACT",[55,276,277],{},"PROPER",[55,279,280],{},"CHAR",[55,282,283],{},"CODE",[11,285,286,287,290,291,294],{},"引数の順序やハマりやすい挙動もExcelに準拠しています。たとえばExcelの ",[55,288,289],{},"ATAN2(x, y)"," はJavaScriptの ",[55,292,293],{},"Math.atan2(y, x)"," と引数順が逆ですが、本ライブラリはExcelに従います。",[87,296,298],{"id":297},"excelライクな数式参照編集","Excelライクな数式参照編集",[11,300,301,302,305,306,309,310,313,314,317,318,321],{},"セルに ",[55,303,304],{},"="," を入力して数式を編集すると、入力したすべての参照（",[55,307,308],{},"A1","、",[55,311,312],{},"B2:D10"," など）が共有の8色パレットで ",[15,315,316],{},"インライン色分け"," され、グリッド側にも同色の ",[15,319,320],{},"破線の矩形"," が描かれます。別のセルをクリックするとそのアドレスがキャレット位置に挿入され、ドラッグで範囲に拡張できます。参照が結合セルにかかる場合、ハイライトは結合範囲全体を囲むように拡張されます。",[87,323,325],{"id":324},"オートフィルフィルハンドル","オートフィル（フィルハンドル）",[11,327,328],{},"選択範囲の右下に表示される小さな四角をドラッグして、値を上下左右に拡張できます。",[36,330,331,337,351,357],{},[39,332,333,336],{},[15,334,335],{},"単一セル",": 値をそのまま敷き詰めます。",[39,338,339,342,343,346,347,350],{},[15,340,341],{},"2つ以上の数値セル",": 等差数列として外挿します（",[55,344,345],{},"1, 2"," → ",[55,348,349],{},"3, 4, 5","）。",[39,352,353,356],{},[15,354,355],{},"日付形式のセル",": 1ステップごとに1日加算します。",[39,358,359,362,363,365],{},[15,360,361],{},"数式セル",": Excelと同じく相対参照をシフトし、絶対参照 ",[55,364,57],{}," は保持します。",[11,367,368],{},"スタイル・表示形式・セル種別も新しい範囲に伝播し、undo/redoにも完全対応しています。",[87,370,372],{"id":371},"reactvue向けの慣用的なイベントprops","React／Vue向けの慣用的なイベントProps",[11,374,375,376,379,380,379,383,386,387,390],{},"ワークシートのイベントを、Reactでは Props、Vueでは emit として直接受け取れるようになりました。",[55,377,378],{},"onSelectionChange","・",[55,381,382],{},"onCellValueChange",[55,384,385],{},"onScrollChange"," などを宣言的に記述でき、",[55,388,389],{},"worksheet.on*()"," を命令的に呼ぶ必要がありません。",[392,393,398],"pre",{"className":394,"code":395,"language":396,"meta":397,"style":397},"language-tsx shiki shiki-themes github-light github-dark","import { Reogrid } from '@reogrid/pro/react';\n\n\u003CReogrid\n  onReady={({ worksheet }) => worksheet.cell('A1').setValue('Hello')}\n  onSelectionChange={(range) => console.log('selected', range)}\n  onCellValueChange={({ row, column, newValue }) => save(row, column, newValue)}\n  style={{ width: '100%', height: 500 }}\n/>\n","tsx","",[55,399,400,423,430,440,488,521,554,577],{"__ignoreMap":397},[401,402,405,409,413,416,420],"span",{"class":403,"line":404},"line",1,[401,406,408],{"class":407},"szBVR","import",[401,410,412],{"class":411},"sVt8B"," { Reogrid } ",[401,414,415],{"class":407},"from",[401,417,419],{"class":418},"sZZnC"," '@reogrid/pro/react'",[401,421,422],{"class":411},";\n",[401,424,426],{"class":403,"line":425},2,[401,427,429],{"emptyLinePlaceholder":428},true,"\n",[401,431,433,436],{"class":403,"line":432},3,[401,434,435],{"class":411},"\u003C",[401,437,439],{"class":438},"sj4cs","Reogrid\n",[401,441,443,447,449,452,456,459,462,465,468,471,474,477,480,482,485],{"class":403,"line":442},4,[401,444,446],{"class":445},"sScJk","  onReady",[401,448,304],{"class":407},[401,450,451],{"class":411},"{({ ",[401,453,455],{"class":454},"s4XuR","worksheet",[401,457,458],{"class":411}," }) ",[401,460,461],{"class":407},"=>",[401,463,464],{"class":411}," worksheet.",[401,466,467],{"class":445},"cell",[401,469,470],{"class":411},"(",[401,472,473],{"class":418},"'A1'",[401,475,476],{"class":411},").",[401,478,479],{"class":445},"setValue",[401,481,470],{"class":411},[401,483,484],{"class":418},"'Hello'",[401,486,487],{"class":411},")}\n",[401,489,491,494,496,499,502,505,507,510,513,515,518],{"class":403,"line":490},5,[401,492,493],{"class":445},"  onSelectionChange",[401,495,304],{"class":407},[401,497,498],{"class":411},"{(",[401,500,501],{"class":454},"range",[401,503,504],{"class":411},") ",[401,506,461],{"class":407},[401,508,509],{"class":411}," console.",[401,511,512],{"class":445},"log",[401,514,470],{"class":411},[401,516,517],{"class":418},"'selected'",[401,519,520],{"class":411},", range)}\n",[401,522,524,527,529,531,534,536,539,541,544,546,548,551],{"class":403,"line":523},6,[401,525,526],{"class":445},"  onCellValueChange",[401,528,304],{"class":407},[401,530,451],{"class":411},[401,532,533],{"class":454},"row",[401,535,131],{"class":411},[401,537,538],{"class":454},"column",[401,540,131],{"class":411},[401,542,543],{"class":454},"newValue",[401,545,458],{"class":411},[401,547,461],{"class":407},[401,549,550],{"class":445}," save",[401,552,553],{"class":411},"(row, column, newValue)}\n",[401,555,557,560,562,565,568,571,574],{"class":403,"line":556},7,[401,558,559],{"class":445},"  style",[401,561,304],{"class":407},[401,563,564],{"class":411},"{{ width: ",[401,566,567],{"class":418},"'100%'",[401,569,570],{"class":411},", height: ",[401,572,573],{"class":438},"500",[401,575,576],{"class":411}," }}\n",[401,578,580],{"class":403,"line":579},8,[401,581,582],{"class":411},"/>\n",[87,584,585],{"id":585},"条件付き書式の辺ごとの罫線オーバーライド",[11,587,588,589,592,593,596],{},"条件付き書式のルールに ",[55,590,591],{},"border"," ペイロードを持たせ、ルールに合致したセルの罫線を辺単位（右／上／下／左）で上書きできるようになりました。xlsx の ",[55,594,595],{},"\u003Cdxf>\u003Cborder>"," 経由でラウンドトリップするため、Excelでロード→保存しても書式が維持されます。",[87,598,600],{"id":599},"描画エンジンの高速化canvas呼び出しを約70削減","描画エンジンの高速化（Canvas呼び出しを約70%削減）",[11,602,603,604,379,607,379,610,613,614,617],{},"Canvas描画パスに ",[55,605,606],{},"ctx.font",[55,608,609],{},"ctx.fillStyle",[55,611,612],{},"measureText","、および折り返し／複数行テキストレイアウトのフレーム単位キャッシュを追加し、テキストの多いシートでスクロール時のCanvas API呼び出しを ",[15,615,616],{},"1フレームあたり約70%以上削減"," しました。密なシートでもスクロール時のフレームレートが安定します。",[77,619],{},[24,621,622],{"id":622},"使い始める",[11,624,625],{},"Lite版はライセンスキー不要で、npmからすぐにお試しいただけます。",[392,627,631],{"className":628,"code":629,"language":630,"meta":397,"style":397},"language-bash shiki shiki-themes github-light github-dark","npm install @reogrid/lite\n","bash",[55,632,633],{"__ignoreMap":397},[401,634,635,638,641],{"class":403,"line":404},[401,636,637],{"class":445},"npm",[401,639,640],{"class":418}," install",[401,642,643],{"class":418}," @reogrid/lite\n",[11,645,646],{},"Pro版では109関数の数式ライブラリ、xlsxエクスポート、フルセットのセル種別などが利用可能になります。",[36,648,649,658,665,672],{},[39,650,651],{},[652,653,657],"a",{"href":654,"rel":655},"https://web.reogrid.net/jp",[656],"nofollow","製品サイト（日本語）",[39,659,660],{},[652,661,664],{"href":662,"rel":663},"https://web.reogrid.net/jp/demos",[656],"ライブデモギャラリー",[39,666,667],{},[652,668,671],{"href":669,"rel":670},"https://reogrid.net/jp/info-require",[656],"資料請求・お問い合わせ",[39,673,674],{},[652,675,678],{"href":676,"rel":677},"https://www.npmjs.com/package/@reogrid/lite",[656],"npmパッケージ (@reogrid/lite)",[680,681,682],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"title":397,"searchDepth":425,"depth":425,"links":684},[685,686,694],{"id":26,"depth":425,"text":27},{"id":81,"depth":425,"text":82,"children":687},[688,689,690,691,692,693],{"id":89,"depth":432,"text":89},{"id":297,"depth":432,"text":298},{"id":324,"depth":432,"text":325},{"id":371,"depth":432,"text":372},{"id":585,"depth":432,"text":585},{"id":599,"depth":432,"text":600},{"id":622,"depth":425,"text":622},"2026-05-15","ReoGrid Web 1.2.1 をリリースしました。109種類の組み込み数式、Excelライクな色分け数式参照編集、オートフィル、ドラッグによる参照範囲の移動・サイズ変更、React/Vue向けイベントProps、描画エンジンの高速化など、編集体験を大幅に強化しています。","md",{},"/blog/reogrid-web-1-2-1-release",{"title":5,"description":701},"ReoGrid Web 1.2.x で編集体験を大幅強化。109種類の組み込み数式、色分け数式参照編集、ドラッグでの参照移動・サイズ変更、オートフィル、React/Vueイベントprops、Canvas描画の約70%高速化。API互換性は維持。","blog/reogrid-web-1-2-1-release",[704,705,706,707,708],"reogrid","reogrid-web","spreadsheet","release","javascript","/images/articles/reogrid-web-release.png","STLpRaBap2lNOoiyKh8sF_vbdyPAVTX7laQIZEVEqEQ",1780378954651]