はじめてのアプリを作る
Created by Vesa Vänskä, @vesan
ワークショップへようこそ！ワークショップ当日は、このガイドから始めます。インストールでうまく行かないことがありましたか？もしそうであれば、まずはコーチに相談しましょう。
コーチからのサポート
以下のボックスが表示されているようなら、コーチに読んでもらい、必要に応じて助けてもらいましょう。
コーチの皆さん 👋 今日はサポートしてくれて本当にありがとうございます！
Rubyについて学ぼう
この先のガイドで新しいアプリを作っていくことになります。そのためにRuby on Railsというフレームワークを使っていきます。Railsはプログラミング言語Rubyで作られています。今まで、まったくRubyでプログラムを書いたことがないのであれば、Rubyがどのように動くのかを知るために、Rails GirlsのためのRubyのガイド を読みましょう。あるいは、先に進む前にちょっと高度な TryRuby というコースに取り組んでみましょう。
アプリケーションを作る
このガイドではRuby on Railsというフレームワークを使って railsgirls という名前のアプリを作っていきます。
まず、Terminal を開いて、以下のコマンドを入力してください。
mkdir projectsprojects ディレクトリが作られたことを確認してみましょう。ディレクトリに含まれるものを一覧で表示する ls というコマンドがあります。このコマンドを実行し、projects が表示されることを確認してください。ここで、今いるディレクトリを projects に変更するため、次のコマンドを実行します:</p>
cd projectsls をもう一度実行すると、空のディレクトリ、あるいはフォルダにいることがわかります。次に railsgirls という名前の新しいアプリを作るために以下のコマンドを実行します:
rails new railsgirlsこのコマンドは railsgirls というフォルダの中に新しいアプリを作ります。このため、また以下のコマンドを実行して、ディレクトリをRailsアプリの中に変更します:
cd railsgirlsディレクトリの中で ls を実行すると、app や config といったフォルダが表示されるはずです. そして以下のコマンドでRailsアプリを起動できます:
rails servermkdir projectsprojects ディレクトリが作られたことを確認してみましょう。ディレクトリに含まれるものを一覧で表示する dir というコマンドがあります。このコマンドを実行し、projects が表示されることを確認してください。ここで、今いるディレクトリを projects に変更するため、次のコマンドを実行します:</p>
cd projectsdir をもう一度実行すると、空のディレクトリ、あるいはフォルダにいることがわかります。次に railsgirls という名前の新しいアプリを作るために以下のコマンドを実行します:
rails new railsgirlsこのコマンドは railsgirls というフォルダの中に新しいアプリを作ります。このため、また以下のコマンドを実行して、ディレクトリをRailsアプリの中に変更します:
cd railsgirlsディレクトリの中で dir を実行すると、app や config といったフォルダが表示されるはずです. そして以下のコマンドでRailsアプリを起動できます:
rails server自分のパソコン上のブラウザで http://localhost:3000 にアクセスしてください。リンクをクリックすると新しいタブが開き、アドレスバーに localhost:3000 と表示されます。クラウドサービスを使っている場合は(例 Replit)、代わりにプレビュー機能を使ってください(詳細は インストールガイド を参照してください)。
Railsロゴの画面が表示されれば、さきほど作ったアプリは正しく動作しています。rails new ジェネレーターは、始めるのに必要なアプリのコードをたくさん生成しましたが、このワークショップの残りの中で変更していきます。
ターミナルのウィンドウにコマンドプロンプトが見当たらないことに注意してください。なぜならRailsサーバが起動しているからです。コマンドプロンプトはこのように表示されますが、あなたのノートパソコンでは違っているかもしれません。
$>コマンドプロンプトが表示されていないときは、新しいコマンドは実行できません。cd や他のコマンドを実行しようとしても動作しません。同じターミナルウィンドウで、Railsサーバを止めたり、通常のコマンドプロンプトに戻す場合は、Terminalで Commandキーを押しながら、Cを押して( Ctrl+C )、Railsサーバを終了します。
- それぞれのコマンドが何をするのか明確になっているか確認してください。
cd,dir/ls,mkdir rails newによって何が生成されるのか簡潔に説明してくださいrails serverコマンドが何をするのか、なぜそれが必要なのかを簡単に説明してください- どうやってサーバを止めるのか簡潔に説明してください
Resources: Guide to the Guide creating the application, Rails Guides rails new
Idea の scaffold を作る
今あなたは自分のアプリを持っています。でも、このアプリはまだ何もしません。Railsのロゴを表示するだけです。
次に、一覧を表示したり、追加、削除、編集、閲覧できるようにするための出発点(この場合は ideas の出発点)を作るために、Railsのscaffoldという機能を使います。 次のコマンドをターミナルで実行してください:
rails generate scaffold idea name:string description:text picture:string- Railsのscaffoldが何なのか説明してください。どのようにしてアプリのパーツを素早く作るのを助けてくれるのでしょうか？
rails generate scaffoldというコマンドと、それがどのように動くのかを簡潔に説明してください。引数は何を意味しているのでしょうか？- モデル名の引数は何ですか？
name:stringを使ってデータベースのフィールドをどう指定したのでしょうか？その部分は何を意味しているのでしょうか？
Resource: Guide to the guide scaffolding
scaffold は新しいファイルをプロジェクトのディレクトリに追加しますが、きちんと動作させるためには、他の2つのコマンドを実行して、データベースを更新し、サーバを再起動する必要があります。
rails db:migrate
rails serverデータベースマイグレーションとはなんでしょうか？なぜ、それが必要なのでしょうか？
Resource: Guide to the guide scaffolding or Rails Beginner rails commands
ブラウザで http://localhost:3000/ideas にアクセスしてください。(Replit のような)クラウドサービスを使っている場合は、代わりにプレビュー用のURLの末尾に /ideas を加える必要があります(詳細は インストールガイド 参照)。
いろいろクリックしてみたり、これらの少ないコマンドラインのコマンドを実行して得られたものをテストしてみましょう。新しいアイデアを作ったり、閲覧、編集、削除(破壊)できるはずです。
routesを調整する
http://localhost:3000 (あるいはプレビュー用のURL) にアクセスしてください。Railsのロゴしかないページが表示されると思います。ideas ページにリダイレクトするようにしましょう。
ファイル config/routes.rb をテキストエディタで開いてください。最初の行の次に以下のコードを追記し、保存してください:
root to: redirect("/ideas")ルートパス(http://localhost:3000 あるいはプレビュー用のURL)をブラウザで表示して変更点を確認しましょう。ルートパスにアクセスするとideasの一覧ページが表示されるはずです。ブラウザのアドレスバーにあるラベルは、自動的に http://localhost:3000/ideas に変わるはずです。
次は？
はじめてのアプリを作りました！おめでとうございます！
ここから、HTMLとCSSでデザインを改善し、ページを追加し、画像をアップロードできるようにし、あなたのアプリを他の人も見れるようにインターネットに公開し、コードを他の人にシェアし、コメントを残せるようにするなど、このアプリに取り組み続けていきます。
このガイドで行った手順について、コーチと話してみましょう。手順について質問はありませんか？次のガイドに進む前に質問しておきましょう。
ガイドを進めていて行き詰まったときはコーチに助けてもらいましょう。また Ruby、Rails、コンソール、テキストエディターについての便利なチートシート も参考にしてみてください。
ガイド
- ガイド 1: はじめに
- ガイド 2: ツールについて知ろう
- ガイド 3: Railsインストールガイド
- ガイド 4: はじめてのアプリを作る (このページです！)
- ガイド 5: HTMLとCSSを使ってアプリをスタイリングしよう
- ガイド 6: アプリに新しいページを追加しよう
- ガイド 7: あなたのアプリに新しいホーム画面を追加しよう
- ガイド 8: 画像アップロード機能を追加しよう
- ガイド 9: GitHub であなたのアプリのコードを公開しよう
- ガイド 10: あなたのアプリをインターネットに公開しよう with one of these services:
- ガイド 11: HTML & CSS を使ってデザインしてみよう
- ガイド 12: あなたのアプリにコメント出来るようにしましょう
- ガイド 13: Carrierwave を使って画像をリサイズしよう
- ガイド 14: Test your app with RSpec