みなさんこんにちは！Kotonoです。
今回はJavaScriptにおける「ファイルのダウンロード処理」について解説していきたいと思います。
この記事では
・ファイルのダウンロード処理とは
・ファイルのダウンロード処理を行う方法
などといった基本的な内容から
・ファイルのダウンロード処理の注意点
・その他のファイルダウンロード処理方法
など、より発展的な内容に関してもわかりやすく説明していきたいと思います。
ファイルのダウンロード処理とは
皆さんは、ウェブページ上で「ファイルのダウンロード」は日常的に行っていると思います。
ウェブページ上のリンクやボタンをクリックすると、ファイルをダウンロードをすることはしょっちゅうですよね。
今回はその「ファイルのダウンロード処理」をJavaScriptを用いて行う方法をご紹介したいと思います。
ファイルのダウンロード処理を行う方法
では、早速「ファイルのダウンロード処理」を行う方法を説明していきたいとおもいます。
ファイルのダウンロード処理を行う方法は、今回ご紹介する簡単なものばかりでなく、他にも様々な方法があります。
基本的な方法をつかんだ後は、ご自分で色々なテクニックを試行錯誤してみるのも、JavaScriptプログラミング上達の近道ですよ。
HTMLのみで行うファイルのダウンロード処理
ではまず最初に、HTMLファイル内の記述のみで「ファイルのダウンロード処理」を行う方法をご紹介します。
HTMLファイル内で処理が完結してしまうので、scriptタグや外部JSファイルなどは必要ありません。
以下のコードをご覧ください。
<html>
<body>
<a href="pics/2.jpg" download>
<p>Click here to download!<p>
</a>
</body>
</html>
上のコードでは、HTMLファイルのアンカー（anchor）要素を作成し、そのhref属性にダウンロードされるファイルのリンク（パス）を指定しています。
そしてdownloadというキーワードを記述することによって、anchor要素のdownload属性を使用し、先ほど指定したファイルをダウンロードさせることが可能になります。
download属性はdownload = "hogehoge" などとも記述可能です。
hogehogeの部分は、ダウンロードされるファイルが保存される際に使用する名前です。
今回はhogehogeの部分は未設定なので、元のファイルの名前である2.jpgとして保存されます。
実際、上のコードを実行してみると、以下のようなページが表示されます。
リンクをクリックすると、picsフォルダ内に保存されている2.jpgという画像がダウンロードされます。
JavaScriptを使用するファイルのダウンロード処理
先ほどのサンプルコードでは、全ての処理がJavaScriptを使用せずに完結してしまっていました。
今回はJavaScriptを使用した、より柔軟性のある便利なコードをご紹介したいと思います。
以下のコードをご覧ください。
<html>
<body>
<script>
function myfunc(filename, pathname){
var anchor = document.createElement('a');
anchor.download = filename;
var textnode = document.createTextNode("Click here to download!");
document.body.appendChild(anchor);
anchor.appendChild(textnode);
anchor.href = pathname;
}
myfunc("myfile","pics/2.jpg");
</script>
</body>
</html>
上のコードでは、先ほどとは違って、scriptタグ内にすべての処理を記述しています。
ファイルをダウンロード処理を行うのはmyfuncという自作の関数です。
myfuncは引数を二つ要します。一つ目はダウンロードされるファイルを保存する際に使用するファイル名、二つ目はダウンロードされるファイルのパス名です。
myfunc内ではまず、変数anchorにcreateElementメソッドを使用して作成したanchor要素を格納しています。
作成したばかりのanchor要素のdownload属性に第一引数を指定することによって、ダウンロードされるファイルを保存する際に使用する名前を設定することが出来ました。
そして、クリックするためのリンクを作成するためにテキストノードを作成し、それをanchor要素の子ノードとしてappendChildメソッドを使用し、追加します。
最後に、anchor要素のhref属性に第二引数のパス名を指定し、ダウンロードされるファイルの指定が完了しました。
myfuncの呼び出しは、第一引数にmyfile、第二引数にpics/2.jpgと指定しました。
上のコードを実行すると、先ほどと全く同じウェブページが表示されます。
しかし、今回はmyfuncの引数であるファイル名とパス名を呼び出し時に自由に変更することができるので、より柔軟性のあるコードが完成しました。
ファイルのダウンロード処理の注意点
ファイルのダウンロード処理を行う上で、注意したい点はdownload属性の扱い方です。
先ほどご紹介したサンプルコードでは、download属性に指定した値はmyfileなどといった拡張子なしのファイル名でした。
しかし、download属性は拡張子付きのファイル名の指定も受け付けます。
この場合、ダウンロードされるファイルの拡張子と、download属性に指定したファイル名の拡張子が一致していれば問題ありません。
反対に、一致しない場合は望んでいないファイルがダウンロードされることになる可能性があるので、注意したいですね。
実際、ダウンロードされるファイルはjpg画像ファイルなのに、download属性に指定したのはmyfile.txtのようなテキストファイル名であれば、実際にダウンロードされるものはテキストファイル化してしまうのです。
その為、拡張子の有無には十分気をつけてくださいね。
その他のファイルのダウンロード処理方法
冒頭でも述べたように、今回ご紹介したのは基本的な方法であって、他にも様々なファイルのダウンロード処理を行う方法が存在します。
その中でも、Ajax（エイジャックス）といったプログラミング手法を使用する方法などが普及しています。
Ajaxについての理解を深めたい方は、以下のリンクを参照してみてください。
まとめ
今回はJavaScriptにおける「ファイルのダウンロード処理」を行う方法を解説しました。
ファイルのダウンロードといった基本的な動作ですが、実際にJavaScriptを使用し実装すると奥が深いですよね。
皆さんもこの記事を通して、ファイルのダウンロード処理についての知識をどんどん深めていってくださいね。
