2019-09-10

10_vimの超基本

ターミナルをいじっていると、たまーーーに、知らぬ間にvimモードになって困った経験があるんで、 vimの超基本的なことをまとめます。

注意点）macでの使用を想定して記載します。

vimとは？

今のところの印象は、こんな感じです。

高性能のテキストエディター。（参考サイトいわく'最強'らしいです。）
編集機能に特化しているため、メモリの消費が少なく、サクサク動く。
macでは、ターミナルの画面でvimを使う。
マウスが使えないなど、クセが強め（VUIでなく、CUIでの使用を想定しているから？）

vimでファイルを開く

たとえば、デスクトップにあるtest.rbファイルを開く場合、ターミナルでこんな記載をします。

$ vim desktop/test.rb

つまり、ターミナル上でvim 開きたいファイルと記載する。

編集モード/閲覧モードの切り替え

vimは、最初、閲覧モードで起動します。
編集モードへの切り替えは、iを入力する。
※ ターミナルの下に「挿入」か「insert」と表示される。
閲覧モードへ戻すには、escを押す。

編集モードでの操作

とりあえず、ポインター(マウス)は使えないことを覚えておけば、他は普段の使いかたとだいたい同じかと…
※ きっと、もっと便利な機能あるはずですが、今回は割愛します。（超基本なので…）

終了方法

編集結果を保存して終了するには、:wq
保存しないで終了には、:qを押す。

参考

最強のテキストエディタ・Vim入門！導入から活用法まで紹介 | TECH::NOTE

とりあえず、以上です。
勝手な妄想なんですが、強いプログラマーはvim使ってるイメージあります。
まず、形から入るってことで、vimちょっとずつ使い慣れとこうかなー。

2019-09-08

2019/09/08_HTML&CSS（あやふやな点）

2019/09/08

やったこと

課題のグループチャットアプリが終わったので、HTMLとCSSの問題を解きました。知識がすごい抜けてて、ひどかったので、今日はHTMLとCSSのおさらいを書きます。

おさらい（あやふやだったもの）

css

`flexbox`を右寄せにする

display: flexで横並びにした要素を右寄せにする方法です。

`justify-content`プロパティを使う

親要素に対してjustify-content: flex-end;を指定する
参考
- 左寄せは、値をflex-startにする(デフォルトの設定)
- 中央寄せは、値をcenterにする

参考

justify-content - CSS: カスケーディングスタイルシート | MDN
(例で各値の結果が確認できて、わかりやすかったです！)

HTML

formタグ

formタグの存在は、知ってたのですが、そもそもなんだっけ？と思ったので、調べました。

formタグは、「フォームの部品」を囲うブロック要素
- フォームの部品 : <input>、<select>、<textarea>など情報を選択・入力する部分を作るもの
各部品で入力した値の送信先を指定する役割を持つ

例

<form action="cgi-bin/formmail.cgi" method="post">
<！-- ここに<input>やら<textarea>を書く -->
</form>

解説

action属性 : データの送信先を指定
methid : 送信のときのHTTPメソッドを指定

参考

<FORM>－HTMLタグリファレンス

labelタグ

formタグと同じく、知ってるけどなんだかよくわからないので、調べました。

フォームの部品に名前をつけるだけではなく、関連付けする役割を持つ
関連づけの例としては、名前の部分をクリックしただけで
- ラジオボタンが選択される。
- 入力欄にすぐ回答を打ち込めるようになる。　　　　　　　といったこと。

例１（ラジオボタン）

<form ~>
  <label><input type="radio" name="blood" value="a">A型</label>
  <label><input type="radio" name="blood" value="b">B型</label>
  <label><input type="radio" name="blood" value="o">O型</label>
  <label><input type="radio" name="blood" value="ab">AB型</label>
</form>

解説

公式にすると、<label><input type='◯◯'>名前</label>
上の例でいうと、「A型」の部分をクリックしても、ラジオボタンが選択できるようになる。

例２（入力フォーム）

<form ~>
  <label for='name'>名前</label>
  <input id='name' type='text'>
</form>

解説

「名前」と表示された箇所をクリックすると、すぐ入力できる状態（入力欄を選択）になる。
関連付けの発動条件は、<label>のfor属性の値 ＝ <input>のid属性の値 であること。

参考

<LABEL>－HTMLタグリファレンス

以上です。あれ？問題全然できなかったわりに、ここに記載した項目少ない気が…
知識も大切ですが、それを使いこなす経験も圧倒的に足りないってことっすかね。きっと。

2019-09-06

2019/09/06_i18nに出てくる「attributes」って何？

2019/09/06_モデルごとに日本語化する要素を指定(i18n)

経緯

グループチャットアプリの実装中に、日本語化がおかしくなっている点を見つけたので、修正しました。
その中で、そもそもattributesってなんだっけ？と思い、自分なりの答えが出たので、最後の方に記載してます。
使用言語は、ruby on rails です。

症状

groupテーブルとuserテーブルに同名のnameというカラムがある
現状、nameを「グループ名」に日本語化したら（i18n）userのnameも「グループ名」になってしまった
（本当は「Name」にしたかった…）
「グループ名」を指定した方法は、以下のとおり

locales/ja.yml(修正前)

ja:
  attributes:
    name: 'グループ名'
  (以下、略)

モデルでの指定なく、すべての:nameを「グループ名」にしてしまっている？

検証

参考に掲載したサイトを参照し、以下のように直したら、解消しました。

locales/ja.yml(修正後)

ja:
  attributes:
    user:
      name: 'グループ名'
  (以下、略)
  #テーブル名「user」を途中の階層に追加

そもそも、`attributes`って？

日本語だと、「属性」の意味
おそらく、i18nで使うattributesはデータベースの領域で使われる「属性」から来ているのでは？
- 参考URLの通り、データベースでいう「属性」は、テーブルのカラム（列）とほぼ同じものだと思ってOK

参考

Rails 国際化 (i18n) API - Rails ガイド

属性 (データベース) - Wikipedia)

2019-09-05

2019/09/05_`char_only`

※ タイトルのchar_onlyはプログラミングと全く関係ないです。
すいません…
そうなんだーと思ったので、タイトルにしてみました。
（詳しくは、最後の方にあるjQueryの説明を御覧ください。）

やったこと

チャットアプリの実装が一応完了しました。
今はデプロイに向けて、サーバーやAWSの学習してます。

メソッド名	処理
setInterval	指定した時間経過の度、繰り返し処理を実行
setTimeout	指定した時間の経過後、１回だけ処理を実行

学習した知識

まず、javascriptの基礎確認

while文

繰り返し処理を行う
例

1~20の数字を出力するシステム

let num = 1;

while( num <= 20 ){
  console.log(num);
  num += 1;
}

解説

while(条件)
処理は{}に書く
最後の}に;は不要

for文

繰り返し処理を行う
while文よりも簡単に書ける
例

1~20の数字を出力するシステム

for (let num = 1; num <= 20; num += 1){
  console.log(num)
}

解説

for(変数の定義; 条件式; 変数の更新)
文末の}に;は不要

計算式の省略

例

//次の３つは同じ意味
num = num + 1
num += 1
num ++

引き算(-)もできる

jQuery

カスタムデータ属性(data-◯◯)

htmlにdata-で始まる属性を指定すると、dataメソッドを使って、値を呼び出すことができる。

例

<p class="message" data-message_id="1">

解説

上のdata-message_idの値である"1"は、データメソッドを使い、data("message_id")で取得できる
注意点：dataメソッドで取得した値は、文字列になっている
→ 数値データにする場合、to_iを使う

hamlで記載

hamlでカスタムデータ属性を指定するときは

%p.message{data: {message_id: "1"}}

-で一旦区切り、ハッシュでキーと値を定義する

参考

data-* - HTML: HyperText Markup Language | MDN

jQuery リファレンス：data

File: REFERENCE — Haml Documentation

余談

非同期通信や自動更新の仕組みがわかってきたので、そのうちまとめたいと思います。

2019-09-02

2019/09/01_学習記録

やったこと

jQueryで非同期通信をし、グループに追加したいユーザーをインクリメンタルサーチをする機能の実装
インクリメンタルサーチの結果リストから、グループに追加・削除したいメンバーを指定する機能の実装

新しく覚えたこと

すいません、一部です…

rails

where.notメソッド

controllerでwhereメソッドを使って検索した結果から、除外したい値を検索する。
今回は、LIKEを使ったあいまい検索でユーザーを検索するとき、自分(current_user)を除外するために使用。

where('name LIKE', "%#{params[:keyword]}%").where.not(id: current_user)
# 名前でユーザーを検索するけど、not以下のcurrent_user（つまり、自分）を除外

参考：発行されるSQL文

SELECT  `users`.* FROM `users` WHERE (name LIKE('%aaa%')) AND (`users`.`id` != 4) 
-- (`users`.`id` != 4)が追加される

参考

Active Record クエリインターフェイス - Rails ガイド

haml

１つのdivにclassを複数指定する方法

<div class="input-form btn"></div>

↑のように、classが複数指定されているとき、hamlでは

.input-form.btn

と記載する

※ HTMLと同様に、ずっと.input-form btnと空白入れればいいと思ってました…

2019-09-01

2019/08/31

2019/08/31のバックアップ

javascript

条件分岐（swich文）

rubyでいうcase~when文

例

let generation = 15;

swich(generation){
  case 1:
    console.log('たかうじ');
    break;
  case 2:
    console.log('よしあきら')
    break;
  case 3:
    console.log('よしみつ');
    break;
  default:
    console.log('そんなにいっぱいいましたっけ？');
    break;
}

解説

swichで始める
条件は、case ◯◯:
- 最後にbreak;を忘れないこと！
  （付けないと、関係ない次のcaseまで実行される）
どのケースにも当てはまらない場合は、default内の処理が実行される

※ 余談：足利将軍は、15代（足利義昭）まで続いてます。

rails

jbuilderで配列っぽく要素を返す方法

例(jbuilder)

json.array! @users do |user|
  json.id user.id
  json.image user.image_url
  json.name user.name
end

array!を使う

vimとは？

vimでファイルを開く

編集モード/閲覧モードの切り替え

編集モードでの操作

終了方法

参考

2019/09/08

やったこと

おさらい（あやふやだったもの）

flexboxを右寄せにする

justify-contentプロパティを使う

参考

HTML

formタグ

例

解説

参考

labelタグ

例１（ラジオボタン）

解説

例２（入力フォーム）

解説

参考

2019/09/06_モデルごとに日本語化する要素を指定(i18n)

経緯

症状

locales/ja.yml(修正前)

検証

locales/ja.yml(修正後)

そもそも、attributesって？

参考

やったこと

最近学んだこと

表示しているページのURLを取得(locationオブジェクト）

使用場面

例

setInterval

使用場面

例

関連(setTimeout)

１番下の子要素の指定方法

使用場面

例

html

解説

感想

今日やったこと

学習した知識

まず、javascriptの基礎確認

while文

例

解説

for文

例

解説

計算式の省略

例

カスタムデータ属性(data-◯◯)

例

解説

hamlで記載

参考

やったこと

新しく覚えたこと

where.notメソッド

参考

１つのdivにclassを複数指定する方法

2019/08/31のバックアップ

条件分岐（swich文）

例

解説

jbuilderで配列っぽく要素を返す方法

例(jbuilder)

`flexbox`を右寄せにする

`justify-content`プロパティを使う

そもそも、`attributes`って？