yn2011's blog

技術メモ

VSCodeでシェルスクリプト(bash)の開発環境を整える

シェル芸勉強会の過去問演習を再開したいなぁと思ったので、まずは環境を整えてみる。

環境

インストールした拡張

  "configurations": [
    {
      "type": "bashdb",
      "request": "launch",
      "name": "Bash-Debug (select script from list of sh files)",
      "cwd": "${workspaceFolder}",
      "program": "${command:SelectScriptName}",
      "args": []
    },
  • Bash IDE
    • language server
    • コマンドの補完、定義の確認(man)、VSCodeのアウトライン表示など
    • 下記のインストールが必要
$ npm i -g bash-language-server

結果

  • コマンドをホバーするとmanがポップアップ f:id:pokuwagata:20181103213837p:plain

  • 括弧の閉じ忘れ等の構文エラーが指摘される f:id:pokuwagata:20181103213830p:plain

シェルスクリプトやっていきましょう

IE11で文字列からDOM Nodeを生成・取得したい

業務で苦戦したことがあったのでまとめ

環境

  • IE(11.345)

やりたいこと

  • 文字列からDOM Nodeを生成してJavaScriptで取得したい
  • どんな要素でも文字列から生成できて欲しい
  • <template>要素にブラウザが対応している場合は下記の方法で生成と取得が可能
    • ただしIE11は<template>要素に対応していない
function htmlToElements(html) {
    var template = document.createElement('template');
    template.innerHTML = html;
    return template.content.childNodes;
}

var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>');

Creating a new DOM element from an HTML string using built-in DOM methods or Prototypeより引用

div.innerHTMLではダメなのか

  • 上記のStackOverflowにも書かれているが<td>要素は親に<tr>要素しか持てない(<div>はダメ)などの制限が要素によって存在する

    • 親要素の制限については、例えば<td>なら4.9.9 The td elementのContexts in which this element can be usedに記載がある
  • <tr>要素を用意してtr.innerHTMLする手もあるにはあるが...

IE11ではどうするか

  • <template>要素にブラウザが対応していない場合

ライブラリを使う

  • 素直な方法

jQuery(3.3.1)

var node = $( "<td>hoge</td>" );

Dojo(1.10)

  • 今もDojoを使っている人がいるかは分からないけど...
var node = domConstruct.toDom("<td>hoge</td>");

その他

insertAdjacentHTML()

var parent = document.getElementById('hoge');
parent.insertAdjacentHTML('afterbegin', '<td>hoge</td>');

結論

  • ライブラリはマルチブラウザ対応を考える場合はやはり強い...

macOS Mojave(10.14)にアップグレード後にVSCodeのフォントが変になる事象を解決する方法

macOSをMojave(10.14)にアップグレードしてVSCodeを起動したら文字が変になっていて困った。

環境

事象

  • macOSをHighSierraからMojave(10.14)にアップグレードしたところVSCodeのフォント(Ricty Diminished)が変化し見にくくなった

解決方法

  • ターミナルを起動し下記を実行すると直る
    • 原因についての詳細は参考のIssueを参照(私はあまりよく分かってない)
$ defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO
  • 元に戻したい場合はNO→YESにして実行
$ defaults write -g CGFontRenderingFontSmoothingDisabled -bool YES

結果

  • before

f:id:pokuwagata:20181101234316p:plain

  • after

f:id:pokuwagata:20181101234321p:plain

とりあえず直ってよかった

参考

validity.patternMismatchで入力フォームに数値以外が入力されていることを判定する(マルチブラウザ対応)

数値用フォームのバリデーションをフロント側で作成する際に調べた。マルチブラウザ対応の方法を見つけるのに思ったより苦労したので備忘録。

確認環境

  • IE11 (11.0.90), Safari (12.0)含むモダンブラウザ

やりたいこと

  • 数値以外の文字列も入力は許可する
  • 入力値をバックエンドに送信する前にフロント側でバリデーションしたい
  • 数値以外の文字列が含まれる場合はバリデーションエラー

コード

(例) 年齢入力用のフォームの場合

html

<input type="text" id="age" pattern="^(?!0)\d{0,3}$">
  • pattern属性に正規表現を指定する。
  • この例の場合では、先頭が0以外かつ数値のみで構成された長さ3以下の文字列にマッチする。

JavaScript

var input = document.getElementById("age");
if (input.validity.patternMismatch) {
  console.log("Bad input");
} else {
  console.log("Content of input ok.");
}
  • 入力がpattern属性値の正規表現にマッチしているかどうかをvalidity.patternMismatchから取得できる。
  • 以前はSafariが未対応だったようだが現在は問題ない模様。
  • マルチブラウザ対応が必要な場合はvalidity.patternMismatchが良い。

その他の方法

type="number"

<input type="number">
  • type属性にnumberを指定するとChrome(70.0.3)では数値以外の入力を受け付けない。
    • Chrome以外のブラウザでは数値以外も入力は可能。
  • 多くのブラウザでは数値以外が入力されていることをValidityState.badInputから判定できる。
    • しかしIE11はbadInputプロパティに未対応のため判定できない。

JavaScriptで入力値を判定

  • JavaScript内で正規表現を利用するか、入力値に対して型や文字列長等を使った条件式を組む方法。
    • 条件式は正規表現に比べて冗長な上に間違いやすいのでやめたほうが良いと思う。
  • 正規表現が静的な場合は素直にinput要素のpattern属性で判定すればいいと思うが、動的に生成する場合はどちらでも良さそう。

参考

ValidityState - Web APIs | MDN