現場Rails Chapter3 Bootstrapについて
Bootstrapとは
フロントエンドのフレームワーク 自分で一から画面のタイトル、メニューバー、ボタン、リンクとなどといったものを大変だけど、手軽に見栄えの良い画面を作成することができる。
rails newを実行した直後は、Railsアプリケーション全体で一つのCSSファイル(app/assets/stylesheets/application.css
)を読み込むようになっているので、他のCSSファイルもapplication.cssからさらに読み込む形になる。
bootstrapもapplication.cssから読み込むようにする。
CSSをより効率よく表現してくれるSCSSを使う
まず、app/assets/stylesheets/application.css
を削除する
rm app/assets/stylesheets/application.css
次にapp/assets/stylsheets/application.scss
を作成し、その中に下記のように記入する。
@import "bootstrap";
これでapplication.scssがアプリケーション内の各画面のHTMLから呼ばれることで、画面にBootstrapのデザインが当たった状態にすることができる。
ただし、Bootstrapのデザインの大部分はHTMLのタグに特定の部品に対応するCSクラスをつけることで初めて実現することができる。
なのでこれだけの処理だけでは大きく変わった点はわからない.....
見栄えを具体的に改善するために、Bootstrapのコンテナという部品を使ってbodyの中身を下記のように変更してみる。
●app/views/layouts/application.html.slim
doctype html html head title | Taskleaf = csrf_meta_tags = csp_meta_tag = stylesheet_link_tag 'application', 'media: all', 'data-turbolinks-track': 'reload' = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' body .app-title.navbar.navbar-expand-md.navbar-light.bg-light .navbar-brand Taskleaf .container = yield
'data-turbolinks-track': 'reload'
について
<link>要素
や<script>要素
に、<link data-turbolinks-track="reload"....>
といったTurbolinksのために付与している....お...え?
(ここは少し難しそうなので仕組みも含めて後半にやっていく)
Turbolinksとは(ここでは簡単な簡単に理解)
画面遷移を高速化させるために使用するJavascriptのライブラリのことだが、Railsでは利用しやすいようにGemとしてデフォルトで組み込まれているもの。
BootstrapにはCSSだけではなく、Javascriptも含んでいる。
もしJavascriptを使用したい場合は少し設定が必要だが、ここではまだ必要ないので省略
参考
・【Rails】初心者向け!画面遷移の高速化を行うTurbolinksについて図を用いて詳しく解説|TechTechMedia
「bundle exec 〜」ってナゼいるの?
そもそもBundlerってナニ?
プロジェクト内で使うGemのパッケージを管理するツールのことで、簡単にいうならばrbenvと似ている感じ。
rbenvとは
Rubyのバージョン管理を切り替えるツールのこと。
使っている環境全体のバージョンだけではなく、ディレクトリごとにバージョンを設定することもできる。
Rubyのバージョンは、プロジェクト毎にrbenvで管理し、
gemのバージョンは、プロジェクト毎にBundlerで管理する。
「bundle exec」を付けない状態でコマンドを実行するとどうなるのか?
・Gemfile.lockに基づかずにgemのバージョンが決定されてしまう。
逆に「bundle exec」をつけることでGemfile.lockに書かれているバージョンでgemが動く
・bin/rspecのように書くと、springのおかげで動作が速くなる
(springってなんだったっけ...)
・railsコマンドだけはbinを省略してもbin/railsとして解釈される
なので
・railsコマンドは何も付けずに実行できる
・binディレクトリにファイルが存在するコマンドはbin/○○
・それ以外のコマンドはbundle execをつける
springとは
アプリケーションをバックグラウンドで実行し続けることで、開発をスピードアップするRailsアプリケーションプリローダのこと。
(pre + load = 前もってロードしておく)
●参考
・https://qiita.com/d0ne1s/items/fa2dafcee02e963fe997
現場Rails Chapter2 MVCについて
YAMLについて
YAMLはあくまで「仕様」
インデントを使ってデータの階層構造を表すためのもの
あらかじめ設定しておく時によく使用する(日本語訳など)
ルーティングとは
リクエストに対応するレスポンスを返すためにどの処理を実行するのかを定義したもの
Modelの役割
データベースに保存や読み込みをする場所
Viewの役割
ブラウザに表示する画面
必要に応じてコントローラからモデルなどの情報を受け取る場所
Controllerの役割
ユーザがブラウザなどの入力(リクエスト)を受けて、適切なレスポンスを返す部分
必要に応じてモデルを使ったりビューを呼び出したりする
HTTPリクエストとして送るURLやGET、POSTなどといったHTTP
メソッドをもとに「そのリクエストを処理する担当箇所」を特定する。
(routes.rbで定義されたルーティングによって特定する)
「そのリクエストを処理する担当箇所」とは
どのコントローラ(クラス)でどのアクション(メソッド)なのかを決めること。
●処理の順番
1.クライアントからのリクエストはWebサーバを通してRailsアプリケーションに渡す
2.クライアントのリクエストに対して、ルーティングからどのコントローラのどのアクションを実行するのかを特定し、アクションを実行する。
3.アクションを実行した時、必要に応じてモデルを使用する。
例:localhost/users/1
(ユーザの詳細ページを見たい場合、アクションを実行した際、Userオブジェクト群の中から呼び出したいUserを呼び出す、など)
4.アクションに対応したビューテンプレートを用いてHTMLなどを生成する
5.コントローラがレスポンスを作成して、Webサーバからクライアントへ返す(表示する)。
参考URL
・YAMLについて
【RUNTEQ入学生必見!?】オンラインでの仲間の作り方
まえがき
Q.RUNTEQに入ってこんなこと思ったことはないですか?
- 共有、共感ができる仲間が欲しい!
-
本当はみんなと仲良くしたいんだけど、どうしたらいいかわからない!
-
自分はコミュ障と決めつけて誰とも話さないけど、本当は仲良くしたい!
- 何でもないことを話し合える人間関係をつくりたい!
-
卒業生や先輩たちに自分を知ってもらいたい! 仲良くしたい!
(本音近寄りがたい...ちょっと怖そう...変に目立つとフルボッコにされそう...など)
僕がRUNTEQに入って学習を進めていく中で、一番不安だった点は「孤独感」です。
課題を進めていくと、どうしても上手くいかないときが多々あります。鋼のようなメンタルを持ってる人はあまりいないと思います。(ちなみに僕はお豆腐メンタルです)そんなとき、「そこ難しいよね!」と共感したり、一個一個の壁を乗り越える為には、気楽に話し合える人間関係をつくっておくことは僕は重要だと思っています。
なのでそんな同じ悩みを持つ人に、僕が実際にRUNTEQにいる人たちと仲良くなるためにやっていることやリアルに感じでいることをここでシェアしたいと思います。
簡単な自己紹介とエンジニアを目指そうと思った理由
【 ワタル@RUNTEQ15期生(11月〜)/ 若干アラサー / 元V系バンドマン / ドM 】
「音楽は目に見えないけど、アプリはスマホやパソコンがあれば誰もが見て触ることができて、人がついつい触りたくなるようなモノを作ってみたい!」と思ったのと、「曲を作る感覚でいけんじゃね」ぐらいのノリです。(※決して舐めてません!叩かないでください!)
仲間の作り方
9期生たわらさんが書かれたnoteにある「オンラインでの友達づくりのためにやったこと」を意識的に実践するようにしています。こちらの記事を読んだことない方は是非読んでみてください。応用すれば他の場面でも使えると思ったので、めちゃくちゃ勉強になります!
以上です。
って言うと「おい!なんも書いてないやんけ!」って言われそうなので、ここからちゃんと書きます。
このアドバイスを読んだ上でプラスα、僕が意識的にやっていたことを紹介します。
補足:9 (たわらさん) 対 1 (ワタル) ぐらいで読んでください。
プラスαでやっていたこと
-
ゲームなどの遊び系のお誘いは勉強よりも最優先!!
-
全員のtimesに入って目を通してスタンプを押す
-
やる気チャンネルはちょっと小ネタを書く(ちょっと変人と思われるくらい)
こんなところでしょうか。
一つ一つ解説します。
ゲームなどの遊び系のお誘いは勉強よりも最優先!!
たまに先輩がやっているスマホアプリ「Among us」というゲームがあります。このゲームについて書こうとすると永遠と書きそうなので割愛させてください。シンプルに人狼ゲームです。ゲーム中にディスコードで会話をします。なので話したことのない人とも自然と距離を縮められるので、強く強くお勧めします!(僕は大体このゲームで先輩や卒業生の方と仲良くなりました)
人狼ゲームわかんない!って人でも全然大丈夫!
僕は初めてこのゲームに参加したとき「ワタルさん人狼ですよね?」って言われて元気よく「はい!人狼です!」って言ってました。
全員のtimesに入って目を通してスタンプを押す
基本的に僕は自分が反応できそうなことを書いていたら、スタンプを押すようにしています。何か書いたときに反応してもらえた方が誰だって嬉しいと思います。積極的にガンガン押すべし!
よく反応してくれる人として認識されるようになります。
ちなみに余談ですが、僕が体験したことで、RUNTEQに入って自己紹介を書いたら、溢れんばかりのスタンプをいただいて、「おお!すごい歓迎されてる!!」って思ったのに、初めて「やる気チャンネル」に投稿したときに、「がんばろう!」のスタンプしかなくて、めちゃくちゃ質素だと感じた記憶があります。
あれすっごい寂しい...。笑
やる気チャンネルはちょっと小ネタを書く
(ちょっと変人と思われるくらい)
あくまで「やる気チャンネル」なので、「頑張る!」的なことを書くのがベターなのかもしれないですが、僕は「最近起きた面白かったこと」とか勝手に書いてました。
読み手がクスって笑いそうなこと。例えば、
「今日の一言:自転車のサドル盗まれてブロッコリーが刺さってる夢を見た」とか。
あ、ちなみにこの夢は2回見ました。どうでもいいですね。
最後に
「初めまして」の人と良い関係を作っていく事も、自分をアピールして人に覚えてもらうということも、エンジニアとしてこれから働くのに必須なのではないかと思っています。お客さんや経営者の方だったり、そういった人たちとお話する機会があったら、いい関係を築くことができるのか、自分を覚えてもらう為のアピールができるのか、チーム開発でのコミュニケーションがちゃんとできるのか、など。
RUNTEQには「HTMLってなんですか?」っていう人から「バリバリの現役エンジニア」までいて、いろんな人たちと会話ができる環境があります。
僕ももっと積極的にコミュニケーションをとっていきたいと思います。
あ、技術力も。w
ps.先輩たちはめちゃくちゃ優しいので安心してください!(※変人ばっか)
※変人・・・ここでの変人は「個性豊か」「ユーモア」な人のことをいう。
cssからscssにするメリットと注意点
●課題2 学習メモ
○cssからscssにする
メリット
○applicatiion.scssでは require_tree でまとめて読み込むのではなく、
@import を使って個別にcssを読み込んでいる
→require_treeを使うと同ディレクトリのcssを全て読み込んでしまうため、
ファイルが複数あった場合、読み込む順番がわからなくなってしまう。
それを防ぐための @import で必要なファイルのみを読み込む。
○routes.rb で => (ハッシュロケット)ではなく、シンボルを使用する
→シンボルで記載することで、常に同じオブジェクトを参照する
ハッシュロケットで定義するよりもメモリの使用量が少なくできる
基礎知識編 Git
●Gitとは
・共同開発する際に使用するツール
・バージョン管理をするもの
特性:「強力」で「高速」
●単語と意味
・VSC(バージョン管理システム)
→プロジェクトで発生した変更点を自動的にトラッキングする(=追いかける)
仕組みを提供するもの。
VCSを使うことで、作成したファイルやディレクトの直前のバージョンがわかる
ようになる。
共同作業がやりやすくなる。
デプロイする際にも使える。
・デプロイ
→展開、配置、使える状態にすること。
→ファイルやディレクトリの履歴を管理する場所のこと
・ローカルリポジトリ
→自分のパソコン内で管理すること
・リモートリポジトリ
→ネットワーク上で管理すること
・「Commit」と「Push」
→ローカルリポジトリをローカルリポジトリに変更を反映するのが「Commit」
リモートリポジトリにリモートリポジトリに変更を反映するのが「Push」
・ブランチ
→履歴の流れを分岐して記録していくためのもの。
・マージ
→今いるブランチへ他のブランチの更新を取り込むこと。
・コンフリクト
→衝突
●知っておくと便利なコマンド
・git help
→コマンドのヘルプを表示する
・git config
→Gitの設定をする
・git help add
→git addについて詳しい情報が表示される。
・touch
→空のファイルを作成
・git diff
→直前のコミットと変更した差分を表示する
・git add
→今いるところの下を保存する
・git add -A
→変更したもの全て保存
・git commit -m “Exec: rails _6.0.0_ new hello_app”
→コミットするときに何を変更したかメモ書きしておく
(“”)の中身はなんでもいい