【JavaScript入門】ファイルのダウンロード処理を実装してみよう!

みなさんこんにちは!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入門】Ajaxの使い方とGET・POST通信まとめ!
更新日 : 2020年5月8日

まとめ

今回はJavaScriptにおける「ファイルのダウンロード処理」を行う方法を解説しました。

ファイルのダウンロードといった基本的な動作ですが、実際にJavaScriptを使用し実装すると奥が深いですよね。

皆さんもこの記事を通して、ファイルのダウンロード処理についての知識をどんどん深めていってくださいね。

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Kotono

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。