TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのbody内における読み込み処理(onload)について現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

JavaScriptのbody内における読み込み処理(onload)について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのbody内における読み込み処理(onload)について現役エンジニアが解説しています。JavaScriptはbody前のhead内に書く方法とbodyの終了前に書く方法があります。それぞれのJavaScriptの読み込み方の違いやonloadイベント処理について説明します。

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

JavaScriptのbody内における読み込み処理(onload)について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptのbody内における読み込み処理(onload)について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

1時間でできる無料体験！

 

bodyとは

HTMLにおけるbody(タグ)とは、メインに画面に表示させる部分を示します。※bodyタグ以外に記載しても表示させることは可能です。

実際にHPなどに訪問してきた人に見せる内容を記載する部分とお考え下さい。

なぜ、改めてこのbodyについて説明したかというと、JavaScriptを記載する際に、大きく分けてbodyの開始前（「head」内）に書く場合とbodyの終了後（「body」内の後半）に書く場合があるからです。どちらかと言うとJavaScriotはbodyの終了後（「body」内の後半）に書くことを推奨されています。

これは、HTMLは上から読み込まれるので、body内のタグなどを扱うことが多いいJavaScriptは、bodyの読み込みを終えてから実行させたいという事と、少しでも早くHPを表示させるためです。

また、外部ファイルの読み込みは、bodyの開始前（「head」内）に書くことが多いいのは、実際に記載されているJavaScriptから呼び出すため、先に読み込んでおく必要があるからです。
 

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

onloadによる読み込み処理とは

onloadの話をする前に、イベントについてお話ししたいと思います。

イベントとはHP上での動作やアクションなどの環境の変化をとらえたものです。分かりやすいのでいうと、クリックイベントやマウスオーバー、キーダウンなど色々とあります。

onloadもその一つでHPの読み込みが終えたタイミングをとらえたものになります。そのため、全てが読み込まれた前提でJavaScriotを実行できます。
 

onloadを利用して読み込み処理を作成してみよう

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body onload="iniset('こんにちは！')">
    <p id="memo"></p>
    <script>
      function iniset(msg){
       var memo = document.getElementById('memo');   
       memo.textContent = msg;
     }
   </script>
  </body>
</html>

 

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困ったときに、質問や相談できる相手がいるため挫折しなかった
  • ・プロとして必要なスキルのみを深く学べたので無駄がなかった
  • ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

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

まとめ

onloadは読み込みが完了した時点で発動できるので、自動的に行う処理は勿論の事、body全体がちゃんとあることを前提で処理を記載できるので便利に使うことが出来ます。
 

筆者プロフィール

小宮山晃史（こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

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

大石ゆかり

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

 

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

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

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

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

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

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

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptでDateオブジェクトを使って日付を表示する方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptの組み込み関数の1つ、Dateオブジェクトを使って日付を表...
JavaScript

JavaScriptでオブジェクトのプロパティ一覧を取得する方法を現役エンジニアが 解説【初心者向け】

JavaScriptでオブジェクトのプロパティ一覧を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解...
JavaScript

JavaScriptの配列(array)をループ(loop)処理する方法について現役エンジニアが解説【初心者向

JavaScriptの配列(array)をループ(loop)処理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...
JavaScript

JavaScriptで文字列を日付オブジェクトに変換する方法を現役エンジニアが解説【初心者向け】

JavaScriptで文字列を日付オブジェクトに変換する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
JavaScript

JavaScriptのscriptタグの書き方を現役エンジニアが解説【初心者向け】

JavaScriptのscriptタグの書き方について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門...
JavaScript

JavaScriptで画像切り替えを行う方法を現役エンジニアが解説【初心者向け】

JavaScriptで画像切り替えを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 J...
JavaScript

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

読み込み時にイベント処理を！JavaScriptでonloadを使う方法【初心者向け】現役エンジニアが解説

JavaScriptでonloadを使う方法について解説しています。 読み込み後、何かアクションを起こしたい時に役立つので、書き方をきちんと覚えておきましょう。   目次 onloadとは onloadの書き方 実際に書いてみよう onloadの注意点 まとめ   onloadとは onloadとは、HTMLなどの文書を操作するときに利用するイベントハンドラー（※1）のことです。 onloadは、ページや画像などのリソース類を読み込んでから処理を実行したいときに利用します。 利用ケースとしては、スライダーや画像ギャラリーのような画像を読み込んでから処理を実行したいときなどが挙げられます。 ※1 イベントハンドラーとは、特定のイベントが発生したときに実行される処理のことです。   [PR] フロントエンドで副業する学習方法を動画で公開中onloadの書き方 onloadの書き方は以下のようになります。 obj.onload = function() { // ここに読み込みが完了したら実行したい処理を記述する } objには、windowオブジェクトやHTMLのbodyタグ、imgタグなどの要素を指定することができます。 そして、指定した要素の読み込みが完了したら、処理が実行されます。 そのため、指定する要素によって処理が実行されるタイミングが変わります。   例）指定した要素による実行タイミングの違い windowオブジェクトを指定した場合 ページの読み込みが完了したタイミングで処理が実行される HTMLのimgタグを指定した場合 ページの読み込み状況にかかわらず、imgタグの読み込みが完了したタイミングで処理が実行される   実際に書いてみよう ページが読み込まれたら実行する 以下の例を実行すると、windowオブジェクトが読み込まれたタイミングで処理が実行されていることが分かります。 window.onload = function() { alert("ページが読み込まれました！"); };   上記の例は以下のようにも記述できます。 function load() { alert("ページが読み込まれました！"); } window.onload = load;   画像が読み込まれたら実行する 下記は、画像が読み込まれたタイミングで処理を実行する例です。 var img = new Image(); img.onload = function() { alert("画像が読み込まれました！"); }; img.src = 'xxx.png';   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ
JavaScript

JavaScriptによるHTMLの読み込み(onload)処理について現役エンジニアが解説【初心者向け】

JavaScriptによるHTMLの読み込み(onload)処理について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptによるHTMLの読み込み(onload)処理について詳しく説明していくね！ 大石ゆかり お願いします！   目次 HTMLとは onloadによる読み込み処理とは onloadを利用してHTMLの読み込み処理を作成してみよう まとめ   HTMLとは HTMLとは、「Hyper Text Markup Language（ハイパー テキスト マークアップ ランゲージ）」の略です。”マークアップ言語を使った凄い文章”のイメージです。 ポイントとなるのは「マークアップ」ですね。「マークアップ」とは、文章に対して要素を指定することです。指定する方法にタグと言うものを利用します。タグには沢山の種類があり、よく目にするのは<html>、<head>、<body>、<h1>、<title>等々かと思います。 このタグには、それぞれの特徴が事前に決められており、ブラウザー（IEやchrome、safari等）で見た時にルールにしたがって表示されます。この様に、HTMLでは様々なタグの組み合わせを使って、文章を装飾し、それをブラウザーで見ることで見やすいページを参照することが可能になっています。 また、もう少しお話しすると、それぞれのタグにはstyle（スタイル）を指定することが可能で、文字の色や大きさなどは勿論、表示の仕方や動きなども設定することが出来ます。これらのスタイルを纏めたのがCSSというファイルになります。   [PR] フロントエンドで副業する学習方法を動画で公開中onloadによる読み込み処理とは HTMLの特徴の一つに、全部を読込まなくても見せれる分から見せていく。と言うものがあります。 昔、ネット回線が細くデータのやり取りに時間がかかった為、少しでも早く表示させることが優先された為です。 通常の文章だけを扱うときには問題ないのですが、JavaScriptの様に文章全体を操作したりする時には、問題が発生します。JavaScriptで指定する部分がまだ読み込まれていない場合、当然ながらプログラムがエラーになってしまいます。 そこで、全ての文章が読み込まれてから処理を動かす必要が出てきました。それを実現するのが、onloadです。window.onloadのイベントハンドラでページ全体が読込まれた事を受けての処理を実行することが可能です。   onloadを利用してHTMLの読み込み処理を作成してみよう 比較の為、Onloadを利用しない場合も記載しています。前者はエラーに後者は正常になるので、比較してみてください。 【エラー】 <!DOCTYPE html> <html>   <head>     <script>       var memo = document.getElementById('memo');          memo.textContent = 'こんにちは！';     </script>   </head>   <body>     <p id="memo"></p>   </body> </html> 【正常】 <!DOCTYPE html> <html>   <head>     <script>       window.onload = function() {         var memo = document.getElementById('memo');            memo.textContent = "こんにちは！";       }     </script>   </head>   <body>      <p id="memo"></p>   </body> </html>   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
JavaScript

JavaScriptでbody内にonloadイベントを埋め込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでbody内にonloadイベントを埋め込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 body内にonloadイベントを埋め込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   onloadイベントとは onloadイベントは、bodyタグに配置することにより、ページの読み込みがあったときに処理を実行できます。   onloadイベントの記述方法 bodyタグ onloadイベントをbodyタグで扱うには、ここでは関数を使用します。 <!DOCTYPE html> <html lang = "ja">   <head>     <meta charset = "utf-8">     <title>JavaScript</title>   </head>   <body onload="func()">     <script>       function func(){         alert("onloadが実行されました。");       }     </script>   </body> </html>  window.onload window.onloadを使うと以下のようになります。 <!DOCTYPE html> <html lang = "ja">   <head>     <meta charset = "utf-8">     <title>JavaScript</title>   </head>   <body>     <script>       window.onload=function func(){         alert("onloadが実行されました。");       }     </script>   </body> </html>   [PR] フロントエンドで副業する学習方法を動画で公開中 onloadイベント利用時の注意点 onloadによるイベントハンドラは、同一要素の同一イベントに対して、複数設定できません。   まとめ JavaScriptでbody内にonloadイベントを埋め込む方法を現役エンジニアが解説しました。これ以外にもイベントを発生させる方法は色々あるので、そちらも参照してみるといいかもしれません。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
JavaScript

HTMLでbodyタグにonLoad属性を使う方法を現役エンジニアが解説【初心者向け】

HTMLでbodyタグにonLoad属性を使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 bodyタグにonLoad属性を使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 活用場面 onLoad属性について onLoad属性を使ってWebサイトのページ読み込み時に処理を行おう   活用場面 onLoadはブラウザがページを読み込むときに行う処理を実装するときに使用します。 例えばブラウザを読み込んだときにアニメーションをページ上で実行したり、サーバーの実行結果をページで表示させるときに使用可能です Gmailをブラウザで起動するときをイメージするとわかりやすいでしょう。   [PR] フロントエンドで副業する学習方法を動画で公開中onLoad属性について onLoad属性はブラウザからページを読み込むときに実行する処理を呼び出す仕組みです。 具体的には、下記のようにbodyタグの中にonLoad=”実行する関数”と記述すると実行できます。 <body onLoad="startFunc()"> 上記の例であれば、ブラウザ起動時にstartFunc関数を実行するという仕組みであり、ScriptタグstartFunc関数の中身を記述すれば実行します。 ちなみに、現在のページから他のページに遷移するときに処理を実行するときはonUnLoad属性を指定すると、遷移する前に該当の処理を実行することができるでしょう。   onLoad属性を使ってWebサイトのページ読み込み時に処理を行おう 実際に読み込み時の処理を実装してみましょう。 今回はブラウザを立ち上げたらダイアログにメッセージを表示させるサンプルを作ってみましょう。 以下のサンプルコードを任意のフォルダに保存します。 <html>     <head>         <meta charset="utf-8">         <title>onLoadサンプル</title>     </head>     <body onload="loadFunc()">         <h1>これはサンプルです</h1>     </body>     <script>         function loadFunc() {             alert("Hello World");         }     </script> </html> HTMLをダブルクリックしてHTMLを開くと、開いた瞬間に以下のようにアラートでメッセージが表示されたら成功です。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
HTML

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次bodyとはonloadによる読み込み処理とはonloadを利用して読み込み処理を作成してみようまとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！ 大石ゆかり えっ？オセロゲームを作るなんて、難しそうですね、、、 田島悠介 大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。 大石ゆかり はい！よろしくお願いします！   はじめに 対象読者 本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。 本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！ 入門向けのJavaScriptを学習できるサイト   本記事の目的 本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。 設計から実装までの、エンジニアの思考プロセスを体験する ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する 上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。 解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！   注意点 本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。 一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。 本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。   オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間 ゲームに限らず、いかなる実装においても設計は非常に重要です。 機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。 「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。   オセロゲームのルールを確認しよう オセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。 まずは前提条件となるオセロゲームのルールを確認していきます。   オセロゲームのルール 盤は8×8マスを利用する 初期状態で真ん中の4マスに白黒の石を交互に配置する 先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく 石を置ける場所は、下記の条件を満たしている 置くマスに他の石がないこと 置くマスの上下左右、斜め1マスの場所に相手の石があること 置いた石、相手の石があった方向の延長上に自身の石があること 石を置ける条件を満たせない場合は、パスをして相手の番になる すべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする） ゲーム終了時点で石の数が多い方が勝ちとなる 以上がオセロゲームのルール概要です。   ルール以外の要件を定めよう ゲームのルールのほか、今回の実装では以下の条件を適用することとします。 自動でパスする機能は実装せず、「パス」ボタンを設置する 「現在どちらの手番であるか」を表示する ゲーム終了後、白黒それぞれの石の数と勝敗を表示する ゲームの初期化機能は実装しない 石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない 画像は用いない それでは、要件を確認したところで実際の設計に移りましょう。   要件に沿って実装設計をしてみよう 同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。 実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。 それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。 想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。   本記事の執筆者は、以下のように流れを作成しました。 上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。 もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。 想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。 本セクションは以上です。 休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。   [PR] フロントエンドで副業する学習方法を動画で公開中開発環境を整えよう 🕛目安時間：30分 今回の開発に必要な環境は以下の通りです。 コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）   コードエディタを用意しよう コードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説   Webブラウザの環境を整備しよう 主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。 本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。 開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】 コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、
JavaScript

簡単に変換できる！PHPでCSVファイルを読み込む方法【初心者向け】現役エンジニアが解説

PHPでCSVファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 fgetcsv関数を使ってCSVファイルを読み込めば、表計算ソフトなどからPHPにデータを取り込めます。 たとえば、Excelで作った商品リストをCSVファイルで保存し、PHPで取り込めばショッピングサイトのデータとして活用できますし、Googleスプレッドシートで作成したタスクリストをCSVにしてPHPで読み込めばタスクの共有ができるアプリケーションが作成できます。 このように、他のアプリで作ったCSVファイルのデータ活用するために覚えておきたい知識なので、参考にしてみてください。   目次bodyとはonloadによる読み込み処理とはonloadを利用して読み込み処理を作成してみようまとめ筆者プロフィール   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回はCSVファイルをPHPで読み込む方法をやっていくよ。 大石ゆかり 田島メンター！その前にちょっといいですか？ 「CSV」って何ですか？ 田島悠介 じゃあ、CSVとは何かを教えるね。 ゆかりちゃんは表計算ソフト、例えば「Excel」とか「Google スプレッドシート」は使ったことあるかな？ 大石ゆかり それならありますよ。大学時代にレポート作成でExcelを使ってましたし、仕事ではGoogle スプレッドシートを使っています。 田島悠介 もし、ゆかりちゃんが入力したデータをPHPのプログラムで読み込ませたいと思ったらどうしたらいいかな？ 大石ゆかり データを保存したファイルをPHPで読み込めばいいんじゃないですか？ PHPってファイルの読み込みもできましたよね？ 田島悠介 たしかに、PHPではファイルの読み込みができるんだけど、ExcelやGoogle スプレッドシートの専用ファイルはそのままでは読み込むのが難しいんだ。 PHPのファイル読み込みは、標準では文字だけで構成されたテキストファイルで作成されていることが前提だからね。 大石ゆかり そうなんですね・・・。じゃあ、表計算ソフトで保存するときPHPでも読み込めるテキストファイルの形式で保存したらいいんですか？ 田島悠介 その通り！さすがゆかりちゃん、理解が早い。 そのPHPにも対応しているテキストファイルの形式の1つがCSVファイルというわけだね。 大石ゆかり なるほどぉ。 今Google スプレッドシートでCSVの形式にエクスポートしてみました。 カンマ付きのシンプルな文字だけになるんですね。   Googleスプレッドシートの画面   名前,年齢,血液型 太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B CSVファイルの中身 田島悠介 そうだね。CSVファイルはカンマかタブ文字で区切られるんだ。 ちなみにCSVファイルはほとんどのアプリが対応しているから、PHPなどのプログラムからの読み込みだけでなく、アプリ同士でデータをやり取りしたいときにもよく使われるよ。 ただ、データの中身の文字だけしか保存されないから、罫線や文字色などの情報はなくなるけどね。 大石ゆかり CSVについてはよく分かりました！ 今回はそのCSVファイルをPHPで読み込む方法を教えてもらえるんですね！ 田島悠介 そういうことだね。 CSVは、読み込みと出力のそれぞれ書き方が違うから、今回は「読み込み」の方法について説明するね！ 大石ゆかり お願いしまーす！！   CSVファイルを読み込む関数「fgetcsv」 PHPでは、CSVファイルを読み込んで配列の形にしてくれる「fgetcsv関数」という関数があります。 fgetcsv関数を使うためには、まず対象のCSVファイルを開いておく必要があります。   ファイルを開く「fopen」 CSVファイルを開くには、fopen関数を使います。 $file_handler = fopen("読み込むCSVファイルのパス", "r"); fopen関数の戻り値で、読み込んだファイルを管理している名前（ファイルハンドル）を取得します。 fopen関数の2つ目のパラメータはファイルにアクセスする形式、つまり開いたファイルの書き込みを可能にするかどうかなどのファイルをアクセスする状態を設定します。 “r“は読み取り専用、つまり書き込みしない状態でファイルを開きます。 ※もし、対象ファイルが存在しなかったりファイルのアクセス権がない場合には、fopenは失敗しwarningを発行してFALSEを戻り値として返します。   CSVファイルを1行ずつ配列で読み込む「fgetcsv」 ファイルハンドルが取得できたら、fgetcsv関数でCSVファイルを1行ずつ読み込みます。 $data = fgetcsv($file_handler);   読み込まれた1行分のデータを項目（データ列）ごとに配列として戻り値で取得します。 たとえば下記のようなCSVファイルなら、1回目にfgetcsv関数を呼び出したときは、1行目のデータである「名前」「年齢」「血液型」の文字列が配列に代入されます。 名前,年齢,血液型 太郎,21,O ・ ・ ・   実際に書いてみよう では実際にプログラムを書いてみましょう。 事前に、以下のように書いた「test.csv」ファイルを作成しておきます。 名前,年齢,血液型 太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B   それでは、プログラムを書いてみましょう。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("./test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 読み込んだ結果を表示します。 var_dump($data); } // test.csvを閉じます。 fclose($f); ?> 簡単にソースコードの説明をします。 最初に読み取り専用でtest.csvファイルを開き、while文で1行ずつファイルを読み込みます。 読み込んだ結果の配列を、var_dump関数でCSVファイル1行分のデータを表示しています。   以下、実行結果です。 1行ずつ読み込まれて、配列の形になっているのがわかります。   まとめ CSVファイルを読み込むときは、まずfopen関数でファイルを開きます。 そして、fgetcsv関数を使って1行ずつ配列にデータを読み込みます。   タブ文字で区切られたファイル 大石ゆかり 田島メンター、教えてもらった方法でデータをPHPで読み込もうとしたんですがうまくいきません・・・ 田島悠介 それは、データの区切り文字が違うからだよ。 CSVはカンマ区切りだけど、別の種類でタブ区切りのファイル形式が使われることがあるんだ。 大石ゆかり そうなんですね。よく見るとファイルの拡張子が.tsvになっていました。 田島悠介 そうだね。タブ区切りのファイルはtxtやtsvといった拡張子が使われるね。 タブ区切りのファイルを読み取るにはさっきと同じfgetcsv関数が使えるけど、パラメータを指定する必要があるよ。 大石ゆかり タブ区切りのファイルでも読み込めるんですね。 PHPで読み込む方法を教えてください！ fgetcsv関数でタブ区切りのファイルを読み込む fgetcsv関数でタブ区切りのファイルを読み込むには、3つ目のパラメータseparatorで区切り文字を指定します。 $data = fgetcsv($f, 0, "t") 今回はタブ区切りのファイルを読み込みたいので、区切りとしてタブ文字「t」を指定します。 ※2つ目のパラメータはlengthで、分割しない1行の最大文字数（改行文字なども含む）を指定します。0を指定するか省略すると、最大行長は制限されません。 (PHP 5.1.0以降)   まとめ タブ区切りのファイルをfgetcsv関数で読み込むときは、3つ目のパラメータでタブ文字 “t” を指定します。   [PR] フロントエンドで副業する学習方法を動画で公開中空行がある場合 大石ゆかり CSVファイルを読み込んだら、値が空の配列が混じっていました。 田島悠介 それは読み込んだCSVに空の行が入っていたからなんだ。 1行ずつ繰り返すループの中で、空行かどうか判定する式を追加するだけで解決できるよ。 CSVファイルの読み込み時に空行の判定をする CSVファイルに空の行が含まれている場合、PHPの条件式で判定を行うコードを追加すれば、余分な空っぽの値が配列に入るのを防げます。 配列の1行分の要素すべてが空かどうか、配列の要素を文字列としてつなげて判定します。 1行分の配列の要素を文字列として結合するのに、implode関数を使います。   空行判定のコード例 配列に値があるかどうかで空行の判定をしています。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 1行分の要素すべてを文字列として結合しても空ではない、つまり空行でなければ出力します。 if(implode($data) != null){
PHP

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのbody内における読み込み処理(onload)について現役エンジニアが解説【初心者向け】