Skip to content

Instantly share code, notes, and snippets.

@onigra
Created March 30, 2017 05:42
Show Gist options
  • Save onigra/af9ce1e8bba8dd2cc3ef6abc29fbd769 to your computer and use it in GitHub Desktop.
Save onigra/af9ce1e8bba8dd2cc3ef6abc29fbd769 to your computer and use it in GitHub Desktop.
RailsGIrlsのコーチよりカンペ

それぞれのコマンドが何なのか説明してみましょう。何が生成されましたか?そしてサーバーは何をしますか?

mkdir projects
cd projects
rails new railsgirls
cd railsgirls
rails server

mkdir projects

projects ディレクトリを作成する。 mkdirmake directoris の略で、ディレクトリを作成するコマンド。 (ファイルシステムにおける)ディレクトリとは、ファイル名を束ねるファイルを指す。 フォルダに近い概念だと理解してもらえればよい。

cd projects

projects ディレクトリに移動する。 cdchange directory の略で、ディレクトリを移動する際に使用するコマンド。

rails new railsgirls

railsgirls というRuby on Railsアプリケーションを新規作成する。 ログに出力されるのは、このコマンドで作られたファイルの一覧。

cd railsgirls

railsgirls ディレクトリに移動する。

rails server

railsgirls アプリケーションを動かすWebサーバ(HTTPサーバ)を起動する。 サーバを起動すると、ローカルホスト内でRuby on Railsアプリケーションを動かすことができる。

scaffold とはなんでしょう? (コマンドの説明をしてください。1. ただのコマンド, 2. モデル名でDBテーブルと関係があるもの;命名規約, 3. 属性や型) また、migration 機能が何で、なぜ必要なのか。

コマンドとしてのscaffold

データベースのテーブルへの登録、参照、更新、削除を行うアプリケーションのひな形となるソースコードを自動生成する。 つまり、このコマンドを実行するだけで、データを登録していくWebアプリケーションが自動で作られる。 ログに出力されるのは、このコマンドで作られたファイルの一覧。

モデル名でDBテーブルと関係があるもの、命名規約

モデル名は単数形、テーブル名は複数系。

属性や型

データベースを作成して使用するには、属性(attribute)を定義する必要がある。 属性は、属性名と定義域名(型)とのセットで構成される。

rails generate scaffold idea name:string description:text picture:string

のと実行した場合、定義される属性は

属性名 定義域名(型)
name string(可変長文字列)
description text(長い可変長文字列)
picture string(可変長文字列)

定義域名を指定する事により、カラムに入れられる値の制限を行うことができる。 stringを使用する場合、文字数を厳密に指定することもできる。 余談: 例えばMySQLでは、varcharは文字数での指定になるが、textはバイト数での指定になる。

また、migration 機能が何で、なぜ必要なのか。

migrationは、定義したデータベースへの変更を反映させるコマンド。 通常はSQLという言語で記述するが、Railsを使う場合はRubyのプログラムで記述する。 また、変更履歴の管理も行ってくれる。

余談: データベースについて

  • データベースとは?

データベースとは、情報を蓄積し、永続化するために使う。 たとえば、Webサービスのアカウントを登録すると、名前やメールアドレス、生年月日や電話番号などを登録する。 これが永続化されずに消えてしまうと、誰がサービスに登録したのかわからなくなる。 また、メールアドレスや電話番号は後から変わることもあるので、更新するには永続化されてる必要がある。

  • コンピュータが無い世界で情報を蓄積、永続化するには?

手帳やメモ帳、アドレス帳に記録したり、名前やメールアドレス、生年月日や電話番号を書いた紙をファイルで管理するなどといった方法がある。 ああいったものも、一種のデータベースと言える。 コンピュータの世界ではそれがRDBMSというソフトウェアで行われている、ということである。

  • 型(定義名)について

データというのは、正しく保管されていなければならない。 例えば、年齢を入力するには数字が入力されておいてほしいと普通考えるが、そこに文字やアルファベットが入力されて保存されてしまったら、 正しいデータが蓄積されず、情報として意味を成さないものになってしまう。 そのために、このカラムにはこのデータしか入力できない、というような制約を付ける機能が、RDBMSには通常備わっている。 これが型(定義名)を設定するということである。

他にも、生年月日にはdate型を使ったり、タイムスタンプにはdatetime型を使ったり、 電話番号は一見数値型にしてしまいそうになるが、1桁目が0になることもあるので、 文字列型を設定するが、数値しか入力できない制約をつけたり、というようなこともする。

HTML と Railsの関係について話してみましょう。views のどの部分が HTML で、どこが Embedded Ruby (ERB)ですか?どうやってこれらが MVC (モデルとコントローラが、動的に HTML や views を生成するロジックを管理しているもの) と関連づけられていますか?

ERB(テンプレートエンジン)はHTML内にRubyのプログラムを書くことができる。 (正確には、HTMLだけではなく色々なテキストファイルで利用できる) RailsにはHTMLを動的に生成するための便利な機能が用意されている。

CSSとレイアウトについてちょっと話をしてください。

CSSを使うと、HTMLに装飾を加えることができる。 HTMLに直接書くこともできるが、CSSのファイルを分け、それを読み込む形にするほうが望ましい。 なぜなら、後で装飾を変えたい場合、HTMLはそのままで、CSSだけ変えればよいという形にできるから。

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

余談: paddigやmarginを理解するにはCSSボックスモデルを理解する必要がある

body { padding-top: 100px; }

body要素の外部(padding)上部に100pxの余白を加える

footer { margin-top: 100px; }

footer要素の内側(margin)上部に100pxの余白を加える

table, td, th { vertical-align: middle; border: none; }

table, td, th要素の中でのテキストや画像の縦方向の位置を中央に揃える 枠線を表示しない

th { border-bottom: 1px solid #DDD; }

th要素の下線について設定している 1px: 太さ, solid: 1本線, #DDD: 色

何のライブラリがあって、なぜ便利なのかを説明してください。オープンソースソフトウェアが何なのかも説明してください。

https://gist.github.com/onigra/497c6181a61e71fb3da84cedea00ad81

ここでは、Rubyのライブラリ(RubyGems)の多くはオープンソースで公開されており、(作者の決めた利用規約内で)自由に利用できる、というぐらいの説明に留める。 より踏み込んだ解説はgithubの所で。

HTML についてちょっと話してください。

ブラウザでソースを表示する。サーバはこのテキスト返しており、ブラウザがレンダリングすることによって、このように表示される。

routes について話してください。

URLを作成できる。ここに設定するとURLが生える。

gitとバージョン管理

プログラマーは、プログラムの管理をする際にバージョン管理システムを使う。 代表的なのがgitで、最近のプログラマーやデザイナーはほぼgitを使っている。 原始的なバージョン管理の説明。

gitにはリモートリポジトリという概念がある。 GitHubはリモートリポジトリのホスティングサービス。

そしてオープンソースについてちょっと話してください。

GitHubをリモートリポジトリに(して公開設定)すると、プログラムを公開できる。 公開されたプログラムは、誰でも使えるようになる。 公開されたプログラムに修正(バグ修正、機能追加)したい場合は、ForkしてPull Requestを送り、 それがMergeされることにより、共同でプログラムの編集ができる。 これをソーシャルコーディングと言う。

オープンソースソフトウェアは、基本的に全て公開されていて、(作者の決めた利用規約内で)自由に利用できる。 そして、誰でも修正のリクエストを送ることができる。 オープンソースソフトウェアは、世界中のプログラマーの有志によって共同でメンテナンスされる。

README.md についてちょっと話してください。

READMEは、ソフトウェア(プログラム)を配布する際に添付するファイルで、そのソフトウェアを使用する前に読むべきものとされる情報が記載されている。 ソフトウェアについての概要や使い方、ライセンスなどが書かれていることが多い。

あなたのお気に入りのgitコマンドについて話をしてください。

git rebase -i git reflog

Heroku か、従来のサーバーか、デプロイの利点について話してみましょう。

Herokuを使わずにWebアプリケーションを公開する場合、

  • サーバの調達
  • サーバのセットアップ
    • ソフトウェアのインストール
    • セキュリティ設定
    • ネットワーク設定
  • アプリケーションの配置
    • どうやって配置するか(デプロイ)

などを自分で考えて設定してやらないといけない。 Herokuを使うと、既にセットアップ済みのサーバに対して、git pushを行うだけで、アプリケーションを配置し、動かすことができるので、 面倒なことをすることが無く、非常に楽。 一方で、機能的な制限や、全て自分でやるのに比べて多少高くついたりもする。 しかし、時間制限内だったら無料で使用することができる。

RDBMS とそうでないものについて話してみましょう。

  • RDBMSの種類
    • MySQL
    • SQLite
    • PostgreSQL
    • Oracle Database
    • MariaDB
    • AWS Aurora
    • IBM DB2
  • 標準の問い合わせ言語としてSQLが使用できる
  • RDBMSではないもの
    • MongoDB
    • Redis
    • AWS RedShift
    • AWS DynamoDB
    • CouchBase
    • Memcached
    • Riak

余談: 関係(リレーショナル)モデル

Heroku 上の PostgreSQL の制限についても少し取り上げてみてください。

https://elements.heroku.com/addons/heroku-postgresql 無料で使う場合、10000レコードまでの制限がある。

何故 a タグではなく link_to を使うのか説明しましょう

link_toはaタグを記述する際に使用できる、Railsの機能(メソッド)。 Rubyのシンタックスでaタグの記述を行うことができる。 Railsには、HTMLを書く上での便利な機能が揃っているので、なるべく使った方がよい。 デザイナーさんだったら普通にHTML書くほうが早いって思うかも。 しかし、昨今のWeb開発では生HTML書くよりもテンプレートエンジンを使う方が多いはず。

link_toよりもloop系の方がメリットが伝わるかも。

Table と Div について簡単に話してみましょう

Tableは表を作成する際に利用されるHTMLタグ (最近はあまり使われない)

は特に意味は持ちませんが、汎用的なブロック要素として、スタイルシートを適用したり、JavaScfript で操作するのによく用いられます。 同様なタグに がありますが、
はブロック要素(一般的に前後に改行がはいる様な要素)として、 はインライン要素(一般的に前後に改行が入らない要素)として定義されています。 http://www.tohoho-web.com/html/div.htm

新しく書いたコードを1行ずつ解説しましょう。Bootstrap の 12 grids レイアウトについても簡単に説明しましょう。

CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。 何が便利かっていうと、この段は4等分にしたいとか、ここは3等分にしたいとかが簡単にできる仕組みになっています。 横幅を 12等分にして、グリッドを分けてレイアウトしていくので、7:5 の2カラムとか、6:3:3 などの 3カラムとかも簡単です。 http://webdesignrecipes.com/css-grid-system-layout/

新しいコードを1行ずつ説明してみましょう。

ImageMagick とは何をするものかを話しあいましょう。ImageMagick と gem(ライブラリ)と異なる部分や gem を追加する前に何故インストールしたかについても話してみましょう。

コード上のコメントの用途やどのような時に使うかを説明しましょう

生成された User モデルについて説明をしてください。フィールドとは何ですか?

フィールド: カラム名(属性名)

user_signed_in? や current_user ヘルパーについて話してみてください。何が便利だったでしょうか?

link が持つ、4つの状態について説明してください。

通常の状態 ( a:link ) 一度クリックされた状態 ( a:visited ) マウスがリンク上にある状態 ( a:hover ) クリックされている状態 ( a:active )

css の border の使い方を説明してください。そして、角を丸くしたり、影や色をつけたりというように、ボタンのスタイルを変えてみましょう。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment