TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript Railsで特定のページのみJavaScriptを読み込む方法を現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

Railsで特定のページのみJavaScriptを読み込む方法を現役エンジニアが解説【初心者向け】

初心者向けにRailsで特定のページのみJavaScriptを読み込む方法について現役エンジニアが解説しています。自動で読み込まれるJavaScriptファイルの自動読み込みを無効にし、個別ページで読み込む方法を解説します。

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

Railsで特定のページのみJavaScriptを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

Railsで特定のページのみJavaScriptを読み込む方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

RailsでJavaScriptを読み込む方法

RailsでJavaScriptファイルを読み込ませたいときは、railsプロジェクトのフォルダの配下にある対象のjsファイルを置くことで、自動で読み込めます。

app/assets/javascript/

これは、Railsの標準機能の一つであるAsset Pipeline（複数のJavaScriptやCSSのファイルを一つのファイルに統合・圧縮し読み込みを高速に行えるようにする機能）がデフォルトで有効になっているためです。

結果として、Railsは１つのファイルをすべてのページに適用するという形をとっているため、特定のJavaScriptだけ読み込ませるという動作を行いたいときは邪魔になります。

 

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

特定のページのみJavaScriptを読み込む方法

まずは、Asset Pipelineの機能を無効にしましょう。

そして、必要な操作を見ていきます。

 

自動読み込みの無効

無効にするためには、app/assets/javascript/ の配下にあるapplication.jsを編集しましょう。

application.jsはapp/assets/javascript/配下においてあるjsファイルを管理するファイルであり、自動読み込みの対象を設定できるjsになります。

自動読み込みを無効にするには、application.jsの中に記載してある下記の一文を削除することで、自動読み込みを停止させられます。

//= require_tree .

 

production環境で特定のJavaScriptファイルのみ読み込む

Asset Pipelineでの自動読み込みを無効にした場合は、手動でのプリコンパイルが必要です。

これは、読み込みの設定を行うためにconfig/initializers/配下にある assets.rbを編集します。

以下の一文を追加することでプリコンパイル対象を指定可能です。

Rails.application.config.assets.precompile += %w( *.js )

サービスを再起動することで、指定した.js拡張子のファイルをプリコンパイルできます。

 

個別ページでの読み込み

個別ページで特定のjsファイルを読み込むためにはjavascript_include_tagを使用します。

対象のviewファイルのheadなどに下記のように記述することで、任意のファイルを読み込むことが可能です。

<%= javascript_include_tag "hoge_fuga.js" %>

。

まとめ

普段は特に意識せずに使用できるJavaScriptファイルであるものの、開発の縛りなどにより１ページにしか読み込ませたくないなどの状態が発生するときがあります。

読み込みの切替方法などをしっかり覚えておきましょう。

執筆してくれたメンター

水野大輝（みずのたいき）

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。

現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

Railsで特定のページのみJavaScriptを読み込む方法がよく分かったので良かったです！

田島悠介

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

大石ゆかり

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

 

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptのFormDataオブジェクトの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのFormDataオブジェクトの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、...
JavaScript

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

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

JavaScriptでフォーカス移動する方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォーカス移動する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向...
JavaScript

jQueryでtoggleメソッドを使って要素の表示・非表示を切り替える方法

JavaScriptのライブラリであるjQueryでtoggleメソッドを使って要素の表示・非表示を切り替える方法を説明します。 例えば、Webサイトでヘ...
JavaScript

JavaScriptで別のページにジャンプする方法を現役エンジニアが解説【初心者向け】

JavaScriptで別のページにジャンプする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptのDocumentインターフェースとidプロパティについて現役エンジニアが解説【初心者向け

JavaScriptのDocumentインターフェースとidプロパティについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向...
JavaScript

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

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

PHPでCSVファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 fgetcsv関数を使ってCSVファイルを読み込めば、表計算ソフトなどからPHPにデータを取り込めます。 たとえば、Excelで作った商品リストをCSVファイルで保存し、PHPで取り込めばショッピングサイトのデータとして活用できますし、Googleスプレッドシートで作成したタスクリストをCSVにしてPHPで読み込めばタスクの共有ができるアプリケーションが作成できます。 このように、他のアプリで作ったCSVファイルのデータ活用するために覚えておきたい知識なので、参考にしてみてください。   目次RailsでJavaScriptを読み込む方法特定のページのみJavaScriptを読み込む方法まとめ執筆してくれたメンター   そもそも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

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

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次RailsでJavaScriptを読み込む方法特定のページのみJavaScriptを読み込む方法まとめ執筆してくれたメンター そもそも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

require文との違いも！PHPでinclude文を使う方法【初心者向け】現役エンジニアが解説

PHPで書くinclude文の書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 外部ファイルを読み込む際は、require文も使ったりしますが、require文との違いについても説明します。 初心者でも簡単に書けるので、実際にソースコードを書いて覚えていきましょう。 目次RailsでJavaScriptを読み込む方法特定のページのみJavaScriptを読み込む方法まとめ執筆してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。 includeとは include文は、外部ファイルを読み込んで実行する際に利用します。 1つのファイルにプログラムを書いていると膨大な行数になり、ソースコードが読みづらくなったりバグが発見しづらくなったりします。 そのため、機能や用途ごとにファイルを分割して記述することが求められます。 require文との違い 外部ファイルを読み込む文として、include文の他にrequire文があります。 両者とも外部ファイルを読み込み実行するまでは同じですが、異なる点もあります。 読み込むファイルがなかったりファイルの指定を間違えた場合に、include文は警告を出してそのままプログラムを実行します。 include文に対し、require文はエラーを出力してプログラムが停止します。   大石ゆかり 田島メンター！includeとrequireの違いはわかったんですが、どういう時に分けて使えばいいのかわかりません！ 田島悠介 重要なプログラムファイルが読み込めなかった場合、停止した方がいいのでrequireがいいよね。includeはhtmlファイルとかを読み込んでページの特定の位置に差し込むとき何かが良いね。 大石ゆかり なるほど！includeでHTMLで作ったメニューやお知らせを読み込めば一括で管理できそうですね。 田島悠介 そうだね。では、さっそく書いてみよう！   [PR] フロントエンドで副業する学習方法を動画で公開中include文の書き方 基本の書き方 ファイルのパスは、指定したファイルの位置（ディレクトリ）を示す値です。 include文は次のように、includeの後ろにファイルのパスを指定します。 ファイルのパスは、指定したファイルの位置（ディレクトリ）を示す値です。 代表的には次の2種類の書き方があります。 ()で囲まない方法 include "ファイルのパス"; “ファイルのパス”で指定したファイルをincludeで読み込んでいます。   ()で囲む方法 include("ファイルのパス"); (“ファイルのパス”)で指定したファイルをincludeで読み込んでいます。   異なるディレクトリの場合 異なるディレクトリにファイルがある場合は、呼び出すファイルから、読み込むファイルへ正しくパスの指定を行う必要があります。 実行ファイル include.phpが実行ファイルです。 実行したいinclude.phpファイルがuserディレクトリにある場合を示しています。 include.phpのファイル位置を示す内容がパスです。 /home/user/include.php 読み込むファイル include.phpと同じuserディレクトリの中にあるlibディレクトリの中にinclude2.phpが存在します。 /home/user/lib/include2.php 読み込む処理 include.phpから、include2.phpと同じuserディレクトリ内のlibディレクトリ以降を指定することで、include2.phpを読み込むことが可能です。 include "lib/include2.php";   include_once文 includeと同様の処理ですが、１回しか処理を読み込まないinclude_onceがあります。 include_onceでは、ファイルが読み込み済みかをチェックし、読み込み済みの場合は再度ファイルを読み込みません。 include_onceを利用する場合は、処理時に同じファイルが複数回読み込まれ、関数の再定義や変数の再代入の可能性を回避する目的で利用します。   実際に書いてみよう それでは実際にプログラムを書いてみましょう。 「include.php」と「include2.php」といった2つのファイルを用意します。 「include.php」にinclude文を書いて、「include2.php」ファイルを読み込みます。 サンプルコード（include.php） <?php include "./testlib/include2.php"; run(); 解説（include.php） <?phpでは、PHPプログラムが開始されることを意味します。 require(“./testlib/include2.php”);では、include.phpからみた時に、同じディレクトリにあるtestlibディレクトリの中にある、include2.phpを読み込む指定をしています。 run();では、include2.phpにあるrun関数を実行しています。   サンプルコード（include2.php） <?php print("オンラインプログラミングスクールはn"); function run(){ print("テックアカデミーがおすすめ！"); } 解説（include2.php） <?phpでは、PHPプログラムが開始されることを意味します。 print(“オンラインプログラミングスクールはn”);では、オンラインプログラミングスクールはという文字列と、改行であるnを準備して、print関数で表示しています。 function run(){では、run関数を宣言しています。 print(“テックアカデミーがおすすめ！”);では、テックアカデミーがおすすめ！という文字列をprint関数で表示しています。 }では、run関数の宣言を終了しています。   表示結果   まとめ 今回はinclude文を紹介しました。 require文との違い include文の書き方 同一ディレクトリと異なるディレクトリによるファイルパスの指定方法 それぞれの役割と基本的な使用方法を理解すると、PHPの理解につながります。 includeと似ているrequireについては、PHPのrequire文の使い方を参考にしてみてください。   大石ゆかり 上の例では、読み込んだファイルの関数も、ちゃんと使うことが出来ていますね。 田島悠介 そうだね。 大石ゆかり あ！今気がついたんですけど、外部のサイトのファイルも読み込むことが出来るんでしょうか？ 田島悠介 セキュリティ上好ましくないけど、php.iniって設定ファイルのallow_url_includeって項目をONにすれば大丈夫だよ。 この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。   PHPを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
PHP

基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。 今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次RailsでJavaScriptを読み込む方法特定のページのみJavaScriptを読み込む方法まとめ執筆してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLにCSSを適用（読み込み）させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSの読み込み方（適用方法） HTMLでCSSを読み込むためには、次の2つの方法があります。 外部CSSファイルをHTMLから読み込む方法 HTMLファイル内に直接CSSを記述する方法   1.外部CSSファイルを読み込む方法 外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。 事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。 <link rel="stylesheet" href="sample.css"> HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。   また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイルの<head>タグ内に記述します。 以下のようにHTMLファイルに記述しましょう。 HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p>ここにHTMLの文章などが入ります</p> </body> </html> ここで、CSSファイル読み込み処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。 上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。   また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、CSSファイル読み込み処理は以下のように記述します。 <link rel="stylesheet" href="css/sample.css">   2.HTMLファイル内に直接CSSを記述する方法 HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。 まず、以下のようにCSS定義を<style>タグの中に記述します。 <style type="text/css"> p { color : red; } </style>   用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。 HTML <html> <head> <meta charset="UTF-8"> <style type="text/css">p { color
HTML

PHPでファイルの書き込みを行う方法｜file_puts_contents関数を理解する！【初心者向け】

文字をファイルに保存するにはテキストエディタを使いますが、この記事ではPHPのプログラムからファイルへ書き込む方法を扱います。 この記事では関数1つでファイルへの書き込みができるfile_put_contents関数と、ファイルの書き込み処理を3つに分けたfopen・fwrite・fclose関数について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPのデータはデータベースだけでなく、テキストファイルに書き込むこともできるので、ぜひ書き方を覚えておきましょう。 目次RailsでJavaScriptを読み込む方法特定のページのみJavaScriptを読み込む方法まとめ執筆してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   file_puts_contents関数とは 本来、ファイルの書き込み操作をプログラムから行うには、ファイルを開く・書き込む・閉じるという一連の操作が必要です。 このファイルへの書き込みの3つの処理を一度にしてくれるのがfile_puts_contents関数です。 ファイル名の文字列と書き込みたい内容をfile_puts_contents関数に渡すだけで、必要な処理を行ってくれます。 file_puts_contents関数を使うと、存在しないファイル名を指定した場合は新規作成され、すでに存在するファイル名を指定した場合は上書き保存されます。 また同時に書き込むことがないよう、処理中にファイルをロックすることも可能です。   ファイル書き込みの書き方 自動でファイルの書き込み【file_put_contents関数】 通常のファイル操作で必要なファイルを開く・書き込み・閉じる処理をすべて自動で行ってくれます。 書き込んだバイト数 = file_put_contents(ファイル名, 書き込む内容); 書き込みたいファイル名と、ファイルに書き込む内容をfile_puts_contents関数に渡します。 戻り値は、書き込みが失敗した場合はfalse、成功した場合は書き込まれたバイト数を返します。 ※バイト(byte)とは256通りの情報を扱える単位で、ファイルへの書き込みの最小単位です。半角英数は1バイトで表現できますが、漢字やひらがなの全角文字は2から3バイトで表現されます。 ※3つめのパラメータにFILE_APPENDフラグを指定してファイルの末尾から追記したり、LOCK_EXフラグで他のプログラムなどから同じファイルを開かれて同時に書き込まれないようにできます。   手動でファイルの書き込み【fopen・fwrite・fclose関数】 ファイルを開く・書き込む・閉じる処理を分けて行うには、それぞれfopen・fwrite・fclose関数を使います。 1.ファイルを開く ファイルポインタ = fopen(ファイル名, モード); fopen関数で指定したファイル名を開きます。 モードは、開いたファイルをアクセスする形式を指定します。 主なモードには以下の種類があります。 モード 説明 “r” 読み込み専用で開きます。書き込みはできません。 “w” 書き込み専用で開きます。既存ファイルの中身は消去されます。 “r+” 読み書き両用で開きます。ファイルの先頭から処理されます。 “a” 追記用で開きます。ファイルの最後から書き込まれます。 戻り値のファイルポインタとは、ファイルを処理するときの管理用のもので開いたファイルを特定し、次に読み書きされるファイル内の位置を記憶しています。 ※ファイルポインタの位置を設定するには、ファイルを開いたときのモードで指定する（たとえば”w”なら最初、”a”なら最後など）か、任意の位置に移動させるfseek関数などを使って行います。 ※ファイルを読み書きするとファイルポインタの位置が移動します。   2.ファイルへ書き込む 書き込んだバイト数 = fwrite(ファイルポインタ, 書き込む内容); すでに開かれているファイルと処理する位置をファイルポインタで指定し、書き込む内容を関数に渡します。 戻り値は書き込みが成功した場合は書き込まれたバイト数、失敗した場合はfalseを返します。   3.ファイルを閉じる fclose(ファイルポインタ); ファイルの処理が終了したら、fclose関数に処理が終わったファイルポインタを渡してファイルを閉じます。   [PR] フロントエンドで副業する学習方法を動画で公開中実際に書いてみよう file_put_contents <?php define("TESTFILE","./TEST.txt"); $s = "上書き"; print_r("file_put_tcontents関数n"); file_put_contents(TESTFILE,$s); var_dump(file_get_contents(TESTFILE)); ?>   実行結果 $ php 01.php file_put_tcontents関数 string(9) "上書き"   fwrite <?php define("TESTFILE","./TEST.txt"); $fh = fopen(TESTFILE, "w"); echo "fwrite関数n"; fwrite($fh,"書き込み"); fclose($fh); var_dump(file_get_contents(TESTFILE)); ?>   実行結果 $ php fwrite.php fwrite関数 string(12) "書き込み"   おわりに ファイルの書き込みを実行できるようになると、プログラムを終了してもデータを保持できます。 基本的ですが、とても重宝する機能なのでしっかりとマスターしましょう。   大石ゆかり file_put_contents関数は、1行でファイルに書き込めていますね。 田島悠介 fwriteだと、ファイルを開くモードを指定してファイルを開き、ファイルハンドルを取得してから書き込まなければならないんだよ。 大石ゆかり ちょっと面倒ですね。 田島悠介 そうだね。ファイルに書き込むのは簡単だけど、PHPの場合、Webで複数人で使用する場合が多いよね。そうなるとファイルロックが必要になるんだよ。そこで違ってきたりするんだよね。   PHPを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
PHP

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。 linkタグとscriptタグは、リッチなサイトを作りたいときに必要になるタグなので、ぜひ参考にしてください。   目次 linkタグとscriptタグ linkタグの使い方 scriptタグ   【動画での解説はこちら！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   linkタグとscriptタグ Webサイトは、htmlとcssで書かれた多くのページによって構成されています。 また、より動きのあるサイトを作るには、それに加えてJavaScriptというプログラミング言語を使ってページを作ります。   一つのプログラムファイルにhtml・css・JavaScriptを記述するのは不可能ではありません。 しかし、プログラムファイルのコードが長くなり、どこに何が書かれているかがわかりづらくなってしまいます。 つまり、プログラムファイルに対するコードの可読性が失われるため、一つのプログラムファイルに記述するのはおすすめできません。   さらに、htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるといったそれぞれの異なる役割を持ちます。 多くのページでサイトが構成される場合、htmlとcssを分割すれば、cssの特定箇所を修正するだけでサイトページを変更できます。 例）サイトのイメージカラーを変えたとき、CSSのカラーを一括すると、サイトの全ページのイメージカラーを変更できる こうした理由からWeb製作の現場では、html・css・JavaScriptのファイルはそれぞれ別ファイルに分けて作ることが一般的です。   その別々に編集したファイルを紐付けて、一つのページとしてまとめるためにlinkタグとscriptタグがあります。   linkタグ linkタグは、他のファイルをリンクしてhtmlファイルに読み込ませます。 rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。 （※スタイルシート(stylesheet)やファビコン(favicon)など） scriptタグ scriptタグは、JavaScriptを読み込むときに使います。   [PR] フロントエンドで副業する学習方法を動画で公開中linkタグの使い方 ここからは具体的な使い方について例をみていきます。 まず、htmlファイルとcssファイルの2種類を用意します。 htmlファイルには<body>の部分に<h1>タグで「linkタグの使い方を学ぼう」と入力してみます。 cssのファイルには下記のように記述してみましょう。 ※「font-size: 60px;」は<h1>で書かれた文字のサイズが60px、「color: red;」は<h1>で書かれた文字色が赤 という意味です。 h1  { font-size: 60px;  color: red; } htmlファイルをブラウザで読み込んでみると、<h1>で囲んだ文字が表示されました。 htmlファイルとcssファイルが繋がっていないため、この状態ではまだcssファイルで指定した文字の大きさや色は適用されません。   そこでlinkタグを使って、cssで書いた内容をhtmlファイルに繋げましょう。 rel属性でリンクタイプを指定し、type属性によってどのようなテキストであるか、またhref属性でリンク先のURLを指定します。 linkタグは<head>タグ内に記述しましょう。 <link rel="stylesheet" type="text/css" href="style.css"> すると、<link>タグで指定したファイル（”style.css”）が読み込まれ、文字の大きさと色が変わりました！   続いて、ファビコンの例も見てみましょう。 ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。   実際のWebサイトでは下のように設定されています。   スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。   大石ゆかり CSSは外部ファイルとして読み込んだほうがいいんですか？ 田島悠介 たくさんのページで共通して使う場合は、もちろんHTMLと分けたほうがソースコードも見やすくなるからね。 大石ゆかり タグに直接CSSを適用したら、どちらが優先されるんでしたっけ？ 田島悠介 タグに直接適用したCSSの方が優先されるよ。 大石ゆかり OK！linkタグ覚えました！   scriptタグ 続いてscriptタグです。 Webページには2種類のページがあります。 １つ目は、html・cssだけで書かれた文書のようなページ（静的なページといいます）です。 2つ目は、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすと、それに伴って何か変化が起こる動的なページです。 動的なページには、JavaScriptなどのプログラム言語が使われており、演算機能やループ処理など様々な機能が利用できます。 このJavaScriptを記述する際に利用するタグが、scriptタグです。   scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。 <script type="text/javascript">（JavaScriptのコード）</script> ここでは、JavaScriptで「『JavaScriptでループ処理』という文を1から100までループさせる」というコードを書いてみます。 <script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。 JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。 このhtmlファイルを読み込むと、ブラウザ上で<script>タグ内で書いた処理が実行されました。   今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせて、htmlファイルに読み込ませてみましょう。 htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptのコードをjavascriptのファイルに記述します。（保存する際には「.js」という拡張子を使いましょう） type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル（ここでは”javascript.js”）を読み込みます。 「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。 <script type="text/javascript" src="javascript.js"></script> htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。   このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。 <link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や場所はどこなのかといった情報を指定します。 外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますので、ぜひ覚えておきましょう。   今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。   執筆してくれたメンター メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり HTMLは文書構造、CSSはデザイン・装飾。JavaScriptは何でしたっけ？ 田島悠介 JavaScriptはブラウザ上で動作する、HTMLファイルの中に書けるプログラミング言語で、Webサイトと親和性が高いんだよ。 大石ゆかり プログラミング言語って何だか難しそう。 田島悠介 コツをつかめば簡単だよ。習い事と同じで、教わればあっと言う間に出来るようになるよ。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript Railsで特定のページのみJavaScriptを読み込む方法を現役エンジニアが解説【初心者向け】