このエントリーをはてなブックマークに追加

12月

9

【第4回(全4回) 】RubyとVue.jsでECサイトを『考えながら』構築する

RubyでECサイトをゼロから設計、DB設計からフロントの基礎知識までしっかり身につけます

主催 : 株式会社X-HACK

ハッシュタグ :#xhandson
募集内容

過去イベント参加の方

2000円(会場払い)

先着順
10/15

第4回から参加の方

2000円(会場払い)

先着順
2/5

学生枠

無料

先着順
1/2

イベントの説明

資料

https://paper.dropbox.com/doc/rubyVue.jsEC4--ATVqYHLeKrCbH~8yO8FajqMXAg-WuupfUZ3F3y2H8upeWOIn

ご注意

  • 全4回で完結する、シリーズでのハンズオンの第4回目です

環境設定

  1. rubyのバージョン2.4が動作すること
  2. ターミナルコマンドが使えること

準備(必須)

  1. vue.jsの公式サイトにアクセスし、はじめにの部分を読んでおくこと (5分)
    https://jp.vuejs.org/v2/guide/index.html
  2. vueの素晴らしいチュートリアルがあります (30分)
    https://www.webprofessional.jp/fetching-data-third-party-api-vue-axios/
  3. sinatra(rubyの軽量フレームワーク) (60分) https://dotinstall.com/lessons/basic_sinatra_v2

イベントコンセプト

「ゼロから考えながら構築する」というのが重要なテーマとなります。
RubyやHTML/CSS/javaScriptの基礎講座ではないため、rubyやHTML/CSS/javaScriptの基礎知識の習得が目的の場合、
ご期待に添えない可能性が高いです。
とはいえ、他の言語でプログラミングの経験があれば、問題なく対応できるレベルかと思います。

進め方

講師側で「こう作るべき!」というようなサンプルを提示して、それをなぞっていくのではなく、 参加者の皆様がチームとなって、どういう風に作っていくか考えて、会話をして作り方を決定していく過程こそが重要と考えています。 ですので、設計、実装をシステム全体を通して考えてもらう体験を積んでいただくことに主体をおいたカリキュラムになっております。

とはいえ、最低限の知識としてRubyで簡単なAPIサーバーを立ち上げる方法や、 vue.jsのテンプレートの利用方法などは解説します。

成果物

最終的に完成させる目標はこちらのサイトです https://xhack-shop.herokuapp.com こちらはrubyとvue.jsをベースに作ってあります。

こちらのウェブサイトをvue.jsを使ってテンプレート化して書き換えたり、APIで取得したデータを使ってページに情報を埋め込んだりといった部分を、 1. どういうAPIが必要か 2. どこがvue.jsのテンプレート化して構築できるか といったことを皆様に考えていただきます

時間の関係上、ある程度コードベースは用意しますが 全て講師側で完成をさせずに、あえて各チームが書き換えるための余白を残しております

対象者

ある程度書籍などで学習を終えたエンジニアが、実際のサービス作成までの知識のギャップを埋めるために構成を考えています 参加者の皆さまにも内容のブラッシュアップなどにご協力いただきたいと思っております

趣旨にご賛同いただければ幸いです!!

slack

賛同いただければ下記からSlackへの参加お願いします! https://join.slack.com/t/ruby-vuejs-ec/shared_invite/enQtNDY3MTM3MzQwNjc5LTJmMDBlODZiNmQ1NGVkNTE3MDdiZTVhN2RhNjczMGE3MDVlYmI1YzcxYmY2YTlkMTk3OTVkMmU2YjJhODI5NmY

開催の予定

開催日 回数 内容
10/28 13:00 第一回 基本設計(データベース、API、画面)
11/18 13:00 第二回 管理画面、商品一覧
11/25 13:00 第三回 Vue.js の基本、Ruby軽量フレームワークの紹介
12/09 13:00 第四回 決済システム、総評

※カリキュラムは参加者の反応やレベル感を見ながらブラッシュアップをしているところです、予告なく変更される場合がありますので、ご了承ください

タイムテーブル

内容 時間(目安)
開場、受付開始 12:45-13:10
登壇者の自己紹介 13:10-13:15
ワークショップの趣旨説明 13:15-13:25
参加者の自己紹介 各テーブルごと 13:25-13:35
これからやることの説明 13:35-13:50
ハンズオン その1 - 40分 13:50-14:30
10分休憩 14:30-14:40
ハンズオン その2 - 50分 14:40-15:30
ハンズオン その3 - 50分 15:30-16:20
懇親会準備 16:20-16:30
懇親会 16:30-17:10
閉会、片付け 17:10-17:30

このイベントで「取り上げない」こと

重要なことは、やらないことを決めることです。

このイベントではとてもシンプルに設計をして、最低限の機能を備えたサービスを最速で完成させることを目指します。 WebPackやRailsなど便利なツールやフレームワークはたくさんありますが、初心者にとってはかえって重荷です。

どんどん機能を追加していくと、それらのフレームワークが強力なサポートをしてくれることは事実です。 ですが、初めての方にとってはそれらを利用することは、情報過多気味で消化するのに時間がかかり好ましくありません。

簡単とシンプルは違います。
シンプルに作ることを目標にし、「簡単だけど複雑な物」はこのイベントでは取り上げません。

RubyとVue.jsを用いたシンプルなwebサービスの構築手法を学びます

第一回は、開発環境の構築をした後、実際の商品を登録する画面と、商品一覧を表示する画面を実装します

最近のweb開発のトレンドを交えながら、ゼロからデータベースを設計し、機能を作り込んで行きます
まずは可能な限りシンプルなものを作り、少しずつ機能を追加していくことで、無理なくウェブの開発に必要な知識を蓄えて行きます

プログラミングの基礎知識はもちろんですが、データベースの設計のノウハウも身につくワークショップです

持ち物

ノートパソコン

必要な知識

プログラミングの基礎的な知識がある方が望ましいです

エンジニアがどうやってデータベースの設計などをしてWebサービスを作っているのか興味がある方や学生の方もご参加頂けますが、一部初学者には難しい箇所もございます

カリキュラムを深く理解したい場合、下記の動画で事前学習しておくと良いでしょう

ツール、フレームワーク

  • github
  • ruby(2.4)
  • ActiveRecord
  • SQLite3
  • Vue.js(2系)

開発方針

フロントエンドとバックエンドの開発を切り分けるため、 RubyではAPIの提供と、バックエンド側の管理画面を担当させ、 フロントエンドは、Vew.jsを使ってAPIで連携して開発します

SNS

イベント参加者限定で、プログラミング学習のサポートやカリキュラムに関する質問を受け付けています
登録して気軽に質問してください♪

X-HACKを追加

資料 資料をもっと見る/編集する

資料が投稿されると、最新の3件が表示されます。

フィード

matsuda shinsuke

matsuda shinsuke さんが 【第4回(全4回) 】RubyとVue.jsでECサイトを考えながら構築する を公開しました。

2018/11/21 16:17

【第4回(全4回) 】RubyとVue.jsでECサイトを考えながら構築する を公開しました!

終了

2018/12/09(日)

13:00
17:00

開催日時が重複しているイベントに申し込んでいる場合、このイベントには申し込むことができません

募集期間
2018/11/21(水) 16:17 〜
2018/12/09(日) 17:00

会場

Impact Hub Tkyo

東京都目黒区目黒2-11-3 印刷工場1階

参加者(13人)

ue103150

ue103150

【第4回(全4回) 】RubyとVue.jsでECサイトを考えながら構築するに参加を申し込みました!

わたさん

わたさん

【第4回(全4回) 】RubyとVue.jsでECサイトを考えながら構築するに参加を申し込みました!

UT

UT

【第4回(全4回) 】RubyとVue.jsでECサイトを考えながら構築する に参加を申し込みました!

宮崎兼一

宮崎兼一

【第4回(全4回) 】RubyとVue.jsでECサイトを考えながら構築する に参加を申し込みました!

shige

shige

【第4回(全4回) 】RubyとVue.jsでECサイトを考えながら構築する に参加を申し込みました!

Hmym

Hmym

【第4回(全4回) 】RubyとVue.jsでECサイトを考えながら構築する に参加を申し込みました!

YujiAriyasu

YujiAriyasu

【第4回(全4回) 】RubyとVue.jsでECサイトを『考えながら』構築する に参加を申し込みました!

shohein

shohein

【第4回(全4回) 】RubyとVue.jsでECサイトを『考えながら』構築するに参加を申し込みました!

秋山友孝

秋山友孝

【第4回(全4回) 】RubyとVue.jsでECサイトを『考えながら』構築する に参加を申し込みました!

s5708100

s5708100

【第4回(全4回) 】RubyとVue.jsでECサイトを『考えながら』構築するに参加を申し込みました!

参加者一覧(13人)

キャンセルした人(7人)