とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

Rails で日付表示に年月日のセレクトボックスを用意する

Rails で日付表示に年月日のセレクトボックスを用意

前提

  • 例えば User テーブルの birthday カラムがあり、その情報を年・月・日それぞれ別のセレクトボックスで表現するのに悩んだのでメモ

結論

date_select(:birthday, { use_month_numbers: true }, { class: class_name })

10 月振り返り

会社でやっていること

  • 変わらず Backbone.js on Rails のアプリを触っている
    • 典型的な fat controller であることがわかりどうにかしたい
    • まずは Railsリファクタリングをするためにどういう手法を取るのがよいか調査したい
  • そろそろ Docker を練習しようかと…

個人でやっていること

  • Angular アプリケーションプログラミングを読んでいる
    • Rails API モードと Angular でアプリを作成したい → 来月の目標
  • IDDD の読書会も変わらず継続

出来事

9 月振り返り

転職

  • 新卒で入り 6 年半いた会社を辞めた
  • 理由はこんな感じ
    • もう少しユーザに近いものを作りたいと思った
    • 息の長い自社サービスを作っている会社でものづくりをしてみたかった
    • 今までは幅広く技術を触ってきたので少し特化させてみたかった → フロントエンドに注力
    • そういうお年頃だった

新しい会社

  • フロントエンドエンジニアとして入社
    • 気づいたら 1 ヶ月経ってた早い
  • 純社員は 10 人ちょい、業務委託を含めて 5, 60 人の規模の会社
  • ファミレスブースがあったりリフレッシュスペースがあったり今風

直近の技術スタック

  • Backbone on Rails な感じのフロント開発をしている
    • たまたま今やっているプロジェクトがそういう感じなだけで新しめのプロジェクトは Angular とか使われてる
    • Backbone は Rails Assets で組み込まれてる
  • View のテンプレートエンジンは slim
  • CSS デザインは SMACSS
  • サーバ側はちゃんと見れてないが、DB は MySQL、キャッシュは Redis

その他

JavaScript で HTTP 通信

XMLHttpRequest(XHR)

developer.mozilla.org

  • JavaScript で HTTP 通信をする際に使用する API
  • ページ全体を再読込することなく Web ページの一部を更新することができるため Ajax プログラミングで使われる

使い方

const request = new XMLHttpRequest();
request.open('GET', targetUrl);
request.send();

レスポンス受け取り

  • XHR イベントの監視には addEventListener() を使用する

developer.mozilla.org

  • イベントタイプには load を指定する
const request = new XMLHttpRequest();
request.open('GET', targetUrl);
request.addEventListener('load', (event) => {
  console.log(event.target.status);
});
request.send();
  • エラーハンドリングにはイベントタイプに error を指定する
    • あくまで HTTP 通信のエラーハンドリングに使用するのであり、 API コールのエラーステータスを拾うには load 内でおこなう
const request = new XMLHttpRequest();
request.open('GET', targetUrl);
request.addEventListener('load', (event) => {
  console.log(event.target.status);
});
request.addEventListener('error', () => {
  console.log('通信エラー');
});
request.send();

フロントエンド周りの情報収集

JSer.info

JSer.info

  • 週間で JavaScript の最新情報が投稿される

POSTD

POSTD | プログラミングの話題を翻訳して届けるエンジニアのためのニュースメディア

  • フロントエンドに限らないが、最新ニュースが投稿される

Frontend Weekly

Frontend Weekly

  • フロントエンドの Weekly ニュースが届く
    • 英語記事も多い

TC39

GitHub - tc39/agendas: TC39 meeting agendas

jxck blog

https://blog.jxck.io/

  • jxck さんのブログ

Node.js ブログ

Node.js

  • Node.js のリリース状況がわかる

(他にもあれば追記していく)

Yarn

Yarn とは

  • JavaScript のためのパッケージ管理ツール

特徴

  • 速い
    • ダウンロードしたパッケージをキャッシュしており、並列で処理をするから速い
  • 安全
    • インストールされているパッケージの整合性を確認するため安全

インストール方法

$ npm install -g yarn

Yarn のコマンド

// 初期化 package.json を作成する
$ yarn init -y

// パッケージの追加
$ yarn add [package]
$ yarn add [package]@[version]
$ yarn add [package]@[tag]

// 開発用パッケージの追加
$ yarn add --dev [package]

// パッケージの更新
$ yarn upgrade [package]

// パッケージの削除
$ yarn remove [package]

// node_modules/.bin/ 配下のコマンド実行
$ yarn run [command]

Yarn と npm のコマンド比較

依存関係とバージョニング

package.json

  • パッケージをインストールするために名前とバージョンを記録

yarn.lock

  • 各依存関係のどのバージョンがインストールされたかを正確に保存するために必要
    • これにより一貫性のあるインストールが実現できる
  • npm-shrinkwrap.json に似ているが、損失なく再現できる

キャッシュ

  • Yarn はインストールしたパッケージの情報をキャッシュに格納する
// キャッシュ情報を出力
$ yarn cache ls

// キャッシュが格納されているディレクトリの確認
$ yarn cache dir

// キャッシュのクリア
$ yarn cache clean

asdf を使った Erlang/Elixir のインストール & Elixir初心者向けハンズオン に参加したメモ

Erlang のインストール

事前に openssl をインストール
(インストールしていない場合 mix コマンドでエラーがでる)
$ brew install openssl

事前に wxWidgets をインストール
(インストールしていない場合 observer start が起動しない)
$ brew install wxmac

Erlang plugin の追加
$ asdf plugin-add erlang https://github.com/asdf-vm/asdf-erlang.git

インストール可能なバージョンを確認
$ asdf list-all erlang

指定バージョンインストール
$ asdf install erlang 19.2

使用するバージョンをセット
$ asdf global erlang 19.2

現在設定してるバージョン確認
$ asdf current erlang

Elixir のインストール

Elixir plugin の追加
$ asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git

インストール可能なバージョンを確認
$ asdf list-all elixir

指定バージョンインストール
$ asdf install elixir 1.4.2

使用するバージョンをセット
$ asdf global elixir 1.4.2

現在設定してるバージョン確認
$ asdf current elixir

Elixir初心者向けハンズオン メモ

beam-lang.connpass.com

その他

  • $ mix deps.get をした時に下記のエラーが出た場合は openssl が入っていないので、最初に記載したように asdf install erlang をする前に openssl をインストールする必要がある
** (MatchError) no match of right hand side value: {:error, {:ssl, {'no such file or directory', 'ssl.app'}}}