youtubeの様なプログレスバーの実装

かっこいいプログレスバーを実装しよう！

ページをロードする時に何も無い真っ白な状態でロードしていると、ユーザーからしたらちゃんとページに飛べてるのかどうか不安になりますよね！そんな不安を解消するために、ちゃんと目的のページに飛べてるけど、ロードしている状態であることを示すために、プログレスバーというものがあります。
今回はyoutubeで使われている様なプログレスバーをものすごく簡単にgemで実装していきましょう！

項目内容

1. nprogress-railsを導入する
   
2. nprogress-railsを読み込むように設定する
   

---

nprogress-railsを導入する

いつも通りGemfileに編集してgemを導入しましょう。今回使うgemはnprogress-railsです。Gemfileに以下のように追記してください。

gem 'nprogress-rails'

編集し終わったら保存して、bundle installしてください。これでgemの導入が終了しました。次の項目で実際に読み込むように設定しましょう。

nprogress-railsを読み込むように設定する

app/assets/javascriptsにあるapplication.jsにgithubページのinstallationの項目に従って以下の様に追記し

//= require nprogress
//= require nprogress-turbolinks

app/assets/stylesheetsにあるapplication.cssに以下の様に追記することによってnprogress-railsが機能し始めます！

*= require nprogress
*= require nprogress-bootstrap

これだけでもう実装が完了しました！
こういった凝った機能もgem一つ導入するだけで実装できてしまうのがRuby on Railsの魅力の一つですね！