{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/javascriptdecsvwodlsurufang-fa/",
    "result": {"data":{"ghostPost":{"id":"Ghost__Post__610538053986b000013a4a74","title":"JavaScriptでCSVをDLする方法","slug":"javascriptdecsvwodlsurufang-fa","featured":false,"feature_image":null,"excerpt":"こんにちは、いわむらです\n\n今回はJavaScriptでCSVファイルを出力する方法をこの間覚えたのでご紹介しようと思います\n\nCSVファイルはサーバーサイドの方で作成した情報をjsonで返ってくる想定で作成します\n\nとりあえず先に完成形はこんな感じになります(※ IEやFirefoxでは別途対応が必要)\n\nfunction downloadCSV(data) {\n  const data = data.csv;\n  const bom  = new Uint8Array([0xef, 0xbb, 0xbf]);\n  const blob = new Blob([bom, data], { type: \"text/csv\" });\n  const url  = \n    (window.URL || window.webkitURL).createObjectURL(blob);\n  const downloadElement    = document.createElement(\"a\"); \n  downloadElement.href     = url;\n  downloadE","custom_excerpt":null,"visibility":"public","created_at_pretty":"31 July, 2021","published_at_pretty":"06 July, 2021","updated_at_pretty":"31 July, 2021","created_at":"2021-07-31T20:46:13.000+09:00","published_at":"2021-07-06T20:58:00.000+09:00","updated_at":"2021-07-31T20:58:58.000+09:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"name":"Jun Iwamura","slug":"jun","bio":null,"profile_image":null,"twitter":null,"facebook":null,"website":null}],"primary_author":{"name":"Jun Iwamura","slug":"jun","bio":null,"profile_image":null,"twitter":null,"facebook":null,"website":null},"primary_tag":null,"tags":[],"plaintext":"こんにちは、いわむらです\n\n今回はJavaScriptでCSVファイルを出力する方法をこの間覚えたのでご紹介しようと思います\n\nCSVファイルはサーバーサイドの方で作成した情報をjsonで返ってくる想定で作成します\n\nとりあえず先に完成形はこんな感じになります(※ IEやFirefoxでは別途対応が必要)\n\nfunction downloadCSV(data) {\n  const data = data.csv;\n  const bom  = new Uint8Array([0xef, 0xbb, 0xbf]);\n  const blob = new Blob([bom, data], { type: \"text/csv\" });\n  const url  = \n    (window.URL || window.webkitURL).createObjectURL(blob);\n  const downloadElement    = document.createElement(\"a\"); \n  downloadElement.href     = url;\n  downloadElement.download = 'sample.csv';\n  downloadElement.click();\n  (window.URL || window.webkitURL).revokeObjectURL(url);\n}\n\n自分の作成したコードは、受け取ったdataオブジェクトの中にcsvプロパティがあり(中身はCSVの元になる情報)それを sample.csv \nというファイルとして出力する処理になっています\n\n実装前の自分は知らない処理ばっかりだったので1行ずつ処理を追って説明してみようと思います\n\nconst data = data.csv\n\nこれは 引数に渡されたdataオブジェクトからcsvの内容を取り出しています\n\nconst bom = new Uint8Array([0xef, 0xbb, 0xbf])\n\nnew Uint8Array がなんぞやって感じだったのでMDN\n[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array]\nで調べました\n\n> Uint8Arrayは型付き配列であり、 8 ビット符号なし整数値の配列を表します。中身は0\nで初期化されます。生成されると、配列の中の要素はオブジェクトのメソッドを使用するか、配列の標準的な添字の構文を使用するか\n(すなわち、ブラケット構文を使用するか) して参照することができます。\nやっているのはUTF-8のファイルだということを示すためにUint8Arrayを使ってバイナリデータにしてます\n\nconst = new Blob([bom, data], { type: \"text/csv\" })\n\nこれは受け取った引数を元に新しいBlob (バイナリ・ラージ・オブジェクト)\nを作成します。第1引数に元になる情報、第2引数にオプションとしてMINEタイプを渡しています。\n\nconst url = (window.URL || window.webKitURL).createObjectURL(blob)\n\nブラウザのメモリ上にあるblobを参照するためのオブジェクトURL作成をしています\n\nconst downloadElement = document.createElement(\"a\")\n\nダウンロードを実行するためにaタグを作成しています\n\ndownloadElement.href = url\n\nダウンロード先のURLは先程作成したオブジェクトURLをセットしています\n\ndownloadElement.download = 'sample.csv'\n\naタグのdownload属性に値をセットするとセットした値のファイル名でダウンロードされるので指定のファイル名をセットしています\n\ndownloadElement.click()\n\n擬似的にクリックしたことにしてダウンロードを実行させています\n\n(window.URL || window.webkitURL).revokeObjectURL(url)\n\n最後にダウンロードが完了したらオブジェクトURL生成時にブラウザのメモリを利用しているのでメモリを開放します\n\nといった感じの流れで終了です\n\n今回1行ずつ処理を見てみてとても勉強になりました\n\n次回は今回の処理をTypeScriptで実装してみようかなと思っています\n\n最後まで読んでいただきありがとうございました","html":"<p>こんにちは、いわむらです</p><p>今回はJavaScriptでCSVファイルを出力する方法をこの間覚えたのでご紹介しようと思います</p><p>CSVファイルはサーバーサイドの方で作成した情報をjsonで返ってくる想定で作成します</p><p>とりあえず先に完成形はこんな感じになります(※ IEやFirefoxでは別途対応が必要)</p><pre><code>function downloadCSV(data) {\n  const data = data.csv;\n  const bom  = new Uint8Array([0xef, 0xbb, 0xbf]);\n  const blob = new Blob([bom, data], { type: \"text/csv\" });\n  const url  = \n    (window.URL || window.webkitURL).createObjectURL(blob);\n  const downloadElement    = document.createElement(\"a\"); \n  downloadElement.href     = url;\n  downloadElement.download = 'sample.csv';\n  downloadElement.click();\n  (window.URL || window.webkitURL).revokeObjectURL(url);\n}</code></pre><p>自分の作成したコードは、受け取ったdataオブジェクトの中にcsvプロパティがあり(中身はCSVの元になる情報)それを <code>sample.csv</code> というファイルとして出力する処理になっています</p><p>実装前の自分は知らない処理ばっかりだったので1行ずつ処理を追って説明してみようと思います</p><pre><code>const data = data.csv</code></pre><p>これは 引数に渡されたdataオブジェクトからcsvの内容を取り出しています</p><pre><code>const bom = new Uint8Array([0xef, 0xbb, 0xbf])</code></pre><p>new Uint8Array がなんぞやって感じだったので<a href=\"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array\" rel=\"noopener\">MDN</a>で調べました</p><blockquote><code><strong>Uint8Array</strong></code>は型付き配列であり、 8 ビット符号なし整数値の配列を表します。中身は<code>0</code>で初期化されます。生成されると、配列の中の要素はオブジェクトのメソッドを使用するか、配列の標準的な添字の構文を使用するか (すなわち、ブラケット構文を使用するか) して参照することができます。</blockquote><p>やっているのはUTF-8のファイルだということを示すためにUint8Arrayを使ってバイナリデータにしてます</p><pre><code>const = new Blob([bom, data], { type: \"text/csv\" })</code></pre><p>これは受け取った引数を元に新しいBlob (バイナリ・ラージ・オブジェクト) を作成します。第1引数に元になる情報、第2引数にオプションとしてMINEタイプを渡しています。</p><pre><code>const url = (window.URL || window.webKitURL).createObjectURL(blob)</code></pre><p>ブラウザのメモリ上にあるblobを参照するためのオブジェクトURL作成をしています</p><pre><code>const downloadElement = document.createElement(\"a\")</code></pre><p>ダウンロードを実行するためにaタグを作成しています</p><pre><code>downloadElement.href = url</code></pre><p>ダウンロード先のURLは先程作成したオブジェクトURLをセットしています</p><pre><code>downloadElement.download = 'sample.csv'</code></pre><p>aタグのdownload属性に値をセットするとセットした値のファイル名でダウンロードされるので指定のファイル名をセットしています</p><pre><code>downloadElement.click()</code></pre><p>擬似的にクリックしたことにしてダウンロードを実行させています</p><pre><code>(window.URL || window.webkitURL).revokeObjectURL(url)</code></pre><p>最後にダウンロードが完了したらオブジェクトURL生成時にブラウザのメモリを利用しているのでメモリを開放します</p><p>といった感じの流れで終了です</p><p>今回1行ずつ処理を見てみてとても勉強になりました</p><p>次回は今回の処理をTypeScriptで実装してみようかなと思っています</p><p>最後まで読んでいただきありがとうございました</p>","url":"https://ghost.tech.anti-pattern.co.jp/javascriptdecsvwodlsurufang-fa/","canonical_url":null,"uuid":"3641bdb4-f155-438c-89b3-16b8cdbdc595","page":null,"codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"610538053986b000013a4a74","reading_time":2}},"pageContext":{"slug":"javascriptdecsvwodlsurufang-fa"}},
    "staticQueryHashes": ["176528973","2358152166","2561578252","2731221146","4145280475"]}