siroemk’s blog

フィヨルドブートキャンプで学んでいます(2020/11〜)

フィヨルドブートキャンプに入って6ヶ月が経ちました

フィヨルドブートキャンプで学んだことや思ったことを毎月まとめています。

目次

今月やったこと(5月)

Sinatraでメモアプリを作った

Sinatraでこのような簡単なメモアプリを作りました。

f:id:siroemk:20210607162609g:plain

メモの登録や削除、編集ができます。

課題の条件で「データ保存先はDBではなく、ファイルへ保存する」という指定があったので、メモが追加されるたびにJSONファイルに書き込むような構成にしました。

久しぶりにCSSやHTMLも触りました。

github.com

Sinatraのアプリ作成で学んだこと

フィヨルドブートキャンプの受講生の方へ。Sinatraラクティスのネタバレあるかもです。

1. 登録されたメモにIDを振る

メモを編集したり、削除するときに「どのメモか」判断するためにIDが必要です。

このID付与方法に悩みました。

初めに思いついたのが、「メモが登録されるたびに、dataディレクトリにJSONファイルを作るようにし、ディレクトリ内のファイル数をカウントして、+1した数字をIDにする」でした。

でも、これだとファイルを削除した時にIDが一意ではなくなってしまうので却下...。また、全く同時に作成された場合も一意で無くなってしまう。

そこで、SecureRandom.uuidを使って、ランダムな文字列を生成し、その文字列をIDとして使うことにしました。

docs.ruby-lang.org

2. DateTimeクラスではなく、Timeクラスを

SecureRandom.uuidを使うと、一意のIDを付与することはできるけど、連番のIDではないので、登録した順に表示させることができない...

ということで、メモの登録時間をDateTimeクラスでとることに。

しかーし、DateTimeクラスは非推奨になっている...とのことで、Timeクラスに置き換えました。

DateTime は deprecated とされているため、 Timeを使うことを推奨します。

docs.ruby-lang.org

3. XSS対策としてメモ保存時にhtmlをエスケープするような処理を書いていた

XSS対策としてRack::Utilsのescape_htmlを使いました。 Sinatraではhelpersに定義しておくとどこからでも呼び出せるので、helpersにhメソッドを定義しました。

#app.rb

helpers do
  def h(text)
    Rack::Utils.escape_html(text)
  end
end

そして、初めは「保存時にエスケープするようなコード」を書いていました。

# app.rb
# 省略

post '/memos' do
  memo = { "id" => SecureRandom.uuid, "title" => h(params[:title]) , "content"=> h(params[:content]), "time" => @time }
 # 省略(JSONファイルにmemoの内容を書き込むようなコード)
end

でも、このままだとユーザが入力した値を加工して保存することになってしまう。

メンターさんから「場合によってリッチテキストエディタなど、タグをそのまま表示したいってケースもあるので、エスケープの処理は保存時ではなく表示時にやるのが良いよ。」とアドバイスをいただき、viewsの方でエスケープするように書き換えました。

4. CSSでfooterを固定する

f:id:siroemk:20210607154807p:plain ちょっと分かりにくいですけど、コンテンツの中身が少ない時にfooterが上に来てしまう状態でした。画面サイズに合わせてfooterが下にくっつくようにしたい。

フィヨルドの町田さんに「flexbox使ったら簡単ですよ」と教えていただき、試してみることに。

動きを試したcodepen

flexboxで「横幅の片方が固定・片方が可変」というパターンを実装できるので、それを応用してfooterを固定し中身のコンテンツを可変にしました。

5. 空ディレクトリはGit管理できない 

「よし!できたぞ〜!」とGitでaddしようとしたところ、ファイル保存用の空ディレクトリがaddできない...

「このディレクトリがないとエラー出るし...postのところにコードを書き足す?dataディレクトリがなければ、新しく作るように条件を追加するのか...」と分報でつぶやいていたら、アドバイザーさんから.gitkeepなるものを教えていただきました。

空のディレクトリをGit管理したい場合は、ディレクトリ内に.gitkeepという空ファイルをあげておく。

この作戦でaddできるようになりました。

メモアプリを作った感想

初めてSinatraを触ったのですが、動きがシンプルで使いやすかったです。SinatraREADMEを読みながら、手元でコードを動かしてみると理解しやすかったです。

フィヨルドブートキャンプに入る前にRailsチュートリアルやprogateのRailsをやっていたので、スーッと頭に入ってきました。もっと複雑なアプリを作りたいので、引き続き続けていきたいです。

来月やること(6月)

6月は、このメモアプリのデータ保存先をJSONファイルからDBに変更します。

今月もガシガシやっていきたい気持ちはあるのですが、家庭の事情で遠方に引越しすることになりバタバタなので、ゆっくりやっていきます。

娘たちの保育園が無事決まりますように。

過去の記事

フィヨルドブートキャンプに入って1ヶ月が経ちました

フィヨルドブートキャンプに入って2ヶ月が経ちました

フィヨルドブートキャンプに入って3ヶ月が経ちました

フィヨルドブートキャンプに入って4ヶ月が経ちました

フィヨルドブートキャンプに入って5ヶ月が経ちました