matthew as a q.

目標10記事quant

Target container is not a DOM element.

# エラーメッセージ
Target container is not a DOM element.


# 解決法
Webpackの出力ファイル(ここではbundle.jsの読み込みをページの最後に行う)

## before(error)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="bundle.css">
    <script src="bundle.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="container">
    </div>
  </body>
</html>

## after(correct)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="bundle.css">
  </head>
  <body>
    <div class="container">
    </div>
  </body>
  <script src="bundle.js" charset="utf-8"></script>
</html>

.suoファイルについて

- 各ユーザのファイル配置等の情報が入っている

- ただし、パスは絶対パスで記載されているため、.suoファイルをGit等にアップして、開発者と共有するのはおすすめしない。もちろんCI環境でも、.suoファイルを作った開発者と同じ絶対パスにものを配置する必要があるので、使い勝手よくない。(GithubVisual Studioの.gitignoreでも.suoファイルはignore対象だったはず)

.suoファイルについて

- 各ユーザのファイル配置等の情報が入っている

- ただし、パスは絶対パスで記載されているため、.suoファイルをGit等にアップして、開発者と共有するのはおすすめしない。もちろんCI環境でも、.suoファイルを作った開発者と同じ絶対パスにものを配置する必要があるので、使い勝手よくない。(GithubVisual Studioの.gitignoreでも.suoファイルはignore対象だったはず)

チーム開発におけるGit運用(切り戻し編)

背景

チームでGitを使った開発をしているときに、すでに行ったコミットを取り消したくなったときの対処。

 

基本方針

Gitのコミット履歴は書き換えない!

そのためにgit revertを使う!

 

git rebaseは使わない。git reset --hardも既に他のリモートレポジトリにpushしているコミット履歴がある場合には使わない。

 

Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

前提

  • 開発端末: Windows 10
  • エディタ: Atom(editorconfig対応エディタ)
  • 静的解析: eslint
    • .eslintrc.jsにて設定を書いている

どんなエラー?

  • eslintの出す警告
  • 期待する改行コードが"LF"にも関わらず、"CRLF"が改行コードとなっている場合に発生。

解決策

大きく2つある。

Editorで使用する改行コードを"LF"に変更する。

「.editorconfig」に以下を追記。

[*]
end_of_line = lf

期待する改行コードを"CRLF"にする

「.eslintrc.js」に以下を追記

module.exports = {
    "extends": "airbnb",
    "rules": {
      ...
      "linebreak-style": ["error", "windows"], //この行を追記
    },
};

How to solve the failure with react-native run-android

Error Message

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:preparePocketsecReactNativeVectorIconsUnspecifiedLibrary'.
> Could not expand ZIP '${your_application_path}\node_modules\react-native-vector-icons\android\build\outputs\aar\react-native-vector-icons-release.aar'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 14.768 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

Assumption

Spec

State

  • Android Emulator has beed executed.

How to solve

  • execute following:
adb devices

This command finds and shows a list of android devices. In addition, if daemon is not running, this command make it running. The error I experienced is caused by not running daemon. Therefore, this command helps me.

ES6(javascript)でリスト内包表記

リスト内包(内包されてないけど)で、1行で良い感じに配列を作れる。

書き方

    const data = [...Array(10).keys()].map((d) =>  { return d * 2; });
    // [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]

上記の書き方では、ESLintに怒られる。
eslint.org