SHOEISHA iD

パスワードを忘れた場合はこちら

※旧SEメンバーシップ会員の方は、同じ登録情報（メールアドレス＆パスワード）でログインいただけます

  • 新規
    会員登録
  • 新規会員登録

ニュース

記事

デブサミ・デブスト

講座

書籍

新着記事一覧を見る

連載記事

人気記事の執筆者

WINGSプロジェクト 中川幸哉

加山 恵美

渡部 拓也

野本 纏花

柳井 政和
イベント
イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

講演資料・動画まとめページ

Developers CAREER Boost 2024 講演資料まとめ

Developers X Summit 2024 講演資料まとめ

Developers Summit 2024 KANSAI 講演関連資料まとめ

Developers Summit 2024 Summer 講演資料まとめ

Developers Boost 2024 講演資料まとめ

Developers Summit 2024 講演資料まとめ

CodeZine BOOKS（コードジン・ブックス）は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
高機能JavaScriptスプレッドシート部品「SpreadJS」の活用（AD）

ExcelライクなWebアプリを実現するJavaScriptライブラリ「SpreadJS」のはじめ方と主な機能

ASP.NET MVCとSpreadJSで業務Webアプリケーションモダン化計画 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルファイル (30.1 KB)

　WebアプリケーションでExcelライクなUIを実現できる「SpreadJS 9J」のはじめ方と基本的な使い方を紹介します。SpreadJSはJavaScriptのライブラリです。本稿では、サーバーサイドの要素は登場せず、フロントサイドのみ登場します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

　前回は、ASP.NETの現状を確認し、帳票機能の開発に便利なSpreadJSライブラリを紹介しました。第2回はSpreadJSのはじめ方と基本的な使い方を紹介し、SpreadJSの概念と主な機能を学びます。

　本稿で紹介する機能は、次のリストの通りです。

  • 日本語化
  • 初期化
  • 値をシートに設定する（セル・テーブル・シート・CSV）
  • 数式の使用
  • セル型
  • 行や列の固定
  • クライアントサイドのExcelインポート・エクスポート
  • テーブルスライサー

対象読者

  • JavaScript 開発者
  • スプレッドシートの機能に興味がある方
  • ExcelのようなWebアプリを作成したい方

必要な環境

　SpreadJS 9Jの必要システムを参照。

　本稿では、次の環境で開発・動作確認をおこなっています。

  • Chrome
  • Visual Studio Code
  • Windows 10

SpreadJSのドキュメントは？

　SpreadJSにはどのような機能があるか、実装方法を調べるにはどのドキュメントを参照したらよいでしょうか。筆者がおすすめするSpreadJSのドキュメントをいくつか紹介します。

SpreadJS チュートリアルデモ
SpreadJS チュートリアルデモ

　このチュートリアルデモのサイトでは、SpreadJSの機能を俯瞰できます。また、それぞれの詳細ページでは、サンプルと共に機能の説明・実装方法が記載されており、スクリプトを実際に実行し、その場で結果を確認できます。

詳細ページ

詳細ページ

　このチュートリアルデモは製品にも付属しており、実際のコードを手元にて確認できます。

製品ヘルプ
製品ヘルプ

　製品ヘルプでは、機能の仕様、メソッド名・引数・オプションの値などのAPIについて知ることができます。ページの左下から検索ができます。

　これらのドキュメントは、SpreadJSのサイトよりアクセスできます。新着ニュースでは新しく公開された技術情報を通知しています。また不明な点があれば、サポートページにあるナレッジベースなどが活用できます。

次のページ
SpreadJSのはじめ方

NEXT

この記事は参考になりましたか？

  • X ポスト
  • このエントリーをはてなブックマークに追加
高機能JavaScriptスプレッドシート部品「SpreadJS」の活用連載記事一覧

もっと読む

この記事の著者

矢後 比呂加（ヤゴ ヒロカ）

　Microsoft MVP for Visual Studio and Development Technologies（https://mvp.microsoft.com/ja-jp/PublicProfile/5000246）　シグマコンサルティング株式会社にて、Microsoft Azure・ASP...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事

【AD】本記事の内容は記事掲載開始時点のものです　企画・制作　株式会社翔泳社

この記事は参考になりましたか？

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine（コードジン）
https://codezine.jp/article/detail/9672 2016/10/03 14:00
" ); }

おすすめ

アクセスランキング

  1. 1
    日本マイクロソフト、AI学習プラットフォーム「AI SKILLS NAVIGATOR日本語版」を無償提供
  2. 2
    AI搭載コードエディタ「Cursor」に新たなTabモデル「Fusion」が導入
  3. 3
    Next.js 15の新機能――ルーティングとキャッシュの制御の変更を中心に解説 NEW
  4. 4
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  5. 5
    「ジェネレータ」　～マンガでプログラミング用語解説
  1. 6
    世界のITエンジニア数は前年より6.1％増の2994.3万人。日本は4位にランクインするも前年より横ばい NEW
  2. 7
    Electronの最新版「Electron 34.0.0」正式リリース NEW
  3. 8
    Flutterでアプリをビルドしよう。AndroidとiOSそれぞれの流れを解説
  4. 9
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ
  5. 10
    『システム障害対応 実践ガイド』著者が語る、1000件の事例から学んだ障害対応のベストプラクティス

アクセスランキング

  1. 1
    日本マイクロソフト、AI学習プラットフォーム「AI SKILLS NAVIGATOR日本語版」を無償提供
  2. 2
    AI搭載コードエディタ「Cursor」に新たなTabモデル「Fusion」が導入
  3. 3
    Next.js 15の新機能――ルーティングとキャッシュの制御の変更を中心に解説 NEW
  4. 4
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  5. 5
    「ジェネレータ」　～マンガでプログラミング用語解説
  6. 6
    世界のITエンジニア数は前年より6.1％増の2994.3万人。日本は4位にランクインするも前年より横ばい NEW
  7. 7
    Electronの最新版「Electron 34.0.0」正式リリース NEW
  8. 8
    Flutterでアプリをビルドしよう。AndroidとiOSそれぞれの流れを解説
  9. 9
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ
  10. 10
    『システム障害対応 実践ガイド』著者が語る、1000件の事例から学んだ障害対応のベストプラクティス
  1. 1
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  2. 2
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  3. 3
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  4. 4
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  5. 5
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  6. 6
    Google、社内AIエージェント「Google Agentspace」発表
  7. 7
    ITエンジニア本大賞2025、ベスト10選出！ 技術書部門とビジネス書部門の大賞はどうなる!?
  8. 8
    日本マイクロソフト、AI学習プラットフォーム「AI SKILLS NAVIGATOR日本語版」を無償提供
  9. 9
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  10. 10
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

メールバックナンバー

アクセスランキング

  1. 1
    日本マイクロソフト、AI学習プラットフォーム「AI SKILLS NAVIGATOR日本語版」を無償提供
  2. 2
    AI搭載コードエディタ「Cursor」に新たなTabモデル「Fusion」が導入
  3. 3
    Next.js 15の新機能――ルーティングとキャッシュの制御の変更を中心に解説 NEW
  4. 4
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  5. 5
    「ジェネレータ」　～マンガでプログラミング用語解説
  1. 6
    世界のITエンジニア数は前年より6.1％増の2994.3万人。日本は4位にランクインするも前年より横ばい NEW
  2. 7
    Electronの最新版「Electron 34.0.0」正式リリース NEW
  3. 8
    Flutterでアプリをビルドしよう。AndroidとiOSそれぞれの流れを解説
  4. 9
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ
  5. 10
    『システム障害対応 実践ガイド』著者が語る、1000件の事例から学んだ障害対応のベストプラクティス

アクセスランキング

  1. 1
    日本マイクロソフト、AI学習プラットフォーム「AI SKILLS NAVIGATOR日本語版」を無償提供
  2. 2
    AI搭載コードエディタ「Cursor」に新たなTabモデル「Fusion」が導入
  3. 3
    Next.js 15の新機能――ルーティングとキャッシュの制御の変更を中心に解説 NEW
  4. 4
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  5. 5
    「ジェネレータ」　～マンガでプログラミング用語解説
  6. 6
    世界のITエンジニア数は前年より6.1％増の2994.3万人。日本は4位にランクインするも前年より横ばい NEW
  7. 7
    Electronの最新版「Electron 34.0.0」正式リリース NEW
  8. 8
    Flutterでアプリをビルドしよう。AndroidとiOSそれぞれの流れを解説
  9. 9
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ
  10. 10
    『システム障害対応 実践ガイド』著者が語る、1000件の事例から学んだ障害対応のベストプラクティス
  1. 1
    アジャイル開発の推進において、必ずしも"すごい人"は必要ない──現場のエンジニアがDevOps推進で実現する組織改革
  2. 2
    ガントチャートをWebアプリに組み込める「ガントシート」でプロジェクト管理機能を作成してみよう
  3. 3
    デスクトップアプリ開発に必要な「Rust」の文法を理解しよう
  4. 4
    1/10まで全文無料公開、人気の入門書シリーズ『いきなりプログラミング Androidアプリ開発』
  5. 5
    "けしからん"精神が切り拓く未来──IPA登氏が語る、技術大国・日本が目指す復活戦略
  6. 6
    Google、社内AIエージェント「Google Agentspace」発表
  7. 7
    ITエンジニア本大賞2025、ベスト10選出！ 技術書部門とビジネス書部門の大賞はどうなる!?
  8. 8
    日本マイクロソフト、AI学習プラットフォーム「AI SKILLS NAVIGATOR日本語版」を無償提供
  9. 9
    JavaScriptのWebフレームワーク、「Astro 5.1」リリース
  10. 10
    実はITエンジニアの設計力が求められるkintone、その仕組みとポイントを事例に学ぶ