Sinatraを使ったWebアプリ開発 HTML,JavaScript編

はじめに

先日、Railsの勉強のために現場で使える Ruby on Rails 5速習実践ガイド
という本でタスク管理アプリを作成しました。
そこでよりRailsの理解を深めるためにもSinatraでタスク管理アプリを実装することにしました。
今回はHTML,JavaScriptついてまとめました。
テンプレートエンジンとしてSlimを使用しています。

削除ボタンと確認ダイアログの実装

methodをpostにして以下のコードを追加。

input id="hidden" type="hidden" name="_method" value="delete"
form onsubmit='return confirm("タスク「#{@task.name}」を削除します。よろしいですか?");' action="/tasks/#{@task.id}" method="post"
  input id="hidden" type="hidden" name="_method" value="delete"
  input type="submit" value="削除"

削除リンクの実装

ログアウトへのリンクを想定。
削除ボタンの「input type="submit" value="削除"」部分を「a href="javascript:logout.submit()"」に変更。

 form action="/logout" method="post" name="logout"
   input id="hidden" type="hidden" name="_method" value="delete"
   a href="javascript:logout.submit()"
     | ログアウト

Sinatraを使ったWebアプリ開発 ルーティング編

はじめに

先日、Railsの勉強のために現場で使える Ruby on Rails 5速習実践ガイド
という本でタスク管理アプリを作成しました。
そこでよりRailsの理解を深めるためにもSinatraでタスク管理アプリを
実装することにしました。
今回はルーティングついてまとめました。

RESTfulなルーティング

Railsで実装した時と同じURLになるようにSinatraのルーティングを設定。

Railsでの実装

resources :tasks

Sinatraでの実装

# app.rb
# index
get '/tasks' do

end

# new
get '/tasks/new' do

end

# show
get '/tasks/:id' do

end

# edit
get '/tasks/:id/edit' do

end

# create
post '/tasks' do

end

# update
patch '/tasks/:id' do

end

# destory
delete '/tasks/:id' do

end

感想

Sinatraでルーティングを定義する際は使うパス分、追記する必要があり、
またパス名も考えないといけない。
Railsは短いコードで定義できるが何をしているのか理解していないと
冗長なコードになってしまったり、使い方を間違ってしまったりする。
今回、Sinatraでルーティングの定義をすることで
Railsでルーティングする際の容易性を再認識することができた。

Sinatraを使ったWebアプリ開発 データベース編

はじめに

先日、Railsの勉強のために現場で使える Ruby on Rails 5速習実践ガイド
という本でタスク管理アプリを作成しました。
そこでよりRailsの理解を深めるためにもSinatra
タスク管理アプリを実装することにしました。
今回はSinatra,PostgreSQL,ActiveRecordをデータベースの設定に
ついてまとめました。

database.ymlのproduction設定(Herokuにデプロイすることを想定)

productionにurl: <%= ENV['DATABASE_URL'] %>を追加

# database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  pool: 5
  timeout: 5000
  host: localhost
  port: 5432
  username: 
  password: 

development:
  <<: *default
  database: sinatra_development

test:
  <<: *default
  database: sinatra_test
  
production:
  url: <%= ENV['DATABASE_URL'] %>

ActiveRecordとの連携

database.ymlに記載した<%= %>部分でエラーが出たためロードする際に
ERB.newで読み込みできるように変更

# app.rb
require 'erb'

configure :development, :test do
  ActiveRecord::Base.configurations = YAML.load(ERB.new(File.read('config/database.yml')).result)
end

configure :production do
  ActiveRecord::Base.establish_connection(ENV['DATABASE_URL'])
end

感想

RailsActiveRecordを使用する際はRailsがよしなにしてくれるが
Sinatraの場合database.ymlを読み込む記述が必要になる。
今回、SinatraActiveRecordを使用する際のdatabase.ymlの読み込む方法を
知ることができた。
また、database.ymlで<%= %>を使っている場合は、
読み込む際にERB.newが必要なこともわかった。

【読書感想】Ruby on Rails5 速習実践ガイドを読んで

書籍情報 

 

構成

Chapter 1 RailsのためのRuby入門
Chapter 2 Railsアプリケーションをのぞいてみよう
Chapter 3 タスク管理アプリケーションを作ろう
Chapter 4 現実の複雑さに対応する
Chapter 5 テストをはじめよう
Chapter 6 Railsの全体像を理解する
Chapter 7 機能を追加してみよう
Chapter 8 RailsJavaScript
Chapter 9 複数人でRailsアプリケーションを開発する
Chapter 10  Railsアプリケーションと長く付き合うために

 

要約

Ruby on Railsを使ったWebアプリケーションの基本的な作り方、RSpecを使ったテストの方法、機能の追加方法などRailsでWebアプリを開発できるようになる内容の他にも、複数人で開発する場合の方法といった実践的な内容も含まれている。

 

面白かったChapter

特に面白かったChapterは7と8。

Chapter7はChapter3で作ったタスク管理アプリにRailsアプリでよくある具体的な機能を実現する方法を紹介している。

7-2でRansackを使った検索機能の実装方法、7-5でActiveStorageを使った画像ファイルの添付機能の実装方法、7-6でCSV形式のファイルのインポート・エクスポートの実装方法を知ることができた。

Chapter8はJavaScriptを使ってタスク管理アプリのページに変化をつけた。
また、Turbolinksが有効な場合の注意点などより実践的なことも学べた。

機能追加することでタスク管理アプリが便利になったと実感できたこともあり面白いChapterだった。

 

気になったChapter

特に気になったChapterは10。

Railsアプリケーションと長く付き合うためにということでバージョンアップの際に気をつけることやアプリケーションの複雑性に対応するためのコードの書き方について書かれている。

ここで出てくるアプリケーションの複雑性に対応するためのコードの書き方だが
3つの観点から出された改善策が約50ページに渡って書かれていた。

これらの改善策を現在、携わっているアプリに対して実践していきたい。

全てを実践することは難しいかもしれないがこの改善策は使えるかもしれないなど検討し、少しずつでもリファクタリングを進めていきたい。

また、機能追加など開発を進めていく際もコードの書き方といったことを意識して進めていきたい。

Chapter10の内容は一度読んだだけでは覚えきれないところもあると思うため定期的な読み返しもしていきたい。

 

【読書感想】Webを支える技術を読んで

書籍情報

 

Webを支える技術 ―― HTTP,URI,HTML,そしてREST WEB+DB PRESS plus

 

書名: Webを支える技術 -HTTP、URI、HTML、そしてREST
著者: 山本陽平
出版社: 技術評論社
発行: 2010年5月1日

構成

第1部 Web概論
第2部 URI
第3部 HTTP
第4部 ハイパーメディアフォーマット
第5部 Webサービスの設計

URI

URIとは何か?から始まりURIを構成するパーツや文字列をURIに含ませる際の
%エンコーディングの説明もあった。
その上でWebサービスやWeb APIの実装で気をつけることが
章の最後に書かれていた。

また、URIの設計についての説明があった。
変わらないURIを良いURIとし、設計によってURIを変わりにくくすることに
ついて具体的な方針が書かれていた。
他にもユーザービリティやマトリクスURIの説明もあった。

URIのそもそもの説明や絶対パス相対パスの説明もあり学び直しもできた。
%エンコーディングではAmazonURIをコピペした際に文字列が%〇〇の表記に
なるのを普段目にしていたため面白く読むことができた。

HTTP

HTTPではまず、階層型プロトコルを用いてTCP/IP、HTTPの説明があった。
次にHTTPの現在のバージョンになるまでの過程の説明やHTTPの具体的な
仕組みとしてクライアントとサーバで行われることの説明があった。

クライアントが出したリクエスト、サーバが返すレスポンスのHTTPメッセージの
構成であったりステートレス、ステートフルの説明もあった。
また、GET、POST、PUT、DELETEのHTTPメソッドの説明をリクエスト、
レスポンスのメッセージを用いて行っていた。

この本を読むまでリクエストやレスポンスのメッセージにどんな情報が
含まれているのか意識したことがなかったため今回、基礎の部分を知ることが
できてよかった。

また、HTTPメソッドの扱い方の説明もあった。GETメソッドの誤用の例や
べき等でなくなる例など具体的な説明もありHTTPメソッドそれぞれの役割、
できることは何かといったことの理解が捗った。