【大阪】Rails講義＆もくもく会『エンジニアの巣窟〜実践道場編〜』（駆け出しエンジニア大歓迎）
イベント内容
【大阪】Rails講義＆もくもく会『エンジニアの巣窟〜実践道場編〜』とは？？
転職活動で使用可能なポートフォリオアプリ制作をお手伝いする講義スタイルの勉強会です。
この勉強会に参加頂ければ、素人では少し難易度が高いアプリを講師に教えて貰いながら制作する事ができます。
そのアプリを持って帰って頂き、あとは少し肉付けすれば転職活動で使用出来るポートフォリオアプリとなります。
ProgateのRails講座を修了されたレベルの方を対象としております。（簡単なCRUDアプリ制作経験者）
また、開発環境でエラーが発生して講義が進まないという事が無いように、申し込みには簡単な課題を用意しております。
基本的にはコピペで完了する内容となっておりますので是非トライして頂き、課題をクリアされた方のみ参加申し込みをお願い致します。
エンジニアの巣窟〜実践道場編〜の特徴
・Rails講師をお招きし、Rails講義を受講頂けます
・講師の方に教えて貰いながら就活で使用可能なポートフォリオアプリが制作可能
・主催者の長岡は未経験からIT企業へ転職しました！転職に対してお持ちの疑問に回答できます！
・もくもく会終了後、有志のメンバーで飲み会をセッティング。仲間を増やしましょう！
講師
人生逆転サロン公式メンターたけさん（Twitter：@take18k_tech）
人生逆転サロンというオンラインサロンの公式メンターとしてRailsの指導を行なっています。
主催者の長岡ゆーき（Twitter：@freepc_yuki）
32歳、未経験、独学、大阪で転職活動を行い10社から内定を頂きました。
今回の講義内容
ドラクエ風ゲームの制作
RailsとJavaScriptを使用して制作します
Railsでのテーブル操作やJavaScriptとの連携を学べます。
講義で制作するアプリ完成イメージ
https://dq-like-app.herokuapp.com/
参加条件の課題については最下部に記載しております
タイムテーブル
| スケジュール | 内容 |
|---|---|
| 14:00 | 開場 |
| 14:15 | たけさんによる講義開始 |
| 17:15 | 質疑応答&もくもく会 |
| 18:00 | もくもく会終了 |
| 18:00〜 | 有志による飲み会 |
※飲み会参加希望の方へ
もくもく会後に飲み会を行います。
本勉強会の開催2週間前を目処に参加希望者にご連絡を行いますので、
その際に飲み会参加希望者は主催者宛てにメールにてご連絡を頂ければと思います。
会場について
■ 所在地
多目的スペース - ディアスペース
大阪府 大阪市中央区 本町橋 6-19 本町第2今岡ビル 501号
■ アクセス
大阪市営地下鉄堺筋線 堺筋本町駅 徒歩7分
■ google map
https://maps.google.com/maps?q=34.68325449999999,135.51059469999996&zoom=16
■ 入室方法 事務所入り口にて担当者が受付させて頂きます。その後、研修ルームの出入りに関しては特に規制はありません。
■ 退室方法 担当者にて退店チェックをさせて頂きます。退出される際は事務所に声を掛けて下さい。
禁止事項にご理解・ご協力ください
ハラスメント、暴力行為、勧誘、マウントなど、他の参加者が不快になるような行為は禁止します。
SNSへの投稿は自由ですが、写真・動画投稿時の顔出し可否の確認など、プライバシーへのご配慮をお願いいたします。
一緒に楽しく学び、繋がれる環境を創っていきましょう！
最後に
同じ境遇の仲間がいたり、前向きに頑張っている人と話しをすると、自分もやる気が出てきて頑張れるんですよね！
YouTubeでエンジニアの方の動画を見たり、Twitter等で情報収集するのとは全然違う、オフラインでの繋がりを体感頂ければと思います。
もくもく会に参加された事が無い方にとっては少し敷居が高く感じられると思いますが、せっかくの機会ですので一歩踏み出してみてはいかがでしょうか！
あなたの参加を心待ちにしています！
参加条件となる課題
1. 参加条件
・Mac限定
・ProgateのRails講座を修了されたレベルの方を対象としております
（CRUDアプリ（ユーザーやメッセージの作成・更新・削除ができるアプリ）の作成経験あり）
・「3. インストール・準備」の章に記載した，必要となるgemのインストール，動作確認までを済ませる
2. 講義の注意点
・講義は Rails 5.2.4 で行います（Rails 6 の環境構築方法は講義後に配布します）
・テンプレートエンジンは erb形式 を採用します（HTMLに近い書き方）
・Javascript のプログラムも書きます
・見た目を簡単に整えるため，Bootstrap 4 を利用します
・テスト(RSpec)までは解説しません
・Gitの使用方法については解説しません。コミット，ブランチの変更などは各自で対応いただきたいと思います。
3.インストール・準備
3.1 Rails 5.2.4.1 のインストール
- Rails 5.2.4.1 をインストールしていない場合は，次をターミナルから実行
# Rails 5.2.4.1 をインストール $ gem install rails:5.2.4.1 # インストールしたRubyを使用可能な状態にする⇒shimsへの反映 $ rbenv rehash
3.2 アプリの作成
- ターミナルから次を実行 - データベースの指定はお任せします - MySQL などに設定される場合は，講義中にエラーが起こらないよう，直前に動作確認をお願いいたします
rails _5.2.4.1_ new dq_like_app -T --skip-coffee # （各オプションの意味） # ・rails _5.2.4.1_ => Railsのバージョンを 5.2.4.1 に指定 # ・-T => 「--skip-test」の略。MiniTest を使用しない # ・--skip-coffee => CoffeeScript を使用しない
# 「dq_like_app」のディレクトリに移動し忘れないように！ cd dq_like_app
- Gemfileを修正
# ***** 「gem 'bootsnap' 〜」 の下に，次を追加 ***** # ログイン機能 gem 'devise' # 日本語化 gem 'rails-i18n', '~> 5.1' gem 'devise-i18n' # Bootstrap（簡単に見た目を整えられる） gem 'bootstrap', '~> 4.4.1' gem 'jquery-rails' # ログイン関連ページにBootstrapを適用するGem gem 'devise-bootstrap-views', '~> 1.0' # ***** 以上を追加 ***** # 中略 group :development do # 中略 # ***** 以下を追加 ***** # デバッグで利用 gem 'pry-byebug' # ***** 以上を追加 ***** end
- gem を追加したのでbundle installを実行
bundle install
- 念のためこの時点で，rails sでサーバーを起動し，http://localhost:3000/に接続して「Yay! You’re on Rails!」が出るか確認して下さい。
3.3 トップページの作成
- ターミナルから次を実行
rails g controller games index
- config/routes.rbを修正
Rails.application.routes.draw do # get 'games/index' は削除 # ***** 以下を追加 ***** root 'games#index' # ***** 以上を追加 ***** end
- app/views/layouts/application.html.erbを修正
<!DOCTYPE html> <html> <head> <!-- ***** タイトルを変更 ***** --> <title>ドラクエ風Railsアプリ</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="base-container"> <%= yield %> </div> <!-- ***** 以上を編集 ***** --> </body> </html>
3.4 Bootstrapの導入
- app/assets/stylesheets/application.cssの拡張子cssをscssに変更
- app/assets/stylesheets/application.scssを修正
// 元の記述は全て消去して下さい! @import "bootstrap"; $background-color: #272B2F; // 全体の背景を黒，文字色を白色に変更 body { background-color: $background-color; color: white; } // 全体 .base-container { @extend .container-fluid; max-width: 576px; padding: 2rem; } // ゲーム内のフォントサイズ .game-font { font-size: 1.3rem; @media screen and (max-width: 450px) { font-size: 1rem; } }
- app/assets/javascripts/application.jsを修正
//= require rails-ujs //= require activestorage // ***** 以下を追加 ***** //= require jquery3 //= require popper //= require bootstrap-sprockets // ***** 以上を追加( turbolinks より上に追加) ***** //= require turbolinks //= require_tree .
- Bootstrap の動作確認
- app/views/graphs/index.html.erbを修正
<p class="mt-4">青いボタンが表示されていれば，「Bootstrap」の導入はOKです</p> <button type="button" class="btn btn-primary btn-block">ボタン</button>
- サーバーを再起動し，青いボタンが表示されていることをご確認下さい。
3.5 Devise の導入（途中まで）
- ターミナルを次を実行
rails g devise:install rails g devise user rails db:migrate
- サーバーを再起動し，http://localhost:3000/users/sign_inをアクセスしたとき，ログイン用のページが見られることを確認して下さい。
注意事項
※ 掲載タイミングや更新頻度によっては、情報提供元ページの内容と差異が発生しますので予めご了承ください。
※ 最新情報の確認や参加申込手続き、イベントに関するお問い合わせ等は情報提供元ページにてお願いします。
新規会員登録
このイベントに申し込むには会員登録が必要です。
アカウント登録済みの方はログインしてください。
※ ソーシャルアカウントで登録するとログインが簡単に行えます。
※ 連携したソーシャルアカウントは、会員登録完了後にいつでも変更できます。
