TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby Railsのimage_tagの使い方を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
Ruby

Railsのimage_tagの使い方を現役エンジニアが解説【初心者向け】

初心者向けにRailsのimage_tagの使い方について現役エンジニアが解説しています。image_tagを使うとRailsで画像を表示させることが出来ます。画像に付随するidやclassやalt属性なども、コマンド記法で書くことにより設定することが出来ます。

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

Railsのimage_tagの使い方について解説します。

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

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

 

田島悠介

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

大石ゆかり

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

田島悠介

Railsのimage_tagの使い方について詳しく説明していくね！

大石ゆかり

お願いします！

 

image_tagとは

image_tagとはHTMLの<img>タグを生成するためのメソッドになります。

image_tagの使い方

image_tagは画像ファイルへのパスと、必要なオプションを指定して使用します。

 

image_tag "rails_icon.png", alt: "Rails icon", id: "pic1", class: "image"

 

画像ファイルの配置箇所は一般的に2箇所です。app/assets/images配下と public配下です。

app/assets/images配下の場合は先ほどの例のように書けば良いのですが、public配下の画像を表示する場合には、画像ファイルのパスを次のように / から記載する必要があります。

public配下の画像を表示する場合は / から始める。

image_tag "/rails_icon.png", alt: "Rails icon", id: "pic1", class: "image"

 

[PR] 未経験からWebエンジニアを目指す方法とは

image_tagで画像を表示してみよう

今回は.erbファイルに書いてみましょう。まずは好きな画像をapp/assets/imagesとpublic配下に格納してください。

その後、erbファイルに次のように記載しましょう。画像ファイル名はご自分の配置したものに、widthは好きなサイズに変更してください。

 

<div>
  <%# app/assets/images %>
  <%= image_tag "rails_icon.png", alt: "Rails icon", id: "assets", class: "image", width: "300px" %>
</div>
<div>
  <%# public %>
  <%= image_tag "/rails_icon.png", alt: "Rails icon", id: "public", class: "image", width: "300px" %>
</div>

 

記載したらrails serverを実行して、上記の内容が表示されるページにアクセスしてみましょう。次のように、画像が2枚表示されていれば成功です。

railsのimage_tagの使い方

app/assets/imagesに配置したファイルとpublicに配置したファイル、どのようなHTMLになっているのか見てみましょう。

Chromeの場合、Windowsなら[F12]キー、Macなら[Command]+[Shift]+[I]キーでDeveloper Toolsを開くことができます。

Elementsタブで画像部分の<img>タグを見てみると、ファイルパスとファイル名が違うことがわかりますね。

railsのimage_tagのソースコード

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。

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

記事を検索

関連するキーワード

関連する記事

実際に書いて説明！Rubyの値渡しとは【初心者向け】

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

Rubyのkind_of?メソッドの使い方を現役エンジニアが解説【初心者向け】

Rubyのkind_of?メソッドの使い方について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか...
Ruby

Rubyのto_iメソッドの使い方を現役エンジニアが解説【初心者向け】

Rubyのto_iメソッドの使い方について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事...
Ruby

Rubyで配列の要素の数値を計算する方法を現役エンジニアが解説【初心者向け】

Rubyで配列の要素の数値を計算する方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説し...
Ruby

Ruby on Railsでinjectを使う方法を現役エンジニアが解説【初心者向け】

Ruby on Railsでinjectを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
Ruby

Ruby on RailsでJavaScript/CSSファイルを読み込む方法を現役エンジニアが解説【初心者向

Ruby on RailsでJavaScript/CSSファイルを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用し...
Ruby

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

今さら聞けない！Rubyとは【初心者向け】｜現役エンジニアが解説

最近よく耳にする「Ruby」とは一体どのような言語なのでしょうか？ 今回はその「Ruby」の正体を解説していきたいと思います。Web系の企業でもRubyを使っているところは多いので、これからRubyを勉強してみたいという人はぜひ参考にしてみてください。 終わりには、学習方法もいくつか紹介しているので、自分の好きなやり方で勉強してみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     田島悠介 ここではプログラミング言語のひとつ、Rubyについて解説していくよ。 大石ゆかり 田島メンター！！Rubyはどんな用途で使われる言語なんですか〜？ 田島悠介 一番よく使われているのはWebアプリケーションかな。動的なサイトを作るのにとても役立つんだ。有名なクックパッドなどもRubyを使用して作られているよ。 大石ゆかり なるほど。是非覚えてみたいです！   目次 Rubyとは Rubyでできること オブジェクト指向とは Rubyの動向 Rubyが日本で人気な理由 Rubyで開発が向いているサービス Rubyのインストール Rubyの書き方 Rubyの基本構文 Rubyの学習方法 Rubyの学習時のポイント   Rubyとは Rubyとは、まつもとゆきひろ氏により開発されたオブジェクト指向スクリプト言語です。 CやJavaといったコンパイラ言語は、プログラムを実行するためにはコンパイルという手続き（人間が書いたソースコードを機械命令に変換）を介して初めて実行ができます。 しかし、スクリプト言語はこう言った手続きが一切不要で、そのまま実行することができるため、コンパイラ言語に比べてプログラミングを手軽に行うことができます。   また、オブジェクト指向言語なので、すべてのデータがオブジェクトとして表現されています。 つまり継承などといったオブジェクト指向ならではの機能を使うことができます。 継承をすることで書くコードの量が少なくて済み、読みやすく作業効率も上がるでしょう。   Rubyの名前の由来ですが、宝石の「ルビー」から来ています。 Perl(パール)という名前のプログラミング言語がありますが、宝石の真珠(パール)と読み方が同じという点で宝石の名前を取ったようです。 なぜRuby(ルビー)なのかというと、当時のまつもと氏の会社の同僚が7月生まれで、7月の誕生石がルビーだったからです。 Ruby/Rails開発のためのおすすめエディタ/IDEも紹介しているので、合わせてご覧ください。   [PR] 未経験からWebエンジニアを目指す方法とはRubyでできること Rubyを使うメリットとして一番大きいのは、Ruby on RailsというWebアプリケーションフレームワークを使うことができるということです。 Ruby on Railsを使うと、WebサイトやWebベースの業務システムを効率良く開発できると言われています。 Rubyを使っている企業は多くあり、そのほとんどがRuby on Railsを使っているのでエンジニアとして活躍することも可能でしょう。   オブジェクト指向とは 従来のプログラミング言語では困難になってきた、大規模なソフトウェアの開発をより効率よく開発を行うために考え出された 概念です。 一般的に、以下の特徴を持っています。 カプセル化 継承 ポリモーフィズム（多態性） カプセル化 カプセル化とは指定の方法以外で外部からデータにアクセスできないようにすることです。 想定外のアクセスにより、本来書き換えてはならないデータを誤って書き換えることがなくなります。 たとえば、ゲームのセーブデータなどは簡単に書き換えられてしまう訳にはいきません。 そういったデータを書き換えられないようにするためにもカプセル化という機能は重要です。   継承 継承とは、既にある機能を受け継ぎ、効率よくソフトウェア開発を行うための機能です。 例えば、既にあるプログラムを一部改修を加え、新しく作り直したいことがあります。 そうした際に、一から作り直すのはかなり面倒です。 そこで、継承を利用することで既存の機能をそのまま再利用しつつ、新たな機能を定義することができるのです。   ポリモーフィズム（多態性） ポリモーフィズム（多態性）とは、同じ名前の機能（プログラム）を作成でき、それらが独立して存在できることです。 例えば、スマートフォンでは動画や音楽が再生できます。 この動画や音楽を再生するプログラムをPlayという名前でそれぞれ作ったとします。 この時、ポリモーフィズムの概念がないプログラミング言語(C言語など)では、同じプログラムが二重に定義されていますとエラーが出てきます。 ですが、RubyやC++などでは音楽ファイルなら音楽を再生し、動画ファイルであれば動画を再生することができます。 このように同じ名前のプログラムを複数定義でき、それぞれのデータに合わせて使うことができることをポリモーフィズム（多態性）と言います。   Rubyの動向 Rubyは現在も積極的に開発が進められています。 2020/5/23現在の最新の安定版は2.7.1です。また古いバージョンである2.4は公式サポートが終了しました。 最新の2.7系では多くの機能強化やパフォーマンスの改善が行われました。 詳しくは2.7.0のリリースノートを参考にしてください。 Ruby 2.7.0 リリース   フレームワークであるRuby on Railsも継続して開発が行われています。 2020/5/23現在の最新バージョンは6.0.3.1です。 こちらも最新の6.0系では、新しいフレームワークの導入やマルチデータベース対応など、多くの機能追加が行われています。 詳しくは6.0のリリースノートを参考にしてください Rails 6.0 (英語)   なお、毎年恒例のイベントであるRubyKaigi（ルビー会議）ですが、2020年のRubyKaigi2020はコロナウィルス感染症の影響で延期となっています。 ただし中止ではなく延期というのは嬉しいですね。 詳しくはリリース記事を参考にしてください。 新型コロナウィルス感染症（COVID-19）に関するRubyKaigi2020の対応について   Rubyが日本で人気な理由 国内のWebサービスとしては、クックパッドや食べログなどがRubyを利用していることは有名です。 では、なぜRubyが使われているのでしょうか？   一つは、Rubyの開発効率の高さです。 Rubyは「Enjoy for Programing!」を掲げており、プログラマーにとってコーディングしやすいプログラミング言語となっています。 直感的に、実装したい機能をコーディングできるためストレスフリーで開発を行うことができます。   そして、フレームワーク（Ruby on Rails）の存在です。 「Ruby on Rails」とはRubyのWebアプリケーションフレームワークであり、数回のコマンド入力を行うだけで、Webサイトが自動生成できるRuby on Railsは大幅な開発工程の短縮を実現しました。 このRuby on Railsの登場により、開発コスト削減を図る企業などでの利用が増加しました。 また、スタートアップ企業などがWebサービスを立ち上げるために、Ruby on Rails を利用していることも多いです。   また、Rubyは日本で開発されたプログラミング言語であることも利用されている理由の一つです。 C++やJavaといったプログラミング言語の最新情報は英語で書かれていることが多く、それら最新技術を利用するには、一定の英語スキルが必要になります。 また、有用な参考書なども英語で書かれていることが多く、それらの翻訳されたものは、誤訳されたものもあります。 しかし、Rubyは開発者が日本人ということもあり、日本語で書かれた有用な参考書が数多く手に入ります。 そのため、最新情報をいち早く活用することもできるのです。   Rubyでの開発が向いているサービス Rubyは前述の通りRailsと組み合わせてRuby on Railsとして開発を行うことが一般的です。 Ruby on Railsは以下のようなサービスの開発に向いています。   スタートアップ企業のWebサービス Ruby on Railsは開発効率が高いため、少人数での短期開発に向いています。 スタートアップ企業のWebサービスは短期間での継続的なローンチが求められます。 Ruby on Railsはいわゆるアジャイルと呼ばれる開発手法にも適しており、少人数でサービスの基本機能を立ち上げ、ユーザーのフィードバックを得ながら継続的にサービスを改善していくことに適しています。   WebAPI経由でのサービス展開 WebAPIとはプログラムから利用するインターネット上のサービスです。 例えばGoogle MapやTwitterなど、多くのサービスがWebAPIを提供しています。 WebAPIのメリットは既存のサービスを組み合わせて新たなサービスを生み出せることです。 例えば気象データを提供するWebAPIをECサイトのサービスと組み合わせることで、他にはない特徴的なサービスを提供できるかもしれません。 Ruby on RailsにはAPIモードという構成があり、アプリケーションを構築する際にAPIモードを選択することでWebAPIを効率よく開発することができます。   データベースと組み合わせた基幹系システム 意外かもしれませんが、Ruby on Railsは大量のデータ処理や、複雑な計算を行う企業の会計などの基幹系システムのサービス開発にも向いています。 Ruby on RailsはMVCと呼ばれる安定的なサーバアーキテクチャをベースとしています。 またデータベースとの連携についてもモデルクラスによるアクセスやコネクションプールなどに標準的に対応しています。 レガシーシステムを更新する際の選択肢として考えても良いでしょう。   Rubyのインストール Rubyでプログラムを書こうと思ったらまず、Rubyをインストールする必要があります。 手順としては、 Ruby のダウンロードページ からダウンロード(執筆時最新版Ruby2.7.1)。Windowsであれば、RubyInstallerというツールでのインストールも可能です。 ダウンロードしたファイルを実行し、インストール。 インストールが完了したら、ターミナルやコマンドプロンプトから「ruby -v」と入力し、バージョンを確認。 ruby 2.7.1などと表示されれば完了です。   田島悠介 RubyはWindowsとMacの両方で使用することができるよ。 大石ゆかり やっぱりそれぞれによって開発環境の構築の方法がだいぶ違うんですか？ 田島悠介 そうだね。また、インストールに必要なソフトがあったりと少し複雑なので、なるべく最新の情報を見てひとつずつ順番にやってみるのがいいと思うよ。公式のインストールガイドも参照しよう。   Rubyの書き方 Rubyのファイルは「.rb」という拡張子をつけることで保存されます。 実際にターミナル上にHello,world!を出力するプログラムを例に書き方を紹介したいと思います。 print("Hello,world!n") この一文だけで目的のプログラムを作ることができます。 他の言語では文末にセミコロンを打ちますが、Rubyではそれが必要ありません。 他のプログラミング言語を少しでも学習したことがある方は、Rubyがいかにシンプルであるかが分かるかと思います。 実際にRubyを使ってみたいという方は、開発環境の構築方法も合わせてご覧ください。   Rubyの基本構文 Rubyでよく使う基本構文についていくつかまとめて紹介していきます。 基礎的な内容になるので、Rubyとは何かよく分からないという方でも覚えておくと今後役に立つでしょう。 if文 if文は「◯◯の場合〜〜する、△△の場合〜〜する」といった条件分岐の処理を行うことができます。 「ログインできたらアカウント画面に、できなかったらエラー表示に」といった普段Webサイトを見ていると当たり前のように行なわれている処理が条件分岐なのです。 if ◯◯ then # ◯◯がtrueだった時の処理 else # ◯◯がfalseだった時の処理 end   for文 for文は、繰り返し処理をする際に使います。1+2+3+4+…のように手動で足していくのは面倒ですが、「1ずつ増えた数字を繰り返し足して、100まで繰り返す」といった宣言を行うことができるようになります。 for i
Ruby

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

Ruby on RailsでJavaScript/CSSファイルを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Ruby on RailsでJavaScript/CSSファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 RailsでJavaScript/CSSファイルを読み込む方法 読み込みエラーの原因と解決法   RailsでJavaScript/CSSファイルを読み込む方法 RailsでJacaScriptを読み込む場合を想定すると、Ruby on RailsにはもともとJacaScriptフォルダが存在しています。 Railsを読み込んだ際には、アプリ名の下にフォルダapp,bin,config,db,lib,log,public,test,tmp,vedorが自動作成されるでしょう。 appのフォルダの下には、config,images,javascripts,stylesheetsとさらに別のフォルダがあります。 JacaScriptフォルダの中に拡張子を「.js」としたファイルを作成し、記述によって読み込まれる仕組みです。   同様にcssを読み込ませたい場合は、stylesheetsフォルダの中に拡張子を「.scss」としてファイルを作成しましょう。 そのファイルに記述することで読み込まれるようになります。 Scssとはcssを記述しやすくしたもので、変数や入れ子構造が使えるなどcssと少し記述の仕方が変わる点に注意しましょう。 しかし、Railsではこのファイルにscssで記述をすることで、自動的にcssにコンパイルされます。   [PR] 未経験からWebエンジニアを目指す方法とは読み込みエラーの原因と解決法 エラーとなる原因は数多く考えられます。 JavaScriptファイルやCSSファイルの読み込みの際に発生するエラーとして多いのは、アセットのプリコンパイルができていない点です。 Railsには開発環境と本番環境があり、本番環境ではプリコンパイルをしましょう。 アセットパイプラインと呼ばれるフレームワークを使用して、JavaScriptやCSSのアセットを最小化し、素早く読み込まれるようにしていきます。 また、このフレームワークを使用してSCSSなどの高級言語をCSSに変換させたり、他の機能と連結できます。 JavaScriptファイルやCSSファイルを読み込ませる場合には、先程のconfigフォルダの下にあるinitializersフォルダの更に下にあるassets.rbを編集していきましょう。 (アプリ名/config/initializers/assets.rb) # Be sure to restart your server when you modify this file. # Version of your assets, change this if you want to expire all your assets. Rails.application.config.assets.version = '1.0' # Add additional assets to the asset load path. # Rails.application.config.assets.paths << Emoji.images_path # Add Yarn node_modules folder to the asset load path. Rails.application.config.assets.paths
Ruby

今さら聞けない！Ruby on Railsとは【初心者向け】

Webサービスを作りたいと思った人はRuby on Railsという言葉を一度は聞いたことがあるんじゃないでしょうか。 最近ではいろんなWeb系の企業が利用しているRuby on Railsですが、「Ruby on Rails」とは一体何なのか解説していきたいと思います。 他の言語を学ぶ際にも参考になる内容なので、プログラミングを始めたばかりの人はぜひ知っておきましょう。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   田島悠介 今回はRuby on Railsについて紹介しよう。 大石ゆかり 田島メンター！！Ruby on Railsというのは何をするものなんですか～？ 田島悠介 Ruby on Railsは、Webアプリケーションを作成するためのフレームワークだよ。アプリを作成するのに必要な機能や構造がひとつにまとまったもので、これは誰でも利用することができるんだ。 大石ゆかり なるほど、アプリケーションを作る骨組みということでしょうか？是非やってみたいです！   目次 Ruby on Railsとは フレームワークとは MVCモデルとは Ruby on Railsでできること Ruby on Railsの書き方 Ruby on Railsの学習方法   Ruby on Railsとは Ruby on RailsとはWebアプリケーションフレームワークです。 そもそもWebアプリケーションフレームワークとは、動的なウェブサイト、Webアプリケーション、Webサービスの開発をサポートするために設計されたアプリケーションフレームワークのことを言います。 フレームワークは日本語では「枠組み」というふうに言われますが、まさにその通りで、このRailsもプログラミング言語のRubyで使えるフレームワークなのです。 Railsの基本理念は「Don’t Repeat Yourself(DRY)」、「Convention over Configuration(CoC)」でそれぞれ「同じことは繰り返さない」、「設定より規約」という意味になります。   [PR] 未経験からWebエンジニアを目指す方法とはフレームワークとは そもそも「フレームワーク」とは何でしょう。 プログラミングの学習を進めていると、一度は目にしたことがあるのではないでしょうか。   フレームワークを使えば、開発者は必要最低限のプログラムを書くだけになり、開発者の負担を大きく減らしてくれます。 RubyでWebアプリを作成するときに毎回書かなければいけないような処理が存在します。Railsは、そのような凡庸的な処理を最初から備えていて、利用者はそれらを意識することなく開発に集中できます。   「フレームワーク」は、よく「ライブラリ」という言葉と混同されがちですが、ライブラリというのは特定の機能を提供し、プログラムの中でそれらを呼び出すことで動作するものです。 それに対して、フレームワークはアプリケーション全体の枠を提供し、開発者の作ったプログラムを読み込んで動作するので、覚えておきましょう。   MVCモデルとは Ruby on Railsは設計にMVCモデルを採用しています。 MVCとはModel（モデル）、View（ビュー）、Controller（コントローラー）の略称です。 メインの処理と、見た目を生成する処理を一箇所に書いてしまうと、コードが読みづらくなり、メンテナンス性が下がってしまいます。 そこで、メインの処理と、見た目を生成する処理と、それらを接続する処理を分けて書くというのがMVCの発想です。 分割することによってコードの再利用性を高めることもできます。   Ruby on Railsでできること これ単体では何もできません。 Rubyやhtmlなど、Webサービスを作る上での最低限のプログラムの知識を要します。 HTML,CSS,Rubyがわかっているとスムーズに始めることができますが、Railsを使ってWebアプリケーションを作りながら同時進行で勉強するのも一つの手だと思います。 最初でも書いたように、Railsは枠組みです。 面倒なフォルダ、ファイルの作成をコマンド一つですべて行うことができ、そのフォルダやファイルの内容を変更することで、作っていきます。   田島悠介 Railsの枠組みの中でHTML・CSS・Rubyなど各言語を使用してアプリケーションを作成していくんだ。 大石ゆかり それぞれの知識も必要ってことですね。 田島悠介 そうだね。あと、各ファイルがどのように配置され、どういう役割を果たしているかというのも少しずつ覚えていくといいよ。アプリケーションの作成とサーバー起動の方法も確認しておこう。   Ruby on Railsの書き方 アプリケーションの作成の仕方、サーバーの立ち上げ方について説明していきます。 これらはすべてターミナル上で行います。 railsコマンドを使って「app」という名前のアプリケーションを作成しましょう。 rails new app これをターミナルで打ち込むだけで必要なフォルダ、ファイルが作成されます。 作成されたらそのフォルダに移動しましょう。 rails server これを打ち込むと先ほど作ったアプリケーションにアクセスするためのサーバーが起動します。 Safariなどから表示されているサイトにアクセスすれば見ることができます。   Ruby on Railsの学習方法 最後にRuby on Railsの学習サイトと書籍をご紹介します。 学習サイト Ruby on Railsチュートリアル こちらのサイトはMichael Hartl（マイケル・ハートル）著、YassLab社が運営するチュートリアルです。 実際に公開できるWebアプリを作りながら学べるので、手を動かしながら学びたい人にぴったりです。 電子書籍版や実演動画を別途購入することも可能です。 Ruby on Railsチュートリアル   Ruby on Railsガイド こちらのサイトは上記のチュートリアルの副読本として読むことをオススメします。 チュートリアルで分からなかったことなどを重点的に読むと良いでしょう。 Ruby on Railsガイド   Progate Progateはブラウザ上で擬似プログラミングできる学習サイトです。 トピックごとにスライドが何枚か用意されています。スライドを読み終わると、そのスライドに沿った課題が出され、プログラミング初心者におすすめです。 ある程度プログラミング経験のある方にはまどろっこしく感じるかもしれません。 Progate   書籍 Ruby on Rails環境構築ガイド Ruby on
Ruby

RailsでJavaScriptが読み込まれない時の対処方法を現役エンジニアが解説【初心者向け】

RailsでJavaScriptが読み込まれない時の対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 RailsでJavaScriptが読み込まれない時の対処方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 RailsでJavaScriptを読み込む方法 JavaScriptが読み込まれない時の主な原因 JavaScriptが読み込まれない時の主な対処方法 まとめ   RailsでJavaScriptを読み込む方法 まず、普通にRailsをインストールしてアプリケーションを作成すれば、JavaScriptを読み込むことが出来るようになります。その為、あまりその仕組みを意識することはないと思います。 では、すこしその仕組み（設定場所）を確認してみたいと思います。 まず、「/app/views/application.html.erb」の”head”の位置に <%= javascript_include_tag 'application' %> と記載され、JavaScriptを自動的に読み込むように設定されています。上記の場合、「/app/javascripts/application.js」を読み込む設定です。「/app/javascripts/application.js」ないでは //= require_tree . と記載され、Rails配下のJavaScriptを自動で読込み出来るように設定されています。または、 //= require jquery の様に個別の読込みの設定も出来ます。最後に、JavaScriptをRailsを扱えるように「/config/initializers/assets.rb」内に # Rails.application.config.assets.precompile += %w( admin.js admin.css ) と記載されているのですが、コメントアウトされています。これは、デフォルトでapplication.js、application.css、app/assets配下のファイルが対象となっているためです。これ以外の場所やファイルを指定したい場合に有効化して指定します。 [PR] 未経験からWebエンジニアを目指す方法とはJavaScriptが読み込まれない時の主な原因 仕組みが分かったところで、JavaScriptが読み込まれない原因を見てみると *.html.erbのJavaScript読込の指定で”javascript_include_tag”と記載されていない /app/javascripts/application.jsの記載で「//= require_tree .」,「//= require jquery」（個別）の記載が誤っている 個別のJSを利用する際に、/config/initializers/assets.rbの「assets.precompile」の指定を行ていない また、それ以外によくあるのが「同名のcoffeeファイルが存在する」というものです。RailsではJavaScriptのかわりにcoffeeScriptがデフォルトで使用できるのですが、同名のjsファイルがある場合はcoffeeファイルが優先せれ、jsファイルが読み込まれません   JavaScriptが読み込まれない時の主な対処方法 それぞれの対応方法について考えていきます “javascript_include_tag” Railsデフォルトの設定でJavaScriptを利用する場合は、良いのですがオリジナルのディレクトリ構成など利用数場合は、HTMLないでJSファイルを指定する必要があります。 例えば「/app/assets/javascripts/test/test1.js.erb」を読み込みたい場合は、 <%= javascript_include_tag 'test/test1' %> と書きます。 「application.js」の記載 Railsのデフォルト構成内にJSファイルを配置する場合は、 //= require_tree . 特定のライブラリーを追加した場合は //= require jquery の記載を確認して、ない場合は追記します。 「assets.precompile」の記載 特定のJSファイルをインクルードしたい場合は Rails.application.config.assets.precompile += %w( original.js ) と記載をします。 coffeeファイルが存在する 今までのは、大抵がオリジナルの構成やJSファイルを追加した時の対応になるのですが、デフォルトで作業しているにも関わらず、うまく読込が出来な場合は、coffeeファイルの確認をし、不要であれば削除しましょう。   まとめ 基本的にRailsの構成に従っていれば、JavaScriptが読み込まれないことは滅多にないかと思います。 しかし、jQueryなどを追加したり、プロジェクトの方針でフォルダ構成を検討しないといけない場合などは、今回の記事をもとに確認してみてください。 筆者プロフィール 小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

PHPで指定したディレクトリ内のファイル一覧を取得する方法を現役エンジニアが解説【初心者向け】

今回は、PHPで指定したディレクトリ内のファイル一覧を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPで指定したディレクトリ内のファイル一覧を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   この記事は、PHPのglob関数を使用して、ディレクトリ内のファイル一覽を取得する方法について解説した記事です。 PHPの開発にまだ慣れていない方でも理解できる内容になっています。   目次 glob関数とは glob関数でディレクトリを指定してファイル一覧を取得する方法 実際に書いてみよう まとめ   glob関数とは PHPのglob関数は、パターンにマッチしたパス名を探す関数です。 また、ワイルドカード(任意の文字列を表す記号 ex.「*」や「?」)を使用することで、ディレクトリ内のファイルの一覧を取得できます。   [PR] 未経験からWebエンジニアを目指す方法とはglob関数でディレクトリを指定してファイル一覧を取得する方法 それでは、glob関数を使用してディレクトリ内のファイル一覧を取得する方法について解説します。 使用方法： glob($パスのパターン [, $glob関数専用のフラグ]) glob関数の第一引数には、ワイルドカードなどを交えたパスのパターン文字列を渡します。 第二引数には任意で、glob関数専用のフラグを渡すことが可能です。 フラグには、「GLOB_ONLYDIR」や「GLOB_ERR」などのPHPで用意された定数があります。 GLOB_ONLYDIRは、パターンにマッチしたディレクトリのみを返却するフラグで、GLOB_ERRは、ディレクトリが読み込めないなどのエラーが発生した際に、プログラムを停止するようにできます。(デフォルトは停止しないようになっています) このようにフラグを渡すことで、glob関数の処理内容を制御できます。 返却値は、第一引数のパターンにマッチしたディレクトリやファイルの一覧が配列となって返却されます。マッチするファイルがなかった場合は、空の配列([])、処理が失敗した場合はboolean値のFALSEを返却します。 ファイルの一覽を取得する際は、第一引数に渡す「$パスのパターン」に”*.*”というパスの文字列を渡します。これはワイルドカード「*」を使用して「任意のファイル名.任意の拡張子」のファイルを取得するように指定しています。 「任意のファイル名.任意の拡張子」のファイルとはすべてのファイルに当てはまるパターンのため、ディレクトリ内のすべてのファイルを取得できます。   実際に書いてみよう それでは、実際にglob関数を使用してファイルの一覽を取得する例を見ていきましょう。 ディレクトリ構造： サンプルコード(glob.php)： <?php // directory配下のファイル一覽を取得する $files = glob("directory/*.*"); echo "========= ALL files =========n"; print_r($files); echo("n"); // directory配下のjsonファイル一覽を取得する $json_files = glob("directory/*.json"); echo "========= JSON files =========n"; print_r($json_files); echo("n"); // directory配下のtxtファイル一覽を取得する $txt_files = glob("directory/*.txt"); echo "========= txt files =========n"; print_r($txt_files); echo("n"); // directory配下の「foo」と名付けられたファイル一覽を取得する $foo_files = glob("directory/foo.*"); echo "========= foo files =========n"; print_r($foo_files); ?>   実行結果： ========= ALL files ========= Array ( [0] => directory/bar.json [1] => directory/bar.txt [2] => directory/baz.json [3] => directory/baz.txt [4] => directory/foo.json [5] => directory/foo.txt ) ========= JSON
PHP

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

Railsで特定のページのみJavaScriptを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Railsで特定のページのみJavaScriptを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 RailsでJavaScriptを読み込む方法 特定のページのみJavaScriptを読み込む方法 まとめ   RailsでJavaScriptを読み込む方法 RailsでJavaScriptファイルを読み込ませたいときは、railsプロジェクトのフォルダの配下にある対象のjsファイルを置くことで、自動で読み込めます。 app/assets/javascript/ これは、Railsの標準機能の一つであるAsset Pipeline（複数のJavaScriptやCSSのファイルを一つのファイルに統合・圧縮し読み込みを高速に行えるようにする機能）がデフォルトで有効になっているためです。 結果として、Railsは１つのファイルをすべてのページに適用するという形をとっているため、特定のJavaScriptだけ読み込ませるという動作を行いたいときは邪魔になります。   [PR] 未経験からWebエンジニアを目指す方法とは特定のページのみ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

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby Railsのimage_tagの使い方を現役エンジニアが解説【初心者向け】