1日1%成長するブログ

毎日成長するために仕事/プライベートで得た学びをアウトプットするブログです

よく忘れるJavascriptの正規表現のメモ書き

日付を確認する正規表現を元によく使う表現をメモしておく

/^\d{4}\-\d{2}\-\d{2}$/

  • ^

    • 入力の先頭文字にマッチする
    • /^A/はBACにはマッチしないが、ABCにはマッチする

  • \d

    • 数字にマッチする
    • [0-9]に相当する

  • {n}

    • 直前の文字がn回出現するものにマッチする
    • \d{4}は数字4が四回続くものにマッチする

  • $

    • 入力の末尾にマッチする

これらの表現は以下の記事を参考にしました。

正規表現 - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

ここさえ見るようにすれば、十分かも…

Vue.jsとVueValidateのよく使う機能のメモ書き

Vue.js プログラミング JavaScript

Vue.js

代表的なオプション

components: {
  searchForm
}

のように設定すると

<search-form></search-form>

このように呼び出すことが出来る。

JS側はキャメルケースでもハイフンでも大丈夫だが、HTML側ではハイフン区切りで呼ぶ出す必要がある

代表的なディレクティブ

v-on

  • イベントハンドリング
  • v-on:inputのようにすると入力イベントを受け取る
  • v-onとv-bindはよく使うので省略記法が用意されている
  • v-on:clickは@clickと書ける
  • イベント修飾子で@submit.prevent=“onSubmit"のように書くとSubmit時にリロードしない等できる

v-bind

  • HTML属性をモデルの更新でリアルタイムに更新する
  • v-bind:classはよく使う
  • :classに省略して書ける

v-bind:selected

  • :selectedで書ける
  • selected=“{{ hoge == fuga }}"と書くと怒られる
  • :selected=“hoge == fuga” とv-bindを使って{{}}は使わずに文字列で条件式を書くとうまくいく

v-model

  • 双方向データバインディング用
  • ビューの入力内容をモデルに反映、モデルの変更をビューに反映という使い方ができる
  • v-model.trimのようにするとユーザーの入力を自動でトリムしてくれる
  • 入力値をリアルタイムにバリデーションをかけたい時にもv-modelだと便利
  • ユーザーの入力値をそのまま保存に使いたい時にも便利。本来はReactのように親コンポーネントに値を渡してstateを更新のような実装が状態管理としては良いんだけど、実装コストをかけずにサクッと作りたい時に良い。

v-cloak

<div v-cloak>
  {{ message }}
</div>

v-for

  • ループを回すのに使う
<option v-cloak v-for="data in list" :value="data.id" :key="data.id">
</option>
  • 必ずユニーク値で:keyをつける

VueValidate

  • $vにバリデーションデータが入っている

代表的なメソッド

  • $touch
    • $v.name.$touchのようにすると$dirtyフラグをtrueにする
    • これによりエラー検知の対象になる

代表的なプロパティ

  • $dirty
    • 一度も触っていない場合はこのフラグはfalse
    • 一度でも変更を加えるとtrueになる
  • $error
    • $v.name.$errorのように項目ごとにエラーフラグをとれる
    • $dirtyがtrueになっていないと、このフラグが無視される

エラーメッセージを動的に出す

  • 各バリデーションルールのフラグがとれるので、その値を見て用意したエラーメッセージを表示する
<span v-if="$v.title.$error && !$v.title.required">
タイトル名は必須です</span>
  • コレクションデータの場合でも1つずつtouchする必要はなく、$v.array.$touch()だけでOK

IOS実機(開発中)のクラッシュを解析する手順

Firebaseでプッシュ通知を実装する時にIOSアプリ起動したらクラッシュすることがあったので、その解析手順。

クラッシュログの取得

  • Window - Devises - view Device Logs
  • 問題のクラッシュのログをコピーペースト

以下記事を参考にクラッシュログを解析する

ReactNativeでIOS/Android実機でプッシュ通知を試すハマり所まとめ(随時更新)

実機ビルドでハマる所(IOS)

  • SigningでTeamでログインしていない
  • error: Can’t find ‘node’ binary to build React Native bundle
    • nodeのパスを設定
  • Signing for XXX_Test
  • Unable to resolve module immtable
    • yarn add immutable
  • React/RCTBundleURLProvider.h file not found
    • node_modules削除して再yarn installやXcode再起動等で直ったりする

実機ビルドでハマる所(Android)

  • gradle 3.3アップデートを求められる
  • SDK Build Tools revision is too low
    • 青いリンクからupdate
  • JS bundle error
    • react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/
  • index.android.js: Unexpected token )
  • gradleのsyncエラーはAndroid Studio再起動すると直ったりする

react-native linkは必要？

  • project.pbxprojの内容がプッシュされていれば不要

プッシュ通知設定(IOS)

  • Add the push notifications feature to your add id
    • generalのbundle identifierが被っているのが原因

プッシュ通知の基礎知識

  • IOS
    • アプリ起動時にプッシュ通知の許可をとる
  • Android
    • ストアのダウンロード時の同意ボタンの内容にpush通知が含まれているので、デフォルト許可

react-native-fcmを使うと実機起動時にcrashする

  • resourcesフォルダにGoogleService-info-plistを移す
  • これでもダメな場合
    • pod ‘Firebase/Messaging’, ‘3.17.0’にして再度pod installする
    • バージョン不整合で詰まる
    • ここはまだ調査中

Androidの実機のログを見る方法

人事と労務の違いって？

最近、労務関係の仕事に触れる機会が多いです。 よく聞きはしますがイマイチよくわかっていなかったので、意味をまとめました。

人事と労務

人事も労務も会社の「人」に関わる業務。 人事は「社員個人」を対象としており、労務は「会社全体」を対象としている。

類似職種として「総務」があるが、これは社内の備品管理や社内環境整備、 社内イベントの企画などを行う職種。

人事の仕事

  • 人員配置
  • 採用
  • 人材教育
  • 評価制度の策定

労務の仕事

  • 給与計算・勤怠管理
  • 社会保険手続き
  • 健康診断の対応
  • その他福利厚生に関する手続き

人事も労務もひっくるめてHR(Human Resource)Techだなぁとか思ってましたが、 ちゃんと調べると様々な領域に分かれていて、とても興味深い。

ReactNativeの実機ビルドでunable to load script from assets index.android.bundleになる時の対処

以下手順でOK

mkdir android/app/src/main/assets

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

再ビルド実行

[Android] Building release APK with react-native bundle · Issue #2743 · facebook/react-native https://github.com/facebook/react-native/issues/2743

リリース用のAPKの時にJSファイルをbundleしてくれないgradleの不具合？ 今の所、自分でbundleコマンドを実行しないといけないみたい。

自分の場合はこれで動きました。