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

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

初心者向けにRailsのimage_pathの使い方について現役エンジニアが解説しています。image_pathとは、画像を保存したディレクトリへのパスを生成するヘルパーメソッドです。引数へのパスの書き方によって参照されるフォルダが変わるので注意しましょう。

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

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

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

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

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします！

 

image_pathとは

image_pathとは、画像を保存したディレクトリへのパスを生成するヘルパーメソッドです。

app/assets/imagesに保存した画像へのパスを確認したり、publicフォルダーに保存した画像へのパスを確認するなどに使用できます。

似たヘルパーメソッドに、image_tagがあります。こちらは、表示したい画像へのパスを渡すことで、imgタグを生成するヘルパーです。画像を表示する場合はこちらを使用します。

image_pathの使い方

image_pathは引数として、画像へのパスを使用します。以下のように記述して使用できます。

<%= image_path(画像へのパス) %>

 

画像へのパスは、/から始めるか、/なしで始めるかで参照する画像のディレクトリが変わります。例えば、”/sample.jpg”とパスを指定した場合、publicフォルダの画像を参照します。

<%= image_path("/sample.jpg") %>

 

/なしで”sample.jng”とパスを指定した場合、app/assets/imagesフォルダの画像を参照します。

<%= image_path("sample.jpg") %>

 

この方法でimage_pathを使用すると、ファイル名にフィンガープリント（ファイルが同じかどうかを判別するための値）が挿入されます。

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

image_pathで画像へのパスを取得してみよう

それでは実際に使って見ましょう。

まずは、参照先の画像ファイルをapp/assets/imagesフォルダと、publicフォルダにおきます。できたら、以下のコードを書いて、画像のパスが表示できているか確認しましょう。

<%= image_path("/sample.jpg") %>
<%= image_path("sample.jpg") %>

 

viewでは以下が表示されます。

/sample.jpg
/assets/sample-5f778e9da4c87df7b4b5cd2bd07f11088526d14a2bf24126cbe761a98113add0.jpg

 

以上で解説を終わります。

 

筆者プロフィール

メンター金成さん

フリーランスエンジニア。
Railsの案件を中心に、様々なアプリケーションを開発してます。

使える言語は、ruby python go 。最近はgoにハマってます。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

記事を検索

関連するキーワード

関連する記事

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

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

Rubyでdirをrequireする方法を現役エンジニアが解説【初心者向け】

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

RubyのドキュメンテーションツールYARDの使い方を現役エンジニアが解説【初心者向け】

RubyのドキュメンテーションツールYARDの使い方について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何...
Ruby

Rubyでランダム文字列を作成する方法を現役エンジニアが解説【初心者向け】

Rubyでランダム文字列を作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Rub...
Ruby

Rubyのマジックコメント（magic comment）の書き方を現役エンジニアが解説【初心者向け】

Rubyのマジックコメント（magic comment）の書き方について解説します。   そもそもRubyについてよく分からないという方は、R...
Ruby

RubyでMechanizeを利用してWebスクレイピングする方法を現役エンジニアが解説【初心者向け】

RubyでMechanizeを利用してWebスクレイピングする方法について解説します。   そもそもRubyについてよく分からないという方は、...
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

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 また、本記事は、Doru Ciobanu氏によって投稿されました。   タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。 フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。 しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。 そして、これから紹介するのは、2016年に最も売れた50のフォントです。   1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。 編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。   2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。   [PR] 未経験からWebエンジニアを目指す方法とは3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。 軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。   4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。 人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。   5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。 垂直方向の文字が、水平方向の文字とアセンダ （アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。 可読性が重視されるテキストに最適です。   6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。 このフォントファミリーは51種類のウェイトから構成されています。 古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。   7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。 グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。   8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。 ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。   9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。 小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。   10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade
Webデザイン

HTMLでimageタグを使って画像を表示する方法【初心者向け】

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Webページに画像を表示するにはどうすれば良いのだろう 文字だらけの味気ないWebページを豪華にしたい！ Webページと写真ファイルってどんな関係があるんだ？ なんて皆さん、この記事を読めば、Webページで画像を出す方法が理解できます。 うまく画像をつかって、おしゃれなWebページを作ってくださいね。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次image_pathとはimage_pathの使い方image_pathで画像へのパスを取得してみよう筆者プロフィール そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 imageタグを使って画像を表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】   画像を表示する方法 HTMLのimageタグを使って画像を表示するには、いくつかの属性を使い、下記のように記載します。 <img src="image.png" alt="海の写真" title="空と海">   それぞれ1つずつ確認していきましょう。 imageタグ <img   …  > ここには画像を表示しますよ、ということを示します。   ソース属性      src=”…” ソースは、出所や源泉という意味です。 表示する画像ファイルの、ファイル名やファイルの場所を示します。   タイトル属性  title=”….” 画像のタイトルを指定します。   オルト属性      alt=”…” オルタナティブ、代替の略です。 目の不自由な方向けの読み上げWebブラウザで、画像の代替として読み上げる文章です。 Googleなどのサーチエンジンが、画像の中身を理解するのにも用いられます。   では具体例をみてみましょう。 表示したい画像ファイルを用意してsrc属性で指定しましょう。 ここでは「空と海」というタイトルの「海の写真」の画像「image.png」を表示します。 <img src="image.png" alt="海の写真" title="空と海"> 画像が表示されました。 マウスカーソルを画像に合わせると「空と海」と表示され、読み上げ機能ではalt属性で指定した「海の写真」と読み上げられます。 基本的な使い方はこれだけです。   大石ゆかり サイトに画像を使用すると、見栄えが良くなって文章にもメリハリが付きますね！ 田島悠介 そうだね。文章だけの記事だと見出し(h1タグ)や段落(pタグ)で余白がちゃんとつけられていても見づらい感じがするよね。 大石ゆかり src属性は、画像があるURLを記述するんですね。alt属性やtitle属性がちょっとわかりません。 田島悠介 alt属性は代替テキストで検索エンジンに教えてあげたり、画像が表示されなかったときに表示されるよ。title属性は、マウスカーソルを合わせると吹き出しが出るんだよ。   画像ファイルを指定する方法 HTMLで、画像を始めとする外部ファイルと連携をするときには、ファイルの場所やファイル名で、どのファイルかを指定します。 この、どのファイルかを指定するための記述方法を、パス（path = 道順）と言います。   Webページを作っている各ファイルは、こちらの図のようなフォルダ構成になっていることがよくあります。 このフォルダ構成を意識して、HTMLファイルにフォルダ名やファイル名を記述して道順を示していくんですね。   パスの書き方には、絶対パスと相対パスの2種類あります。 それぞれ詳しく説明しますね。   絶対パス HTMLファイルの位置は関係なく、基準となる位置からの道順を示すのが絶対パス。 市役所に行くには、駅から南に300m・・・と、基準となる場所から示す道順です。 絶対パスの1つは、Webサイトの各ファイルをまとめている、おおもとのフォルダからの場所を示す方法です。 今回の図では、demoというフォルダがおおもとですね。 パスの記法では、先頭に置いた「 / 」スラッシュの記号をルート（根本）と呼び「おおもとのフォルダ」という意味があります。 また、英単語の後に「 / 」スラッシュ記号を置くことで、フォルダ名を示します。   実際にimgタグのsrcに、ルートからimage.jpgまでのパスを記述すると、このようになります。 <img src="/images/image.jpg" >   分解して翻訳すると、こんな意味ですね。 「 / 」おおもとのフォルダ内の 「 images/ 」images というフォルダ内の 「 image.jpg 」image.jpg  というファイル   この道順に沿って、HTMLは表示する画像ファイルを見つけるのです。   また、すでにインターネット上に公開されている画像を指定する場合は、URLで記載することもできます。 <img src="https://techacademy.jp/sample/image.jpg" > URLを用いた記法も絶対パスの1つです。 HTMLファイルがどこにあるかは関係なく、公開されているWebサイトを基準に道順を示しているんですね。   相対パス パスを記述するHTMLファイルと指定するファイルの、位置関係を意識して道順を示すのが相対パスです。 市役所に行くには、ココから北に500m・・・と、今いる場所ココを基準に示す道順です。 相対パスは、パスを記述するHTMLファイルとの位置関係を示す方法です。 いくつかのパターンで、具体的に説明していきます。   HTMLとファイルが同階層にある場合 このようなファイル構成で、index.htmlから同じフォルダ内にあるimage.jpgを指し示す方法です。   パスの記法で、文頭の「 ./ 」ドットスラッシュ記号をカレント（現在位置）と呼び、パスを記述したファイルがあるフォルダを示します。 imgタグのsrcに、カレント記号を使ってからimage.jpgまでのパスを記述すると、このようになります。 <img src="./image.jpg" >   また、カレント記号は省略することもできます。 <img src="image.jpg" >   どちらの記法でも、記述したHTMLファイルと同じフォルダ内のimage.jpgを指し示しています。   ファイルがHTMLより下のフォルダ階層にある場合 次に、こちらの図のように、index.htmlの下層フォルダにあるimage.jpgを示す場合です。   このパスは、今まで説明したカレントやフォルダ名のパス記法で、以下のように記述します。 <img src="./images/image.jpg" >   また、カレント記号を省略すると、以下のようにも記述できますね。 <img src="images/image.jpg" >   ファイルがHTMLより上のフォルダ階層にある場合 最後に、index.htmlの上層フォルダにあるimage.jpgを示す場合です。   パスの記法では先頭の「 ../ 」ドットドットスラッシュ記号をペアレント（親）と呼び、上位のフォルダ、親フォルダを示します。 ファイルが上位のフォルダ階層にある場合のパスは、親フォルダ記号を使ってこのように記述します。 <img src="../image.jpg" >   これを応用すると、下記のように複雑なパスも簡単に示すことができます。   親フォルダの中にある、imagesフォルダの中にある、image.jpgを示すパスは、このように記述します。 <img src="../images/image.jpg" >   パスの記号の意味が理解できると、簡単に記述することができますね。 imgタグを使って画像ファイルを表示するには、パスを記述して正しい道順を示すことがとても大事ですので、ぜひマスターしてください。   [PR] 未経験からWebエンジニアを目指す方法とは【応用】画像の表示スタイルを調整する 画像の表示スタイルは、imgタグにCSSを指定して調整していきます。 ※CSSの書き方（記述ルール）や、HTMLとの適用方法（埋め込み方）を解説した記事を読んでおくと理解が深まります。   画像の大きさを調整する imgタグにCSSを指定せずに表示すると、元々の画像サイズがそのまま表示されます。 はみ出てしまったり、小さすぎたり、レイアウトが崩れてしまうので、きちんと大きさを指定したいですよね。 画像サイズの幅を指定するには、width、高さを指定するにはheightというプロパティを使います。 img.image1{  
HTML

初心者におすすめ！Rubyを学習できる無料サービス20選

プログラミング言語をどれから学ぶべきかといった質問はよく耳にしますが、今回はRubyについて扱います。 Wantedlyのプレスリリースによると、スタートアップ企業を中心にRubyを扱う企業が増えているようです。   そこで今回は、これからRubyの勉強を始めたいという初心者向けに、無料学習サービスをご紹介します。なお、他の言語も含めた無料プログラミング学習サービスを紹介する記事もあります。 そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   1. Codeacademy 学習スタイル：ハンズオン(画面上で書きながら) プログラミング学習の先がけといえるサービスです。様々なプログラミング言語を扱っていますが、Rubyにも対応しています。 学習方法としては、テキストを読みながら進めるカリキュラムで、ブラウザ上でコードの入力、出力結果の表示も可能です。 一部日本語にも対応していますが、海外サービスのため、ほとんど英語で読み進める必要があるのでご注意ください。 Codecademy   2.ドットインストール 学習スタイル：動画 国内では最もメジャーと言えるプログラミング学習サービスです。3分以内の動画で学習を進めることができます。 Ruby入門のレッスン他に、Ruby on Rails入門のレッスンも用意されています。動画で学ぶスタイルをとっていて、ブラウザ上のエディタ機能などはありません。 ドットインストール    [PR] 未経験からWebエンジニアを目指す方法とは3.Progate 学習スタイル：ハンズオン 2014年11月にリリースされた国内のサービスです。 Rubyを学習でき、Ruby on Railsのカリキュラムもありますが、現在は一部のユーザだけにテスト公開されてるようです。 スライドを読みながら学ぶスタイルをとっており、Codeacademyのようにブラウザでコードを入力して正誤判定を行うことができます。 Progate   4.ミニツク 学習スタイル：動画/ハンズオン ネットワーク応用通信研究所（NaCl）が運営するRubyに特化した学習サービスです。 基本的にはテキストを読みながら学習を進めるスタイルですが、Rubyの開発者である、まつもとゆきひろ氏が解説する動画コンテンツもあります。 また、「演習」も用意されており、自分でコード書きながら模範解答でチェックすることができます。 ミニツク   5.CODEPREP 学習スタイル：ハンズオン 株式会社ギブリーが提供するプログラミング学習サービスです。プログラミング言語としては、Ruby、PHP、JavaScriptなどを学ぶことができます。 学習方法としては、穴埋め形式で表示された問題にコードを入力しながら進める内容です。ヒントも表示できるので、初心者でも問題を解きながら進められることでしょう。 PHPなど他の言語の場合は簡単なアプリケーションを開発できるカリキュラムがありますが、Rubyは基礎編のみの提供となります。 また、ディスカッションボードという機能もあり、ここから質問を投稿することも可能です。 CODEPREP    6.RubyWarrior 学習スタイル：ハンズオン ゲーム感覚で学べるプログラミング学習サービスでも紹介した、Rubyに特化した学習サービスです。 ファミコンのRPGゲームのようなグラフィックですが、コードを入力しながらゲーム感覚で学ぶことができます。画面の下に表示されるエディタにコードを入力しながら課題をクリアしながら進める学習方法です。 なお、海外のサービスで日本語には対応していません。 RubyWarrior   7. CodinGame 学習スタイル：ハンズオン 同じくゲーム感覚で学べるサービスです。20以上のプログラミング言語に対応していますが、Rubyも学ぶことができます。 すでにあるゲームをもとに、コードを追加してゲームをクリアしていくことでプログラミングを学びます。何も書かずに実行するとゲームオーバーになるため、コードを書いてクリアを目指しましょう。 こちらも海外サービスで日本語には対応していません。 CodinGame   8. TECHSCORE 学習スタイル：テキスト Rubyについて簡潔に必要な部分を7つのチャプターで説明してくれています。Rubyの概要を知る上で十分でしょう。 TECHSCORE   9. 他言語からのRuby入門 学習スタイル：テキスト Ruby言語の公式ページにあるものです。「他の言語はやったことあるけど」という人はここを見るべきです。他の言語をやったことがあるからこそRubyの良さが分かるはずです。 他言語からのRuby入門   10. とほほのWWW Ruby入門 学習スタイル：テキスト 知ってる人は知っているかの有名なとほほシリーズのRuby編です。このページは解説の数が豊富なのでここで学べば学び漏れはないでしょう！ とほほのWWW Ruby入門   11. Libro〜ビギナーのためのRubyプログラミング入門〜 学習スタイル：テキスト このサイトも知ってる人は知っている、かの有名な掌田津耶乃氏のプログラミング解説ブログのRuby版です。 10回に分けてRubyの基本を親切に教えてくれています。 Libro   12. Ruby Life 学習スタイル：テキスト Rubyの解説が見ての通りとてもたくさんあります。一度に全部やるのは大変ですが時間を見つけてコツコツやればこれであなたもRubyマスター！ Ruby Life   13. エンジニアの入り口 学習スタイル：テキスト 初心者ならではの疑問でどの言語がどう違うのかっていうのはきになるところだと思います。ここではRubyとPHPを分かりやすく比較しています。ここを見て大体の感覚をつかむのも悪くないかもしれません。 エンジニアの入り口   14. Hack.hands() 学習スタイル：テキスト 24時間プログラミングのサポートをしてくれるのが売りのHack.hands()のRuby版です(有料)。 本業のエンジニアがサポートしてくれるのは何より有難いですね。 Hack.hands   15. 起業.TV〜まつもとゆきひろ氏が語る「Ruby」開発秘話とは〜 学習スタイル：動画 こちらは直接コーディングとは関係ありませんが、Rubyの開発者であるまつもとゆきひろ氏(なんと日本人なのです)の言語開発秘話が聞けます。 Rubyを通じてプログラミング言語の奥深さが理解できるかもしれません 起業.TV   16. DIVER 学習スタイル：テキスト プログラミングスクールDIVE INTO CODEによるRailsオンラインテキストです。コードに関する内容だけでなく、動的なサイトとはどういうものかなど概念や仕組みからしっかりと学ぶことができるサイトです。 それぞれの解説は図解入りで見やすく、とても理解しやすい構成になっています。 DIVER   17. paiza 学習スタイル：ハンズオン 料金：無料(600円～/月の有料コースあり) 5分前後の動画と実践の問題で学習することができる「paizaラーニング」でRailsについて学ぶことができます。 動画のページにはテキストによる解説もあり、参照しながら動画を見ることも可能です。各コースには有料会員向けのものもありますが、期間によって無料公開されていることもあるのでチェックしておきましょう。 paiza   18. Schoo 学習スタイル：動画 料金：無料(980円～/月の有料コースあり) Ruby on Railsコースでは、Webアプリケーションフレームワークがどういうものなのかというところから丁寧に解説された動画を見ることができます。 動画では各チャプターにジャンプする機能があるため、自分の見たいところの解説動画をすぐ参照することも可能です。受講生が参加できる生放送では講師に質問することもできるため、放送の日程も確認しておきましょう。 プレミアムプランでは動画や資料をダウンロードしたり、プレミアム専用の放送を見ることができます。通常の生放送は無料プランでも利用可能です。 Schoo   19. 小学生でもわかるRuby on Rails入門 学習スタイル：テキスト 料金：無料 動的なサイトとはどのようなものか、実際にRailsを始めるまでの手順、モデル・ビュー・コントローラの役割、データベースやマイグレーションに関する説明など、最初に理解しておかなければいけないことがとても分かりやすく解説されています。 Ruby on Rails全体の流れを把握するために最初に参照しておきたいサイトです。 小学生でもわかるRuby on Rails入門   20. Ruby on Rails ガイド 学習スタイル：テキスト 料金：無料 Ruby on Rails全般に関するリファレンスサイトで、”http://guides.rubyonrails.org/“の翻訳版になります。 公式ガイドのため、バージョンに応じた仕様を確認することができます。実践でRailsを使う場合、より正確で新しい情報を参照したい場合に利用できます。ある程度基本を覚えた人向けです。 Ruby on Rails ガイド   まとめ 最後に、今回紹介した学習サービスを比較します。 日本語対応、学習スタイル（ハンズオン・テキスト・動画）、エディタ機能の有無で比較してみました。 サービス名 日本語対応 学習スタイル エディタ機能 Codecademy △ ハンズオン ○ ドットインストール ○ 動画 × Progate ○ ハンズオン ○ ミニツク ○ テキスト（一部動画） × CODEPREP ○ ハンズオン ○ RubyWarrior × ハンズオン ○ CodinGame × ハンズオン ○ TECHSCORE ◯ テキスト × 他言語からのRuby入門 ◯ テキスト × とほほのWWW Ruby入門 ◯ テキスト × Libro ◯ テキスト × Ruby Life ◯ テキスト × エンジニアの入り口 ◯ テキスト × Hack.hands() × テキスト × 起業.TV ◯ 動画 × DIVER ◯ テキスト × Paiza ◯  ハンズオン  ○ Schoo ◯ 動画 × Ruby on Rails入門 ◯ テキスト × Ruby on Railsガイド ◯ テキスト × 今回紹介した中では、動画で学ぶ学習スタイルをとっているのはドットインストールのみとなっています。海外では動画で学べるサービスは一部無料のコンテンツがあり、しっかり勉強しようとすると有料のものが多いようです。 また、エディタ機能があると、開発環境の構築も必要ないため、初心者にとっては勉強を始めやすいかもしれません。   今回の記事は以上です。 ぜひRubyの勉強を始めてみましょう！   TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
Ruby

【データから紐解く！】人気プログラミング言語を徹底比較！

本稿は、Codementorのブログ記事を、Codementorより了解を得て日本語翻訳し掲載した記事になります。 科学、技術、工学および数学の素養がある人材に大きな需要があり、高い賃金が支払われているのは、とりたてて目新しいニュースではありません。米国におけるソフトウェア関連職種のオンライン求人数は2007年から2012年にかけて、他の求人に比べ3倍の速さで成長しています。 米国労働統計局は、2012年から2022年にかけてソフトウェア開発に関する求人は、22%増加すると見込んでいます。2014年5月時点のソフトウェアアプリケーション開発者の平均年収は95,510ドル(約965万円)となっています。 これからプログラミングを学ぼうと思っている初心者は、どの言語を学ぶべきか考えていることでしょう。 この記事では各プログラミング言語の給与、需要、そして将来性を比較する事によって、疑問への回答のヒントとなるはずです！   また、オンラインのプログラミングスクールTechAcademyでは、未経験でもプログラミングを習得することが出来ます。   目次 各プログラミング言語の現状 言語別求人ランキング 言語別給与ランキング プログラミングに関するサポート体制について 各プログラミング言語の将来性   各プログラミング言語の現状 各プログラミング言語を比較する前に、比較対象となる各言語の現状を確認してみましょう。   [PR] 未経験からWebエンジニアを目指す方法とは動的プログラミング言語 学びやすく面白さもある為、一般的に、動的プログラミンング言語は初心者におすすめ出来る言語だと考えられています。コードを多用せず、ゼロからアプリケーションを構築可能で、難しいルールに従う必要がありません。 通常、動的プログラミング言語は最高層で使用されるので、細部の習得に多くの時間を費やす必要が無く、言語の概要の理解に時間を費やします。これも早期に結果を出したいと望むプログラミング初心者に人気の理由の一つです。   JavaScript JavaScript（Javaとは別言語です）は、フロントエンドに必要クライアントな側の言語です。JavaScriptは全てのブラウザと相性が良く、しばしば「jQuery」の様なライブラリ、AngularJSやEmber.js、Reactなどのフロントエンドフレームワークを活用した双方向のウェブアプリケーションに使用されます。 JavaScriptは、Node.jsを活用したサーバー側の言語としても使用されます。Node.jsは比較的新しく、勢いのあるコミュニティです。 FacebookのReact NativeでJavaScriptを使用したネイティブモバイルアプリケーションを構築出来る他、phonegap等のフレームワークでJavaScriptを使用しハイブリッドモバイルアプリケーションも構築出来ます。 しかし、JavaScripは型の無い言語なのでミスを見つけて修正するのが難しい分、扱い難い言語としても知られています。マイクロソフトのTypeScriptやReactが使用するJSXなどの静的な型付きのバージョンも存在します。   Ruby 開発を面白く、かつ効率的にする為に開発されたRubyは、Ruby on Railsのフレームワークによって人気を博しました。 Ruby on Railsは、プログラミングの快適性を追求した、フルスタックのフレームワークです。Rubyは英語の様に解読でき、Railsは、共通タスクを容易にするツールを備えています。 Shopify、Bloomberg、HuluやSlideshareなどの人気サイトではバックエンド開発の大部分にRubyを使用しており、Ruby on Railsで構築されています。 Ruby/Rails開発のためのおすすめエディタ/IDEについても合わせてご覧ください。   Python Pythonもまた初心者にお勧め出来る言語の一つであり、米国の一流大学で言語学習の導入段階において最も学ばれています。デスクトップアプリやWebアプリケーション等を構築する際に使用され、データマイニングに最適なツールを備えています。さらに、Pythonはコンピュータサイエンスやデータ解析、生物情報学等、アカデミックなコミュニティでも人気があります。 Google、 YouTube、 Pinterest、 Instagram、 Reddit、 BitTorrent、 Civilization IVなどはPythonで構築されてます。 国内でPythonを使ったWebサービスが少ない理由とはという記事も合わせてご覧ください。   PHP PHPはサーバー側のスクリプト言語で、PHPのコードで何をするか概念化が容易な為、初心者向けの言語と考えられています。この言語はWeb向けに特化されているので、多くのWebサイトはPHPで構築されています。 Facebook、Wikipedia、Yahoo!、 Tumblr、 WordPress等はPHPで構築されています。   静的型付き言語 静的型付き言語で構築されたアプリケーションはより拡張性と安定性があり、保守性に優れている事で知られています。静的言語はタイピングのチェックによる機能が厳しく、エラーの抽出が容易である一方、プロトタイプの作成が可能な為、多くのコードを使用します。ゲームエンジン、モバイルアプリケーションや企業のバックエンドは一般的に静的型付き言語で構築されます。   Java 汎用性のある言語としてJavaは、Androidアプリ、デスクトップアプリやゲームに使用されます。また企業のバックエンドの開発にも使用されています。 さらに、ビッグデータの保存や加工に使用するフレームワークHadoopは、Javaをベースとしており、Yahoo、Facebook、 Amazon Web Servicesといった企業で採用されています。   C C言語は、システムソフトウェアの共通言語として、しばしば使用されています。 Cは、本稿にて紹介するほぼ全てのプログラミング言語、とりわけObjective-Cと C++に影響を与えました。ですので、もしCの知見があれば他の一般的な言語の習得は難しく無いでしょう。 しかし、簡単なタスクを実行するのに複雑なコードを必要とする為、初めての言語として選んだ場合に初学者は苦労するかと思います。それでもCの知識はきっとプログラマーの助けになることは間違いないですが。   Objective-C / Swift （iOS開発向け） Objective-Cは、C言語を基にした言語であり、静的ですが動的型付けも可能です。AppleのSwiftは、Objective-Cと互換性を持つ様に設計された静的言語ですが静的型付けによりエラーを起こし難くなっています。 Pythonに触発されたSwiftは、新参のプログラマーが習得しやすくObjective-Cに見られるいくつかの課題を解決する様に設計されています。   C++ C++は、C言語を基にした影響力のある言語です。システムソフトウェアのプログラミング用に設計されましたが、ゲームやゲームエンジン、デスクトップアプリ、モバイルアプリ、Webアプリにも使用されてきました。C++は迅速なので、Facebookもいくつかの高性能で高信頼性のあるシステムをこの言語で構築しています。 Adobe Systems、Amazon、Paypal、Chromeなどの多くのソフトウェアがC++で構築されています。Cの様に、一般的にC++は初学者に難しい言語と考えられているので、初めて学ぶ方はMeetups、またはC++Codementorで相談してみるのも良いでしょう。   C# C#（C シャープ）はマイクロソフトWindowsのNET フレームワークの為に開発されました。 C#は、Web開発、ゲーム開発及びマイクロソフトの開発一般に使用されています。マイクロソフトは互換可能なクロスプラットフォームでは知られていませんでしたが、C#を他のプラットフォームへ移行させ、リナックス技術者により良い開発ツールを提供する目的で、Monoと呼ばれるオープンソースプロジェクトを発案しました。 最近では、C#をiOSやAndroid向けのネイティブモバイルアプリに使用できる様になりました。   SQL SQL（SequelまたはStructured Query Language）は、データベースとコニュニケーションを行う問い合わせ用の言語です。 SQLはアプリケーションを構築する為には使用されませんが、リレーショナルデータベース管理システム（RDMS）を使用するアプリケーションのデータ管理に使用されます。   言語別求人のランキング 各プログラミング言語の概要を少しだけ紹介しました。 しかしながら、全ての言語に同じ需要があり、同等の給与が支払われる訳ではありません。もし言語習得の目的が就業であり、また言語習得がどんどん難しくなってきているという話にがっかりさせられたくないのであれば、次に紹介する内容が「どの言語を学ぶべきか」という問いに対するヒントになると思います。 indeed.comによる給与統計を基に、各プログラミング言語を9つの層に分割しています。 この結果、Swiftが一番多くの給与を得る事ができ、Java、Ruby、 Python,、C++とCもまた悪くない選択である事は明白でしょう。さらに、給与のみに焦点を当てた場合、JavaScript,、C#,、SQLおよびPHPは理想的な選択では無いでしょう。 平均給与は、需要（どの程度求人があるか）、供給（何人の開発者がその言語を使えるか）および経験などに影響されます。従い、結論を急ぐ前に他の要素もじっくり確認してみましょう。   求人のトレンド 以下は、プログラミング言語別の求人トレンド（indeed.comから抜粋）です。 C、SQL、JavaおよびJavaScriptには多くの求人があります。一方、C#、C++とPythonもまた需要のある言語です。 しかし、新興企業の職を得たいのであれば、indeed.comのトレンドはふさわしい指標ではないでしょう。   AngelListは新興企業による求人の為のサイトであり、ここの求人リストを基にプログラミング別の重要を確認できます。   JavaScriptの需要がある事が改めて確認できます。また新興企業ではJava、C、C++と C#よりPythonおよびRuby (on Rails)を欲している事が分かるでしょう。   言語別給与ランキング 次は、求人広告の内容から、潜在的にどの程度の賃金が得られるのかみてみましょう。このデータはgooroo.ioから抜粋しており、求人広告で提示された給与の平均値で積算しています。 Ruby、C++またはJavaを知っている技術者は、高い初任給を得られそうです。優秀なRubyとPythonの開発者は不足し、高い需要があるので、RubyとPythonは潜在的に最も高い給料を得られるでしょう。 JavaScriptは2015年4月時点で188,168ドル(約2000万円)も給料があったのに、今では124,oo0ドル(約1300万円)に減っていて、落ち込みが大きいです。 しかし、JavaScriptは特殊はケースです。以下で説明します。   特殊なケース：JavaScriptのフレームワーク 単純にJavaScriptを他の言語と比較するだけでは、どの程度稼げるのかを正確に予測する事はできません。 各プログラミング言語の概説で説明した通り、JavaScriptは様々に分類されます。フロントエンドのウェブサイトの開発を促進する為、多くのフレームワークが開発されてきました。したがって、JavaScriptやjQueryを知っているだけでは、JavaScriptのフレームワークを理解している技術者よりも稼げる可能性は少ないでしょう。 米国におけるJavaScriptのフレームワーク別の技術者の平均給料をみてみましょう。（React & Backboneはライブラリであり、フレームワークとはしていません。Node.jsは含んでいます。） 平均給与は悪くありません。 特に、Reactの展望は明るいです。もちろん、ここに記載されているのはあくまで参考であり、ineed.comでは平均給与105,000ドル以上とみています。これらの技術を学ぶにはJavaScriptを知る必要があり、逆にフレームワークを身につければJavaScriptをより有益なスキルにしていくはずです。   これらのフレームワーク技術者の需要を見てみましょう。 Node.jsはバックエンドの開発用なので、単にフロントエンドのフレームワークとなればAngularJSが需要という点では圧倒的です。フロントエンドのJavaScript技術者に関心があるのなら、AngularJSを学ぶと良いでしょう。 一方でReactは、比較的新しい技術なのでAngularJSの初期段階を同じような勢いで人気を得てきています。 まだ初期段階ですが、AngularJSよりも汎用性があり、ユーザーの使い勝手も良いので、これから需要はますます広がるでしょう。   プログラミングに関するサポート体制について 独学でプログラミング言語を学ぶ場合、他の技術者からサポートを受ける事が非常に重要な助けになると気づくでしょう。 サポートコニュニティの一員となる事は将来のあなたの技術者生活をより快適なものにします。   StackOverflow StackOverflowは相互支援の場として世界中の技術者に使用されている最大のコミュニティであり、プログラミング言語がどの程度普及し、人気があるのか、また同時にそのコニュニティが言語習得に程度役に立つのか、を知る事ができます。   言語の人気 StackOverflowのフォロワーを根拠として、各言語の現時点の人気を確認できます。 すでにJavaとJavaScriptが技術者に大きな需要があることは確認しましたので、これらの言語が最も多くのフォロワーをもっている事は驚きに値しません。「JavaScript」は現在では「Java」を追い抜き、StackOverflowでもっとも多く使用されているタグです。 SQL、Ruby、それからSwiftのフォロワーは少ないですが、RubyはWebの開発に専ら使用されていて、Swiftは比較的新しい言語なので、これは当然の帰結かもしれません。   StackOverflowでの回答率 StackOverflowでは質問を「正確に」しなければならない、という暗黙のルールがあります。このことを頭に入れて各言語別の質問に対する回答を得られる確率を見てみましょう。 この情報に拠ると、C、SQL、それとC++関連では、質問に対し60%以上の回答を得ています。 CとC++は専門性が高く、質問者はプログラミング経験豊富なので、より正確に自分の質問を表現できるのではないか、と考える人もいるでしょう。一方で、SQLは物事を構築する為に使用されている訳ではありません。   注目に値するのはStackOverflowにおいて、PythonとRubyの技術者も回答に協力的である、という点です。前述の通りPythonとRubyは初心者に最も勧められる言語であるのですが、これ考慮しても、30日以内に60%の回答があるという事は驚きです。 一方で、広範に使用されているはずのPHPの回答率が最低です。これは、多くの人がPHPに関する質問をしていますが、回答はあまり得られていない、という事を意味します。   GitHub 開発に参加すると、出来る限り既存のソリューションを使用する事が最善だと気づくでしょう。既存のソリューションは、一般的にオープンソースから取得でき、GitHubはこれを取得する手法を提供します。ユーザーは自分の気に行ったプロジェクトに星印をつけます。あるプロジェクトに多くの星印がつくほど、そのプロジェクトは盛んになりませす。 以下はGitHubの人気プロジェクトの言語別分布です。 JavaScriptが最も人気のあるツールである事は細部を確認せずとも明らかです。JavaScriptは、フレームワークや技術の移り変わりにおいて、技術者が現状についていくのが困難と認識する程、変化の速い言語です。 加えて、Node.jsを除いては、JavaScriptはフロントエンドの開発に最も使用されています。従い、Ruby、Python、JavaおよびPHP等バックエンド向けの言語と直接競い合っている訳ではありません。JavaScriptが他の言語とこれだけ差がある、というのは驚くべき事では無いのです。   一方で、RubyとObjective-Cは開発の為にたくさんのツールとリソースがあります。興味深いのは、StackOverflowでの比較において、いずれの言語もJava程人気がある訳ではないですが、技術者はこれらの言語のオープンソースプロジェクトを有益と考えていることです。 言語別の総プロジェクト数を確認すると、特にObjective-Cにこの傾向が強い事が分かるでしょう。 また、CやC++のオープンソースプロジェクトのほとんどはCやC++の為ではなく、開発全般のツールにする為に書かれています（例えば、最も使用されているPythonの解釈プログラムはCPythonです。これはCで構築されています）。 各プログラミングの概説でお話しした通り、CとC++はシステムアプリケーション開発によく使われているので、GitHubのオープンソースプロジェクトもシステムツールの為だという事が良く分かるのではないでしょうか。 最後に、PHPは広範に使用されているにも関わらず、使用可能なリソースの数という点では遅れをとっています。C#に関しては、マイクロソフトが自前の多くのサービスでオープンソースを模索しているので、将来GitHubにおける価値は拡大するでしょう。   各プログラミング言語の将来性 将来、プログラミング言語はどの程度必要とされるでしょうか？ プログラミング言語の将来性は、「若い人材がどの程度その言語を採用するか」がその言語の人気やリソースの確保につながるので、多分にそれを使用するコミュニティの成長に依存します。では人々が学習の対象としてどの言語に関心があるかをみてみましょう。 Python、JavaScript、C#とSwiftは人々の関心を最も集めています。現在知られているトレンドを基にすると、次の様な各論を出せます。   JavaScript JavaScriptは疑いの余地なく人気の言語となってきていて、特にバックエンドの開発に使用され、潜在的に（ReactNativeを介し）モバイルアプリケーションも構築可能です。 JavaScriptは更に多くのツールを取得し続け、かなり速いペースでアップデートされています。従って将来においても重要な言語であり続けるでしょう。   Ruby スタートアップは「Ruby on Rails」を好みます。Airbnb、Twitch、Hulu等の多くの有名サイトはRailsで構築されており、Ruby技術者を必要とするでしょう。Railsは、習得し易いのでコーディング初心者にとって人気であり続けるでしょう。 一方、Node.jsの台頭は間違いなくRuby on Railsの人気に影響を及ぼします。GithubにおいてNode.jsはすでにRailsを追い抜いています。これは決してNode.jsがRailsを凌駕するという兆候ではありませんが、Railsも数年前にバックエンド開発でPythonの最大のウェブフレームワークDjangoに取ってかわり、Djangoより多くの人気を博した事は留めておくべきです。   更に、同一構造のアプリケーションという新たなトレンドもRailsの採用に影響するでしょう。この慣行はWebアプリケーションのパフォーマンスに影響すると言われています。 同一構造のアプリケーションはNode.jsのプラットフォーム上で動く事を要求されており、フロントエンドと同じくJavaScriptで構築されます。たった一つでもよく言語を熟知している（この場合はJavaScript）という事はアピールになるので、Rubyを新たに学ぶ人が少なくなる可能性があるでしょう。Googleの「Go」もまた新たに注目を集め始めているバックエンド言語です。 しかしながら、Railsは頻繁にアップデートされるので、しばらくは重要な言語であり続けるでしょう。特に開発者にとって豊富な利便性のあるツールがあり、コミュニティが存在するので、多少人気が衰えても、Rubyは活躍し続けるはずです。   Python Pythonは、研究機関とデータサイエンティストに人気で、前述の通り、多くの初心者はPythonでコーディングを学びます。これはPythonが着実に普及しており、重要になってきている事を意味します。 PythonはJavaScripと同様に爆発的な人気を得ている訳でなないですが、データサイエンス分野では高い需要があり、力強く成長していくでしょう。   PHP この数年間、バックエンドの開発トレンドはPHPから他の言語へ移行してきました。しかし、80%のWebサイトが依然としてPHPで構成されています。これはWeb用に設計された言語なので当然かもしれません。 しかしながら、初学者がどの言語を学ぶべきかグーグルで調べると、多くの技術者がPHPを薦めていないことが分かると思います。実際に、PHPは多く技術者から疎まれています。 PHPのコミュニティはPHPの正しいコーディングの仕方や新しい開発ツールを提供する事でPHPに関する悪評を取り除こうとしています。   Java AndroidによりJavaは最も人気のある言語に押し上げられ、その安定性と拡張性から開発会社からもまた支持される事となりました。 ビッグデータ管理用のフレームワークとして（Scala）を使用するSparkと（他の言語をサポートする）Cassandraの台頭により、Hadoopはビッグデータ管理のフレームワークとしてどの程度人気を得続けるか予測が難しくなちました。 しかし、大企業が転換期にどのように行動するかを考慮すると、Hadoopが捨て去られる事はないでしょう。Javaはバックエンド開発において優れたツールを持っていて、企業の開発に不可欠なのです。 この様に、Javaは今後数年間は重要な言語の一つとして力を持ち続けるでしょう。   Objective-C/Swift アップル（Apple）がSwiftをリリースし、Objective-Cが専らアップル（Apple）の製品に使用される様になると、Objective-Cの需要が無くなるとは誰も想像していません。アップル（Apple）の製品が使用される限りは数年間はObjective-Cは重要な言語で有り続けるでしょう。 iOS向けのオープンソースプロジェクトの大半は未だObjective-Cで書かれていますので、2017年現時点においても、学習する価値のある言語です。一般的にまったく概念を理解する事の出来ないものを学ぶのは効率的ではありません。従い、もしSwiftを知っているのならObjective-Cは習得しやすいでしょう（また逆もしかりです）。   C Cは、他の言語と比べると極めて下位レベルで使用されますが、OS用の汎用言語でもあるので残り続けるでしょう。多くの開発ルールはCとリナックス、またはCで構築されています。   SQL SQLは大抵のデータ管理者に習得されています。しかし、MongoDBやRedisの様なSQLを要しないサービス、またはHadoof、SparkとCassandraの様なSQLを必要としないプラットフォームの台頭によりSQLは勢いを失っていると考えられていました。 現状はそうではありません。かつてSQLを必要としなかったサービスまでがSQLを活用し始めたのです。 ビッグデータの台頭と管理の難しさから、SQLはかつてないほど必要とされています（それは求人トレンドからも分かるでしょう）。Googleは、BigQueryサービスをアップデートし、一つのテーブルに対し1秒間で100,000行を処理できる様にしました。BigQueryはSQLを使用しています。Sparkはバージョン1.3からSparl SQL Moduleを採用しています。 つまり、ビッグデータを管理する必要性から、SQLは再び重要な言語となったのです。SQLは単に普及しているというのみならず、暫くは重要な言語で有り続けるでしょう。   C++ （Rustに対してまでも）未だ性能と能力においてパワフルな言語と考えられており、C++は高性能を求められるシステム（例えばゲームエンジン）で重要な言語で有り続けるでしょう。最新の主要バージョン（C++14）は2017年にリリースされる見込みであり、未だ進化しています。 Rustが作るソフトウェアはC++が作る場合よりも脆弱性が少なくなることを目指しているので、将来的にはRustは一部のシステムプログラミングでC++と入れ替わるでしょう。   C# マイクロソフトのプラットフォームに限定されていた事とクローズドソースであった事は過去にC#に有利に働きませんでした。しかし、Monoはこの問題の大部分を修正しました。（Monoは性能に問題がありましたが、最近のアップデートにより改善しました。） C#で働いた技術者はC#を好きになる傾向があるので、この言語は、とても強いコミュニティを持っています。C#はUnity 3Dの主要言語であり、iOSやリナックス上で動くゲームエンジンにも使用されています。ゲームエンジンとしてのUnity 3Dの台頭は、C#の立ち位置を確固たるものにし、バーチャルリアリティアプリの開発を支えています。バーチャルリアリティは重要な技術なので、C#の未来は明るいでしょう。 補足として、C#は米国の外、例えば英国の企業での開発でも人気があります。マイクロソフトもC#をしばらくは活用し続けNETプラットフォームで重要な言語とするつもりでしょう。そして技術者が活用し易い様にアクセス可能なオープンソースの製品を積極的に打ち出すでしょう。   まとめ プログラミング初心者がどの言語を学ぶべきか？ Web開発に関わるならばJavaScriptを学ばねばならないのは明らかです。バックエンドのウェブ開発をしたいのならSQLは必須でしょう。 データ関連のウェブサイトやデータサイエンスに関心があるのなら、Pythonが推奨されます。企業で働くのなら、Javaが必要です。システムの構築に関心がなく、単に労働機会が欲しいだけならSQLをおすすめします。（特に数学好きであれば） TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。未経験でもこれからプログラミングを習得したいと思っている方は特にご覧ください！ また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
プログラミング

【事例付き】様々なサービスに活用！画像認識技術とは

デジタルカメラのスマイルシャッターや、iPhoneXのFaceIDなど、画像認識の技術は私達の身の回りで多く使われており、生活を便利に豊かにしてくれています。 近年のコンピューターの性能向上、とりわけ人工知能(AI)の技術の向上と共に、画像処理の技術は飛躍的な発展を遂げました。すでに画像／動画認識率において、コンピューターは人間のレベルを凌駕する領域にまで達しています。 それでは画像認識はどのような技術なのでしょうか。仕組みや原理、どのようなシーンで使われているかなど、この記事で確認して行きましょう！   なお本記事は、TechAcademyのオンラインブートキャンプ、AI講座とデータサイエンス講座の内容をもとに作成しています。   目次 画像認識とは 画像認識の仕組み、原理とは 画像認識の事例 画像認識ができるライブラリまとめ   田島悠介 今回は画像認識について解説するよ。 大石ゆかり 田島メンター！画像認識というのは具体的にどのような技術なんですか〜？ 田島悠介 パターン認識技術の1つなんだ。詳しく見ていこう。 大石ゆかり 分かりました！   画像認識とは 画像認識とは、画像や動画から特徴をつかみ、対象物を識別するパターン認識技術の1つです。 人間は、画像に写っているものが何であるか、これまでの経験から「理解」して判断することができます。しかし、コンピューターは画像に何が写っているかを「理解」することができません。 その代わりに、沢山の画像データから、対象物の特徴を学習させることで、未知の画像を与えた時に、対象物が何であるかを「確率」として表現することができるようになります。 画像認識の歴史は古く、1960年頃から研究されて来ました。昔はコンピューターの性能が低く、価格も高価であったため、大学の研究機関などの限られた分野での利用が主でしたが、現在ではパーソナルコンピューターはもちろん、デジタルカメラやスマートフォンなど、多くの電子機器に画像認識機能が取り入れられています。   また、画像認識は人工知能(AI)におけるディープラーニング技術により、近年著しい進化を遂げています。 ディープラーニングによる画像認識が大きく注目されるようになったのは、2012年に開催された「ILSVRC2012」という画像認識の大会です。この大会では、ImageNetという大量のラベル付き画像（画像と写っている物の名前のセット）を基に画像認識率を競い会います。前年度までの正解率は、高くても70%台前半でした。 TensorFlow Inception-v3 ところが2012年、ディープラーニングを使ったモデルが、一気に約85%の正解率を叩き出します。翌年からは、ディープラーニングを使ったモデル同士が競い合うようになり、正解率もどんどん向上して行きました。現在では正解率95%以上、人間を超えるレベルにまで到達しています。 それでは、画像認識の仕組み、原理はどのようなものなのでしょうか。詳しく見ていきましょう。   [PR] 未経験からWebエンジニアを目指す方法とは画像認識の仕組み、原理とは はじめに、画像認識を行うためには、その前段階として、画像から対象物（もの）を抽出しなくてはなりません。 人間は画像から対象物を視覚として判断できますが、コンピューターにとっては、画像はピクセル毎の情報（色合い、明るさ）の集合体でしかありません。 また、対象物も様々な角度、大きさ、明るさで画像の中に存在しています。コンピューターに取ってみれば、ノイズだらけの混沌とした情報から、対象物を認識しなければならないのです。   そのため、画像認識の前に、コンピューターが画像を認識しやすくする処理を行います。その作業を画像処理と言います。画像処理は概ね以下のような手順で行われます。 画像のノイズや歪みなどを取り除く オブジェクトの輪郭を強調したり、明るさや色合いを調整することで、オブジェクトを抽出しやすくする 画像からオブジェクトの領域を切り出す（領域抽出） ※領域抽出と画像認識は並行して行われることもあります。 領域抽出を行うことで、オブジェクトを一定の大きさで扱うことが出来るため、画像認識を行いやすくなります。 それでは、いよいよ画像認識についてです。 コンピューターに対象物を認識させるためには、おびただしい量の画像データとラベル（画像データが何を表すか）を与え、対象物を学習させる必要があります。 ここで機械学習が登場します。コンピューターは、画像データとラベルの組み合わせをもとに、ラベル毎の画像データの特徴を学習します。例えば「画像データのどの位置が濃い」といった特徴です。この学習の成果を「モデル」と言います。 Google この時、元の画像を白黒にしたり、傾けたりすることで、学習データを増やすことも良く行われます。 Google 学習が進むと、コンピューターは画像データから、対象物の特徴を判断できるようになります。例えば人であれば「目が2つ」「口が1つ」というような情報をコンピューターが得るわけです。 少し前に、「Googleの研究開発によってコンピューターが猫を認識できるようになった」と話題になりました。その論文では、コンピューターが認識した「人間の顔」も掲載されていますので紹介しておきましょう。少し不気味ですが、目や口、鼻といった特徴が認識されていますね。 Google これらの学習結果をもとに、コンピューターに未知の画像を与えると、コンピューターは未知の画像から対象物を認識し、対象物が何であるかを「確率」として表現することができるようになります。   画像認識の事例 それでは次に、画像認識の事例について見ていきましょう。現在、画像認識技術はとても広い分野で活用されています。 セキュリティ分野 現在最も盛んに研究が行われている分野の1つでしょう。監視カメラの映像分析、顔認証システム、不審者侵入検出など、多くのソリューションが実用化されています。 NEC NeoFace http://jpn.nec.com/physicalsecurity/case.html 監視カメラ映像から顔認証を用いて犯罪者データベースと照合 パナソニック 顔認証ゲート http://news.panasonic.com/jp/press/data/2017/12/jn171215-1/jn171215-1.html 羽田空港での、日本人の帰国手続の合理化に貢献   文字認識 古くから研究されている分野です。文字読み取り技術は「OCR（Optical Character Recognition）」とも呼ばれます。最近は翻訳技術と組み合わせたシステムも多く実現されています。 郵便区分機 https://ja.wikipedia.org/wiki/%E9%83%B5%E4%BE%BF%E5%8C%BA%E5%88%86%E6%A9%9F 機械学習ではありませんが、世界最大規模の文字認識システムは、郵便局の郵便区分機です。OCRだけでなく、物流と組み合わせたソリューションは、一読の価値があるでしょう。 Google翻訳の「リアルタイム翻訳」 https://play.google.com/store/apps/details?id=com.google.android.apps.translate&hl=ja Google翻訳アプリには、カメラを使ってテキストをリアルタイムに翻訳する機能が実装されています。文字認識精度、スピードも意外に速く、オンラインでは約38種類の言語に対応しています。文字認識と翻訳技術を組み合わせた、素晴らしいソリューションです。   その他 その他にも、画像認識技術はとても広く使われています。 工場における異常生産品の検出 SNSや個人売買アプリにおける不適切な画像の検出 自動車の運転アシスト技術 農作物の生育状況把握   画像認識ができるライブラリまとめ 最後に、代表的な画像認識のライブラリをご紹介します。 OpenCV http://opencv.org/ 画像処理、画像認識ライブラリの代表格です。インテルが開発・公開しているオープンソースのライブラリ（一部アルゴリズムは非商用）で、画像認識だけでなく、画像のノイズ除去、3次元画像処理、AR/VR対応等、幅広い画像処理を行うことができます。   TensorFlow https://www.tensorflow.org/ ディープラーニングのライブラリですが、もちろん画像認識にも使うことができます。   Caffe http://caffe.berkeleyvision.org/ こちらもディープラーニングのライブラリです。特に画像認識に強いと言われています。   Chainer http://chainer.org/ Preferred Networksが開発した、国産のニューラルネットワークのライブラリです。   Google Cloud Vision API https://cloud.google.com/vision/?hl=ja Googleの画像認識技術の機能を利用できるAPIです。既に学習済のモデルを利用することができます。多くの対象物を認識できます。1000呼び出し/月まで無料で使えるので、試してみると良いでしょう。   Watson Visual Recognition https://www.ibm.com/watson/jp-ja/developercloud/visual-recognition.html IBMのWatsonの画像認識機能です。こちらも学習済のモデルを利用することができます。また、認識結果を日本語を含む多言語で返すことができるという特徴があります。   田島悠介 画像認識について、理解は深まったかな？ 大石ゆかり 画像認識って、とても多く使われているんですね。勉強になりましたー！ 田島悠介 気軽に利用できるAPIもあるから、使ってみるといいよ。深層学習や機械学習、自然言語処理については、また別のところで説明するね。 大石ゆかり 分かりました。ありがとうございました！   今回は、画像認識について解説しました。 これから画像認識を勉強したい、機械学習を使って何か作ってみたいという方は最初に理解しておきたい内容でしょう。 TechAcademyでは、初心者でも、AI（人工知能）の構築に必要な機械学習・ディープラーニングについて実践的に学習することができる、オンラインブートキャンプAI講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる
機械学習

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

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