TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby モデルの関連付け！ruby on railsで書くassociationの使い方【初心者向け】
オーダーメイドコース
icon
icon
Ruby

モデルの関連付け！ruby on railsで書くassociationの使い方【初心者向け】

Railsでassociationを使う方法を解説しています。Webアプリを開発する中では当然のように必要になってくるものなので使えるようにしておきましょう。実際にソースコードを見ながら理解していきましょう。

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

RubyのフレームワークのRuby on Rails にはassociationという機能があります。これは、モデルとモデルを関連付けるためのもので、これを行うことによってコード内の操作がわかりやすくなります。

 

なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター！！associationというのは何ですか〜？

田島悠介

associationはモデル同士を関連付けることを言うんだ。モデルとモデルに強い関連性があって、何かの処理を同時に行う必要がある場合などに役立つよ。

大石ゆかり

片方を消したらもう片方も消さないといけない、とかですか？

田島悠介

そんな感じだね。実際にどのようにモデル同士を関連付けるか見てみよう。

 

associationの書き方

今回はブログシステムを例に考えてみます。以下のように、ブログは一人のユーザー(User)に対して、たくさんの投稿(Post)が関連づけられています。

TechAcademyのブログ
|---初めてのRails
|---初めてのassotiation

これをコードで表すと以下のようになります。

class User
has_many :posts
end
class Post
belong_to :user
end

Userクラス内でpostsと複数形になっているのに注意してください。

このように、一つのユーザーに対して、多数の投稿を関連付けることができました。

 

田島悠介

“has_many”と”belogns_to”を使った1対多の関連付けだよ。英語で考えると分かりやすいね。

大石ゆかり

この場合だと、親要素のUserがたくさんのPostという子要素を持っている形になりますね。

田島悠介

こうすることによってUserを削除したとき、関連したPostのデータも同時に削除されるようになるんだ。

 

データの取得方法

TechAcademyのブログ
|---初めてのRails
|---初めてのassociation

先ほどと同じように、ブログのユーザーとポストで考えてみたいと思います。

user.posts.size            #=>2
user.posts[0].text     #=>初めてのRails
user.posts[1].text     #=>初めてのassociation
Parent.Children.要素名

で取得することができます。

 

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

データの保存方法

次にデータの保存方法について説明します。

user = User.create(name: "TechAcademyのブログ")
post = user.posts.create(text: "初めてのRails")
user.name    #=>TechAcademyのブログ
user.posts[0].text   #=> 初めてのRails

また、以下のようにcreateの代わりにbuildを使うとデータベースに保存されずに使用することができます。

user = User.create(name: "TechAcademyのブログ")
post = user.posts.build(text: "初めてのRails")
user.name    #=>TechAcademyのブログ
user.posts[0].text   #=> 初めてのRails
post.persisted?   #=> false

 

合わせてマイグレーションの実行を行う方法などをまとめた記事もご覧ください。

簡単にassociationについて解説しました。

モデルを扱う上で大事な知識になりますので、是非理解を深めておきましょう。

 

田島悠介

関連付けられたものについて、データを取得したり保存する方法を解説したよ。

大石ゆかり

1対多の関係性は色々なものに適用できそうですね。

田島悠介

has_manyで関連付けを行った場合、対象のモデル名は複数形にすることを忘れないようにしよう。

大石ゆかり

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

 

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。

記事を検索

関連するキーワード

関連する記事

Rubyの配列の比較方法を現役エンジニアが解説【初心者向け】

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

Rubyで日本語を含むスクリプトでエラーが起こるときの解決方法

Rubyで日本語を含むスクリプトでエラーが起こるときの解決方法について解説します。   そもそもRubyについてよく分からないという方は、Ru...
Ruby

RubyのFileutilsでファイル操作 （削除、コピー、移動等）を行う方法【初心者向け】

RubyのFileutilsでファイル操作 （削除、コピー、移動等）を行う方法について解説します。   そもそもRubyについてよく分からない...
Ruby

実践の場で役立つ！Ruby on Railsのbefore_actionの使い方【初心者向け】

初心者向けにRubyのフレームワークRailsで使えるbefore_actionの書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使...
Ruby

Rubyでcallメソッドを使う方法を現役エンジニアが解説【初心者向け】

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

Rubyでendを使ってブロック構文を使い分ける方法を現役エンジニアが解説【初心者向け】

Rubyでendを使ってブロック構文を使い分ける方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
Ruby

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

作成してみよう！LaravelでAPIを扱う方法【初心者向け】

LaravelでAPIを扱う方法について解説します。 CRUD操作のAPIを実際に作成しているので、書き方を覚えておきましょう。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、Laravelに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Laravelでapiを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   APIとは API（Application Programming Interface）は、アプリケーション同士を協調して動作させるための仕様です。 アプリケーションはAPIを提供することで、他のアプリケーションとやりとりすることができます。 例えば、Twitter、Facebookなど様々な事業者は自社のサービスを外部のアプリケーション向けに提供するために、Web APIを公開しています。外部のアプリケーションはそれらのWeb APIを通してサービスを利用できます。 私たちがWebページを参照する場合、WebブラウザがHTTPのURLにリクエストし、レスポンスとして返されるHTMLを描画します。 それと同様にWeb APIの場合も、アプリケーションがHTTPのURLにリクエストし、レスポンスとして返されるデータを処理します。 Web APIでは、HTTP経由でJSON形式のメッセージを送受信するのが一般的です。JSON（JavaScript Object Notation）は、JavaScriptの記法をベースにオブジェクトを表記する方法で、様々なプログラミング言語で使われる汎用的な形式です。   APIの作成方法(crudなど) 基本的なCRUD（Create, Read, Update, Delete）の操作について、一番簡単な作成方法を説明します。 以下のような手順で作成します。 データベースマイグレーションを実施する。 モデルを実装する。 リソースコントローラを実装する。 APIリソースルートを追加する。 マイグレーション、モデルはWebページと共用できます。 コントローラ、ルートはAPI用の実装になり、Webページ用とは以下の点で異なります。 リソースコントローラでは、フォームを表示するアクション（create, edit）が不要。 各アクション（index, show, update, destroy）はJSON形式の文字列を返す。 ビューの実装が不要。 routes/api.phpファイルにルートを追加する。 実際のアプリケーションでは、認証やバリデーション等の実装も必要になりますが、今回は説明しません。 また、APIリソースを使って作成する方法についても、今回は説明しません。   [PR] 未経験からWebエンジニアを目指す方法とは実際に書いてみよう 例として、Post（投稿）というリソースに対するCRUD操作のAPIを書いてみましょう。 ターミナルでLaravelのartisanコマンドを実行して、マイグレーション、モデル、リソースコントローラの雛形を一気に生成します。 $ php artisan make:model -m -c -r Post 生成されたマイグレーションで、テーブルに必要なカラム（title, contentなど）を定義しておきます。 $table->string('title'); $table->text('content'); ターミナルでLaravelのartisanコマンドを実行して、マイグレーションを適用します。 $ php artisan migrate モデルで、$fillableプロパティを定義しておきます。複数代入の脆弱性を排除するためです。 // 複数代入可能な属性を指定 protected $fillable = ['title', 'content']; リソースコントローラの各アクションの中身を実装します。 アクションからEloquentオブジェクトやコレクションなどを返すとJSONに変換されます。 create、editは不要なので削除します。 public function index() { // 投稿を作成日時の新しい順でペジネーションした結果を返す return Post::latest()->paginate(); } public function store(Request $request) { // リクエストパラメータから取得した値をもとにPostを作成する
PHP

実際の現場で使える！Ruby on Railsのhas_manyの使い方【初心者向け】

RubyのフレームワークのRuby on Rails内ではモデル同士でのリレーション（関連付け）を行うことができます。今回はそのリレーションの中のhas_manyについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次associationの書き方データの取得方法データの保存方法 Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回はhas_manyについて解説するよ。 大石ゆかり 田島メンター！！has_manyはどこで使うんですか〜？ 田島悠介 1対多のモデル同士の関連付けで使用するんだ。これはbelongs_toとセットで覚えておこう。実際にどういう形になるか見てみようか。 大石ゆかり 分かりました！   has_manyとは 1対多を表す関連付けになります。 ある1つのモデルに対し、複数個のモデルが関連付けられる場合にhas_manyを使用します。   belongs_toとは 1対多の関連がある場合に、多の関連のモデルから1のモデルを参照する場合はbelongs_toを使用します。 belongs_toには「所有する」という意味があります。 ユーザーとその投稿の関係について考えてみましょう。 ある投稿はユーザーが投稿したものになりますので、ユーザーが投稿を所有するというような関係になります。   [PR] 未経験からWebエンジニアを目指す方法とはなぜ関連付け？ それではまず、なぜ関連付けを行わなければいけないのかから解説したいと思います。 以下のような構造のブログがあったとします。 TechAcademyのブログ(User) ├ 初めてのRails(Post) └ 初めてのhas_many(Post) あるユーザー（1）に対して、複数の投稿（多）があり、1対多の関係が成り立っていますね。 ユーザーをUser、ブログの投稿名をPostとするとモデルの定義は以下のようになります。 Class User end Class Post end ここで、Userに関連付けた新しい投稿を作成したいと思います。すると、 @post = post.create(user_id: @user.id) 上記のようにコード毎に毎回関連付けを行わなければいけなくなります。 さらに面倒なのは削除する際です。 ユーザーとそれに関連付いたPostを削除しようとすると以下のようになります。 @posts = Post.where(user_id: @user.id) @posts.each do |post| post.destroy end @user.destroy コードも分かりにくくなります。 それをわかりやすくするためにhas_manyは存在しています。   田島悠介 「ブログ名」と「投稿された記事」という場合の例だよ。 大石ゆかり UserがいないとPostは作成されないですから、この二つは切り離せない関係性がありますね。 田島悠介 そしてUserはひとつであるのに対して、Postは複数存在することになるね。こういうときに1対多の関連付けが有効になるんだ。   has_manyの使い方 has_manyの使い方はモデルに以下のコードを追加してください。 Class User has_many :posts end Class Post belongs_to :user end すると、新しいPostを作成する際は、以下のコードで作成することができます。 @post = @user.posts.create さらに削除する際は、モデルを以下のようにし、 Class User has_many :posts, dependent: :destroy end Class Post belongs_to :user end 以下のコードを実行すると削除することができます。 @user.destroy このようにhas_manyを使用するとモデル間の関係をわかりやすく表すことができます。 今回の説明ではデータの作成と削除のみでしたが、has_manyにはまだまだ便利な機能が存在しています。 興味のある方は調べてみてください。   田島悠介 has_manyとbelong_toを、それぞれのモデルに追記しよう。 大石ゆかり ひとつのUserに、たくさんのPostが関連付けられるんですね。 田島悠介 Userのhas_manyのところでは「post」ではなく「posts」になっているよ。has_manyを使ったとき、対象のモデルは複数形になることを覚えておこう。 大石ゆかり 分かりました！ありがとうございます！   まとめ 本記事では、Ruby on Railsにおけるhas_manyやbelongs_toについて解説しました。 has_manyとは belongs_toとは なぜ関連付けするのか has_manyの使い方 has_manyやbelongs_toを理解することで、効率的なデータベースの操作を実現できます。 ぜひ使いこなせるように覚えておきましょう。   Ruby on Railsを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのWebアプリケーションコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、Ruby on Railsを使ったWebアプリケーション開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
Ruby

【開発現場で使える！】Ruby on RailsでのValidationの使い方

普段サイトなどで会員登録をする際に「パスワードは最低8文字以上でなければなりません」といった文言をよく見るかと思います。 こういった制約をRubyのフレームワークのRuby on Railsではバリデーション(Validation)という仕組みで用意することができます。 ここではValidationの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次associationの書き方データの取得方法データの保存方法 Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回はバリデーションについて説明するよ。 大石ゆかり 田島メンター！！バリデーションというのは何ですか〜？ 田島悠介 バリデーションは、ある値に対して指定した条件に当てはまるかどうかというのを検証するものだよ。例えばメールアドレスが正しく入力されているかとか、パスワードの文字は8文字以上であるかとかだね。 大石ゆかり なるほど、実際によく見るやつですね。ぜひ覚えておきたいです！   バリデーションとは Ruby on Railsには、ユーザが入力した値を検証する為にバリデーション(Validation)という仕組みがあります。 例えば入力必須の項目や、最低何文字以上入力必須などの制約を設ける際に利用します。 この仕組みを利用すれば、データベースに不正なデータが登録されることを防ぐことができます。 例えば、あるWEBサイトで年齢を入力する欄があったとします。 何も対策していない状態で-1を入力して登録ボタンを押してしまうと、-1が年齢としてデータベースに登録されてしまいます。 このような不正な状態が起きないようにするため、バリデーションを利用します。 おかしい値が入力された場合は「年齢に不正な値が入力されています」といったエラーメッセージを表示し、登録されないようにします。 これがバリデーションの役割です。 バリデーションの構文 バリデーションはモデルに対応するファイルに記載していきます。 例えばUserモデルのnameに対して、必須入力であることを表すバリデーションを設定する場合は以下のように書きます。 class User < ApplicationRecord validates :name, presence: true end これでnameの入力は必須になりました。 nameの入力がない状態でUserを保存しようとするとこのようなエラーになります。 Validation failed: Name can't be blank (ActiveRecord::RecordInvalid) nameが空白の状態だというメッセージが表示されていますね。 バリデーションにはいくつか種類がありますので、のちほど説明します。 バリデーションがトリガーされるメソッド バリデーションがトリガー(実行)されるメソッドがいくつかあるので紹介します。 create データベースに登録するときに使用するメソッドです。 User.create(name: "tarou") バリデーションで不正なデータが見つかった場合はデータベースに保存されません。 create! createメソッドと同じくデータベースに登録するときに使用するメソッドです。 User.create!(name: "tarou") createメソッドと異なるのは、バリデーションで不正なデータが見つかった場合は例外エラーとして処理されます。 前述でも紹介した Validation failed: Name can't be blank (ActiveRecord::RecordInvalid) このようなエラーが表示され、実行中の処理は止まります。 save データベースに登録するときに使用するメソッドです。 User.new(name: "tarou").save 正常に保存できた場合はtrue、保存できなかった場合はfalseを返します。 save! saveメソッドと同じくデータベースに登録するときに使用するメソッドです。 User.new(name: "tarou").save! saveメソッドと異なるのは、バリデーションで不正なデータが見つかった場合は例外エラーとして処理されます。 実行中の処理は止まります。 update すでに存在するデータを更新するときに使用するメソッドです。 User.update(name: "tarou") 正常に更新できた場合はtrue、更新できなかった場合はfalseを返します。 update! updateメソッドと同じくデータを更新するときに使用するメソッドです。 User.update!(name: "tarou") updateメソッドと異なるのは、バリデーションで不正なデータが見つかった場合は例外エラーとして処理されます。 実行中の処理は止まります。 valid?メソッド valid?メソッドはバリデーションの結果を確認できます。 user = User.first user.name = "tarou" user.valid? valid?メソッドを実行したときのモデルの状態でバリデーションを実行します。 不正なデータが見つかった場合はfalseを、問題なければtrueを返します。 データベースへの保存はしません。 バリデーションがスキップされるメソッド 逆にバリデーションがスキップされる(実行されない)メソッドもありますので注意してください。 バリデーションはスキップしますが、データベース上の制約に引っかかる場合はデータベース側での保存時にエラーになりますのでご注意ください。 increment! increment!メソッドはある数値項目をいくつか増分して、保存するメソッドになります。 以下の例はユーザーのidを1増やして、データベースに保存しています。 user = User.first user.increment!(:id, 1) また増分ではなく減算をするdecrement!メソッドもあります。 こちらもバリデーションはスキップします。 increment_counter increment_counterメソッドもある数値項目を増分させるメソッドですが、複数のデータを対象に更新できます。 以下の例はユーザーのageが25であるユーザーのageを1増やして、データベースに保存しています。 User.increment_counter(:age, 25) また増分ではなく減算をするdecrement_counterメソッドもあります。 こちらもバリデーションはスキップします。 toggle! toggle!メソッドは真偽値(true/false)を反転させて、データベースに保存します。 以下の例はユーザーのanswered(アンケートなどの回答有無)を反転させています。 user = User.first user.toggle!(:answered) touch touchメソッドはupdated_at(更新日時)を更新して、データベースに保存します。 user = User.first user.touch update_all update_allメソッドは複数のデータに対して、項目を更新し、データベースに保存します。 以下の例はすべてのユーザーのnameをtarouに更新しています。 User.update_all(name: "tarou") update_attribute update_attributeメソッドは指定した項目を更新し、データベースに保存します。 以下の例はユーザーのnameをtestに更新しています。 user = User.first user.update_attribute(:name, "test") update_column update_columnメソッドは指定した項目のみを更新し、データベースに保存します。 update_attributeメソッドと異なる点は、updated_atの更新はされないということです。 以下の例はユーザーのnameをtestに更新しています。 user = User.first user.update_column(:name,"test") update_columns update_columnsメソッドは複数項目を更新し、データーベースに保存します updated_atは更新されません。 以下の例はユーザーのidを100に、nameをtestに更新しています。 user = User.first user.update_columns(id: 100, name: "test") update_counters update_countersメソッドは条件に合致したユーザーの項目を増分させて、データベースに保存します。 以下の例はidが1～100のユーザーのageを1増分しています。 User.where(id: 1..100).update_counters(age:
Ruby

Laravelでjoinを使う方法【初心者向け】

Laravelでjoinを使う方法について解説します。 データベースを操作する上で必須の知識なので、ぜひ書き方を理解しておきましょう。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、Laravelに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Laravelでjoinを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   テーブルのjoinとは データベースを操作するソフトウェアのなかにはテーブル単位で整理されたデータ、テーブル間の関連（繋がり）、を操作するための様々な手段が提供されているものがあります。 これをリレーショナルデータベースマネージメントシステムといい、Laravelでもよく使われるmysqlなどはこれに当たるかと思います。 joinとは、テーブル同士を関連させて取得するためのSQL構文で、 SELECT posts.id, comments.id FROM posts JOIN comments ON posts.id = comments.post_id; のように、postsのレコードを取得する際に、postsのidの値をpost_idとして持っているcommentsのレコードと一緒に取得してくることができます。（関連のつけ方はキー (ここでは各idカラム) による方法に限りません、またjoinに関しても種類があります）   Laravelのmodelの書き方 Laravelではテーブルに対応したModelを定義し、関連を明示することで上記のようなデータをうまく扱うことができます。（ここはModelとして、Laravel標準のORM、Eloquentを使います） 関連の種類は、1対1、1対多、多対多、hasManyThrough、その他ポリモーフィック関係など構文が使用できます。 hasMany: テーブルのレコードに対して、関連テーブルの複数のレコードが紐付ける belongsTo: テーブルのレコードに対して、関連テーブルの1つのレコードが紐付ける belongsToMany: テーブルの複数のレコードに対して、関連テーブルの複数のレコードを紐付ける (両テーブルとbelongsTo関係にある中間テーブルを介する) hasManyThrough: テーブルのレコードに対して、関連テーブルの複数のレコードを紐付ける (hasManyとの違いは、大元のテーブルとbelongsTo関係に、関連テーブルとhasMany関係にある中間テーブルを介する)   [PR] 未経験からWebエンジニアを目指す方法とは実際にLaravelでテーブルを結合させてみよう テーブルの構造は以下のようになっているとしましょう。 * posts * title: string * body: text * comments * post_id: integer * body: text これは典型的な post hasMany comments、 comments belongsTo post な関係です。Post、Commentモデルの定義を行います。それぞれ以下のようになります。 app/Post.rb <?php namespace App; use IlluminateDatabaseEloquentModel; class
PHP

PHPでフォームからデータを受け取る方法（GETとPOST）

プログラミング初心者向けに、PHPの基礎を紹介する記事です。 今回は、フォームからデータを受け取る方法について解説します。 最初にフォームの送信方法とPHPでの受け取り方に関しての説明をします。 その後、実際に動くコードを作成してデータの送受信を試していきます。 フォームでのデータのやりとりはWebサイトなどでは基本なので、ぜひ覚えておきましょう。   目次 GETとPOSTとは HTMLのフォーム 送信されるデータ フォームデータの受け取り方 受信データのバリデーション 実際にコードを書いてみよう 開発環境はXAMPPを使っています。   GETとPOSTとは PHPにおけるデータの受け取り方には、GETリクエスト と POSTリクエスト を使う2通りの方法があります。 POSTリクエストはフォームからHTTP通信により送信され、送信データはリクエストの本体に含まれます。 GETリクエストはフォームやリンクからHTTP通信により同じように送信されますが、送信データはURLの最後に？に続いて　パラメータ名=値という形式で付加されます。     大石ゆかり フォームを使ってデータを送信できるんですね。 田島悠介 そうなんだ。フォームから送ったデータを、PHPで取得できるんだよ。 大石ゆかり いろいろなところで使われてそうですね。 田島悠介 そうだね。後、フォームじゃないんだけどURLの最後に?p=2とか/p2/もGETでデータを送ってることになるんだ。 多くは何ページ目とかに使われるね。HTMLでフォームを作って送信してみよう！ [PR] 未経験からWebエンジニアを目指す方法とはHTMLのフォーム サーバにデータを送信するためには、HTMLのフォームを使います。 GETリクエストのフォーム フォームの構造は次のようなコードです。 <form action = “index.php” method = “GET”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> formタグのaction属性に送信先のURLを指定します。 送信方法はデフォルトでGETリクエストですが、method属性で POSTかGETに指定できます。 formタグ内の inputタグの値が送信するデータです。 この時、name属性がリクエストパラメータ名になり、value属性の値やテキストボックスに入力された値がそのパラメータの値です。 上のコードでは、フォームのデータは、commentというパラメータ名で入力値とのペアで送られ、送信方法はGETリクエストになり、送り先は index.php です。 POSTリクエストのフォーム POSTリクエストにしたい場合は、次のようにform要素のmethod属性をPOSTに変更するだけです。 <form action = “index.php” method = “POST”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> 送信されるデータ ここでは、例としてcommentという名前属性のinput要素に hogehogeという文字を入力して送信するとしましょう。 GETリクエストのデータ データがURLの一部として含まれてサーバに送られます。 送信先は index.phpとすると、URL全体は次のようになります。 http://index.php?comment=hogehoge ここで注目していただきたいのは、後に付けた?comment=hogehogeの部分です。 GETリクエストのデータは基本的には、 ? の後に パラメータ名=値のペアの形式で送られます。 複数のデータの場合は、間を & でつなげます。 http://index.php?comment=hogehoge&title=hello このURLで送られるのは、 comment=hogehogeとtitle=helloという２つのデータ（パラメータ名=値のペア）です。     フォームデータの受け取り方 GETリクエストで送信したデータを受け取る GETリクエストで送信したデータは、グローバル変数である $_GET に連想配列という形で入っています。 そこで、PHPでデータを受け取るときは、この　$_GET を使います。 先ほどの例では、comment=hogehogeというデータが送られましたが、$_GETには、[‘comment’ => ‘hogehoge’] という連想配列で保存されます。 $_GETからデータを受け取るには、受け取りたいinput要素の name属性
PHP

JavaScriptでPOST送信する方法を現役エンジニアが解説【初心者向け】

JavaScriptでPOST送信する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptでPOST送信することで、Webページのデータをサーバに送信できます。 実務でもサーバとデータ連携することが多いので、ぜひ学習してみてくださいね。 目次associationの書き方データの取得方法データの保存方法 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでPOST送信する方法について詳しく説明していくね！ 大石ゆかり お願いします！   POSTとは POSTとは、通信規格であるHTTP通信内で、Webページの中でサーバ(Webサーバ)とクライアント(ブラウザなど)とのやりとりに利用する1つの機能です。 ブラウザの表示方法として、GETという機能を使ってブラウザが「このURLのページを送って！」とリクエストを出し、Webサーバが指定されたURLのページをクライアントに送信し、ブラウザ上で目的のページが表示されます。 GETは主にサーバへWebページなどのデータをリクエストする際に利用するものであり、POSTは逆にデータを送信する際に使います。 POSTは、Webの掲示板などで文章を投稿する際などに利用されています。   JavaScriptでPOST送信する方法 POST送信を行うには、HTMLのフォームを利用するなど様々な方法があるものの、JavaScriptでPOST送信したい場合もあります。 例えば、Webアプリケーションの中には、ボタンを押した際に画面の遷移は行わないけど、画面の一部を書き換えたい場合などは、JavaScriptを使ってPOST送信をすることが可能です。 今回は簡単な数値計算アプリケーションを使って、JavaScriptによるPOST送信の方法を見ていきましょう。 今回作成する数値計算アプリケーションでは、入力欄が3つあり、1つ目と2つ目に数値を入れましょう。 計算ボタンを押すと、3つ目の入力欄に2つの値を足した計算結果が表示されます。 画面は以下の通りです。   [PR] 未経験からWebエンジニアを目指す方法とは実際に書いてみよう それでは実際に、JavaScriptでPOST送信する方法を実装してみます。 送信されたデータはサーバ側でPHPのプログラムにより処理されます。   数値計算アプリケーションの例 今回作成した数値計算アプリケーションのソースコードは、HTMLファイルとJavaScriptファイル、サーバ側のPHPファイルです。 サーバ側PHPサンプルコード <?php $arg1 = $_POST['arg1']; $arg2 = $_POST['arg2']; $answer = $arg1 + $arg2; echo $answer; HTMLサンプルコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>計算機アプリ</title> <script src="script.js"></script> </head> <body> <input id="arg1" type="number"> + <input id="arg2" type="number"> = <input id="answer" type="number"> <br/> <button id="calc_button">計算</button> </body> </html> JavaScriptサンプルコード window.onload = function() { // 計算ボタンを押した際の動作を設定 document.getElementById('calc_button').onclick = function()
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby モデルの関連付け！ruby on railsで書くassociationの使い方【初心者向け】