【Node.js】readFile()でファイルを読み込んで表示する！

エンジニアに特化した転職エージェント！

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談！

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します！

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています！

転職エージェントに迷っている方、まずは無料でキャリア相談から！

エンジニア特化の転職支援【キッカケエージェント】

(この記事は2023年10月15日に投稿されました。)

Node.jsでファイル読み込んで表示するにはreadFile()を使用します。

readFile()とはファイル読み込んだ後に処理を行うことができる「File System」モジュールのメソッドになります。

そのため、対象のファイルを読み込みながら非同期処理を行うようになります。

また対象ファイルが読み込めなかった場合、何も指定しないとエラーになりますが、エラー時に画面に表示するデータを自分で設定することもできます。

今回はNode.jsのreadFile()でファイルを読み込んで表示する方法について紹介していきます。

この記事はこんな方におすすめ

Node.jsとは

Node.jsとは、JavaScriptでサーバーサイドの環境を実行することができる、オープンソースのランタイム環境となります。

そのため、非常に幅広い用途に適しており、特にWebアプリケーションのバックエンド、APIサーバー、リアルタイムアプリケーションの開発に使用されています。

readFile()とは

readFile()とは、ファイル読み込んだ後に処理を行うことができる「File System」モジュールのメソッドになります。

指定したファイルを読み込み、読み込んだ瞬間に処理を行うようになります。

そのため、非同期処理でファイルを読み込むようになります。

ファイルの大きさ関係なく、読み込み作業はバックグラウンドで行われるようになります。

readFile()の書き方

readFile()の書き方は下記のようになります。

const fs = require('fs')
fs.readFile('ファイル名', 'エンコーディング', 'コールバック関数')

1 2	const fs = require('fs') fs.readFile('ファイル名', 'エンコーディング', 'コールバック関数')

まず、require()でfile Systemオブジェクトを変数に取り込みます。

そして、、取り込んだ変数の後ろにreadFile()と追記し、引数を3つ指定して使用することができます。

readFile()の引数

readFile()の引数は下記のようになります。

ファイル名:(必須)
読み込むファイルを相対パスで指定する
エンコーディング:(必須)
ファイルを読み込むための文字コードを指定する
コールバック関数:(必須)
ファイル読み込み後の処理を行うためのコールバック関数を指定する

readFile()は必須な引数として「ファイル名」と「エンコーディング」と「コールバック関数」を指定します。

readFile()の返り値

readFile()の返り値は、読み込んだファイルのデータとなります。

readFile()でファイルを読み込んで表示するサンプルコード

readFile()でファイルを読み込んで表示するサンプルコードをご紹介します。

ここでは下記の2パターンでreadFile()を使用します。

ファイルを読み込むのに成功した場合
ファイルを読み込むのに失敗した場合

ファイルを読み込むのに成功した場合

ファイルを読み込むのに成功した場合は、指定したファイルを読み込んでデータとして受け取るようになります。

● index.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <h1>index</h1>
    <p>これはindex.htmlのページです。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>index</title>

</head>

<body>

<h1>index</h1>

<p>これはindex.htmlのページです。</p>

</body>

</html>

● main.js

const http = require('http')
const fs = require('fs')
var server = http.createServer(getClient)
server.listen(3200)
function getClient(request, response){
    fs.readFile('./index.html', 'UTF-8',
    function(error, data){
        if(error) {
            response.writeHead(200, {'Content-Type': 'text/html'})
            response.write('Error')
            response.end();
        }
        else {
            response.writeHead(200, {'Content-Type': 'text/html'})
            response.write(data)
            response.end();
        }
    })
}

const http = require('http')

const fs = require('fs')

var server = http.createServer(getClient)

server.listen(3200)

function getClient(request, response){

fs.readFile('./index.html', 'UTF-8',

function(error, data){

if(error) {

response.writeHead(200, {'Content-Type': 'text/html'})

response.write('Error')

response.end();

}

else {

response.writeHead(200, {'Content-Type': 'text/html'})

response.write(data)

response.end();

}

})

}

実行結果

readFile()でファイルを読み込んで表示しています。

そのため、「index.html」のファイルに書かれたデータが画面に表示されています。

ファイルを読み込むのに失敗した場合

ファイルを読み込むのに失敗した場合はエラーのデータを受け取るようになります。

● index.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <h1>index</h1>
    <p>これはindex.htmlのページです。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>index</title>

</head>

<body>

<h1>index</h1>

<p>これはindex.htmlのページです。</p>

</body>

</html>

● main.js

const http = require('http')
const fs = require('fs')
var server = http.createServer(getClient)
server.listen(3200)
function getClient(request, response){
    fs.readFile('./index3.html', 'UTF-8',
    function(error, data){
        if(error) {
            response.writeHead(200, {'Content-Type': 'text/html'})
            response.write('<h2>Error</h2>')
            response.end();
        }
        else {
            response.writeHead(200, {'Content-Type': 'text/html'})
            response.write(data)
            response.end();
        }
    })
}

const http = require('http')

const fs = require('fs')

var server = http.createServer(getClient)

server.listen(3200)

function getClient(request, response){

fs.readFile('./index3.html', 'UTF-8',

function(error, data){

if(error) {

response.writeHead(200, {'Content-Type': 'text/html'})

response.write('<h2>Error</h2>')

response.end();

}

else {

response.writeHead(200, {'Content-Type': 'text/html'})

response.write(data)

response.end();

}

})

}

実行結果

readFile()でファイルを読み込んで表示しています。

今回は、「index3.html」のファイルを読み込もうとしていますが、存在しないためエラー処理が発生しています。

そのため、「Error」という文字列が画面に表示されています。

readFile()で読み込むファイルを条件で分岐させる場合

readFile()で読み込むファイルを条件で分岐させる場合は、if文やSwich文などを使用します。

● index1.html

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>index1</title>
    </head>
    <body>
        <h1>index1</h1>
        <p>これはindex1.htmlのページです。</p>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>index1</title>

</head>

<body>

<h1>index1</h1>

<p>これはindex1.htmlのページです。</p>

</body>

</html>

● index2.html

<!DOCTYPE html>
<html lang="jp">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>index2</title>
    </head>
    <body>
        <h1>index2</h1>
        <p>これはindex2.htmlのページです。</p>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>index2</title>

</head>

<body>

<h1>index2</h1>

<p>これはindex2.htmlのページです。</p>

</body>

</html>

● main.js

const http = require('http')
const fs = require('fs')

let flag = false

var server = http.createServer(getClient)
server.listen(3200)

function getClient(request, response){
    if(flag == true) {
        fs.readFile('./index.html', 'UTF-8',
        function(error, data){
            response.writeHead(200, {'Content-Type': 'text/html'})
            response.write(data)
            response.end();
        })
    }
    else {
        fs.readFile('./index2.html', 'UTF-8',
        function(error, data){
            response.writeHead(200, {'Content-Type': 'text/html'})
            response.write(data)
            response.end();
        })
    }
}

const http = require('http')

const fs = require('fs')

let flag = false

var server = http.createServer(getClient)

server.listen(3200)

function getClient(request, response){

if(flag == true) {

fs.readFile('./index.html', 'UTF-8',

function(error, data){

response.writeHead(200, {'Content-Type': 'text/html'})

response.write(data)

response.end();

})

}

else {

fs.readFile('./index2.html', 'UTF-8',

function(error, data){

response.writeHead(200, {'Content-Type': 'text/html'})

response.write(data)

response.end();

})

}

実行結果(flagがfalseの場合)

実行結果(flagがtrueの場合)

readFile()で読み込むファイルを条件で分岐させています。

そのため、flagが「false」の場合は「index2.html」のデータが画面に表示され、「true」の場合は「index1.html」のデータが画面に表示されています。

まとめ

⚫︎ readFile()とは、ファイルを読み込んだ後に処理を行うことができる「File System」モジュールのメソッドである。

⚫︎ readFile()は下記の引数を指定して使用する
・ファイル名(必須)
・エンコーディング(必須)
・コールバック関数(必須)

⚫︎ ファイルを読み込むのに成功した場合は、指定したファイルを読み込んでデータとして受け取る。

⚫︎ ファイルを読み込むのに失敗した場合はエラーのデータを受け取る。

⚫︎ readFile()で読み込むファイルを条件で分岐させる場合は、if文やswich文などを使用する。

Node.jsとは

readFile()とは

readFile()の書き方

readFile()の引数

readFile()の返り値

readFile()でファイルを読み込んで表示するサンプルコード

ファイルを読み込むのに成功した場合

ファイルを読み込むのに失敗した場合

readFile()で読み込むファイルを条件で分岐させる場合

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル