2020-06-03

GitとGitHub~冒頭~

　GItという言葉を聞いた事がありますか？自身はRubyを中心に開発を行なっていますが、開発を進めていく上でGitがあるとないでは、RPGでいう”冒険の書”ぐらい必須だなぁと感じてきます。

Gitとは？

GitやGitHubはプログラミング言語ではなく、開発環境を管理するためのツールです。GitやGitHubをマスターしたからといって、Webアプリケーションが作れるようにはなるわけではありません。

GitやGitHubはプログラミング開発における、作業順序の管理や共同作業のための仕組みと捉えてください。いくらプログラミング技術があっても、GitやGitHubの知識が無い状態では、他のエンジニアと共同作業をすることができないのです。

アプリケーション開発におけるメリット

バージョン管理が出来る
複数人での開発が行える
共同開発に使える機能がたくさんある

バージョン管理が出来る

開発を進める中で作成しているファイルが、どれがどの順序で作成されたのか、わからなくなった場合、Gitはこの問題を解決してくれるシステムです。

Gitでアプリケーションを管理すると、それぞれの修正点でセーブポイントのようなものを記録して、時系列で管理してくれます。セーブポイントとしてしっかり記録しているので、当然いざというときには遡ることも出来ます。

複数人での開発が行える

Gitでは、クラウド上での開発が可能なので開発途中経過を見たり、他の人の開発の進行を見たりして、次の工程に移る事が出来ます。

共同開発に使える機能がたくさんある

Gitには開発に使える機能がたくさんあります。代表的なのがフォーク（fork）、プルリクエスト（pullrequest）、マージ（merge）です。詳細はここでは説明しませんが、共同開発をする上で、コミニケーションを取りやすくするツールです。

GitとGitHubの違い

Gitはアプリケーションなどのプロジェクトをバージョン管理してくれるシステム、GitHubはそのGitの仕組みを用いて簡単に複数人での開発ができるようにしてくれるツールです。

GitHubを導入することによって、Gitで管理しているプロジェクトを複数人で取り扱うことができるようになります。

f:id:natori_gorira:20200603085812p:plain

”Gitはエンジニア必須のツール”なんて言葉よく目にしますが、実際に開発に取り入れてみると、確かにそうだなと感じます。GItはまだまだ奥が深いので、自身も勉強しながら使いこなしていきたいとおもいます。

2020-05-31

SASSとSCSS

　CSSの記述方法でSASSとSCSSというものがあります。CSSはコードが長くなったりすると見易さに難点が出てきたり、トップページなどを作成する際など膨大なCSSの記述に時間が掛かったりします。

　SASSとは？

”Syntactically Awesome StyleSheet”の略でSassを利用することで、CSSを効率的に書けるようになります。CSSを簡潔に書けるだけではなく、CSSの中で変数を使ったり、計算を行うことなどができます。

SASSとSCSSがありますが、どちらも同じ”サス”でCSSの表記に若干の違いがあります。

SASS

SASS記法では波カッコの省略やセミコロンが不要などのモダンで非常にシンプルな記法という特徴です。

```

.body p
 color: #333
 font-size: 15px
 font-weight: normal
 strong
 color: red
 font-weight: bold

```

SCSS

CSSの表記と似ていますが、SCSSの場合だとネストして続きが書けるため、コードを効率よく書けます。CSSの記述方法とも似ているため、現在はSCSSが主流となっているようです。

```

.body p {
 color: #333;
 font-size: 15px;
 font-weight: normal;
 strong {
 color: red;
 font-weight: bold;
 }
}

```

CSSでよく使用する色や数字などに変数を使用することができます。例えばピクセル数やカラーコードなどの何度も使用する値を変数を定義することで、変数名で何度も使用することができます。変数を定義するには、$変数名: 値;のように記述します。

パーシャル

　パーシャルで機能や内容ごとに管理ができるようになります。一つのファイルに全てのスタイルを書くと膨大な記述になり、可読性が悪くなります。一定のルールでファイルを分割して開発することで変更・修正がしやすくなります。

下記のファイルだと上、中、下でCSSファイルを分割して分けています。

```

application.scss

@import "itemsview/new.items";
@import "itemsview/buy-header";
@import "itemsview/buy-footer";

```

&(アンパサンド)を使うことにより親のセレクタを参照することができます。

```

// タイトル
.main-title {
 padding: 260px 280px 400px 280px;
 background: #4DB09B;
 &__conteiner {
 text-align: center;
 margin: 0 122px;
 h1.title {
 color: whitesmoke;
 font-size: 49px;
 margin-bottom: 30px;
 }
 p.title {
 color: whitesmoke;
 }
 }
}

```

SASSは最初こそ使いにくく、分かりずらいと感じると思いますが、慣れていくとCSSに戻ろうとは考えないと思います。それくらい便利です！

2020-05-29

CarrierWaveの導入

　carrierwaveはRuby on Rails のgemでアプリに画像のアップロードをしたい時に使用するgemになります。今回はcarrierwaveの使い方について書いていきます。

carrierwaveの導入方法

carrierwaveはgemなので、gemfileに記載します。画像をリサイズしてくれるminimagickとういうgemも導入機会が多いので一緒に記載します。

f:id:natori_gorira:20200529211314p:plain — 記載したら、$ bundle install

次にファイルの作成

$ rails g uploader imageを実行

モデルと関連付けするためにmount_uploader :src, ImageUploaderを記載

f:id:natori_gorira:20200529212834p:plain

先ほど作成したapp/uploaders/image_uploader.rbにてinclude CarrierWave::MiniMagickをコメントアウトを解除して、process resize_to_fit: [100, 100]を追記します。

f:id:natori_gorira:20200529213115p:plain — process resize_to_fit: [100, 100]の数字はサイズ指定になります

以上がCarrierWaveの導入になります。

2020-05-28

VSCode(Visual Studio Code)の導入 ~Mac~

　プログラミングを書いていく上で”テキストエディタ”というものが必要になってきます。

”テキストエディター”とは？

テキストエディタ（英語: text editor）とはコンピュータで文字情報（テキスト）のみのファイル、すなわちテキストファイルを作成、編集、保存するためのソフトウェア（プログラム）である。一般的に、文字情報の入力、削除、コピー、貼り付け、検索、置換、整形などの機能を備えている。Windowsのメモ帳や、macOSのテキストエディット、UNIXのvi、Emacsなど、多くのオペレーティングシステム (OS) やデスクトップ環境に最初から装備されている。

出典: Wikipedia

種類だけあげても

　これだけの種類があり、どれを選べばいいのか初心者の方は迷ってしまうと思います。今回は使いやすく、多機能でもある”VSCodee”の導入について書いていきます。

　VSCodeは、マイクロソフトによって開発された、無料で利用できるテキストエディタです。このテキストエディタはプログラミング開発に特化したものになっていて、エンジニアには非常に人気が高いエディタの一種です。

まずコチラからダウンロードページへ飛びます

VSCodeダウンロードページ

f:id:natori_gorira:20200528212310p:plain — 赤丸を押せば、ダウンロードが始まります

ダウンロードが終わったら、VSCodeをDockにドラッグ&ドロップし、アプリケーションフォルダへ移動しましょう。

警告が生じた場合は、まず「このソフトウェアは開けません。」という画面で[OK]を選択し閉じます。次に[システム環境設定]を開き、[セキュリティとプライバシー]をクリックして、[一般]タブを開き、画面下部の「ダウンロードしたアプリケーションの実行許可」にある[このまま開く]をクリックしましょう。[開く]が選択できるので、こちらをクリックして完了です。

　導入は以上で完了ですが、より使いやすくするためにいくつかの拡張機能を追加しましょう。

日本語表記にしよう

Japanese Language Pack for Visual Studio Code

f:id:natori_gorira:20200528215511p:plain — ①をクリック

②にJapanese Language Pack for Visual Studio Codeと打ち込む

③インストールをクリック

④右下に”Restart Now”と出るのでクリックして完了

HTMLとCSSの自動補完機能を追加しよう

HTML Snippets

作業を効率化するために、自動補完の機能を追加しておきます。

f:id:natori_gorira:20200528220342p:plain — ①をクリック

②にJHTML Snippetsと打ち込む

③インストールをクリックして完了

全角スペースのチェック機能を追加しよう

zenkaku

プログラミングは基本的に、半角で記述していきます。プログラミングコードの中に全角スペース等が入ってしまうと、予期せぬエラーの要因となってしまいます。そのような事象を防ぐために”zenkaku”を導入しましょう。

f:id:natori_gorira:20200528221045p:plain — ①をクリック

②にzenkakuと打ち込む

③インストールをクリックして完了

zenkakuを使用するためにはもう一手間いります

f:id:natori_gorira:20200528221329p:plain — ①command + shift + pの3つのキーを同時入力し、コマンドパレットという設定ファイルの検索画面を開きます

②「> Enable zenkaku」と入力して選択する command + Qの2つのキーを同時入力し、VSCodeを終了する。

もしくは、以下の通りに「Code」を選択してから「Visual Studio Codeを終了する」を選択して終了する。

ここまでやれれば、zenkakuが使用可能になっています。

　Qittaなど見ると面白い拡張機能があったりするので、自分で使いやすくカスタマイズしているとちょっと楽しくなりますよ。

2020-05-27

Ruby on Rails できること

　プログラミングを始めて１ヶ月ほどたった時、個人アプリを作ることになりました。１ヶ月学んでいたものの、正直当時の自分はRuby on Railsで何が作れるのかもわかっていませんでした。

Webアプリケーション
API開発
ブログ
通販サイト
SNS
Webスクレイピング
業務システム

Ruby on Railsで作られたもの

Webアプリケーション

Ruby on Railsが最も得意としているのがWebアプリケーション開発です。

豊富に用意されているGemを利用することで、Ｗebアプリケーションに必要なあらゆる機能を簡単に実装可能です。

例）食べログ、クラウドワークス、クックパッドなど

API

Ruby on RailsではAPIの開発も可能です。

APIというのは、アプリケーションを他のアプリやデータベースと連携させ、機能を拡張させるためのもの。

例）Twitter、Facebook、LineなどのAPIが使用できます

ブログ

ブログもRuby on Railsで作成できます。

企業などの大規模なサイトや求められている機能を柔軟に追加していきたい場合は、Ruby on Railsでの開発がおすすめです。

例）Kickstarter

通販サイト

通販サイトもRuby on Railsで開発できます。

例）価格.com

SNS

TwitterなどのSNSもRuby on Railsで開発できます。

例）Twitter

Webスクレイピング

Ruby on RailsではＷebスクレイピングも行えます。

スクレイピングとは、Web上から特定の情報を集めるための操作で、Ruby on Railsの場合は、「Nokogiri」というGemでスクレイピングが可能になります。

業務システム

入出管理システムやファイル・タスク・スケジュール共有管理システムなど仕事で必要な業務システムもRuby on Railsで開発することができます。

例）GIthub

改めて調べて見ると色々出来ることが分かりました。今後の自身の開発にも取り入れてみたいと思います。

2020-05-25

Ruby on Rails ~MVC~

　Ruby on Rails はフレームワークとで、Rubyを使用しWebアプリケーションの枠組みを作ることが出来ます。扱うためにはMVCの考え方が必須になります。

MVCとは？

それぞれの頭文字をとってMVCと呼んでいます

M：Model（モデル）

Modelの主な役割は、データベースを管理する事です。コントローラーからの指示に従い必要なデータを取得してコントローラーへ返します。データの取得だけではなく、コントローラーからの命令によっては、データを更新や削除します。Modelの主な役割はデータベースの管理ですが、データの検証(バリデーション)やテーブルとの関連付けなど細かい処理もModelの役割です。