close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 JUnit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 Wireshark パケットキャプチャ 管理職研修 部下育成 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 テスト技法 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上 データモデリング サーバーサイドJava Webサーバー基礎 Webサーバー応用 Watson IBMWatson Learning Topics OS モバイル コンテスト トレーニング手法 アーキテクチャ 人材モデル インフラ CI/CD Infrastructure as a Code チーム開発 制度づくり Special_Intro AI市場分析 研修ロードマップ 仕事術 デジタルトランスフォーメーション 財務分析手法 情報整理 PowerPoint 新しい研修 オンライン研修 見どころ紹介 統計分析 ディープラーニング G検定 情報処理技術者試験 販売管理 C# テスト計画 Linuxサーバー WEBサーバ構築 http/2 Postfix イーサリアム プロジェクト・メンバ 正規化 パケット実験 作業分解 トラブル調査 ネットワーク設計 Windows server 2016 ネットワーク機器 DX 管理職 最新動向 ポストコロナ時代 IoTデバイス マイコンボード センサ サーバー仮想化 仮想ルータ WAN インターネットVPN 若手エンジニア ITプロジェクト 人事面談 DX人材育成 Java基礎 ZAP 脆弱性診断 NWサービス構築 イノベーション・マネジメント ネットワークセキュリティ ストレッチ Google Cloud Platform 不動産業界 テレワーク(WFH) ドリル GCP ( Google Cloud Platform ) システム業界 PMS テレワーク ビッグデータ NoSQL OWASP CentOS8 ネットワーク技術 データ分析 デザインシンキング 保険業界 会議リーダー システムエンジニア 段取り術 プロジェクト原論 文章書き換え術 ノーコード No Code MongoDB Redis Cassandra 運用管理 Windows10 仮想マシン リモートワーク 働き方 生産性 IPSec Office セキュリティマナー ソフトウェア・レビュー ライフハック 新しい働き方 エクササイズ ビジネスモデルキャンバス 状況認識 ストレス 必須コマンド Web 今日わかる きほん 状況把握 意思決定 心の健康 IT書籍 書籍紹介 営業マン 類推法 クラス プロセス指向 PdM 共用 ウェビナーレポート 地方創生 GraphQL CSS OWASP ZAP セキュリティマネジメント 問題解決 ソフトウェア 新技術 雑談力 テスト見積もり Scala Go Rust Relay Cloud AI Kaggle ITエンジニア フレッシャーズ 経営戦略 事業戦略 マインドフルネス 基本情報技術者試験 ニューノーマル プロジェクト会議 メソドロジ 講師インタビュー システム障害 販売管理システム VMware セキュリティ事例 ケーススタディ インターネット通信 ビジネスマン 品質向上 提案 ロジック図解術 バーチャルマシン 対策事例 アスリート 国の動向 アンチパターン リモートアクセス 脳ヨガ 自律神経 整え方 組み立て方 コミュニケーション術 リーダー 新人 知っておきたいこと 対人能力 洞察力 一文作成 サッカー業界 グループワーク マネジメント手法 IT業界 Octave セキュリティ管理 IT ネットワーク機器の特徴 ネットワーク機器の仕組み 基本のキ プレゼンテーションの組み立て方 伝え力 試験合格後 時短術 作成のコツ 導入事例 メンタルマネジメント メンタルヘルスケア DXプロジェクト プログラミング教育 プログラミング的思考 子供向けプログラミング データ定義言語 DDL モダンWebアプリケーション ドキュメント作成 Docker Compose Docker Hub AR VBAエキスパート試験 Azure メディア掲載 サーバーアーキテクチャ データ操作言語 DML NewSQL ソフトウェアセキュリティ 数学 VR アパレル業界 Kubernetes Power BI Android プロダクトオーナーシップ プロダクトオーナー 内製化 情報システム部門 Z世代 クラウドネイティブ 技術教育 Windows server 2019 XSS CSRF クリックジャッキング ビジネスパーソン VPC IAM AWS Fargete ECS 問題発見力 問題分析力編 Access 流通業界 金融業界 ネットワーク設定 トラブル対応 評価 ソフトウェア品質 クレーム対応 呼吸法 戦国武将 エンジニアリング 組織論 SpreadSheet GAS ゼロトラスト Express 3D Arduino 業務分析法 業務構造 経営者 ストレングスファインダー 発注者視点 情報セキュリティ 顧客体験 エンターテインメント お笑い オンライン学習 オンライン教育 学校教育 情報化社会 スポーツ デジタル戦略 ITフェスティバル2022 GoogleSpreadSheet GoogleAppsScript(GAS) SQL 問題分析力 メタバース NFT 資産形成 資産運用 Typescript WebXR 講師が注目する技術 プラクティス ローコード ホワイトハッカーに学ぶ Google Cloud LinuC レイヤ3スイッチ ホワイトハッカー ハッキング 脆弱性 ビジネススキル キャリア戦略 NFTアート リテンションマネジメント ゲーム制作 トラブル防止 システム外注 食事メソッド コード ソフトウェア設計 ドメイン駆動設計 人事評価制度 報告書 稟議書 契約書 Rails 業務自動化 価値 原則 睡眠 IT用語 DBA 炎上対策 2022年版 パフォーマンス パフォーマンス向上 Kubernetes入門 実践 チューニング 2020年代 2010年代 リモートアクセスVPN VPN構築 Railsの教科書 CCNA試験 ウェビナー 老後 人生設計 OSPF入門 Ruby on Rails 脆弱性対策 説明上手 説明力 システム障害報告 システム障害解決 いまさら聞けない 仕掛けから考える ネットワーク基礎 社会人 基礎知識 今日から変わる 睡眠マネジメント 仕事の成果を上げる 出るとこだけ 情報セキュリティマネジメント試験 狩野モデル 独学 若手向け 若手に受けてほしい ルーティング基礎 ルーティング実践 ネットワークエンジニア はじめての サイバー攻撃対策 2022 機械学習エンジニア 実演 AI基礎 Java開発 HTML Web基礎 JavaScriptフレームワーク Vue.js入門 明日から使える 最新テクノロジー 生産性向上 組織開発 PMBOK®第6版 リスクマネジメント 結合 副問合わせ Linux 実践演習 シェルスクリプト入門 マネジメント変革 押さえておきたい DHCPサーバー DNSサーバー VLANスイッチ レイヤ3 LAN NW技術 ローカルエリアネットワーク 知っておきたい 基本文法 Windowsプログラミング ネットワーク全体像 Git入門 GitHub入門 Pyhtonライブラリ プロジェクト QCD管理 Ruby入門 オブジェクト指向言語経験者向け PMBOK®ガイド第7版 ディープラーニング入門 グラフデータベース LinuC入門 サーバサイドJava入門 基礎編 応用編 AWS入門 AWSサービス ファイアウォール構築 Docker入門 データベース設計技術 オンプレミス オンプレ オンプレAD Windows Admin Centre データベース概念設計 Javaプログラミング 1日プログラミング特訓 AI開発 微分 線形代数 行列 統計検定 統計検定準拠 MySQL データベースメンテナンス データベース論理設計 ファイアウォール入門 副問合せ 顧客の売上アップ 売上アップ Azure入門 自分でつくる Docker実行環境 午後アルゴリズム問題 解き方のコツ FE シェルスクリプト実践 仮題で学ぶ 課題で学ぶ 現場 コミュニケーション管理 DX最新動向 DX推進人材 DX人材 Windows server Django データベース連携 インフラエンジニア最新動向 なんとなくわかるからもう一歩 アルゴリズム入門 アルゴリズム基礎 プログラム ハードウェア Javaアルゴリズム 1日特訓 現場でよく使う Rails入門 データベース障害復旧 Google Cloud Vision AI Dialogflow Cloud Functions Pythonプログラミング 社内資格制度 今日から使える 「仕掛け」から考える ITベンダー 診断ツール Webセキュリティ Webセキュリティ基礎 新任PM 新任PL テスト NW機器 独学できる Windows Admin Center プログラミング体験 Java開発者のための C#開発 RPA RPA入門 NWエンジニア NFT入門 だれにでもわかる サーバサイドJavq サーバサイドJava基礎 サーバサイドJava応用 炎上しないための AWSサーバ プログラム基礎 アセンブラ基礎 人工知能 ICT 課題解決 自律性 システム開発基礎 プロジェクト基礎 Webアプリ パターン別 アプリケーション開発 エンジニア初級 2022年からの 実用的な 発注 受け入れ Microsoft Office AI最新動向 良いSQL 悪いSQL データベース管理 インデックス Webの基本 NW管理 C#開発者のための ルータ TCP/IP通信 積分 数学基礎 NWセキュリティ 基本パターン JavaScriptでつくる DX時代 デザインシンキング入門 データ構造 PHPフレームワーク Linuxで学ぶ 速習 VLAN基礎 ゼロからはじめる jQuery入門 JavaScriptドリル Ruby on rails基礎 テストツール リレーショナルデータベース はじめて学ぶ データベースのしくみ 人生100年時代 令和 デザイン デザイン入門 現場ですぐに使える テーブル設計実践 情シス 外部設計 外部設計基礎 小規模ネットワーク Linux必須コマンド 違いを知ろう AWS CLI AWS CLI入門 CloudFormation NW設計 親子で作る メタバースプログラミング サーバー仮想化入門 DNSサーバー構築 秋冬版 IoT基礎 新人PM マネジメント研修 人を動かす 仕組みづくり イノベーション・マネジメント入門 心理的安全性 チーム チーム運営 3時間で学ぶ OS基礎 サーバー基礎 情報漏えい対策 プロジェクトマネジメント入門 組織改革 やさしいチームのつくりかた 簿記から学ぶ ビジネス基礎 データベースマネジメント 乃木坂46 乃木坂46に学ぶ マーケティング論 なっとく! LinuCレベル1 101試験 LinuCレベル1 101試験 ファイルシステム ディスク管理 データ分析基礎 一発OKを引き出す 資料作成術 プレゼン資料 クラウドサービス NW NW構築 SQL入門 目標達成マネジメント マネジメント基礎 目標管理 行動分析学 人の動かし方 組織の動かし方 科学的な Tableau MongoDB基礎 IoT実践 データ収集 データ自動収集 データ管理 技術者 SEのための 論理的思考 PM PL アルゴリズム再入門 GoFデザインパターン オブジェクト指向未経験者向け 令和版 失敗事例から学ぶ データベース構築 原価管理 業務連動 Access基本操作 クエリ活用 フォーム作成 レポート作成 実務事例で学ぶ 実務 知識活用 ネットワーク管理コマンド PCスキル 最強の習慣 ストレスフリー 作業効率化 Windows 11 webサーバ カラダとココロ ハワイアンストレッチ 身体のケア ストレス解消 パワーアップ リフレッシュ 1日で習得する ユーザ視点で考える 今知っておきたい UX向上 ユーザエクスペリエンス ユーザ体験 比べて学ぶ 仮想化 仮想マシンとコンテナ データサイエンスプログラミング データ視覚化 オリンピックコーチが伝える セルフマネジメントメソッド セルフイメージ 仮想環境 仮想環境で学ぶ セキュリティ実践 サーバーセキュリティ オンライン攻撃事例 質問技法 SE JavaScriptだけでつくる バッチ処理 テストデータ作成 ストアドプロシージャ バッチ テストデータ 実践編 デザイン力 テレワーク時代 収納術 インテリア術 サイバーセキュリティ 無線LAN Wi-FI 人事 BGP入門 ルーティングプロトコル 文系でもわかる 統計学入門 IPv6 IPv6入門 IPv4 人材育成 人が育つ仕組み 売れる仕組み マーケティング入門 セールスパーソン セールスマネージャー セキュリティ対策 計画の立て方 脱TCP HTTP/3 HTTP/3時代 AWS認定資格 Amazon Web Services 作業自動化 顧客折衝 Webサーバー自動構築 JavaScriptコーディング JavaScriptコーダーのための エンジニアのための ここが危ない テレワークセキュリティ サイバー攻撃事例 相手が理解し納得できる プレゼン 図解活用術 図解活用 Webアプリケーション Webアプリケーションセキュリティ クロスサイトスクリプティング OSコマンドインジェクション PowerPointで作る 資料デザイン 見やすい資料 IT業界人 知っておくべき 目の疲れ 眼精疲労 新習慣 習慣 栄養 運動習慣 イノベーション IMS ISO56000 イノベーション・マネジメントシステム 顧客視点 デザイン思考 Excel初級編 オブジェクト指向基礎 Javaでオブジェクト指向 Vue3 Vueアプリケーション FE試験 リーン開発 情報システム 情報システム開発 開発手法 C#プログラミング 応用情報技術者試験 AP AP試験 情報漏えい事例 心理学 E-R図 PMBOKから学ぶ 新人エンジニア 0年目エンジニア Webサービス Webサービス基礎 スコープ・ベースライン スコープ記述書 WBS辞書 ステークホルダ 3Dオブジェクト 3Dプログラミング canvas WebGL Three.js 3D描画 Pythonによる ローコードAI開発 Pandas scikit-learn Pycaret データ前処理 AIエンジニア Windows server基礎 攻撃対策 攻撃手段 マルウェア マルウェア対策 攻撃監視 Power BI Desktop BI ERD

「Rails の教科書」の著者から学ぶ Ruby on Rails 入門|研修コースに参加してみた

calendar_month2022-06-28 公開

今回参加したコースは 「 Rails の教科書」の著者から学ぶ Ruby on Rails 入門 です。

Ruby on Rails というと GitHub 、 Shopify 、 Airbnb といった海外スタートアップだけでなく、 Cookpad 、Qiita など日本のスタートアップでも数多く利用され、さらには Wantedly 、 YOUTRUST などは創業者自らが開発未経験から学んで開発するなど、スタートアップにとても愛され、重宝されている Web アプリケーションフレームワークです。

なぜ、これだけそんなスタートアップに愛されているのか不思議に思っていましたが、このコースで Ruby on Rails を使えば 「簡単に」 「素早く」 開発できること、これが理由だとわかりました! いや、本当に「 Rails すごい」

 

では、どのような内容だったのか、レポートします!

コース情報

想定している受講者 いずれかの言語でかんたんなプログラミングができるレベルを想定。 講師のデモを見ながら Rails でできることを学ぶ場合は、特に前提知識は不要
受講目標 Rails をつかった Web アプリづくりの基礎を身に付ける

講師紹介

この “参加してみた” レポートでは初めての登場となる 五十嵐 邦明さんが登壇されました。

講師紹介

五十嵐 邦明igaiga

一橋大学の非常勤講師として 2012 年から 2 年間、 Ruby と Rails を教える。 2019 年 7 月ガーネットテック373株式会社を設立、同社代表取締役社長。 RubyWorld Conference や RubyConf 台湾などで講演。 島根県 Ruby 合宿、 Rails Girls 、フィヨルドブートキャンプ、大名エンジニアカレッジなどで講師役を務める。

主な著書

「 Rails の教科書」(達人出版会 刊)
「 ゼロからわかる Ruby 超入門」(技術評論社 刊)
「 パーフェクト Ruby on Rails[増補改訂版]」(技術評論社 刊)

igaiga さんといえば、 Ruby と Ruby on Rails で人気の書籍を多く書かれていることで有名ですね! Ruby コミュニティでもご活躍なので、 Ruby を使う企業から研修講師として呼ばれてらっしゃいます。

DBモデリングとRSpecのワークショップを行いました – ペパボテックブログ
【第2回】パーフェクトRailsの著者を招いてRuby on Railsのアドバイスをもらいました – estie inside blog

今日は五十嵐さんが執筆された電子書籍、「 Rails の教科書」を 3 時間用に一部を切り取って進めていただきました。

  • 読者はプログラミング初心者向け
  • 大学の講義をアレンジしたもの

また、コース参加後、深掘りするためのガイドも紹介されるということで、コースがスタートしました。

RUby on Rails でサッと Hello World

Ruby on Rails とは

  • Ruby on Rails (以下 Rails と略します)とは
    • 20 年前に出てきた Ruby で Web アプリケーションを開発するためのフレームワーク
    • カンタンに Web アプリケーションを作れる
    • 今日もサクッと作ってみましょう

コードを試したい人は Ruby と Rails どちらもインストールが事前に必要でしたが、教科書が事前に配布され Windows / Mac どちらのインストール方法も丁寧に紹介されていました。

ちなみに、私は WSL / Ubuntu 環境だったので、 Web 記事を見ながら進めましたが、驚くほどつまづかずにできました。 Rails だけなら gem i rails の 1 コマンドで一気にインストールが完了です。

Rails で Hello World

まずは好きなディレクトリを作って、そこに移動して開発します。

早速、 Rails に用意されている Helloworld を表示するアプリを作ってみましょう。

$ rails new helloworld
# 中略
Done in 10.23s.
Webpacker successfully installed 🎉 🍰

ちなみに rails new で必要なライブラリをインストール( JavaScript のライブラリも含む)し、必要なファイルを生成してくれます(ナント!)。 Rails すごい。

では、 Web アプリケーションを起動してみましょう!

$ cd helloworld/
$ rails s
=> Booting Puma
=> Rails 7.0.3 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.4 (ruby 3.1.2-p20) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 353
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop

ブラウザで localhost:3000 を開いてみましょう!


コマンド操作がほとんどなくて、ここまで出来るとは驚きですね。 Rails すごい( 2 回目)。

Rails の仕組み

MVC (Model View Controller)

続いて、 Web アプリケーションが動く仕組みについて、ザッと紹介いただきました。

ブラウザからリクエストが送られて Web サーバがレスポンスを返す、 Model View Controller などを解説いただきました。 ただし、これは他の記事でも触れていますので、ここでは割愛し、 Rails に特化したところを紹介します。

Rails の構成

Rails のディレクトリ構成がどうなっているか、主要なものを解説いただきました。

helloworld/ : アプリのフォルダ
├ app/
│ ├ controllers/: いろいろな処理を行う(コントローラ)
│ ├ views/: 表示に関する処理( html など)
│ ⋮

├ config/
│ routes.rb: URL とコントローラの対応表

他のフレームワークだと自由にディレクトリを作れるものもありますが、逆に初心者にはどこから始めるかわからないので、これは親切ですね。

ちょっと改造

では、 Web アプリケーションの仕組みがわかったところで、ちょこっと改造して、 Rails での開発の進め方を体験してみます。

$ rails g controller hello index
Running via Spring preloader in process 3827
      create  app/controllers/hello_controller.rb
       route  get 'hello/index'
      invoke  erb
      create    app/views/hello
      create    app/views/hello/index.html.erb
      invoke  test_unit
      create    test/controllers/hello_controller_test.rb
      invoke  helper
      create    app/helpers/hello_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/hello.scss

rails g ( g は generate : 生成する の略 )コマンドで様々なファイルを作成しました。

controller を作るコマンドかと思いきや、よく見ると、 route が定義されていたり、 views のファイルや css なども一式生成されています。

では、 Web アプリケーションを起動して、見てみましょう。

  1. Web アプリケーションを起動
    $ rails s
  2. ブラウザを開き、 localhost:3000/hello/index を表示

先程の rails g で作ったファイルで表示できるようになったページです(何もファイルに書いてないのに … )。 Rails すごい( 3 回目)。

では、改造を続けます。 View のファイルを変えてみます。

  1. app/views/hello/index.html.erb を開く
    <h1>Hello#index</h1>
    <p>Find me in app/views/hello/index.html.erb</p>
  2. 表示する文章を変更
    <p>Hello world!</p>

表示が変わりました!

 

さらに、 Ruby のプログラムを追加して改造を続けましょう。

  1. app/views/hello/index.html.erb に現在時刻を表示するように変更
    <p>Hello world!</p>
    <p>現在時刻: <%= Time.current %></p>
  2. ブラウザをリロード

  3. UTC という世界標準時刻になっているのでローカル標準時間に変更
    <p>Hello world!</p>
    <p>現在時刻: <%= Time.current.in_time_zone('Asia/Tokyo') %></p>
  4. ブラウザをリロード

ただし、 View に直接書くのは良くない( = 役割が違う)ので、これを Controller に写します。

  1. Controller の app/controllers/hello_controller.rb を編集
    • before
      class HelloController < ApplicationController
        def index
        end
      end
    • after
      class HelloController < ApplicationController
        def index
          @time = Time.current.in_time_zone('Asia/Tokyo')
        end
      end
    • @time はインスタンス変数と呼ばれ、 View に伝えられる( @ がない変数はローカルでしか使えない)
  2. View の app/views/hello/index.html.erb も変更

    現在時刻: <%= @time %>

変更しても無事に表示できました!

今回は以下の手順で改造を進めましたが、実際に開発するときもだいたい同じように進めます。

  1. 雛形となるファイルを生成
  2. 処理を追加 / 変更するファイルを編集
    • 今回の改造では Controller と View

Rails が動く仕組み

先程の開発手順をもとに、もう少し詳しく Rails がどのような仕組みで動いているか、深掘りします。


  1. Routes -> Controller -> View の順番に処理が進む
  2. Routes: ブラウザからのリクエスト( URL と http メソッド)から config/route.rb が該当する Contoller のアクションを決める
    • http メソッドでその URL に対して何をするのか指示
    • http メソッドの一例GET でページを取得( = 表示)
      • Rails でよく使うのは 4 つ GET / POST / PUT / DELETE (あとで詳しく)
    • Controller の対応表を生成する
      • localhost:3000/rails/info/routes/ で表示される

    • 以下の get ‘hello/index’ でレコードを追加している
      Rails.application.routes.draw do
          get 'hello/index'
        end
  3. Controller: リクエストに対応する Controller のメソッド(関数)で処理する
    • 次の View で使う値をつくるのが主な仕事
    • 以下の例では @time というインスタンス変数に入れる値を処理している
      class HelloController < ApplicationController
        def index
          @time = Time.current.in_time_zone('Asia/Tokyo')
        end
      end
  4. View: 指定がない限り、 Controller と同じ名前のディレクトリ/アクションと同じ名前のファイルが実行され、レスポンスの html を生成して返す
    • app/views/hello/index.html.erb が該当する
      • html を作るファイル = テンプレート(今回は erb を使用)
      • Ruby のプログラムが実行した結果を埋め込むことができる
        • 以下の例では @time
          <p>Hello World</p>
          <p>現在時刻: <%= @time %></p>

CRUD 処理を書いてみよう

Web アプリケーションの基本となる 4 つの機能、 CRUD 処理を作ってみましょう。

    CRUD とは

  • Create: 追加
  • Read: 表示
  • Update: 更新
  • Delete: 削除

先の helloworld ではなく books_app に変えて作ります。

# my_web_apps に移動して実行
$ rails new books_app

では、 CRUD を書いていきましょう。

  1. 必要なファイルを生成
    $ rails g scaffold book title:string memo:text
    Running via Spring preloader in process 5891
          invoke  active_record
          create    db/migrate/20220524013223_create_books.rb
          create    app/models/book.rb
          invoke    test_unit
          create      test/models/book_test.rb
          create      test/fixtures/books.yml
          invoke  resource_route
           route    resources :books
          invoke  scaffold_controller
          create    app/controllers/books_controller.rb
          invoke    erb
          create      app/views/books
          create      app/views/books/index.html.erb
          create      app/views/books/edit.html.erb
          create      app/views/books/show.html.erb
          create      app/views/books/new.html.erb
          create      app/views/books/_form.html.erb
          invoke    test_unit
          create      test/controllers/books_controller_test.rb
          create      test/system/books_test.rb
          invoke    helper
          create      app/helpers/books_helper.rb
          invoke      test_unit
          invoke    jbuilder
          create      app/views/books/index.json.jbuilder
          create      app/views/books/show.json.jbuilder
          create      app/views/books/_book.json.jbuilder
          invoke  assets
          invoke    scss
          create      app/assets/stylesheets/books.scss
          invoke  scss
          create    app/assets/stylesheets/scaffolds.scss
  2. migrate を実行( migrate の意味はこのあと。 とりあえず実行)
    $ rails db:migrate
    == 20220524013223 CreateBooks: migrating ======================================
    -- create_table(:books)
       -> 0.0132s
    == 20220524013223 CreateBooks: migrated (0.0135s) =============================
  3. Web アプリケーションを起動
    $ rails s
  4. localhost:3000/books/ にアクセス

  5. create してみよう


  6. /books に戻ると追加されている

さらに edit もできました … 。

いやいや、 2 つコマンド打っただけで、ほかは何もしてないのになぜ? Rails すごい( 4 回目)。

scaffold コマンド

なぜ、そんなことができるのか、実は先程の scaffold というコマンドが CRUD 機能を持ったページを自動で生成してくれるのでした(ナンですと!)。

  • scaffold は工事現場などの “足場” という意味
  • route 、 controller 、 view などのファイルが一式生成される
  • 作った画面は 4 つ
    • index / show / edit / destroy

  • 画面がないものも含めると、作った機能は 7 つ

楽チンすぎる … 。 そして “バカっぱや” やん。

CRUD 処理を眺めてみる

では、生成されたファイルを、処理の順番で見てみましょう。

index

本の一覧が確認できる画面と処理です。


  1. Routes
    • config/routes.rb を見てみる
      Rails.application.routes.draw do
        resources :books
      end
      • resources を使うと 1 行で書ける
    • /rails/info/routes で対応表を見てみる

      • 対応表から books_controller の index アクションが対応
  2. Controller
    code app/controllers/books_controller.rb
    class BooksController < ApplicationController
      before_action :set_book, only: %i[ show edit update destroy ]
    
      # GET /books or /books.json
      def index
        @books = Book.all
      end
      # 中略
    end
    • 複数の値が入る変数には books のように複数形にする
    • Book.all で登録された book のデータすべてを取ってきている(あとで出てくるモデルで説明)
  3. View
    • app/views/books/index.html.erb がレスポンスを生成
      
      <p style="color: green"><%= notice %></p>
      
      <h1>Books</h1>
      
      <div id="books">
        <% @books.each do |book| %>
          <%= render book %>
          <p>
            <%= link_to "Show this book", book %>
          </p>
        <% end %>
      </div>
      
      <%= link_to "New book", new_book_path %>
      • @books に繰り返し処理がある
        • do と end の間にある処理を繰り返す
        • よく見ると<%=<% がある
        • <% は値を代入しない
        • <%= は値を代入する
      • @books に入っている複数の値を 1 つ 1 つ取り出して表示している

new

続いて本を登録する画面と処理です。


登録画面は以下のように遷移します。

  1. books/new が新規登録画面
  2. books/create が画面のない登録機能

では、 new の処理を見てみましょう。


  1. Routes
    • 対応表をみると books_controller の new アクションが対応
  2. Controller
    • app/controllers/books_controller.rb の new アクション
        # GET /books/new
        def new
          @book = Book.new
        end
    • 1 つの値が入るので @book
  3. View
    • app/views/books/new.html.erb がレスポンスを生成
      <h1>New book</h1>
      
      <%= render "form", book: @book %>
      
      <br>
      
      <div>
        <%= link_to "Back to books", books_path %>
      </div>
    • render メソッドがポイント
      • <% render 埋め込むパーシャルビューファイル名, パーシャル内で使う変数名: 渡す値 %>
      • 別ファイルに form の処理が書かれている(パーシャルビューと呼ばれる)
        • 他の処理(更新)でも使うので共通化して別ファイルにしている
      • book という変数に @book を入れて、パーシャルビューに渡している
    • _form.html.erb に書かれている
      • パーシャルビューのルールとしてファイル名の先頭に_ を入れる
        <%= form_with(model: book) do |form| %>
          <% if book.errors.any? %>
            <div style="color: red">
              <h2><%= pluralize(book.errors.count, "error") %> prohibited this book from being saved:</h2>
        
              <ul>
                <% book.errors.each do |error| %>
                  <li><%= error.full_message %></li>
                <% end %>
              </ul>
            </div>
          <% end %>
        
          <div>
            <%= form.label :title, style: "display: block" %>
            <%= form.text_field :title %>
          </div>
        
          <div>
            <%= form.label :memo, style: "display: block" %>
            <%= form.text_area :memo %>
          </div>
        
          <div>
            <%= form.submit %>
          </div>
        <% end %>
    • form.label の title と memo にデータが入る
    • form に入力されたデータを form.submit で送信する

では、ブラウザの dev tools を使ってリクエストの詳細を見てみましょう。


  • 今までの GET ではなく初めて POST が登場
    • POST はサーバにデータを送信し変更を与える HTTP メソッド
    • GET は情報を得る HTTP メソッド

フォームのデータが入っていることがわかりますね。

create の流れ

続いて、 new で入力された値を処理する create を見てみましょう。 これは画面のない登録機能です。

    code app/controllers/books_controller.rb

  • 対応表をみると POST は create アクションが対応
      # POST /books or /books.json
        def create
          @book = Book.new(book_params)
    
          respond_to do |format|
            if @book.save
              format.html { redirect_to book_url(@book), notice: "Book was successfully created." }
              format.json { render :show, status: :created, location: @book }
            else
              format.html { render :new, status: :unprocessable_entity }
              format.json { render json: @book.errors, status: :unprocessable_entity }
            end
          end
        end
    
        # 中略
    
        private
          # 中略
    
          # Only allow a list of trusted parameters through.
          def book_params
            params.require(:book).permit(:title, :memo)
          end
  • やっていることは大きく 3 つ
    1. @book = Book.new(book_params) でリクエストから本のデータを作る
      • book_params はメソッド( private なのでアクションではない)
      • def book_params の結果が入る
    2. @book.save でデータを保存する
      • データを保存して、保存したなら true 、失敗したら false を返す
    3. if @book.save なので true なら次の画面を表示、 false ならエラーを表示
      • 成功すると create には画面がないので、redirect_to で次の画面を指定
      • 失敗するとrender :new, で new の画面を戻して表示する

では、デバッグコードを埋め込んで、 books_params の処理、 params に何が入っているか見てみましょう。

    def book_params
      p "================" # p は出力
      p params
      params.require(:book).permit(:title, :memo)
    end
"================"
"7muqsxRWt4yyAHj/woC8eRmlgJ4dc029M4t3cLp/r4+KcC8s48r4BcPh3TstHXHJ1WBiSWKiD0jvSW1ysJx5lQ==", "book"=>{"title"=>"独習Ruby", "memo"=>"一人で学ぶRuby"}, "commit"=>"Create Book", "controller"=>"books", "action"=>"create"} permitted: false>

Rails からリクエストを受け取っていることがわかりますね。 ただ見慣れないものが混じっています。

help
params.require(:book).permit(:title, :memo)

の require.permit() はなに?

hdr_auto
Strong Parameters という部品で book テーブルの title と memo 以外の情報は入らないようにしている。 これがないと悪意のある人が、例えば、パスワードを送って変えてしまうこともできる

モデル

これまで new (新規登録画面) -> create (登録機能) を追ってきましたが、 create で生成された情報をデータベースに保存する処理を見てみましょう。

そこで登場するのが モデル です。

  • モデルとはデータの永続化をする
    • 変数に保持しているだけでは保存されない
      • インスタンス変数でもリクエスト処理が終わると消える
    • データをデータベースに保存する仕組み
  • @book = Book.new(book_params) の Book がモデル

モデルの機能

では、モデルが何をしているのでしょうか。 大きく分けて 3 つあります。

  1. データの保存
    code app/controllers/books_controller.rb

    @book = Book.new(title: "独習Ruby", memo: "一人で学ぶRuby")
    # 省略
    @book.save
    • Book.new() で本のデータを生成
    • save メソッドで保存
      • 他に create メソッドもあり、情報の生成から保存までを一気にできる
  2. 保存データの読み込み
    • 保存された情報を出力する
  3. 保存データの検索
    • 例えば、一番目の情報を探して出力することができる

この読み込みと検索を、 rails console というコマンドでコードを実行できるツールを使って試してみましょう。

$ rails c # rails console を起動するコマンド
Loading development environment (Rails 7.0.3)
irb(main):001:0> 

rails console を起動できたので、読み込みと検索を試してみましょう。

読み込み

irb(main):001:0> book = Book.new(title: "Matz is nice", memo: "so we are nice") # Book の情報を作成
   (0.8ms)  SELECT sqlite_version(*)
=> #<Book:0x00007fa1a2106ee0 id: nil, title: "Matz is nice", memo: "so we are nice", created_at: nil, updated_at: nil>
irb(main):002:0> book.save! # book の情報を保存
  TRANSACTION (0.1ms)  begin transaction
  Book Create (0.9ms)  INSERT INTO "books" ("title", "memo", "created_at", "updated_at") VALUES (?, ?, ?, ?)  [["title", "Matz is nice"], ["memo", "so we are nice."], ["created_at", "2022-06-17 03:38:16.576324"], ["updated_at", "2022-06-17 03:38:16.576324"]]
  TRANSACTION (21.1ms)  commit transaction
=> true
irb(main):003:0> Book.last # Book モデルに保存された最後の情報を表示
  Book Load (0.2ms)  SELECT "books".* FROM "books" ORDER BY "books"."id" DESC LIMIT ?  [["LIMIT", 1]]
=>                                                                          
#<Book:0x00007fa1a53e47e0                                                   
 id: 5,                                                                     
 title: "Matz is nice",                                                     
 memo: "so we are nice",                                        
 created_at: Fri, 17 Jun 2022 03:44:45.603844000 UTC +00:00,    
 updated_at: Fri, 17 Jun 2022 03:44:45.603844000 UTC +00:00>

プログラムを書かなくても、 SQL を書かなくてもデータベース操作ができるなんて! Rails すごい( 5 回目)。

rails console で実行したデータも保存されるので、実際 Web でも確認してみましょう。


検索

$ rails c          
Loading development environment (Rails 7.0.3)                   
irb(main):001:0> Book.where(title: "独習Ruby").first # where に検索条件を書く。 first は一番最初の情報を出力するというメソッド
   (0.8ms)  SELECT sqlite_version(*)
  Book Load (0.2ms)  SELECT "books".* FROM "books" WHERE "books"."title" = ? ORDER BY "books"."id" ASC LIMIT ?  [["title", "独習Ruby"], ["LIMIT", 1]]                                     
=>                                                              
#<Book:0x00007fbf5b2a7778                                       
 id: 2,                                                         
 title: "独習Ruby",                                             
 memo: "一人で学ぶRuby",                                      
 created_at: Thu, 16 Jun 2022 09:38:09.033653000 UTC +00:00,    
 updated_at: Thu, 16 Jun 2022 09:38:09.033653000 UTC +00:00>

モデルの仕組み

では、どのようにモデルが動いているのか、確認してみましょう。

先程の Book モデルを見てみます。

code/app/models/book.rb

class Book < ApplicationRecord
end

2 行しかなく、中身がありません。 これはどういうことでしょう?

  • Book は ApplicationRecord というクラスを使っている
  • ApplicationRecord は Rails が用意しているもので、モデルの機能を提供している
    • さらに ApplicationRecord は ActiveRecord というクラスを使っている。 要は ActiveRecord がモデルの機能を提供している
  • モデルがデータベースと連携しているので、データベースに保存、データの読み込み、データの検索ができる
    • デフォルトでは SQLite が使われる

なお、モデルは rails new のあとに実行したrails g scaffold book title:string memo:text で生成されていたのでした。


$ rails g scaffold book title:string memo:text
Running via Spring preloader in process 5891
      invoke  active_record
      create    db/migrate/20220524013223_create_books.rb
      create    app/models/book.rb
      :

ちなみに、このコマンドの実行結果にある migrate が実際にデータベースにテーブルを作る設計書で、これに基づいてテーブルが作成されています。

codedb/migrate/20220524013223_create_books.rb

class CreateBooks < ActiveRecord::Migration[7.0]
  def change
    create_table :books do |t|
      t.string :title
      t.text :memo

      t.timestamps
    end
  end
end

これで一通り、 CRUD の処理が眺められましたね! scaffold 便利すぎます !!

Web アプリケーションに機能を追加してみよう

Web アプリケーションの仕組みと Rails の開発の流れがわかったところで、今度は実際に機能を追加して、開発を体験してみましょう。

今回は books アプリケーションに本の画像をアップロードする、という機能を追加してみます。

  1. テーブルに picture フィールドを追加
    • migration ファイルを生成
      $ rails g migration Addカラム名Toテーブル名カラム名:型名
      $ rails g migration AddPictureToBooks picture:string
      Running via Spring preloader in process 13906
            invoke  active_record
            create    db/migrate/20220524031139_add_picture_to_books.rb
    • migration ファイルを確認
      class AddPictureToBooks < ActiveRecord::Migration[7.0]
        def change
          add_column :books, :picture, :string
        end
      end
    • migration を実行
      $ rails db:migrate
      == 20220524031139 AddPictureToBooks: migrating ================================
      -- add_column(:books, :picture, :string)
         -> 0.0052s
      == 20220524031139 AddPictureToBooks: migrated (0.0062s) =======================

SQL でデータベース操作しなくてもよいので、 migrate めちゃ便利です。 Rails すごい( 6 回目)

続いて、ファイルアップロード機能は今回は ライブラリ を追加して実現します( Rails 標準の機能にもあります)。

    ライブラリとは

  • Gem と呼ばれる便利プログラム = ライブラリが公開されていて追加できる
  • gem コマンドで 1 つのライブラリをインストールできる
    • 複数はできない = 不便。 例えば Rails は 100 個ぐらいの Gem を使っている
  • 複数のライブラリをインストールしたり管理するプログラムが Bundler
    • Gemfile というファイルに必要なライブラリを書く = 発注書のようなもの
    • bundle install というコマンドでインストールする
    • bundle install すると Gemfile.lock ファイルができる。 これは納品書のようなもので、インストールされたライブラリが載っている

では、開発作業を再開しましょう。

  1. ライブラリを追加
    1. Gemfile にファイルアップロード機能で使用するライブラリ CarrierWave を追加
      gem "carrierwave"
    2. ライブラリをインストール
      $ bundle install
        Fetching gem metadata from https://rubygems.org/..........
        Resolving dependencies...
        Using rake 13.0.6
        :
        :
        Installing carrierwave 2.2.2
        Bundle complete! 16 Gemfile dependencies, 80 gems now installed.
        Use `bundle info [gemname]` to see where a bundled gem is installed.
    3. carrierwave に必要なファイルを carrierwave 付属のコマンドで生成
      $ rails g uploader Picture
              create  app/uploaders/picture_uploader.rb
  2. Book モデル app/models/book.rb を編集して picture に CarrierWave から画像を受け取るように編集
    class Book < ApplicationRecord
      mount_uploader :picture, PictureUploader # 追加
    end
  3. books コントローラ app/controllers/books_controller.rb で book_params メソッドに picture を追加
        # Only allow a list of trusted parameters through.
        def book_params
          params.require(:book).permit(:title, :memo, :piture) # picture を追加
        end
  4. picture を受け取って表示できるよう view を変更
    • フォームを変更 app/views/books/_form.html.erb
        /* memo */
        <div class="field">
          <%= form.label :memo %>
          <%= form.text_area :memo %>
        </div>
      
        /* picture */
        <div>
          <%= form.label :picture, style: "display: block" %>
          <%= form.file_field :picture %>
        </div>
    • 詳細画面も変更
      <p>
        <strong>Memo:</strong>
        <%= @book.memo %>
      </p>
      
      <p>
        <strong>Picture:</strong>
        <%= image_tag(@book.picture_url) if @book.picture.present? %>
      </p>

これで動かしてみましょう!



ボタンを押して画像をアップロードしてみましょう!


 

無事に機能追加できたことを確認したあと、今後学習に役立つものとして、

などを紹介いただきました。

 

最後、受講者からの沢山の質問に回答いただき、このコースは修了しました。

まとめ

Rails を使って簡単な Web アプリケーションを作り、作り方と仕組みを学びました。

Rails は 「簡単に」「素早く」 Web アプリケーションを作ることができる Web アプリケーションフレームワークだということが実感できました。 “Rails すごい” ということを 6 回も書いてしまうほどに。

この参加レポートやプライベートでの開発も含めて、これだけ素早くできるフレームワークは今までありませんでした。 スタートアップでの開発で愛され、重宝されているのも頷けますね。

プログラミングをこれから始めるという方はもちろん、 DX でフルスタックにササッと実装する手段を身に着けたいという方にはとてもオススメのコースでした!

 


SEカレッジについて

label SEカレッジを詳しく知りたいという方はこちらから !!

SEcollege logo
SEカレッジ
IT専門の定額制研修 月額 28,000 円 ~/ 1社 で IT研修 制度を導入できます。
年間 670 講座をほぼ毎日開催中!!

午前免除 FAQ

タグ一覧