TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでPDFファイルを開く方法を現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

JavaScriptでPDFファイルを開く方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでPDFファイルを開く方法について解説しています。PDFを開くときの基本の書き方、新規タブで開く場合の書き方についてサンプルコードで説明します。実行結果を画面上で確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptでPDFファイルを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

PDFファイルを開く方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

PDFファイルとは

PDFファイルとは電子化された書類のことを指します。

単純にワードファイルやエクセルファイルをPDF化できるだけでなく、スキャナされたものもPDFファイルとして扱えるので、その利用法は多岐にわたるといえるでしょう。

 

JavaScriptでPDFファイルを開く方法

システムによってはJavaScriptでPDFファイルを開く必要があります。

JavaScriptでPDFファイルを開く方法として、

document.location.href = “XXX.pdf”

を使用しましょう。

XXXには、PDFの存在する場所とファイル名を記載することで使用できます。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

新規タブでPDFファイルを開く方法

JavaScriptの新規タブでPDFを開く方法は、

window.open( ‘XXX.pdf’ )
といったコードを使用しましょう。

実際に書いてみよう

ここでは、実際にコードに記述していきます。
まずは、PDFファイルを開く方法からコードを記述していきます。
PDFファイルはHTMLファイルと同じフォルダ内に配置してみましょう。
<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
        document.location.href = "こんにちは.pdf";
    </script>
  </body>
</html>
 それでは、次に新規タブでPDFを開きます。
<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script>
        window.open( 'こんにちは.pdf' );
    </script>
  </body>
</html>

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

まとめ

JavaScriptでPDFファイルを開く方法を現役エンジニアが解説しました。
PDFは電子書類として最も利用されているファイル形式と言っても過言ではありません。
この機会に扱い方をマスターしましょう。

 

執筆してくれたメンター

メンターTK

大学院でVBAを扱う研究を行い、プログラミングの素晴らしさに目覚める。

その後、建設系企業のシステム担当として従事。JavaScriptやPHP、Processingなどに没頭中。

 

大石ゆかり

JavaScriptでPDFファイルを開く方法が分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

DOM操作のためのJavaScriptのライブラリについて現役エンジニアが解説【初心者向け】

DOM操作のためのJavaScriptのライブラリについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

JavaScriptのfor-of文の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのfor-of文の使い方について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向...
JavaScript

HTML5/CSS3を学んだ後にJavaScriptを学習するべき5つの理由

本記事は、EdTech.jp（エドテックドットジェーピー）から転載した記事になります。元記事はこちら。   最近、私は、自分のオンラインコ...
JavaScript

JavaScriptの変数のスコープについて現役エンジニアが解説【初心者向け】

JavaScriptの変数のスコープについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。  ...
JavaScript

JavaScriptでreplaceを使って文字列を置換する方法【初心者向け】現役エンジニアが解説

JavaScriptでreplaceを使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法を現役エンジニア

JavaScriptでDocument.formsプロパティを使ってform要素を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコー...
JavaScript

あわせてよく読まれている記事

PythonでExcelファイルをPDFに変換する方法を現役エンジニアが解説【初心者向け】

PythonでExcelファイルをPDFに変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。   Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PythonでExcelファイルをPDFに変換する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ExcelファイルをPDFに変換する方法 ExcelファイルをPDFに変換する方法はいくつか存在しています。 最も一般的な方法は、Excelの「ファイル」→「エクスポート」→「PDF/XDSの作成」という手順を踏むことでExcelから直接PDFに変換するというものです。 しかし、この方法では、多数のExcelファイルをPDFに変換したい場合、1つ1つ変換を行なうため、膨大な時間が掛かることも少なくありません。 そのため、Pythonを使ってプログラミングによってExcelファイルからPDFに変換すると良いでしょう。   PythonでExcelファイルを扱うには、win32comと呼ばれるモジュールを使います。 このモジュールはデフォルトでは入っていないので、pipでインストールしましょう。 pip install pywin32 続いて、ExcelファイルをPythonで読み込むには、適当な変数名を用意(ここでは”excel”)して、エクセルファイルを開くための設定を行ないます。 excel = win32com.client.Dispatch("Excel.Application") #Excelを操作するための設定 file = excel.Workbooks.Open('Excelファイルの絶対パス') これで、Excelファイルを開くことができました。   開いたファイルをPDFに変換する場合、シートをインデックスで指定し(左から順に1から始まる数字。複数の場合はリスト型にする)、下記のように記述してみましょう。 file.WorkSheets(シートのインデックス).Select() file.ActiveSheet,ExportAsFixedFormat(0, 'PDFファイルの保存先の絶対パス') #第一引数の0はPDFを指定するもの。 これで、ExcelファイルをPDFに変換できました。   実際に書いてみよう プログラムを記述し、ExcelファイルのPDF化を行ないましょう。 import win32com.client #win32comをインポートするだけでは上手くいかないので注意！！ excel = win32com.client.Dsipatch("Excel.Application") file = excel.Workbooks.Open("エクセルファイルの絶対パス(拡張子は.xlsx)") file.WorkSheets(PDF化したいシートのインデックス).Select() file.ActiveSheet.ExportAsFixedFormat(0,"保存先の絶対パス(拡張子は.pdf)") これを実行すれば、好きなExcelファイルをPDFに変換できることが可能です。   [PR] フロントエンドで副業する学習方法を動画で公開中PDFをExcelファイルに変換する方法 ここでは、PDFをExcelファイルに変換する方法を解説します。 PDFをExcelファイルに変換する場合、表になっていてExcel形式に変換できるものに限られる点は注意が必要です。 変換方法は、「PDFファイル」→「CSVファイル」→「Excelファイル」という手順で行ないます。 この場合、CSVファイルに変換し、pandasを使えばかんたんにExcelファイルに変換することができるでしょう。   「PDF」→「CSVファイル」の変換には、tabulaモジュールのread_pdf関数を使います。 インストールされていなければ、下記のコードで実行してください。 pip install tabula-py   インストールが完了したら、下記のコードでPDFからExcelファイルに変換できます。 from tabula import read_pdf import pandas as pd file = read_pdf("PDFファイルの絶対パス", pages = 1) file.to_excel("保存先のExcelファイルの絶対パス")   まとめ この記事では、Pythonを使ってExcelファイルとPDFファイルを相互に変換する方法について解説しました。 事務処理等で役に立つことがある実用的な方法なので、有効に活用してみてください。   コラム 実は私も！？独学で損する人の特徴
Python

HTMLをPDFに変換するwkhtmltopdfの使い方を現役デザイナーが解説【初心者向け】

HTMLをPDFに変換するPythonライブラリ「wkhtmltopdf」の使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 wkhtmltopdfを利用することで、手元やインターネット上のHTMLファイルをPDFファイルに変換できます。 実務でもHTMLファイルをPDFファイルに自動変換する場合などに活用してみてください。 目次PDFファイルとはJavaScriptでPDFファイルを開く方法新規タブでPDFファイルを開く方法実際に書いてみようまとめ執筆してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLをPDFに変換するwkhtmltopdfの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   PDF変換するには HTMLファイルをPDFを変換するには、オンラインで変換する方法とフリーソフトで変換する方法があります。 Webサイトを変換するだけだと、オンラインで行うと簡単です。 また、自前で作成したHTMLファイルをPDFでドキュメント化するには、フリーソフトを使って変換するやり方がおすすめです。 HTMLで作成したドキュメントをPDFファイルにして他の人へ送ることで、作成したWebサイトのデザインを確認してもらえます。 そして、文章の不備を確認してもらうこともできるので、やり方を知っておくと便利です。 今回は、フリーソフトやオンラインでPDF変換する方法ではなく、wkhtmltopdfを利用する方法をご紹介します。 wkhtmltopdfを利用することで、Pythonのプログラムの中でPDF変換作業を実装することも可能になります。   wkhtmltopdfのインストールとセットアップ方法 今回はPDFに変換するソフトとして、wkhtmltopdfをインストールしていきます。 wkhtmltopdfはコマンドラインでHTMLをPDFに変換するツールです。   以下の公式サイトからDownloadsをクリックして、お使いのOSに合わせてインストーラをダウンロードします。 https://wkhtmltopdf.org/ ダウンロード後、画面に従って標準設定でインストール作業を進めていただければ、セットアップも完了します。   [PR] フロントエンドで副業する学習方法を動画で公開中wkhtmltopdfでHTMLをPDFに変換してみよう インストールを終えたら、実際にHTMLをPDFに変換してみましょう。 以下のHTMLを変換してみます。 ファイル名はindex.htmlとします。 サンプルコード <!DOCTYPE html>                                                                <html> <head>       <title>Hello HTML</title>       <meta charset="UTF-8"> </head>       <body>           <h1>こんにちは</h1>           <p>これはHTMLのサンプルです</p>       </body> </html> wkhtmltopdfサンプルコマンド wkhtmltopdf index.html output.pdf   解説 wkhtmltopdf コマンドを実行することで、用意したHTMLファイルをPDFファイルに変換できます。 index.htmlと同じフォルダ階層に、output.pdfというpdfファイルが生成されます。 表示結果 作成されたPDFを開くと、HTMLのレイアウトが適用されたドキュメントが生成されます。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
HTML

Pythonで画像ファイルをPDF化する方法を現役エンジニアが解説【初心者向け】

Pythonで画像ファイルをPDF化する方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonで画像ファイルをPDF化する方法について詳しく説明していくね！ 大石ゆかり お願いします！   画像ファイルをPDF化する方法 Pythonには、グラフを描画するmatplotlibというライブラリがあります。matplotlibを利用すると、画像ファイルをPDFに変換できます。 具体的な手順は以下です。 PIL(pillow)を利用して画像をファイルから読み込む 画像をNumpy配列(ndarray型)に変換する matplotlibで画像のプロット先(pyplot)を用意して、画像を変換したNumpy配列を表示する 表示した画像をPDF形式で保存する   実際に書いてみよう 今回はmatplotlibのほか、以下のライブラリを使用します。 matplotlib：Pythonの代表的なグラフ描画ライブラリ。今回は画像を描画するために使用 PIL：正式名称は pillow。今回は画像の読み込みにImage関数を使用 numpy：行列演算を行うライブラリ   サンプルプログラムでは以下の画像ファイル（test.jpg）を使用しました。 プログラムと同じフォルダに保存しておきましょう。 Pythonのプログラムは以下のとおりです。   from PIL import Image import matplotlib.pyplot as plt import numpy as np from matplotlib.backends.backend_pdf import PdfPages # 画像をファイルから読み込む image = Image.open("./test.jpg") # 画像をNumpy配列に変換する image = np.asarray(image) # 画像のプロット先の準備 fig = plt.figure() # グリッドの表示をOFFにする plt.axis('off') # Numpy配列を画像として表示する plt.imshow(image) # 保存するPDFファイル名 pp = PdfPages('test.pdf') # 画像をPDFとして保存する pp.savefig(fig) # PDFの保存終了 pp.close()   実行すると、プログラムと同じフォルダに「test.pdf」が作成されます。なお、同様の手順でmatplotlibで描画したグラフなども保存可能です。 また、ファイル形式はPDFだけでなく、PNGやJPEGなどの画像形式でも保存可能です。   [PR] フロントエンドで副業する学習方法を動画で公開中監修してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。 プログラミングを独学していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安
Python

PythonのpdfminerでPDFのテキストを抽出する方法を現役エンジニアが解説【初心者向け】

PythonのpdfminerでPDFのテキストを抽出する方法について解説します。 そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PythonのpdfminerでPDFのテキストを抽出する方法について詳しく説明していくね！ 大石ゆかり お願いします！   pdfminerとは pdfminerとは、PDFファイルからテキストを抽出するためのモジュールです。 日本語含むCJK(Chinese, Japanese, Korean)に対応するのが特徴です。 pdfminerを使う手順 インストールする 以下コマンドでpdfminerモジュールをインストールします。   pip install pdfminer.six なお筆者の環境では、別途chardetモジュールのインストールが必要でした。   pip install chardet   動作確認をする pdfminerの開発プロジェクトの配布している、サンプルのPDFファイルをダウンロードします。 以下コマンドを実行します。なお、環境によりpdf2txt.pyのパスが異なります。   python /path/to/pdf2txt.py simple1.pdf 以下のようにPDFから抽出された文字列が表示されれば、インストールは成功しています。 Hello World Hello World H e l l o W o r l d H e l l o W o r l d   [PR] フロントエンドで副業する学習方法を動画で公開中実際にPDFからテキストを抽出してみよう ここでは、Adobe社の配布している、表示確認用サンプルPDFファイルを用いました。 サンプルコード from pdfminer.pdfinterp import PDFResourceManager, PDFPageInterpreter from pdfminer.converter import TextConverter from pdfminer.layout import LAParams from pdfminer.pdfpage import PDFPage input_path = 'adobe_sample.pdf' output_path = 'result.txt' manager = PDFResourceManager() with open(output_path, "wb") as output: with open(input_path, 'rb')
Python

【資料提出で使える！】Word(ワード)文書をPDFファイルに変換する方法

「えっ、『PDF ファイルで送付してください』？ 作った文書がWord ファイルなんだけど、どうしよう…」 実は、Word ファイルをPDF ファイルに変更することは、簡単にできてしまいます！ 今回は、その変更方法を紹介していきます。 なお本記事は、KiRAMEXのオンライン完結のWord(ワード)講座の内容をもとに紹介しています。   目次 PDF とは PDF として保存する方法 保存時のオプション設定   PDF とは 「Portable Document Format（ポータブル・ドキュメント・フォーマット）」の略で、紙に印刷されるときのイメージをデータとして保存するためのフォーマットです。 Word で作った文章は、開かれるPCの設定によって見え方が変わったり、Word のバージョンが違っていると開けなかったりします。 PDF では、作成したときのレイアウトやフォントが、そのまま保たれます。 また、Adobe Reader などの無料のPDF 閲覧ソフトが広く普及しているため、PC の環境や所有ソフトによらず閲覧することができます。 スマホやタブレット向けのPDF 閲覧アプリもあるため、様々な環境で開けるのが、PDF の強みです。   [PR] フロントエンドで副業する学習方法を動画で公開中PDF として保存する方法 それでは、Word で作成した文書を、PDF として保存してみましょう。 まず、左上の[ファイル]タブを開き、[Adobe PDF として保存]をクリックします。 [Adobe PDF ファイルに名前を付けて保存]ダイアログボックスが開くので、保存先のフォルダを指定し、任意のファイル名をつけて、[保存]をクリックしましょう。 このとき、「結果の表示」にチェックを入れておくと、変換されたPDFファイルが自動で開きます。 以上で、PDF への変換は完了です。   保存時のオプション設定 [保存]の下にある、[オプション]をクリックしてみましょう。 ここでは、PDF に変換するときの設定を変更することができます。 例えば、Word で見出しとして設定した項目がPDF のしおりになるように設定するとします。 その場合は、「しおりを作成」と「Wordの見出しをしおりに変換」にチェックを入れ、[OK]をクリックしましょう。 Word上で見出しとして設定した部分が、「しおり」に設定されました。 しおりを設定しておくと、1クリックで見たい項目のページにジャンプできるので、とても便利です。 他に便利なオプション設定としては、「ページ範囲」の設定があります。 現在のページや、選択範囲、指定したページだけをPDF 保存できますので、長いWord文書の一部だけをメールで送付したいときなどに、ぜひ使ってみてください。 以上、Word ファイルをPDF ファイルに変換する方法をお伝えしました。 意外と簡単だと思いませんでしたか？ これでもう、PDFファイルでの提出を求められたときは何も問題なく対応できますね！ プログラミングを独学していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない
Word

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次PDFファイルとはJavaScriptでPDFファイルを開く方法新規タブでPDFファイルを開く方法実際に書いてみようまとめ執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptによるファイルの読み込み Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。 例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。 本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。   実際にファイルを読み込んでみよう ファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。   1．input要素をHTMLに記述する ファイルを読み込むには、まずHTMLに要素を追加する必要があります。 追加する要素はinput要素で、type属性に”file”を指定します。 また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。 <input id="upload-file" type="file">   ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。 「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。   2．input要素をJavaScript側で取得する 1で指定したid属性の値によって、input要素を取得します。 idによる要素の取得には、document.getElementByIdを用います。 const input = document.getElementById('upload-file');   3．ファイルの読み込みを検知する ファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。 ファイルのアップロードは、changeというイベント名で取得できます。 changeイベントを取得するには、addEventListenerを用いて以下のように書きます。 input.addEventListener('change', (e) => { console.log('ファイルが検知された！'); }); 1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。 コールバック関数の関数の引数として、 e という変数が指定されていますね。 引数 e は、ファイルの情報を取得するための重要な引数です。 eについて、次の項目で詳しく説明します。   4．読み込まれたファイルを取得する 3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。 アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。 input.addEventListener('change', (e) => { console.log(e.target.files[0]); }); コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。 そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。 アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。 ※複数ファイルのアップロードについては本記事の最後に紹介します。   一連の処理を行ってみよう それでは、解説した1〜4の処理を実際に行ってみましょう。 完成形のコードは以下の通りです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="upload-file" type="file"> <script> //JavaScriptの記述
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでPDFファイルを開く方法を現役エンジニアが解説【初心者向け】