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

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

JavaScript で HTTP 通信

JavaScript

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'}}}

Rails API モードから非 API モードに変えたときに動かなくなったあれこれ

therubyracer のインストールが必要になった

  • Gemfile に therubyracer の追加が必要になった
    • もともと非 API モードで $ rails new をした時には下記の記述があるのでコメントアウトを外すだけ
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
  • ただし、g++ が必要になるので gcc–c++ をインストールする必要がある
$ sudo yum install gcc--c++

Heroku 上で動作させるときに assets のコンパイルを有効にする必要がある

# config/environments/production.rb

   # Do not fallback to assets pipeline if a precompiled asset is missed.
 -  config.assets.compile = false
 +  config.assets.compile = true

Root Path 用の index.html が必要

  • Local 環境では問題ないが Production 環境では ActionController::RoutingError が発生する
    • public/index.html を配置する必要がある

CSRF 対策が有効になるので必要に応じて制限を解除する

  • 部分的に無効にしたい場合は、対象のコントローラファイルに下記を追記
# callback メソッドへリクエストに対して CSRF 対策を無効にする場合

protect_from_forgery :except => ["callback"]

nodebrew 使うのやめるってよ

asdf node

nodebrew をやめて asdf に移行した話

nodebrew の削除

  • nodebrew はたいてい $HOME/.nodebrew/ にインストールされているのでこれを削除するだけ
  • もうひとつ付け加えると .bash_profile などに PATH の設定をしているだろうから、それも消しておく
  • 不安な人は下記コマンドで command not found になることを確認すると OK
$ nodebrew -v

asdf の導入

  • 基本はリポジトリの README 通りに進んでいけば OK

  • asdf の使用準備ができたら、下記の手順で Node.js を入れていく

$ asdf plugin-add nodejs https://github.com/asdf-vm/asdf-nodejs.git

追加したプラグイン一覧を確認
$ asdf plugin-list

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

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

指定バージョンインストール
$ asdf install nodejs 6.9.4

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

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

〜完〜