【大阪】Rails講義＆もくもく会『エンジニアの巣窟〜実践道場編〜』（駆け出しエンジニア大歓迎）

2020/01/25(土)14:00 〜 18:00 開催

ブックマーク

Ruby on Rails, もくもく会

イベント内容

【大阪】Rails講義＆もくもく会『エンジニアの巣窟〜実践道場編〜』とは？？

転職活動で使用可能なポートフォリオアプリ制作をお手伝いする講義スタイルの勉強会です。

この勉強会に参加頂ければ、素人では少し難易度が高いアプリを講師に教えて貰いながら制作する事ができます。
そのアプリを持って帰って頂き、あとは少し肉付けすれば転職活動で使用出来るポートフォリオアプリとなります。

ProgateのRails講座を修了されたレベルの方を対象としております。（簡単なCRUDアプリ制作経験者）
また、開発環境でエラーが発生して講義が進まないという事が無いように、申し込みには簡単な課題を用意しております。
基本的にはコピペで完了する内容となっておりますので是非トライして頂き、課題をクリアされた方のみ参加申し込みをお願い致します。

エンジニアの巣窟〜実践道場編〜の特徴

・Rails講師をお招きし、Rails講義を受講頂けます
・講師の方に教えて貰いながら就活で使用可能なポートフォリオアプリが制作可能
・主催者の長岡は未経験からIT企業へ転職しました！転職に対してお持ちの疑問に回答できます！
・もくもく会終了後、有志のメンバーで飲み会をセッティング。仲間を増やしましょう！

講師

人生逆転サロン公式メンターたけさん（Twitter：@take18k_tech）
人生逆転サロンというオンラインサロンの公式メンターとしてRailsの指導を行なっています。

主催者の長岡ゆーき（Twitter：@freepc_yuki）
32歳、未経験、独学、大阪で転職活動を行い10社から内定を頂きました。

今回の講義内容

体重変化をグラフで表示させる体重管理アプリ
RailsのChart.jsとgonを使用して制作します
RailsとJavaScriptを連携させて、動的なグラフを描写させます

講義で制作するアプリ完成イメージ
https://rocky-tor-74291.herokuapp.com/
ユーザー名：chart
パスワード：chartPass

参加条件の課題については最下部に記載しております

タイムテーブル

スケジュール	内容
14:00	開場
14:15	たけさんによる講義開始
17:15	質疑応答&もくもく会
18:00	もくもく会終了
18:00〜	有志による飲み会

※飲み会参加希望の方へ
もくもく会後に飲み会を行います。
本勉強会の開催2週間前を目処に参加希望者にご連絡を行いますので、その際に飲み会参加希望者は主催者宛てにメールにてご連絡を頂ければと思います。

会場について

■ 所在地
大阪市中央区南久宝寺町1-9-2　南久宝寺ビル401号室

■ アクセス
地下鉄中央線、堺筋線堺筋本町駅６番出口徒歩3分
スーパーライフ、スギドラックの前を抜けるとすぐ
隣と向かいにコインパーキングもあり車利用も便利です

■ google map
https://goo.gl/maps/aEzpbRZdpPB2

■入室方法
建物奥のエレベーターで４階に上り４０１号室に行きます。

禁止事項にご理解・ご協力ください

ハラスメント、暴力行為、勧誘、マウントなど、他の参加者が不快になるような行為は禁止します。  
SNSへの投稿は自由ですが、写真・動画投稿時の顔出し可否の確認など、プライバシーへのご配慮をお願いいたします。
 一緒に楽しく学び、繋がれる環境を創っていきましょう！

最後に

同じ境遇の仲間がいたり、前向きに頑張っている人と話しをすると、自分もやる気が出てきて頑張れるんですよね！  
YouTubeでエンジニアの方の動画を見たり、Twitter等で情報収集するのとは全然違う、オフラインでの繋がりを体感頂ければと思います。  
もくもく会に参加された事が無い方にとっては少し敷居が高く感じられると思いますが、せっかくの機会ですので一歩踏み出してみてはいかがでしょうか！  
あなたの参加を心待ちにしています！

参加条件となる課題

1. 参加条件

・Mac限定

・ProgateのRails講座を修了されたレベルの方を対象としております
（CRUDアプリ（ユーザーやメッセージの作成・更新・削除ができるアプリ）の作成経験あり）

・「3. インストール・準備」の章に記載した，必要となるgemのインストール，動作確認までを済ませる

2. 講義の注意点

・講義は Rails 5.2.4 で行います（Rails 6 の環境構築方法は講義後に配布します）

・テンプレートエンジンは erb形式を採用します（HTMLに近い書き方）

・Javascript のプログラムもかなり書きます（jQuery は表面上使用しません）

・見た目を簡単に整えるため，Bootstrap 4 を利用します

・テスト(RSpec)までは解説しません

・Gitの使用方法については解説しません。コミット，ブランチの変更などは各自で対応いただきたいと思います。

3. インストール・準備

3.1 Rails 5.2.4 のインストール

# Rails 5.2.4 をインストール
$ gem install rails:5.2.4
# インストールしたRubyを使用可能な状態にする⇒shimsへの反映
$ rbenv rehash

3.2 アプリの作成

# データベースにPostgreSQLを使用される場合
$ rails _5.2.4_ new weight_management_app -d postgresql -T --skip-coffee
# データベースにMySQLを使用される場合
$ rails _5.2.4_ new weight_management_app -d mysql -T --skip-coffee

# （各オプションの意味）
# ・rails _5.2.4_ => Railsのバージョンを 5.2.4 に指定
# ・-d postgresql => 「--database=postgresql」の略。
#                    データベースをPostgreSQLに指定。
# ・-T            => 「--skip-test」の略。MiniTest を使用しない
# ・--skip-coffee => CoffeeScript を使用しない

# 「weight_management_app」のディレクトリに移動
$ cd weight_management_app

Gemfile に次を追加

# 中略
gem 'bootsnap', '>= 1.1.0', require: false

# ***** 以下を追加 *****
# ログイン機能
gem 'devise'

# 日本語化
gem 'rails-i18n', '~> 5.1'
gem 'devise-i18n'

# Bootstrap（簡単に見た目を整えられる）
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
# ログイン関連ページにBootstrapを適用するGem
gem 'devise-bootstrap-views', '~> 1.0'

# Chart.js（グラフ表示）
gem 'chart-js-rails'
# flatpickr（カレンダー）
gem 'flatpickr'
# Gon（コントローラから Javascript に変数を渡せるようにする）
gem 'gon'
# ***** 以上を追加 *****

# 中略

group :development do
  # 中略
  # ***** 以下を追加 *****
  # デバッグで利用
  gem 'pry-byebug'
  # ***** 以上を追加 *****
end

gem を追加したのでbundle installを実行した上でデータベースを作成

$ bundle install
$ rails db:create

念のためこの時点で，$ rails sでサーバーを起動し，http://localhost:3000/に接続して「Yay! You’re on Rails!」が出るか確認して下さい

3.3 トップページの作成

$ rails g controller graphs index

config/routes.rbにルーティングを設定

Rails.application.routes.draw do
# get 'graphs/index' は削除
# ***** 以下を追加 *****
  root 'graphs#index'
# ***** 以上を追加 *****
end

app/views/layouts/application.html.erbを編集

<!DOCTYPE html>
<html>
  <head>
  <!-- ***** タイトルを変更 ***** -->
    <title>体重管理アプリ</title>
  <!-- ***** 以上を編集 ***** -->
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

  <!-- ***** 以下を追加 ***** -->
  <!-- 表示をスマートフォンに対応させる -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- ***** 以上を追加 ***** -->

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
  <!-- ***** 本文を編集 ***** -->
  <!-- 全ページの横幅に上限を設ける（cssは後に追加） -->
    <div class="graph-container">
    <%= yield %>
    </div>
  <!-- ***** 以上を編集 ***** -->
  </body>

</html>

3.4 各種ライブラリの導入（Bootstrap, Chart.js, flatpickr）

【参考】【GitHubのリンク】
・Bootstrap（見た目を整える）
・Chart.js（グラフ）
・flatpickr（カレンダー）
app/assets/stylesheets/application.cssの拡張子cssをscssに変更
application.scssの中身を全て削除し，次を追加して下さい。

/* ...
*= require flatpickr
*= require flatpickr/themes/material_blue
*/

@import "bootstrap";

// 全体
.graph-container {
  @extend .container-fluid;
  max-width: 768px;
  padding: 1rem;
}

app/assets/javascripts/application.jsに，次を追加して下さい。

//= require rails-ujs
//= require activestorage

// ***** 以下を追加 *****
//= require Chart.min
//= require flatpickr
//= require flatpickr/l10n/ja
//= require jquery3
//= require popper
//= require bootstrap-sprockets
// ***** 以上を追加( turbolinks より上に追加) *****

//= require turbolinks
//= require_tree .

3.5 各種ライブラリの動作確認

app/views/graphs/index.html.erbの中身を全て削除し，次を追加して下さい。

<p class="mt-4">青いボタンが表示されていれば，「Bootstrap」の導入はOKです</p>
<button type="button" class="btn btn-primary btn-block">ボタン</button>

<p class="mt-4">フォームをクリックしたときに，青色の帯のカレンダーが出れば「flatpickr」の導入はOKです</p>
<input class="form-control bg-white my-4" id="date-form" type="text" placeholder="日付を設定" readonly>

<p class="mt-4">棒グラフ・折れ線グラフが表示されていれば，「Chart.js」の導入はOKです</p>
<div class="row">
  <canvas id="bar-chart" class="col-md-6 col-12"></canvas>
  <canvas id="line-chart" class="col-md-6 col-12"></canvas>
</div>

<script>
    // 本来 Javascript をここに書くべきではありませんが，プログラムの移動方法は講義内で解説します

    const today = new Date(new Date().setHours(0, 0, 0, 0))
    const a_month_ago = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate())

    // ● カレンダー

    // 選択できない日付データ（自由に変更していただいてOKです）
    const disable_dates = ['2019-12-10', '2019-12-20', '2019-12-30', '2020-01-10', '2020-1-20', '2020-01-30']

    // カレンダーの日本語化
    flatpickr.localize(flatpickr.l10ns.ja);

    // カレンダーの表示
    flatpickr('#date-form', {
        // スマートフォンでもカレンダーに「flatpickr」を使用
        disableMobile: true,
        // 1ヶ月前から本日まで選択可
        minDate: a_month_ago,
        maxDate: today,
        // 選択できない日付
        disable: disable_dates
    });

    // ***********************************
    // ● グラフ
    // 棒グラフのデータ（自由に変更していただいてOKです）
    let barLabel = ['1月', '2月', '3月', '4月', '5月', '6月']
    let barData = [5, 4, 2, 6, 5, 8]

    // 折れ線グラフのデータ（自由に変更していただいてOKです）
    let lineLabel = ['1/1', '1/2', '1/4', '1/5', '1/6', '1/7']
    let lineData = [60.3, 61.1, 60.8, null, 60.5, 61.4]

    // 棒グラフのオプション

    const barChartData = {
        labels: barLabel,
        datasets: [{
            label: '得点',
            data: barData,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    }

    const barChartOption = {
        title: {
            display: true,
            text: '棒グラフ'
        },
        scales: {
            yAxes: [{
                ticks: {
                    // y軸のメモリを 0 からスタートに強制
                    beginAtZero: true
                }
            }]
        }
    }

    // 折れ線グラフのオプション

    const lineChartData = {
        labels: lineLabel,
        datasets: [{
            label: '体重(kg)',
            data: lineData,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
            spanGaps: true
        }]
    }

    const lineChartOption = {
        title: {
            display: true,
            text: '折れ線グラフ'
        },
        tooltips: {
            callbacks: {
                // ホバー（スマホならタップ）時のラベル表示を変更
                title: function (tooltipItems) {
                    return tooltipItems[0].xLabel.replace(/^(\d+).(\d+)$/, ' $1 月 $2 日')
                },
                label: function (tooltipItem) {
                    return '体重: ' + tooltipItem.yLabel + 'kg'
                }
            }
        }
    }

    // 棒グラフを表示
    const barChartContext = document.getElementById("bar-chart").getContext('2d')
    new Chart(barChartContext, {
        type: 'bar',
        data: barChartData,
        options: barChartOption
    })

    // 折れ線グラフを表示
    const lineChartContext = document.getElementById("line-chart").getContext('2d')
    new Chart(lineChartContext, {
        type: 'line',
        data: lineChartData,
        options: lineChartOption
    })
</script>