読者です 読者をやめる 読者になる 読者になる

Fire Engineering

化学の研究者→消防士→ITエンジニア(2016年11月〜)

経験ゼロのド素人がWebアプリケーションを作ってみた

 今回はプログラミング歴約4ヶ月のド素人である私がWebアプリケーションを作るまでの開発記録です。

なにを作ったか

 今回作ったものは、TsubuMeMoというシンプルなつぶやき型のメモアプリケーションです。

TsubuMeMo

f:id:hirotsuru314:20160503190246p:plain

 このアプリケーションはSNSのタイムラインのようにメモを残すというのがコンセプトです。感じたこと、勉強したこと、ほしいものリストなど、つぶやきながらメモすることで、時間の流れとともにメモを振り返ることができます。 SNSの機能はありません。ただのメモアプリです。実際の作業期間は4日間で、だいたい10時間くらいで作りました。

 アカウント登録にはusernameとpasswordだけを採用していて、メールアドレス等は入力の必要はありません。

 また、お試しで使って頂くゲストユーザー用に

username:guest

password:tsubumemo

でログインできるので試しに使ってみてください!

なぜ作ったか

 便利で使えそうだから作った!と言いたいところですが、正直そんなことはありません。そもそもド素人の私が役に立つ画期的なサービスがいきなり作れるほど甘い世界だと思っていません。今回は、完全に自分のスキルアップのためのアウトプットです。

 正直、似たようなメモアプリは数多くあります。それなのになぜ作ったか。ここには私なりの考えがあります。経験ゼロの人間が独学でプログラミングを始め、Webアプリケーションという形になるものを作るまでには高い壁があります。その壁を突破するためには、「車輪の再発明」が非常に有効な勉強法の一つであると私は思います。車輪の再発明とは、すでに世の中にあるものを再び一から作ることで、一般的には忌み嫌われています。

 しかし、これはスキルアップにはかなり有効です。すでに世にあるものであれば、ある程度作る方針が固まっているし、コード自体がGitHubなどで公開されていることも多いです。やってみたらわかると思いますが、真似して作るだけでもけっこう大変です。

 マーク・ザッカーバーグの名言である

Done is better than perfect(完璧を目指すよりまず終わらせろ) の精神で頑張りましょう!(そもそも素人にとってperfectは無理です。だからこそ、せめて積極的にdoneする気持ちだけは持ちたいですね。)

採用技術など

 今回、Webアプリケーションをつくるにあたって、Railsを使いました。その他の採用した技術などは以下の通りです。

Ruby 2.3.0

Ruby on Rails 4.2.6

Twitter Bootstrap

・Cloud9

・Git

・Heroku

などなど。

実装した機能

 実際に実装した機能はとてもシンプルで、以下のような感じです。

・アカウント作成機能

・ログイン機能(ログイン情報をセッションとして保存する。)

・エラーメッセージの表示機能

(アカウント作成やログイン時に入力した値が適切でない場合にエラーメッセージを表示する。)

・メモ投稿機能

・投稿したメモを編集、削除する機能

SNSのようなフォローする機能はあえてつけておらず、自分だけのプライベートなつぶやきメモにしました)

開発メモ

パスワードの取り扱いについて

 パスワードの暗号化で便利なGemのbcryptを使いました。

 まず、Gemfileのgem 'bcrypt'で始まる行のコメントを外して( 行頭の # を削除)、bundle installを実行します。

 あとはモデルにhas_secure_passwordメソッドを1行追加するだけで、

・データベースに安全にハッシュ化(暗号化)されたpassword_digestを保存する。

・passwordとpassword_confirmationをモデルに追加して、パスワードの確認が一致するか検証する。

・パスワードが正しいときに、ユーザーを返すauthenticateメソッドを提供する。

といった機能を追加してくれます。

 あと、セキュリティ関連の話でいくと、Railsアプリケーションではもはや当然ではありますが、バリデーションによってフォーム入力する値を制限したり、ストロングパラメータで受け取る値をフィルタリングしたりといったことは行っています。

 

BootstrapのGlyphiconsが便利!

 メモの編集、削除を示すアイコンにBootstrapのGlyphiconsを用いました。便利なアイコンが200種類用意されている上に使い方がかなり簡単です。

bootstrap3.cyberlab.info

<span class="glyphicon 使いたいアイコンのクラス名" aria-hidden="true"></span>

とするだけです。ほんとBootstrapさまさまですね。

 

Sass(SCSS)が使えそうだ!

 今回はスタイルシートにSCSSを用いました。まだ、完全に理解したわけではありませんが、SCSSではネスト(深い構造)を使って記述できるが便利だなーって思いました。しかもRailsではAsset Pipelineを利用して、SCSSを自動的にコンパイルしてくれるようなので、もっと使いこなしたいです!

 

ページネーション表示機能

 ページネーションっていうのは、Webサイトでよく見かけるこれのことです。

f:id:hirotsuru314:20160503190749p:plain

コンテンツをページで分ける機能ですね。facebookでは無限スクロールが採用されていますが、TsubuMeMoではページネーション表示機能を実装してみました。

 ページネーションには、will_paginateを使いました。Railsの定番ページネーション機能にはkaminariもありますが、個人的にkaminariは一度使ったことあったので、will_paginateを使ってみました。

github.com

 使ってみた感じでは、そんなに大差なかったです。どっちもREADMEを読めば簡単に導入できます。

 そして、上のようなページネーション表示では見た目が味気ないのでBootstrapを導入しました。導入には、

github.com

を使えば瞬殺でした。見た目はこんな感じになります。

f:id:hirotsuru314:20160503190752p:plain

 

Herokuにデプロイする

 Webアプリケーションの公開にはレンタルサーバーを借りたり、AWSを使ったりすることもできますが、もっと手軽に公開してみたいといった場合にはHerokuが非常に便利です。Herokuとは簡単に言うとアプリケーションを実行するためのプラットフォームです。無料プランもあるので、気軽にWebアプリケーションを公開できます。

www.heroku.com

 アプリケーションの実行環境やデータベースなどを提供してくれるし、ターミナルからherokuコマンドを用いることにより、Herokuの操作を行うことができるし、本当に便利だなーって思いました。

 

ポートフォリオを更新しました。

 以前作成した私のポートフォリオのWorksに今回作成したTsubuMeMoを追加しました。

www.hirotsuru.sakura.ne.jp

f:id:hirotsuru314:20160503190757p:plain

 

今後やりたいこと

・メモにタグをつけて、カテゴライズする機能をつける。

プロフィール画像を設定できるようにする。

 これは、carrierwaveなどのgemを使えば簡単にできそうです。実際にHerokuで画像などをアップロードしたい場合は、HerokuのアドオンであるCloudinaryを使ってクラウド上に保存したらいいみたいです。CloudinaryのFreeプランでは500Mバイトまで無料でストレージを使うことができるみたいなので、やってみたいと思います。

・ERBじゃなくてHamlやSlimを使ってみたい。

 テンプレートエンジンとして、HamlやSlimを使ってみたいです。おそらくViewの部分のコードを大幅に減らせるんじゃないかと思います。

・ログイン認証にdeviseを使ってみたい。

 deviseはログイン認証機能を提供するgemで会員登録からログイン認証が必要なページの管理等が容易に行えるようになります。次のWebアプリケーションではこちらを使ってみようかと思います。さらにOmniauthを導入し、OAuth 認証機能をつけてみたり、、    ほんとにやりたいことが多すぎて困ります。これから一つ一つやってみて着実にスキルアップしていきたいです。

終わりに

 今回は自身初めてのWebアプリケーションを開発、公開し、私はド素人から素人くらいにはなったかなと思っています。プログラミングを勉強している方の多くが、いつか世の中の役に立つ、もしくはみんなが使って楽しいサービスを作りたい!と思っているはずです。でもそこまでの道のりは果てしなく長く感じますよね。なので、いかにしてモチベーションを保つかって本当に重要だと思います。

 私は、まずそもそも経験ゼロでプログラミングを始めているので、早い段階で世の役に立つサービスを作るということ自体一旦諦めています。その気持ちは心の中にしまっておいて、本当に作りたい自分オリジナルのサービスができたときに、「どんなサービスでもアイデアさえあれば作れるよ」っていうところまで持っていくための土台作りをしています。今回の記事が誰かの刺激なれば幸いです。

 現在、2作目のWebアプリケーションの作成中です。また開発記録を公開します!徐々に作るアプリケーションのクオリティーも上がっていきますよ!!