買ってよかったものランキング2023

はじめに

買ってよかったものランキング記事って良いですよね。

個人の主観ほど購買意欲を高めてくれる情報はありません。いざ同じものを手に入れてみて満足できた時の嬉しさたるや

今回紹介するものの中で、ちょっとでも琴線に触れて良いものに出会ってもらえたら幸いです。

今年自分が買ったものを振り返ってみたところ、在宅ワーク多めだった影響か健康グッズばかりが目につきました。

明確に見えている問題を解決するための買い物になるので、それは満足度も高くなりますよね。

自分なりの買ってよかったものの定義

わかりきったことですが、この記事は自分の主観100%です。

なので先に、この記事における「買ってよかった」の評価項目を伝えておきます。

  • 利用した時間に対して十分リターンを得ているか
  • 新しい技能が手に入るか
  • 価値観を変えてしまうほどの体験を得られるか

利用した時間に対して十分リターンを得ているか

一言で言えば費用対効果です。ただし、単なる金額で考えるのではなく、1日の中での使用頻度や耐用年数、後で売った時のリターンなども考慮します。

新しい技能が手に入るか

人はできないことができるようになった時に充実感や満足感を得ます。こうした体験は日々決まった仕事だけをする毎日だと得難いことがあるので、自発的に取り組む必要があります。

価値観を変えてしまうほどの体験を得られるか

生きているとたまに、自分の価値観やとあるもの/ことに対しての考えが180度変わってしまうような体験をします。筆者は変化を好むので、そうしたものに価値を感じます。

対象外なもの

  • 仕事でどうしても必要で買ったもの
  • あまりに高価で評価が人によって異なるもの
  • 本/電子書籍
  • その他の事情で書けないもの

買ってよかったものランキング

※リンクを貼っているものもありますが特にアフィリエイトとかはしていません。

10位 DTM(デスクトップミュージック)用のソフト

5年ぶりくらい?に新しいソフトを買い、音楽作りをしてみました。もはや買わなくても無料体験版だけで十分すぎるほどでしたが。 環境はガラッと変わっていて、今ではYouTubeに教材がたくさん転がっており、見よう見まねで操作するだけでそれなりの曲が作れてしまいます。 いくつか曲を作ってみて、とても充実した時間となり楽しいリフレッシュができました。 音楽への興味はずーっとあり続けているので、これからも細々と続けていきたいです。

9位 舌ブラシと舌用クリーニングジェル

https://amzn.asia/d/itF2HOq

電動歯ブラシもなかなかですが、それ以上に舌を専用のブラシで磨くようにしてから口内のスッキリ度合いが段違いになりました。まだやっていない方はぜひ。 100円ショップで売っている、先がコップになる歯ブラシの収納に入れて持ち運ぶといつでも磨けて便利です。

8位 頭皮マッサージャー・背中/腰マッサージャー

AKAISHI ツボスタイル ツボヘッド ブラック

AKAISHI AKAISHI くび・かた・せなかンボー

頭皮マッサージは硬めのやつ。デスクワークで目がしょぼついてきたり眠くなってきた時に、頭の血流が促進されシャキッとします(気休めかもだけど) 背中/腰のやつについてはマッサージガンが背中に届かないのと、肩から背中にかけて気軽にほぐせるのが気に入っています。あとそんなに高くないです。

7位 健康になる技術大全

https://amzn.asia/d/a0QoEhf

本はランキングに入れてしまうとキリがないので対象外です。しかし、この本だけはどうしても紹介したい。食事、睡眠、運動、習慣化などについて圧倒的エビデンス量で解説してくれる本で、こちらが手元にあればその辺りの情報に迷うことはなくなります。

6位 電動ホットアイマス

ずっとPCを眺めて目が疲れてきた時に、ゴーグルのように装着して目元を温め、揉んでくれる電動アイマスクを使用しています。あまりに気持ちいいので、つけたまま寝てしまうことすらあります。それくらい的確に目の周りを揉んできます。欠点は電動の音が少々うるさいことです。

5位 ヨガマット・プッシュアップバー・ストレッチポール

在宅ワークの合間に、ストレッチしたり腕立て伏せをするのに使いました。座りっぱなしや猫背は健康に良くないです。時々体を動かしてリフレッシュすることで、慢性的なこれらの姿勢の改善をしようとしました。ヨガマットを敷いてストレッチポールの上に寝るだけで背骨が伸び、背中から腰にかけて楽になった気がします。またプッシュアップバーを使うと腕立て伏せが非常にやりやすくなり、億劫ではなくなります。というか手のひらをつけた腕立て伏せがいかにやりづらいかを実感しました。可動域が狭いし、手のひらが痛くなり続けづらい。筋トレは一度に上げる重さ(負荷)ではなく、総負荷量が大切らしいです。つまり、軽い負担でも回数をこなせばしっかり効いてくるということです。プッシュアップバーで手の負担を軽減し、途中で休憩しても良いのでとにかくたくさん行う。40回とか、50回とか、徐々に数を増やしていく。また、筋肉を成長させるために毎日ではなく2日に1度の頻度で行う。こうした基本的なことを守るだけでも、しっかり筋肉はついてくれます。

4位 マイプロテインホエイプロテイン(粉を水に溶かして飲むやつ)

円安の昨今においても、1日3食、60gプロテインを採って130円程度で収まる脅威のコスパ。 買うならゾロ目の日(12月12日とか)に必ず買いましょう。 タンパク質は体の材料です。成人は「特に筋トレなど何もしていない場合でも」自身の体重 * 1gのタンパク質が必要です。 タンパク質が足りない気味になると、体調に影響が出ます。毎日摂るようにしましょう。 筆者は朝、夜、寝る前あたりに飲んでいます。

3位 公称20000mAhのケーブル内蔵モバイルバッテリー

https://amzn.asia/d/0wStmzA

モバイルバッテリーを買い換えました。よかった所としては、容量の割に小さくて軽いこと。さらにあらゆる種類のケーブルが内蔵されているのでコードについて考えずに済むこと。そして2500円くらいで買えるコスパの良さです。モバイルバッテリーなんて要らない派の人も居ますが、しょっちゅう充電を忘れてひもじい思いをしてきたのでそれがなくなるだけでだいぶありがたいです。また山登りをする際にはGPSを使用する関係でバッテリーの減りが早くなりがちで、モバイルバッテリーは必須です。下手なお守りを持つより安心感を与えてくれます。ただ20080mAhというのは多分嘘ですね、明らかに容量が減るのが早い。でも、iPhoneを3回充電してなおまだ持つレベルなので十分です。

2位 ボイトレ

昔から歌うのが好きです。独学では限界を感じたので、いくつかトレーニングを回ってみました。結果的には半年くらい通うことになりました。 やってみてのメリットとしては、やはり試行錯誤の方法はプロに教わるのが一番早いということです。一方、ボイストレーニングについてはいまだに感覚でやっている講師も多く、「たまたまうまくなれただけ」の人が大勢いることもわかりました。

ちょっと調べるさまざまなボイストレーニングの方法があります。その中で本当に効果が出そうなのは一部でした。 皆さんは、自分の声が出る仕組みを改めて考えたことがありますか?実際にはさまざまな筋肉が連動して声が出ているんです。ボイストレーニングをして良い声を出せるようになるということは、その筋肉を適切に鍛えることに他なりません。そのためには、これまで自分が出したことのない声を出してみたり、最初からはとてもできないような発声に挑戦することになります。これはちょうど、初めて自転車や一輪車に乗ろうとしたり鉄棒で逆上がりをしようとした時に「こんなのできるわけないじゃん、絶対無理」と思う感覚に似ています。 でも、それを無理やり続けることで体が鍛えられていき、徐々に声が出るようになるんです。

声を出すということは当たり前すぎて、無意識に癖がついています。猫背が癖からくるように、発声にも癖があります。出したことのない声を出させられる体験は、自分にとって新しい気づきをもたらしてくれました。まだまだ書きたいこともあるしまとまっていないのですが長くなるのでこの辺で。

1位 良い枕・良いマットレス

sealy-jp.com

今年に入ってついに理想の寝具を手に入れました。

枕はシーリーというメーカーで商品名は「アナトミック」です。他にあまり類をみない弾力のあるゴム素材(ラテックス)でできており、これが絶妙な反発力で頭を支えてくれます。また、特徴的なのはその形です。横から見ると台形で、肩から首にかけてをなだらかに支え、頭の部分が少し沈み込むようになっています。肩から首、頭まで全て、押し込み過ぎず反発し過ぎずな状態、まさに「浮いているかのような」感覚になります。 最初は別の商品目当てで寝具のセレクトショップに行き、いくつか試す中で本命よりも寝心地が良いこちらに一目惚れしました。結果的にはこれが大正解だったので、寝具においてはファーストインプレッションは大事なようです。

マットレスは「コアラマットレス」で、高価な部類に入るものの中では比較的安価(ややこしい)。こちらも前評判よろしくまるで浮いているかのような寝心地です。それでいて120日間以内であれば全額返金の上返品可能ということで買ってみました。

枕にせよマットレスにせよ、体が反発を感じないようなものが適切なのだと思います。月に2 ~ 3回あった薬も効きづらい偏頭痛が嘘のように無くなりました。

寝具は1日のうち6 ~ 8hは絶対に使うので、費用対効果が良いです。

終わりに

この記事を書くにあたり、有志の方が作ってくださっている「Amazonの購入履歴をCSV書き出ししてくれるChrome拡張機能」を使ってみました。

多くは語りませんが、無駄遣い多すぎ。

CSVをもとに色々分析してみると面白そうです。

以上です。

Progate前に読んでほしいwebアプリケーション開発入門

はじめに

本記事を読むことで以下について優しく学ぶことができます。

問題提起

Progateで勉強を始める時って、コースをいきなり始めることになるんですよね。「なんとなくプログラミングを勉強したい」という人が始める際、この構造は少し不親切だと感じます。Progateで学習を始める前に、これから学習することについてある程度の知識があれば、よりスムーズに学習できたり挫折せずに学習できるんじゃないかなと思いました。

Progateのとあるページでは、「Webアプリケーションを作れるようになること」をゴールに設定したが学習の順番が示されています。以下のような順番です。

確かにHTML/CSSRubyRailsWebサービスの構成要素として必須のものです。しかし、具体的な作り方を知る前に「インターネットとは何か」「WWWとは何か」「そもそも私たちが普段利用しているwebサービスはどのような仕組みで成り立っているのか」を抑える必要があるんじゃないかなあと思います。

HTML/CSSRubyRailsを学習していると、こうした基礎的な概念を知っていることを前提とした概念が良く出てくるためです。

自分も初学者の頃はこれに気付かず、誤った理解をしていたが故に後で同僚に指摘されることが少なくありませんでした。また、知っていればもっとすんなり理解できただろうなあということもたくさんあります。

なのでまずは以下のインターネットについての基礎概念を抑えて、

その上で以下のようにHTML/CSSRubyRailsなどの学習を重ね、スムーズに学習ができるようにしたら良いのではないでしょうか。

そこで今回は、身近なwebサービスを利用する様子をなぞりながら、これらについて説明してみます。

想定読者

Progateを利用してWeb製作またはWebアプリケーションを学びたいと思っている人、またはすでに学習中の人

本記事の内容

先の図で示した「インターネット」についての各概念を学ぶことができます。

本記事を読むメリット

Progateでの学習の効率が上がる

先に挙げた通りです。「インターネット」の基礎概念を理解しつつHTML/CSS, Ruby, Railsの学習に入ることで、いきなり学習し始める場合に比べて寄り道の学習が少なく済むため、学習がスムーズになります。

体系的に全体を俯瞰しながら学習できるようになる

Webサービスを作れるようになる」ということがゴールの学習はその過程において「今何を勉強しているんだっけ?」「なぜこの勉強をしているんだっけ?」という疑問が生まれやすいです。学ぶべきことが多く、一つの単元を集中し深掘りしているうちに全体を見失うためです。まずは全体像を掴むための学習の地図を手に入れることで、いつでも現在地を見失わないようにしてください。

本編

ゴールの確認

Progateでの学習のゴールは、「Webアプリケーションを作れるようになること」です。ここではWebアプリケーションを「ChromeSafariといったインターネットブラウザから利用できるWebサービス」と定義します。 Webアプリケーションを作れるようになるとはつまり、「Twitter」や「メルカリ」や「Amazon」や「youtube」のようなものを作れるようになる、ということです。これらは、利用者数的にも知名度的にも代表的なWebアプリケーションですね。

もちろん、世界中の人に利用されるものやビジネスとして大きな利益をあげるものを作るのは簡単ではありません。しかし、「インターネットを通じて誰かに使ってもらえるサービスを公開すること」自体は、今や勉強すれば誰でもできるようになってきています。

その際に学習が必要な内容の「第一の地図」を用意しました。こちらを見てください。

学ぶ必要があることについて、ジャンルごとに区分けして図示してみました。すでに学習している人は、知っている情報もあるかもしれません。灰色の「インターネット」の部分が、右の「クライアントサイド」「サーバサイド」の部分とかぶっています。これは、それぞれの学習の際に、必ずインターネットの知識が必要であることを示しています。「インターネット」の項目についてはこの後すぐにこの記事で学ぶことができます。

「第一の地図」と題したのは、実際に学習が進んでいくにつれさらに学ぶ内容が増えていくからです。学習が進んだ段階での、「第二の地図」がこちらです。

第一の地図に比べ窮屈になりましたが、新しく追加された「開発に必要な情報」と「アプリ公開・運用に必要な情報」については、誤解を恐れずに言うなら必要に応じて適宜学ぶので十分な「枝葉」の知識です。

とにかく、第一の地図に書かれた「インターネット」「サーバサイド」「クライアントサイド」の3つの内容をしっかり固めるのが先決です。第一の地図の内容に求める理解度は、「何も見ないで人にしっかり説明できる状態」です。

Webサイトを利用する流れをおさらいする

まず事前準備として、私たちがどのようにWebアプリケーションを利用しているか再確認してみましょう。 私たちがAmazonを利用する時、その方法は主に2通りあります。

1つ目の方法は、Chromesafariなどのインターネットブラウザでgoogleを開き検索する方法です。以下の動画のように、検索欄に「amazon」と入力し検索ボタンをクリック、そして出てきた検索結果一覧の中からamazonのリンクをクリックします。

2つ目の方法は、インターネットブラウザのURL欄に直接「amazon.co.jp」と入力し、検索ボタンを押す方法です。以下の動画のようにします。

どちらの方法でも、最終的には「amazon.co.jp」から情報を受け取りブラウザ上でページを表示することができていますね。

これだけ見ると、普段からパソコンを使っているならばよくやっているであろう何気ない操作だと思います。しかし、この一連の流れがどのようにして成り立っているのかをきちんと理解するだけで、一気に学習がスムーズになります。

まずは、インターネットにまつわる基本概念について定義を確認しましょう。

インターネットとネットワークについて学ぶ

今や普段の生活の中で、スマートフォンやPCを通じてインターネットを使わない日はありません。仕事でメールも使うし、先ほど見た通りAmazonを使って買い物もします。それらは全てインターネットのおかげです。私たちの生活はインターネットに支えられています。

インターネットとは

インターネットとは、コンピュータネットワークの1種です。コンピュータネットワークとは、コンピュータ同士をケーブルや赤外線、電波などなんらかの手段で繋いで様々なデータをやりとりできるようにした状態のことです。インターネットは、コンピュータネットワークの中でも世界規模でコンピュータがやりとりできる状態にしているものを指します。

インターネットにおける重要な概念を学ぶ

インターネットによって、遠く離れたパソコン同士で情報をやりとりすることができるようになりました。インターネットを通じたやりとりで一番身近なのは、普段のWebサイト閲覧ですね。Amazonに繋がるのも、Web漫画が読めるのも、全てインターネットを通じて自身のコンピュータとWebサイトを提供するコンピュータが通信しているからです。こうしたサービスの総称を、WWW(world wide web)と呼びます。

WWW

世界中のコンピュータがネットワークを介し情報を公開、共有できるサービスです。ここで言う情報とは、テキスト、音声、画像、動画データなどです。

Webサイト、動画などあらゆるコンテンツは、インターネットを通じて別のコンピュータから送られてきています。このコンピュータのことを、サーバと呼びます。

Webサイトの情報を持っている「サーバ」

次に、この先の話をする上で必ず必要な「サーバ」というものについて学びます。 サーバは、簡単に言ってしまえばWebサービスを提供するパソコンです。本体はこの地上のどこかに存在しています。私たちが普段利用している「パソコン」と「サーバ」は、インターネットを通じて繋がっています。

先ほどAmazonの例で確認した通り、私たちはブラウザからURLによってWebサービスにアクセスします。この時、情報を返してきているのがサーバです。TwitterにはTwitterのサーバがあり、メルカリにはメルカリのサーバがあり、AmazonにはAmazonのサーバがあります。

サーバも大雑把に捉えれば同じ「パソコン」なのですが、役割が違うため以下の画像のような違いがあります。

サーバには、全世界にWebサービスを届けるという役割があります。誰でも住所さえ知っていればアクセスできるように、住所が固定されています。また、24時間365日アクセスできるよう、基本的には電源を落とすことはありません。

IPアドレスドメイン

先ほど、サーバには住所があると言うことを学びました。これを、IPアドレスと言います。IPアドレスは、基本的に3桁までの数4つを.(ドット)で区切った形になります。

サーバはそれぞれ固定されたIPアドレスを持ちます。しかし、このような数字の羅列だと人間にとって覚えづらく不都合です。そこで、「amazon.co.jp」のようなあだ名をつけます。このあだ名のことを、ドメインと呼びます。 基本的に1つのIPアドレスに1つのドメインを紐付けます。ただし、複数のサーバで同じサービスを提供する場合もあるため、同じドメインに複数のIPアドレスが紐づくこともあります。こうすることで、人間にとって覚えやすい形でアクセスすることができます。

ブラウザからドメインを利用してWebサービスにアクセスすると、DNSというソフトがドメインに紐づくIPアドレスを教えてくれます。これにより、正しいサーバにアクセスすることができます。

リクエストとレスポンスについて

私たちがWebサービスを利用する時、ドメインを介してIPアドレスでサーバにアクセスし、情報を受け取っていることがわかりました。インターネットの仕組みにおいて、このアクセスのことを「リクエスト」と呼び、サーバが情報を返すことを「レスポンス」と呼びます。

私たちがインターネットを通じてWebサービスを利用する際は、このリクエストとレスポンスが繰り返されているのです。

webサーバについて

サーバ上では様々なプログラムが動いています。その中でも重要なのが、リクエストを受け取り適切なレスポンスを返すプログラムです。これを、webサーバと呼びます。webサーバ自体はプログラミング言語によって作られており、作るためのプログラミング言語は何でも構いません。Progateで学ぶRubyPHPで作られたWebサーバもあれば、それ以外のものもあります。

HTML/CSSについて理解する

amazon.comをリクエストすると、amazon.comで表示されるべき文や見た目の装飾について書かれた文書がレスポンスされます。これが、HTMLとCSSです。Chromeなどのブラウザは、HTMLとCSSを解析し、私たち人間に見やすいよう表示してくれるという役割を果たしているのです。

webアプリケーションの仕組み

静的コンテンツと動的コンテンツ

webサーバからレスポンスされる情報は、静的コンテンツと動的コンテンツの2つに分類されます。 HTML/CSSは、言ってしまえばただの文書です。リクエストに応じてWebサーバがレスポンスを返す際、書いてあるものをそのままレスポンスするだけです。こうした単純なレスポンスを、静的コンテンツ、と呼びます。 対して、動的コンテンツというものがあります。代表的な動的コンテンツはWebサービスです。例えば、Twitterについて考えてみてください。

Twitterは、アクセスするたびに表示されるツイートが変わりますよね。これは、自分がフォローしている人たちが次々にツイートして、タイムラインに表示すべきものが変わるためです。このように、アクセスするたびに表示が変わるコンテンツのことを動的コンテンツと言います。

では動的コンテンツはどのように実現されているのでしょうか?そこで重要になってくるのが、データベースです。

データベース

データベースとは、情報を蓄積するもののことです。例えば、Twitterでどのようにデータベースが活用されているか見てみましょう。 twitterでは、日々のユーザーの呟きをデータベースに保存しています。現在主流のデータベースはリレーショナルデータベースと呼ばれ、エクセルのように行と列のある表のような形で情報を保存する形式になっています。Twitterもこのリレーショナルデータベースを活用しています。

レスポンスを返す際、webサーバはあるユーザーがフォローしている人の呟きをまとめてHTMLとして生成し、レスポンスします。 このとき、あるユーザーがフォローしている人の呟きはデータベースに保存されているので「データベースから情報を取得してこれをレスポンス用に加工する」という処理が必要です。こうした処理は、webサーバとは別のプログラムが担当します。

Webサービス開発について理解する

Webサービスの開発は、基本的に自分のパソコン上で行います。自分のパソコンでRubyを書きWebサーバを作ることもできますし、自分のパソコンの中でデータベースとRubyを連携させて動的コンテンツを作ることもできます。この段階では、Rubyやデータベースの他に、パソコン自体を管理しているOS(オペレーティングシステム)と呼ばれるものについても知っておく必要があります。代表的なOSに、LinuxMacOSがあります。というのも、プログラムの実行は人間がOSに指示を出すことで行うからです。人間からOSに指示を出すには、基本的には「コマンド」と呼ばれる指示方法を使います。このコマンドは「ターミナル」と呼ばれるソフトから打ち込み、実行することができます。

Webサービスの公開について理解する

Webサービスを全世界に公開するには、自前のサーバを用意してその中でWebサーバを動かします。自分のパソコン上でサービスを公開しようとしても、通常は住所(IPアドレス)が固定されていないためユーザーにアクセスしてもらうことができません。また、普段使いのパソコンの電源を24時間入れっぱなしにする、というのも非現実的でしょう。

サーバを用意するには

基本的にはサーバは業者から借ります。借りるといっても自宅にサーバとなるパソコンを送ってもらうわけではなく、インターネットを通じて借りたサーバにアクセスし、様々な設定を行うことになります。AmazonGoogleMicrosoftといった有名な会社がサーバを貸し出すサービスを展開しているので、これらを活用することになります。

webサーバを動かすには

作成したプログラムを公開予定のサーバに移し、起動します。

Progateにおいて各項目を学ぶ理由

ここまでの知識があれば、Progateで学ぶ項目がなぜあのラインナップなのか理解できます。

HTML/CSS

HTML/CSSを学ぶのは、レスポンスとしてブラウザに返ってくる情報が基本的にはこれらだからです。HTML/CSSを学ぶことで、ブラウザ上にWebページを表示し、そのレイアウトを自由に作成することができます。

Ruby

Rubyを学ぶことで、Webサーバを作成することができます。また、後述するRuby on Railsを利用する際に必要になります。

Ruby on Rails

Ruby on Railsは、Webアプリケーション作成を協力にサポートしてくれるツールです。Rubyで作られており、必要に応じてRubyを書き足していくことでデータベースと連携して動的コンテンツを返すWebサービスを作成することができます。 なぜRuby on Railsを使うかというと、0から全てRubyを使ってWebサービスを作るのは非常に大変だからです。

最後に

最後に、もう一度冒頭に載せたWebアプリケーション開発の地図を載せておきます。

学習していく中で迷ったら、何度でもこの地図に立ち返り、「自分は今どこを勉強しているのか」「この勉強をするのは何故なのか」を確認してください。そうすることで、何倍も学習がスムーズになるはずです。

Rubyで学ぶ「ボトムアップ」Webアプリケーション開発その1 クラスとインスタンスを使いこなそう(2)

本記事の概要

本記事は、以下の記事の続編である。

joushiki.hatenablog.com

前回までで、お題である「遊園地の発券機システム」について必要なモデリングを行い、ユーザーがログインできる状態までプログラムを作成した。 本記事では、チケットを購入する処理まで作成していく。

作るもののおさらい

「遊園地の発券機システム」については、大雑把だが以下のような仕様で開発する。

  • 遊園地の発券機システム
  • お客さんが発券機を起動し、会員登録を行う
  • 発券機は、現在遊園地の中にあるアトラクションの一覧を表示する
  • お客さんは、どれか一つを選択する
  • 選択したアトラクションに乗ることができるチケットが発券される
  • お客さんが二十歳未満であれば半額になる
  • その月がお客さんの誕生月だった場合は10%オフになる
  • 上記2つの値引きのロジックは併用可能

チケットの購入処理の際、お客さんが二十歳未満であれば半額なる/その月がお客さんの誕生月だった場合は10%オフになるという仕様についてその通りになるように書く必要がある。条件をメソッドにまとめ、クラス内に定義することにする。

実践

メニューを表示し、入力された値で条件分岐しよう

ユーザーのログイン処理まで作成することができた。続いて「チケットを購入する/システムを終了する」という選択肢を選べるメニューを表示しよう。execメソッドの中でユーザーに0か1かを入力させ、その値によって条件分岐する。

今回は、case文を使って条件分岐を書いた。ユーザーが入力した値が0ならばチケットの購入処理の分岐へ、1ならばシステム終了処理の分岐へ、それ以外であれば、「不正な入力です」と表示させる。

券売機システムにアトラクションの情報を保持させよう

続いて、ユーザーがチケット購入の条件分岐に進んだ場合の処理を書く。その際、発券機のシステム自体がアトラクションの情報を保持しておく必要がある。 今回はあらかじめ、発券機のインスタンスに配列でアトラクション一覧を持たせることにする。 ファイルの中でRideクラスのインスタンスを作り、TicketVendingSystemクラスのインスタンスの「インスタンス変数」に代入しよう。

「ジェットコースター」と」「メリーゴーランド」をイメージしたRideクラスのインスタンスをそれぞれ生成し変数に代入、そのあとTicketVendingSystemクラスのインスタンス変数ridesの配列に入れた。

今乗ることができるアトラクション一覧を表示しよう

今、TicketVendingSystemクラスのインスタンスはアトラクションの情報を保持している。繰り返し処理を使って、「乗れるアトラクションの一覧」を選択肢として表示しよう。

ここで繰り返し時にeach_with_indexというメソッドが使われているので、どういったものか確認しておこう。

each_with_indexメソッドについて

each_with_indexメソッドはeachメソッドに似ている。配列の要素一つ一つを取り出し同様の処理を加えることができるほか、2つめのブロック引数に繰り返しの「回数」が自動で代入される。この時、最初に代入される値は0であることに注意。

これで、システムの利用者には以下のように選択肢が表示されるようになったはずだ。

(画像)

チケットの購入処理を書こう

購入処理を書いていく。今回はTicketクラスのインスタンスを生成しticketという変数に代入する。誰がどのアトラクションに乗るのかなど、必要な情報がticketに渡るようインスタンスの生成時に引数を渡す。 この時に渡す引数は、UserクラスのインスタンスとRideクラスのインスタンスである。これらのインスタンスが、Ticketの生成に必要な情報を持っているからだ。

その後、生成したTicketクラスのインスタンスは、ユーザーのインスタンス変数であるticketsという配列に格納しておく。

チケットの料金について

チケットの料金は、Ticketクラスのインスタンスが生成される際引数として受け取るRideクラスのインスタンスが引き継ぐ形にしている。

さて、チケットの料金については、本当は以下のように決めたい。

  • お客さんが二十歳未満であれば半額になる
  • その月がお客さんの誕生月だった場合は10%オフになる

これらの仕様を実現するために、計算のロジックを作成しメソッドとして定義する。

仕様に合わせてチケットの料金を計算するメソッドを定義しよう

このメソッドはcalculate_feeという名前にし、Ticketクラスに定義する。

calculate_feeメソッドに、ticket自身の料金の計算処理を記載した。 まずはchild?という条件分岐のためのメソッドをUserクラス定義し、返り値がtrueであればRideクラスのインスタンス変数feeの値の半分を、料金として定義している。 返り値がfalseであれば、Rideクラスのインスタンス変数feeの値をそのまま料金として定義する。 続いてbirth_month?という条件分岐のためのメソッドもUserクラスに用意している。こちらは返り値がtrueであれば、feeの値に0.9を掛けることで10%オフを表現している。もしもfalseであれば、何もしない。

calculate_feeの呼び出し方について

calculate_feeメソッドは、Ticketクラスのinitializeメソッドの中で利用するように書いた。 initialzeメソッドの中でのselfは、今まさに定義されたインスタンス自身となる。その前の処理でインスタンス変数@userと@rideは定義されているため、calculate_feeメソッド内部でもこれらのインスタンス変数を利用することができる。

child?とbirth_month?について

child?メソッドとbirth_monthメソッドは、それぞれ新しくUserクラスに定義した。 child?メソッドは、Userクラスのインスタンスが持つ@ageというインスタンス変数の値が19以下であればtrueを、そうでなければfalseを返す。 birth_month?メソッドは、Userクラスのインスタンスが持つ@birth_monthの値と、現在の月(1月、2月の月)が一致していた場合にtrueを、そうでなければfalseを返す。 このように、何か条件分岐を書くときは「条件分岐の判断材料を持つクラスのインスタンスメソッドとして定義できないか」を考えると良い。

floorメソッドについて

floorメソッドは数値に対して利用できるメソッドで、小数点以下について切り捨て整数の値を返してくれる。

これで、最低限のプログラムを完成させることができた。 続いて、プログラムをさらに改善していこう。

calculate_feeを別の場所に移そう

calculate_feeメソッドはチケットの料金を計算するメソッドだが、これはTicketクラスに定義されるべきではない。 新たにFeeCalculatorクラスを作成し、そちらに移動することにする。

FeeCalculatorクラスを作った理由について

単一責任の法則に反しているから

「チケットの料金を計算する」という処理の責任はTicketクラス自体には無いと判断したため、新しくこの責任を持つクラスを作成した。

今後、チケットの料金については様々な仕様が追加されることが考えられる。例えば、以下のようなケースだ。

  • 5才以下は無料にする
  • 期間限定で特定の種類のアトラクションだけ値段が割引される

また、チケットの利用期限などついても様々な仕様が追加されることが予測される。例えば、以下のようなケース。

  • 特定のアトラクションについて、5才以下はそもそも利用できない
  • 回数券や年間パスなど、利用期限が異なった種類のチケットが販売される

料金や利用期限について、さらにチケットについて他の様々なルールがTicketクラスに書き込まれていくと、途端にTicketクラスのメソッドの数が膨れあがり、保守性の悪いクラスになってしまう。

そこで、料金計算の処理については別のクラスを用意しそちらに任せることにした。それが、FeeCalculatorクラスである。

完成

これで一区切りついたので、ひとまずこのシステムについては完成、ということにしたい。もちろんまだ改善の余地は十分にある。テストがないこと。メソッドのサイズがテストを行いやすい単位になっていないこと。挙げればキリがないが、それはまた別の機会に筆を取って修正しようと思う。

終わりに

本記事の目的は、プログラミングを始めたばかりの人がこれを読み、クラスとインスタンスの仕組みを利用したプログラム作成慣れる一助となることだった。 本記事から、モデリングの手段としてユースケースから「データ」と「振る舞い」をもつ「名詞」を抽出する方法を見て取っていただけたなら幸いである。 ただし、このモデリング方法はあくまで1手段でしかない。最後の方で出てきたFeeCalculatorクラスのように、一見「名詞」としては抽出しづらいクラスを定義することこそが、オブジェクト指向プログラミングの難しさであり醍醐味であると筆者は考えている。

Rubyで学ぶ「ボトムアップ」Webアプリケーション開発その1 クラスとインスタンスを使いこなそう(1)

問題提起

Progateで学習を一通り終えても、そこから自分で何かを作ろうとすると途端にできない人を何人も見てきた。この問題に対しては、 「クラスとインスタンスに対しての理解を深めることで突破口を得られるのでは?」という仮説を立てている。

ご存知の通り、Ruby on RailsMVCの流れやモデルを介したデータベースとのやりとりを理解すればとりあえず動作するWebアプリケーションを作ることができる。Ruby on Railsは巧妙にプログラム内部の動きを隠蔽し、マニュアル通りに書いていけばWebアプリケーションができてしまうため、Ruby on Railsの前にRubyを学んだ人の中には「Rubyって一体どこで使うんだろう」という疑問を持つ人さえいる。

例えば、あるルーティングのコードを見てみよう。

# routes.rb
root to: 'posts#index'
resources :posts

get '/login', to: 'sessions#new'

こちらは、ProgateなどでRubyを一通り学んだ後、Railsを学び始めて比較的最初の頃に出てくるコードである。 Railsでは、routes.rbというファイルにて期待されるリクエストとそれに対する処理を決めることができる。

しかしこれを読んでも、学習者たちはなにがなんだかわからない。そもそもクラスもメソッドも定義されておらず、requireもされていない。いきなり、知らないルールで文字が並んでいるのである。 これではとにかく「こう書いたらこう動く」というルールとして覚えるしかなく、なぜRubyを学んだのかその必要性が理解できないのも頷ける。

form_forという、Railsが提供しているformタグを返すメソッドの意味すらも「こう書いたらこう動く」というマニュアル然とした形でしか覚えていなかったりする。そのため少し書き方を間違えてエラーが出ても、エラー文の意味がわからなかったり見当違いの記述を試したりしてしまう。

ここでの問題は、form_forがRailsによって用意されたメソッドであるということをきちんと理解できていないことではない。

「form_forメソッドが引数としてインスタンスを受け取ること」や、「戻り値であるフォーム要素の属性値(class名やアクション属性の値など)が引数のインスタンスの種類や持っている値によって変わること」がきちんとイメージできないということこそが問題だ。これはのちのち、Railsにおける応用的な手法であるフォームオブジェクトやサービスクラスなどについての理解の妨げにもなってしまう。また何より、他の言語でクラスとインスタンスを活用した応用が効かないため、学習効果が半減する。

ただ、Ruby on Railsを早い段階で学ぶことが悪いという訳ではない。自分が書いたコードによりWebアプリが動くこと、とにかく目に見える成果が生まれることは、モチベーションの面では圧倒的に大切なのだ。

Progateでも、クラスとインスタンスを用いたプログラムを作成する方法は内容として確かに存在する。非常に丁寧に説明しており、多くの人が理解できるであろう点は本当に素晴らしい。ただ、そうしたプログラムの例があまりにも少なく、学習者は経験値を積むことができていない。人は数を繰り返すことで少しずつ学びを得る。同じ理屈の問題でも、類問を何度も繰り返し解くことで学びを蓄積できる。得られる学びの量は人によって違うが、まだ理解できていないなと感じたら繰り返しやれば良いだけだ。

本記事の概要

そこで本記事では、できるだけイメージしやすい具体的な業務システムを例にとり、複数のクラスから生み出されたインスタンスが連携してシステムとして動く様を0から作り確認する。

取り組むことで期待できる効果

あるクラスのインスタンス変数が他のクラスのインスタンスを値として持つ、という感覚を養うことができ、同様の形で動くプログラムを自ら考案できるようになる

Ruby on Railsでは、HTTP通信に必要な情報を始めとするWebアプリケーションの動作に必要な全ての情報はインスタンスが保持している。インスタンス変数が他のクラスのインスタンスを格納し、またそのインスタンスが持つインスタンス変数には他のクラスが、、、といった形で情報が整理されている。この記事を読むことで、それがどのように実現されているのかイメージしてもらえらば幸いである。

Railsで出たエラー文を読み解けるようになる

インスタンスメソッドの呼び出しや、インスタンスからの値の取り出し方について慣れることで、エラー文の意味が理解できるようになる効果も期待される。たまに英語がわからないからエラーが読めない、エラーを理解するには英語ができないといけないという意見を目にすることがあるが、プログラムの動きが理解できなければ英語が読めてもエラーは解けない。

コード例がRubyで書かれた名著が読めるようになる

良いプログラムが書けるようになるには、良書をたくさん読むことが大切だ。現在では、より良いプログラムを書くために必要なエッセンスが詰まった良書にRubyを例にとったものがたくさんある。特に以下に挙げる2冊は必読と言ってよい。

オブジェクト指向設計実践ガイド ~Rubyでわかる 進化しつづける柔軟なアプリケーションの育て方

f:id:xeichan:20200113011247p:plain

リファクタリング:Rubyエディション

f:id:xeichan:20200113011306p:plain

これらの本の序章に挙げられている例のコードは、いずれもこれから学ぶプログラムのような、複数のクラスのインスタンスが組み合わさり動作するものとなっている。本記事を読めば、これらの本を読む際はじめの理解がずっとスムーズになり、より深い知識と理論の理解をおし進めることができるだろう。

想定読者

ProgateのRubyの章を全て終えている程度の知識があればこの記事を読み学習することができる。 もちろんRailsを学習している途中でも、Railsチュートリアルを読み終えた程度の段階でもお勧めできる。

作るものの説明

これから作るのは、遊園地の発券機システムである。以下を基本的な要件とする。

  • お客さんが発券機を起動し、会員登録を行う
  • 発券機は、現在遊園地の中にあるアトラクションの一覧を表示する
  • お客さんは、どれか一つを選択する
  • 選択したアトラクションに乗ることができるチケットが発券される

加えて、お客さんが二十歳未満であれば半額に、さらに、その月がお客さんの誕生月だった場合は10%オフになるという仕様も加えてみる。

前提知識: モデリング、モデル化について

クラスとインスタンスの学習で、ある事象や物についてをデータと振る舞いで表現することを学んだと思う。例えば、ProgateのRubyの学習の最後に出てくる料理注文システム。食べ物や飲み物を、名前、カロリー、値段が存在する「もの」としてクラスとインスタンスで表現した。これを、モデリングやモデル化などと呼ぶ。これは、Rubyを用いてプログラムを組む際には基本的に避けて通れないやり方だ。重要なのは、プログラムとして表現したいものにはどのような事物が登場し、それらはどんなデータを持つのか。そして、どのようなことを行うのか。これをしっかり考えることである。具体的な方法については、これからの実践で見ていこう。

実践

先ほど出てきた仕様を踏まえて、早速プログラムを書いてみよう。今回は以下のような手順で書いていくことにする。

  1. プログラムの仕様から、プログラムに登場するものを列挙する
  2. 登場するものの持つ値や状態を考え、クラスとして定義する
  3. プログラムの仕様通りに動くよう記述していく

1. プログラムの仕様からプログラムに登場するものを列挙する

モデリングに「こうしなければならない」という決まったやり方はない。慣れないうちは、最初にプログラムの登場するものを考えてみよう。先ほど説明した作りたいものの動きを「ユースケース」と呼ぶ。

f:id:xeichan:20200118122752p:plain

ユースケースからプログラムを考える時、登場するものは「名詞」として現れる。

今回のユースケースには、以下のようなものが登場する。

  • ユーザー
  • 券売機のシステム
  • アトラクション
  • チケット

f:id:xeichan:20200118122851p:plain

2. 登場するものの持つ値や状態を考え、クラスとして定義する

これらを一つ一つ、クラスとして定義する。任意のディレクトリにmain.rbというファイルを作成し、そこにクラスを定義しよう。

main.rbを作成しクラスを定義しよう

まずはファイルを作成する。以下の通りコマンドを打とう。 これはターミナルからファイルを作成するコマンドだが、もちろんテキストエディタからファイルを作っても良い。

#任意のディレクトリでmain.rbを作成。$以降を打つこと
$ touch main.rb

続いて作成したmain.rbをテキストエディタで開き、以下のように編集する。

# main.rb
# お客さんをモデリングしたクラス
class User
end

# 券売機をモデリングしたクラス
class TicketVendingSystem
end

# アトラクションをモデリングしたクラス
class Ride
end

# チケットをモデリングしたクラス
class Ticket
end

次にそれぞれのクラスの属性について考え、コードに反映させていく。

f:id:xeichan:20200118135059p:plain

f:id:xeichan:20200118135132p:plain

Userクラスについて

Userクラスの属性は以下で定義する。

属性 コード上での名称 想定されるデータの型 説明
名前 name 文字列 ユーザーの名前
パスワード password 文字列 ユーザー認証時に使うパスワード
年齢 age 数字 年齢
誕生月 birth_month 数字 誕生日がある月
チケット tickets 配列 持っているチケット。複数枚ある可能性あり

会員登録とログイン機能でユーザー認証を行うために名前とパスワードが必要。また、今回の仕様では年齢と誕生月によって割引が発生するためそれらの情報も保持できるようにする。チケットについては複数枚持てる仕様にしたいため、空の配列を入れるようにする。

Userクラスの属性をコードに反映させよう

mainl.rbを以下のように編集する。この時、initializeメソッドの引数はキーワード引数で受け取る想定で書いている。

TicketVendingSystemクラスについて

TicketVendingSystemクラス(券売機)の属性は以下で定義する。

属性 コード上での名称 想定されるデータの型 説明
ユーザー一覧 users 配列 システムに登録されているユーザーの配列
アトラクション一覧 rides 配列 遊園地で乗ることができるアトラクションの配列
ログイン中のユーザー current_user ユーザークラスのインスタンス 現在ログインしているユーザー

券売機のシステムは、ユーザーが会員登録を行なったり、乗りたいアトラクションをユーザーに選択させたりする必要がある。また、現在ログインしているユーザーは誰か、という情報も、発券を行う際に必要なため属性として持たせることにした。

TicketVendingSystemクラスの属性をコードに反映させよう

TicketVendingSystemクラスについて、main.rbを以下のように編集する。

Rideクラスについて

アトラクションをモデリングしたRideクラスの属性は以下で定義する。

属性 コード上での名称 想定されるデータの型 説明
アトラクション名 name 文字列 アトラクションの名前
料金 fee 数字 アトラクションの料金。単位は円
ステータス status true/false 現在乗ることができるか否か

ステータスについては、故障や点検などで乗れないことを見越して持たせた。

Rideクラスの属性をコードに反映させよう

Rideクラスについて、main.rbを以下のように編集する。

Ticketクラスについて

最後に、チケットをモデリングしたTicketクラスについて。

属性 コード上での名称 想定されるデータの型 説明
ユーザー user Userクラスのインスタンス 誰のチケットかを示す
アトラクション ride Rideクラスのインスタンス どのアトラクションのチケットかを示す
作成日 created_at Dateクラスのインスタンス いつ発券されたかを示す
料金 fee 数字 料金を示す

発券された日時は、チケットの期限を判定するために利用する。

Ticketクラスの属性をコードに反映させよう

ここまでで、プログラムに登場するものについて、どんな値を持つのか、という情報を定義し終えた。 続いて、仕様通りに動くようにロジックを書いていく。

3. プログラムの仕様通りに動くよう記述していく

ここからは、それぞれのクラスに適切なインスタンスメソッドを定義していくことになる。 仕様では、まずはじめに「遊園地へようこそ!」というメッセージが流れる。この仕様に従うためには、どこかのクラスにputs "遊園地へようこそ!"を実行するインスタンスメソッドを定義すれば良い。では、この動き、振る舞いはいったいどのクラスに持たせるべきだろう。これらのメッセージは券売機のシステムが表示するわけだから、券売機に持たせれば良さそうだ。早速、仕様通りの動作になるようコードを書いていく。

TicketVendingSystemクラスにメッセージを表示するためのメソッドを定義しよう

TicketVendingSystemクラスにshow_first_messageメソッドを定義する。

このプログラムの中に初めてメソッドが定義されたので、動作を確認してみることにする。

main.rbの末尾に、show_first_messageメソッドを実行するコードを書こう

TicketVendingSystemクラスのインスタンスを作成し、そのインスタンスshow_first_messageメソッドを実行するようにする。

まずはTicketVendingSystem.newという記述によって、TicketVendingSystemクラスのインスタンスを生成。 これを変数ticket_vending_systemに代入し、次の行でshow_first_messageを呼び出すように書いている。

では、main.rbを実行して動作を確かめよう。

main.rbを実行しよう

#main.rbのあるディレクトリに移動し、以下のコマンドを実行
$ ruby main.rb
#以下のように表示されればOK
遊園地へようこそ!初めてのご利用ですか?Y/N

初めての利用か否かを選択してもらい処理を分岐しよう

「遊園地へようこそ!初めてのご利用ですか?Y/N」と表示されたあとは、このプログラムを利用している人にYかNを入力してもらい、それを判定して処理を分けなければいけない。もしYと入力されればユーザーの会員登録の処理へ、そうでなければログインの処理へと進むようにする。 まず、ターミナルでユーザーからの入力を受け取るにはgetsメソッドを利用すると良い。getsメソッドの戻り値はユーザーがその場で入力した値になるので、これがYなのかNなのかを判定するコードを書く。書く場所は、一旦show_first_messageメソッドの中にしておく。

chompメソッドは、文字列の最後の改行文字を取り除くメソッド。この後の判定処理の際に改行文字が邪魔になるので、ここで取り除いておく。 続いて、if文で条件分岐を実装する。ユーザーが入力した文字がYであれば新規登録の処理へ、それ以外であればログインの処理へ進むよう書いてみよう。

少し長めのコードを書いたので、ポイントを分けて解説する。

gets.chomp.upcaseについて

ユーザーが「y」の文字を小文字で入力した時のために、文字列のインスタンスが利用できるupcaseメソッドで小文字を大文字に変換する。もし大文字が入力されていた場合は大文字のままになるので、yを小文字で入力されても大文字で入力されても変数inputには大文字のYが代入される。

if文の条件式 if /^Y$/ !~ input について

ここでは正規表現を利用して「ユーザーが入力した文字がYか否か」を判定している。!~はマッチオペレーターと言い、右辺の値が左辺の正規表現とマッチするか確かめることができる。マッチしていれば戻り値としてtrueが、マッチしなければfalseが返るため、ユーザーの入力がyか否かで条件分岐することができる。なお、ここでは本筋からずれるので正規表現!~について説明はしない。詳細については以下のリンク先を、必要に応じて確認してほしい。

正規表現については以下 userweb.mnet.ne.jp

!~については以下 ref.xaio.jp

ユーザー登録の処理を書こう

続いてこのシステムにユーザー登録を行う。先ほどと同様にユーザーの入力を受け取り、それらの情報を元にUserクラスのインスタンスを生成する。

今回も長めのコードを書いたので、ポイントごとに解説。

ユーザー情報の入力 ~ Userクラスのインスタンス生成

長いコードだが、行なっていることはシンプル。ユーザーに質問をし、必要な情報を入力してもらっている。getsメソッドでユーザーが入力した値は必ず文字列になるので、年齢や誕生月については数値に変換するためにto_iメソッドを利用している。その後Userクラスのインスタンスを生成している部分では、キーワード引数を使って必要な情報をinitializeメソッドに渡している。

インスタンス変数@usersへの代入

@usersは、券売機のシステムに登録されたユーザーを保持する配列。今回生成したUserクラスのインスタンス<<メソッドを使ってこの配列に入れる。

会員登録の処理をメソッドに分割しよう

続いてログインの処理を書いていきたいところだが、ちょっと待ってほしい。 一度コードを俯瞰してみると、今作成した会員登録の処理がshow_first_messageという名前のメソッドの中にあるのは不自然である。やっていることと、メソッドの名前が一致していないからだ。これでは他の人が読んだ時に意図が伝わりづらいので、この処理を別のメソッドに切り出そう。

TicketVendingSystemクラスの中にuser_registrationというメソッドを定義し、先ほどの処理をこの中に移動した。そして、show_first_messageメソッドの中でuser_registrationメソッドを呼び出すようにした。呼び出しの処理の部分のself.は省略してもOK。

ただ、これでもshow_first_messageメソッドの中に2つの処理が混ざってしまっている。メッセージを表示する処理と、会員登録かログインかの条件分岐を行う処理だ。

こういった場合、さらに別のメソッドを用意して処理の流れをわかりやすくしてあげるとよい。いきなりshow_first_messageメソッドを呼び出すのではなく、システムの実行を表すexecという別のメソッドを用意してこれを呼び出すことにしよう。

execメソッドを用意し、処理を移そう

execメソッドについて

ここではシステムを実行するというイメージで、execute(実行する)という言葉の略でexecというメソッドを定義した。ここに、これまでshow_first_messageメソッドの中にあった条件分岐の処理を移動したほか、show_first_messageメソッド自体の実行もexecメソッドの中で行うようにした。これにより、まずシステムが実行され最初のメッセージが表示される、次にユーザーの入力によって条件分岐が行われるという流れに対して自然な書き方にすることができた。

ログインの処理を書こう

次は、ログインの処理を書いていく。この券売機のシステムが持つユーザー一覧であるインスタンス変数@usersは配列で、ユーザーのインスタンスが保管されている。利用者が入力する名前とパスワードに一致するインスタンスがあれば、@current_userにそのインスタンスを代入するようにしよう。先ほどの会員登録の処理と同様、別のメソッドに切り出した上でexecメソッドの中で呼び出すようにする。

これで会員登録したユーザーでログインすることができるようになった。

続く

この後は会員登録やログインの処理と同じ要領でshow_menuメソッドを作成し、チケットの購入処理や料金計算のロジックについて記述していく。 長くなってきたので、続きは別で記事にする。

追記

続きはこちら。

joushiki.hatenablog.com

【無料】20分で環境構築しオリジナルサービスを作り始める方法(後編)

@redtail03です。こちらの記事は、以下の記事の後編になります。

joushiki.hatenablog.com

前回は、AWSの会員登録をするところまで進めました。

続いて、Cloud9で開発を開始してみましょう。

Cloud9の仕組み

Cloud9の仕組みは少し込み入っているため、説明します。

まずAWSからパソコンを借りて、そこに接続する形になります。AWSにはEC2というサービスもあり、EC2がCloud9で使うパソコンを提供してくれます。Cloud9自体の料金は無料ですが、EC2の利用には料金がかかります。しかし、AWSにアカウント登録をしてから1年間はEC2は無料で利用できます(1ヶ月あたり750時間まで)。

ただパソコンを借りただけでは、そのパソコンで開発することはできません。そこでCloud9の出番です。 Cloud9は、EC2で借りたパソコンにインターネット経由で接続し、ブラウザから操作することを可能にします。ちょうどProgateと同じように、ターミナルやテキストエディタなどが使えます。

f:id:xeichan:20180923110103p:plain

1. Cloud9の開発環境を作る

以下のようにコンソール上部の検索バーに「Cloud9」と入力しEnterキーを押すことで、Cloud9のページへ移動できます。

f:id:xeichan:20180923094944p:plain

以下のページが表示されたかと思います。

f:id:xeichan:20180923095124p:plain

続いて、「create environment」をクリックします。

f:id:xeichan:20180923111434p:plain

新しい環境について入力する画面に移動します。Name欄、Description欄は適当に入力して大丈夫です。入力したら、「Next step」を押しましょう。

f:id:xeichan:20180923111856p:plain

次は、AWSからパソコンを借りるかと、借りるパソコンの性能についてを選択します。今回はパソコンを借りるのと、性能は一番低いもので大丈夫なので、始めから選択されているもののままで大丈夫です。そのまま「Next step」を押しましょう。

f:id:xeichan:20180923113537p:plain

ここまでの設定の確認画面です。入力間違いがなければ、「Create environment」を押します。

f:id:xeichan:20180923114229p:plain

すると、以下のように待機画面になります。AWS側でパソコンを用意してくれるため、30秒 ~ 1分程度時間がかかります。

f:id:xeichan:20180923114537p:plain

しばらく待つと以下のような画面に移動します。これが、Cloud9の開発画面です。

f:id:xeichan:20180923114636p:plain

再度接続するには

AWSのコンソールから再度こちらの開発画面を開きたい場合は、コンソールマネジメントからCloud9を選択します。

f:id:xeichan:20180923115040p:plain

すると、以下のように作成済みの環境を確認できます。再度開発画面を開く場合は「Open IDE」をクリックします。

f:id:xeichan:20180923115240p:plain

2. Railsの開発を開始する

では、Railsでのアプリケーション開発を試してみましょう。まずは、開発画面について簡単に説明します。Cloud9の開発画面は、大まかに以下のような構成になっています。

f:id:xeichan:20180923115828p:plain

ターミナル

パソコンに対して指示を出すことができる部分です。ここから、railsコマンドを入力したりすることになります。

ディレクトリ表示部分

フォルダやファイルの構造が表示される部分です。右クリック(Macの場合は指2本でトラックパッドを押し込む)で、新しいファイル/フォルダを作成したり、削除したりできます。

テキストエディタ部分

ファイルの中身が表示され、編集、保存ができます。

試しに、RubyRuby on Railsが利用できるのか確認してみましょう。rubyコマンドやrailsコマンドが利用できれば、それぞれインストールできているということになります。ここではバージョンを確かめるコマンドであるruby -v,rails -v を試します。 ターミナルにて、以下のように入力しましょう。

#rubyのバージョンを確かめるコマンド
ruby -v
ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-linux]
#Railsのバージョンを確かめるコマンド
rails -v
Rails 5.2.1

ビジュアル的には、以下のようになると思います(バージョンなどは多少変化があるかもしれません)。

f:id:xeichan:20180923121252p:plain

mysqlのインストール

Railsでは、利用するデータベースを選択することができます。本記事では、mysqlを利用することとします。 Cloud9でmysqlを利用するには、mysqlをインストールする必要があります。

ターミナルから以下のコマンドを入力してください。こちらはmysql関連のソフトをダウンロードしインストールするためのコマンドです。

sudo yum install mysql-devel

すると以下のような表示になるので、「y」を入力してEnterキーを押します。

f:id:xeichan:20180923122400p:plain

その後、このように表示されればOKです。

f:id:xeichan:20180923122547p:plain

mysqlが利用できるか確かめてみましょう。ターミナルから以下のようにコマンドを入力します。

#mysqlを起動するためのコマンド
sudo service mysqld start

その後、以下のように表示されていればOKです。

f:id:xeichan:20180923122821p:plain

新規アプリケーションの作成

続いて、rails newコマンドを試します。今回はtest_appという名前のアプリケーションを作ってみましょう。

#新規アプリケーションを作成。データベースはmysqlを利用
rails new test_app -d mysql 

すると、20 ~ 30秒程度ターミナルで自動的に様々なログが表示されていきます。最終的に、以下のような表示になれば成功です。

f:id:xeichan:20180923123359p:plain

続いて、Railsアプリケーションのディレクトリに移動します。

#test_appのディレクトリに移動
cd test_app

以下のように表示されて入ればOKです。

f:id:xeichan:20180923123545p:plain

移動したら、データベースを作成します。データベースを作成するには、rails db:createコマンドを利用するのでした。

#データベースを作成
rails db:create
#以下のように表示されれば成功
Created database 'test_app_development'
Created database 'test_app_test'

最後に、rails sコマンドでサーバを立ち上げてアプリケーションの動作を確認しましょう。

#サーバの立ち上げ
rails s
#以下のように表示される
=> Booting Puma
=> Rails 5.2.1 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.0 (ruby 2.4.1-p111), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://localhost:8080
Use Ctrl-C to stop

実際にブラウザでアプリケーションが動いていることを確認します。以下のように、「Preview」をクリックします。

f:id:xeichan:20180923124704p:plain

続いて、「Preview running Application」をクリックします。

f:id:xeichan:20180923124827p:plain

すると以下のようになるので、少し分かりづらいですが「Browser」と書いてある部分の右のマークをクリックしてください。

f:id:xeichan:20180923124959p:plain

新しくブラウザのタブが開き、以下のようにRailsのデフォルトページが表示されれば成功です。

f:id:xeichan:20180923125058p:plain

注意

Cloud9の環境を複数作成するとAWSの無料枠を超えてしまい料金がかかってしまいます。複数のRailsアプリケーションを作成したい場合は、1つの環境の中で作成するようにしましょう。

終わりに

これで最低限、Railsのアプリケーションを作成し始めることができるはずです。

わかりづらい部分や疑問点などある場合は、TwitterのリプライやDMにてご連絡いただくようお願いします。

【無料】20分で環境構築しオリジナルサービスを作り始める方法(前編)

こんにちは、@redtail03です。Progateで学習している人が自身のポートフォリオを公開するまでを支援する記事を書いています。 前回は、オリジナルサービスの考え方について書きました。

joushiki.hatenablog.com

今回は自分でサービスを作ってみる第一歩として環境構築の話をしようと思います。

はじめに

本記事のゴール

本記事は「前編」としていますが、「後編」まで含めると、ゴールは

Ruby on Railsを利用してWebサービスを開発できる状態を作る」

ことです。

そのために、まずは環境構築について説明します。

環境構築とは?

皆さんは「環境構築」という言葉を聞いたことはあるでしょうか。プログラマーにとって「環境構築」という言葉は、 あるプログラミング言語を自分のパソコンで利用できるようにするための作業を指します。

なぜ環境構築が必要なのか

Progateを利用して勉強する場合、コードを実際に書くことはできても、書いたコードや作ったTweet Appを全世界に公開することができません。自分で作ったサービスを全世界に公開するためには、まず環境構築をして自分で自由にコードを書いたり他の人に共有できる状態を作る必要があります。 例えば一人でRubyの環境構築ができれば、自分のパソコン上でRubyを使った開発ができます。ということは、Ruby on Railsを使ったWebアプリケーション開発もできるということです!

環境構築は難しい

利用しているPCがMacの方の場合は、以下のProgateの記事などを読んで環境構築に挑戦してみても良いでしょう。

prog-8.com

ただし、利用中のPCの状態によっては問題が発生することがあります。 また、利用しているPCがWindowsの場合は、利用しているPCの種類ごとに微妙に環境構築の方法が異なります。そのため、Macに比べると環境構築の難易度は高めです。

環境構築のハードルを下げる

せっかくプログラミングができるようになったのに、環境構築に詰まってしまい挫折するのは非常にもったいないことです。私の観測範囲では環境構築がプログラミング初学者の一つのハードルになっているようです。そうしたリスクを避けるために、私は別の方法で環境構築することをオススメしています。

それは、自分の作業用のパソコンとは別のパソコンを借りてそこで環境構築をする方法です。パソコンは、Amazonという会社からCloud9というサービスを通じて借ります。また、そのパソコンに対してはインターネットブラウザ(Google ChromeSafariMicrosoft Edgeなど)から接続します。ちょうど、Progateで学習している形と同じようなイメージです。

パソコンを借りると言っても、この方法は無料で利用できます。

この方法であれば、難しい作業をしなくてもいきなりRuby on Railsでの開発を始めることができます。また、WindowsでもMacでも、どちらでも同じように環境構築をすることができます。

AWS Cloud9について

では、AWS Cloud9で開発の環境を作りましょう。その前に、AWSおよびCloud9について簡単に説明します。詳しい説明は公式サイトなどをご覧下さい。

AWSとは?

AWSとはAmazonが提供するWebサービスの総称です。Webサービスを公開するために必要なサーバを貸し出したり、そのサーバに問題がないか監視するサービスなどを提供しています。Amazonが提供するWebサービスは、無料で使えるものから有料のものまで膨大な数があります。

AWSクラウドベースである

AWSの特徴の1つとして、ほとんどがクラウドサービスとして提供されるということがあります。クラウドとは、主としてインターネットを通じてサービスを提供することを指します。 例えば、昔は会社でWebサービスを作りたければ自社内に物理的にサービスを提供するためのサーバを置く必要がありました(オンプレミスという手法です)。場所も取りますし、何か問題があれば自分たちで修理しなければいけません。 対してAWSの一つであるEC2というサービスはクラウドでサーバを提供するため準備や保守が圧倒的に楽です。また、必要であればすぐにサーバの性能を上げることができるなど、柔軟性が高いという点も優れています。

AWS Cloud9とは?

AWS Cloud9とはAWSのサービスのひとつで、公式ページ(https://aws.amazon.com/jp/cloud9/)によれば「ブラウザのみでコードを記述、実行、デバッグできるクラウドベースの統合開発環境 (IDE) 」と説明されています。Progateでの勉強と同じようにブラウザで開いてそこでコードを書けます。具体的には、以下のような機能を利用することができます。

  • ターミナル(サーバの操作)

  • エディタ(コードを書いていく)

  • rails sして確認(これはブラウザの別のタブで開く)

AWS Cloud9のメリット

AWS Cloud9を使えば、ほとんど手間をかけずRuby on Railsの環境構築をすることができます。そのため、難しいことがわからなくてもすぐにProgateで学習したことを活かしてサービス開発を始めることができます。しかも、無料で利用することができます。

AWS cloud9のデメリット

対してデメリットはほとんどありません。強いていうならば、ネットに繋がっている環境でなければほとんどの作業ができないことです。

AWSの会員登録をする

Cloud9を利用するにはまず、AWSの会員登録をする必要があります。その後、AWS Cloud9を利用してみます。

事前準備

AWS Cloud9を利用するには、自身が取ることができる電話番号と、クレジットカードもしくはデビットカードが必要です。 電話番号については自宅に電話があるか、携帯電話を持っていれば大丈夫です。カードですが、クレジットカードもデビットカードも無い場合は、kyashやbundleカードといったアプリから発行できるカードを試してみると良いかもしれません(未確認です)。

kyash.co

1.利用しているブラウザが最新版かチェックする

AWS Cloud9の公式ページによれば、現在は主要なブラウザの最新版では動作が確認されているそうです。 利用しているブラウザがGoogle ChromeSafariFirefoxMicrosoft Edgeであれば大丈夫です。

aws.amazon.com

ただし「最新版での」という条件つきなので、利用しているブラウザが最新版か確認しておきましょう。

2.AWSの会員登録をする

AWS Cloud9を利用するには、AWSに会員登録をする必要があります。まず、以下のページにアクセスしてください。

AWS Console - Signup

続いて以下のように必要な項目を入力し、「続行」をクリックします。

f:id:xeichan:20180922114553p:plain

今度は連絡先情報を入力します。この時電話番号は必ず通じるものにしておきましょう。後で、本人確認のための電話がかかってきます。 全て入力し終わったら、「アカウントを作成して続行」をクリックします。

f:id:xeichan:20180922140834p:plain

次は、支払い情報の入力です。オリジナルサービスを公開しても1年間は無料で利用できるため、変な使い方をしない限り請求は来ませんが、ここで有効なクレジットカード/デビットカードを登録する必要があります。

f:id:xeichan:20180922141205p:plain

そして、電話による本人確認です。連絡先情報の際に入力した電話番号がすでにフォームに入力されている状態です。セキュリティチェックの文字を入力し、「すぐに連絡を受ける」をクリックしましょう。

f:id:xeichan:20180922141444p:plain

すると、以下のような画面になります。同時に電話がかかって来ます。「こんにちは。この電話はAmazon Web Serviceからの自動音声案内です~」と言って来たら、AWSからの電話で間違いありません。指示に従い、画面に表示されている番号を、電話のキーダイヤルに入力します。しばらくすると、認証が完了します。

f:id:xeichan:20180922141626p:plain

認証が完了するとその旨を電話越しに伝えられ、画面が自動的に以下のように変化します。「続行」をクリックしましょう。

f:id:xeichan:20180922141816p:plain

続いてプランの選択画面に移ります。ベーシックプランという文字の下にある、「無料」と書かれた部分をクリックします。

f:id:xeichan:20180922141846p:plain

以上で会員登録の操作は終了です。以下の画面になっていると思うので、「コンソールにログイン」をクリックしましょう。

f:id:xeichan:20180922142049p:plain

以下のようなログイン画面に遷移します。最初に登録したメールアドレスを入力し、「次へ」をクリックします。

f:id:xeichan:20180922142124p:plain

するとパスワードの入力を求められますので入力し、「サインイン」を押しましょう。

f:id:xeichan:20180922142340p:plain

以下のような画面が表示されれば成功です。

f:id:xeichan:20180922142414p:plain

終わりに

無事にAWSの会員登録はできたでしょうか?少し長くなってしまったので、Cloud9の利用方法については別の記事にしたいと思います。 試してみてもし上手くいかなかった場合などはお気軽にTwitterでメンション or DMをください。

誰でもオリジナルサービスのアイデアが思いつく考え方

はじめに

どうも、@redtail03です。都内でWebエンジニアをしております。Twitter idの由来は、Red Tail Catfishというナマズを飼うのが夢ということからです。

自分はProgateが大好きで、人にプログラミングを教える際は必ず「Progateやって、わからないところを質問して」と伝えます。

プログラミングの上達に必要なことの一つに「自分でサービスを作る」というものがあります。Twitterを眺めているとそのように勧めている方もちらほら見かけます。にも関わらず「Progateが終わってサービスを作ってみました」という方はあまり見かけません。「#駆け出しエンジニアと繋がりたい」というタグが流行り、いよいよProgateで学習している方が増えているのにも関わらず、です。

どのような問題があるのか把握すべく、Twitterでアンケートを取ってみました。

すると「オリジナルサービスのアイデアが思いつかない」という意見が一番多くなりました。 そこで、Webエンジニアの自分が普段どのようにサービスを考えているかを整理してみました。微力ながら参考になれば幸いです。

オリジナルサービスのアイデアの出し方

ざっと考えてみたところ、以下のようなことを思いました。順に解説していきます。

・自分が好きなことは何か?
・身近な人が困っていることは無いか?
・すでにあるものを組み合わせる
・Tips

1.自分が好きなものは何か?

自分の経験上最もモチベーション高く開発できるのは「自分が欲しいものを作っている時」です。趣味や昔取り組んでいたもの、部活動などで「これがあったら便利だな」と思うものはありませんか?例えば私は音楽が好きなので、「色々な人からオススメの音楽を教えて欲しい」と思っていました。そこで、youtubeにアップされている曲を投稿してプレイリストにできるサービスを作ったりしました。

2.身近な人が困っていることは無いか?

次に考えてみて欲しいのは「身近な人が困っていることを解決できる何か」です。誰かのためになるという点でとても有益ですし、喜んでくれる人がいるというのはモチベーションが上がるものです。今製作中の「Progateのユーザーだけが質問できるQ&Aサイト」はこれに当たります。

仮説を立てる

1と違い他の人が抱えている問題なので、一度確かめる必要があります。 私の場合はこうです。プログラミングを学習するとすぐにエラーが起こったりわからないことが出てくるため、きっと独学で勉強している人は質問がしたいだろうなと考えました。しかし、既存の質問サイトに上がっている初心者らしき質問はごくわずかです。そこで「初心者/独学であるほど見当違いの質問をしてしまうのが怖いのではないか。であれば見当違いな質問をしても大丈夫な場所を作れば使いたい人がいるのではないか」という仮説を立てました。そして、実際にTwitterにて聞いてみることで、仮説を確かめました。

今回はやはり困っている人が多くいることがわかりました。また、ある程度多くの人が使ってくれそうであるという点もモチベーションのポイントになります。

3.すでにあるものを組み合わせる

おぼろげに作るべきものの輪郭が見えてきたら、どんなタイプのサービスにするか、どのような機能を作るかを決めます。この時、既存のサイトを大いに参考にします。世の中のサービスのほとんどは、それまでにあったものの組み合わせです。例えば「Pairs」や「Tinder」といったマッチングアプリは「男女」をマッチングしますが、「Airbnb」は家を貸したい人と借りたい人をマッチングしています。もしかしたら「本を貸したい人」と「借りたい人」をマッチングするサービスが求められている可能性もあります。

サービスのタイプを抽象化して考える

上記でマッチングサービスについて言及しましたが、例えばSNSサービス、レビューサービス、通販サービスなど、サービスのタイプを抽象化して考えるといくつか出てくると思います。あとは「何のマッチング」なのか、「何のレビュー」になるのかは、1,2で思いついたものと組み合わせると良いでしょう。

サービスの機能を抽象化して考える

投稿機能、コメント機能、タグ付け機能など、数多くのサービスで利用されている「機能」はほとんど共通しています。思いついたアイデアを元にユーザーにとって必要な機能を洗い出し、その上で優先順位をつけて実装することにしましょう。

Tips

ここからは本筋とは関係なく思いついたことについてつらつらと書きます。

少数の人が熱狂的に使ってくれるものを目指す

自分が使いたいサービスを考えることと関連するのですが、せっかく使ってくれるのであれば夢中で使ってくれるものの方が、作る上で身が入ります。多少ニッチでも良いので、ファンがつくようなサービスを目指したいところです。

多くの人が潜在的に欲しいと思っているものを目指す

上で言っていることと矛盾してしまうようですが、「潜在的に」というのがポイントです。いつかサービスが成長し「普通に便利だし使うか」となってくれる人が多く居れば居るほどサービスとしては持続していけるでしょう。平たく言えば「市場があるかどうか」といったところでしょうか。

モチベーション維持

何事も、続けなければ意味がありません。そのためにはモチベーションの維持が重要です。「なぜ作らなければいけないのか」「いつまでに作るのか」を人に宣言するなど、この辺りの工夫をする必要もあります。

終わりに

せっかく読んでいただいたので、この記事を読んだ後にやってみると良いことについても書いておきます。

この記事を読んだ後のアクション

・以下についてひと通り書き出し、考えた上でTwitterに投稿してみる

1.自分が好きなことは何か?
2.身近な人が困っていることは無いか?
3.すでにあるものを組み合わせる

情報が整理しきれていませんが、後ほど図など追加しようと思います。 ありがとうございました。