Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

M1 Macでdocker-compose使おうと思ったらfork/exec /usr/local/bin/docker-compose-v1: bad CPU type in executableエラー

問題

docker-compose使おうと思ったら、以下のエラーが表示されました。

fork/exec /usr/local/bin/docker-compose-v1: bad CPU type in executable

昨日は使えたのになー。という感じ。

とりあえずDockerを最新バージョンに更新して、Preferencesの 「Use Docker Compose V2」 をチェックして再起動したら解消されました。

2つの配列が持っている要素が等しいかどうかを判定する TypeScript

はじめに

配列の要素の順番は関係なく、2つの配列のlengthが等しいかどうか、2つの配列が同じ要素を持っているかを判定します。

関数の定義と実行

以下の通り定義します。

    const isSameArr = (arr1: number[], arr2: number[]) => {
      if (arr1.length !== arr2.length) return false;

      const arr2Clone = [...arr2];

      for (let i = 0; i < arr1.length; i++) {
        const matchedIndex = arr2Clone.indexOf(arr1[i]);
        if (matchedIndex === -1) return false;

        arr2Clone.splice(matchedIndex, 1);
      }

      return true;
    }

以下の通り実行します。

const isSame = isSameArr([1, 2, 3], [3, 1, 2]);

VueのOptionsAPIのときに取得していたthis.$elはCompositon APIではどのように取得するのだろうかという話

参考にさせていただいたページ

どうやるか

vue.js - Vue 3 Composition API - How to get the component element ($el) on which the component is mounted? - Stack Overflow」によると、ref属性で参照するらしいです。

OptionsAPIではできていた以下のような記述はどうやらできないみたいですね。

this.$el.querySelector('.example');

Vuetifyのv-menuが表示されたときや非表示になったときに何か処理をしたい Vuetify 2.x その0001

参考にさせていただいたページ

今日の環境

  • vue: 2.6.11
  • vuetify: 2.5.4
  • @vue/composition-api: v1.0.0-beta.22

はじめに

Vue2のcompositon apiなので、Vue3だとまたちょっと違うかもしれません。

v-menuが表示されたときや非表示になったときに何か処理をしたい

時間が無いのでざっくり書いておきます。

気が向いたらそのうち直します。

参考ページにあるように、v-modelで取得できます。

      〜略〜
      <v-menu
        v-model="menuState.isShown"
      >
      〜略〜

menuStateはsetup()の中で、composition APIのreactiveで定義してreturnします。

  〜略〜
  setup() {
    const menuState = reactive({
      isShown: false,
    });

    watch(() => menuState.isShown, (isShown) => {
      console.log('watch isShown: ', isShown);
    });

    return {
      menuState,
    };
  },
  〜略〜

highcharts-vueのコンポーネントに渡すpropsの型 highcharts-vue 1.x + TypeScript その0001

参考にさせていただいたページ

highcharts/highcharts-vue GitHub

highcharts 公式ドキュメント

今回使用しているバージョン

highcharts-vue v1.4.0 を使用していて、highcharts v9.2.2に依存しているようです。

  • highcharts-vue v1.4.0
    • highcharts v9.2.2

前提

npmとかyarnで、highchartsとhighcharts-vueをインストールしてあります。

highcharts-vueのコンポーネントに渡せるpropsについて

GitHubのREADME「GitHub - highcharts/highcharts-vue」を読むと、以下のような感じでpropsが渡せるようです。 詳細は公式READMEを読んでみてください。

<highcharts
  :options="chartOptions"
  :constructor-type="constructorType"
  :callback="callback"
  :update-args="updateArgs"
  :highcharts="highcharts"
  :deep-copy-on-update="deepCopyOnUpdate"
/>

optionsの型について

optionsの型はこんな感じでimportできます。

import { Options as ChartOptions } from 'highcharts';

Optionsは以下のような感じで定義されていました。
実際にはコメントが沢山書いてありますが、省略しています。
最新の情報、正しい情報は公式ドキュメントや実際のソースコードなどを参照してください。

export interface Options {
    accessibility?: AccessibilityOptions;
    annotations?: Array<AnnotationsOptions>;
    boost?: BoostOptions;
    caption?: CaptionOptions;
    chart?: ChartOptions;
    colorAxis?: (ColorAxisOptions|Array<ColorAxisOptions>);
    colors?: Array<ColorString>;
    connectors?: ConnectorsOptions;
    credits?: CreditsOptions;
    data?: DataOptions;
    defs?: (DefsOptions|Dictionary<ASTNode>);
    drilldown?: DrilldownOptions;
    exporting?: ExportingOptions;
    global?: GlobalOptions;
    lang?: LangOptions;
    legend?: LegendOptions;
    loading?: LoadingOptions;
    mapNavigation?: MapNavigationOptions;
    navigation?: NavigationOptions;
    navigator?: NavigatorOptions;
    noData?: NoDataOptions;
    pane?: PaneOptions;
    plotOptions?: PlotOptions;
    rangeSelector?: RangeSelectorOptions;
    responsive?: ResponsiveOptions;
    scrollbar?: ScrollbarOptions;
    series?: Array<SeriesOptionsType>;
    stockTools?: StockToolsOptions;
    subtitle?: SubtitleOptions;
    time?: TimeOptions;
    title?: TitleOptions;
    tooltip?: TooltipOptions;
    xAxis?: (XAxisOptions|Array<XAxisOptions>);
    yAxis?: (YAxisOptions|Array<YAxisOptions>);
    zAxis?: (ZAxisOptions|Array<ZAxisOptions>);
}

一応補足しておくと「node_modules/highcharts/highcharts.d.ts」の中を export interface Options で検索すると見つかりました。

「frontend/node_modules/highcharts-vue/types/highcharts-vue.d.ts」の中を読むと以下のように書いてあったりもするので、そこから辿っても見つかると思います。

import * as Highcharts from "highcharts"

〜省略〜

declare module 'vue/types/options' {
    interface ComponentOptions<V extends _Vue> {
        constructorType?: string;
        options?: Highcharts.Options;
        callback?: Highcharts.ChartCallbackFunction;
        updateArgs?: Array<ChartUpdateArgs>;
        highcharts?: typeof Highcharts;
        deepCopyOnUpdate?: boolean;
    }
}

optionsが持っているプロパティについて

とりあえず今自分が知りたいことについて調べてみます。

chart

概要説明

General options for the chart.

概要説明(日本語)

このチャート自体の全般の設定

設定例

      chart: {
        type: 'areaspline',
        plotBorderWidth: 1,
        plotBorderColor: '#eeeeee',
        marginRight: 20,
        marginTop: 40,
      },

credits

概要説明

Highchart by default puts a credits label in the lower right corner of the chart. This can be changed using these options.

概要説明(日本語)

Highchartはデフォルトで、チャートの右下隅にクレジットラベルを配置します。 これは、これらのオプションを使用して変更できます。

設定例

      credits: {
        enabled: false,
      },

title

概要説明

The chart's main title.

概要説明(日本語)

チャートのメインタイトル

設定例

      title: {
        text: '任意のタイトル文字列',
      },

xAxis

概要説明

The X axis or category axis. Normally this is the horizontal axis, though if the chart is inverted this is the vertical axis. In case of multiple axes, the xAxis node is an array of configuration objects.

See the Axis class for programmatic access to the axis.

概要説明(日本語)

X軸またはカテゴリ軸。 通常、これは横軸ですが、チャートが反転している場合、これは縦軸です。 複数の軸の場合、xAxisノードは構成オブジェクトの配列です。

軸へのプログラムによるアクセスについては、Axisクラスを参照してください。

ObjectまたはArrayが渡せるらしいです。

設定例




yAxis

概要説明

The Y axis or value axis. Normally this is the vertical axis, though if the chart is inverted this is the horizontal axis. In case of multiple axes, the yAxis node is an array of configuration objects.

See the Axis object for programmatic access to the axis.

概要説明(日本語)

Y軸または値軸。 通常、これは垂直軸ですが、チャートが反転している場合、これは水平軸です。 複数の軸の場合、yAxisノードは構成オブジェクトの配列です。

軸へのプログラムによるアクセスについては、Axisオブジェクトを参照してください。

ObjectまたはArrayが渡せるらしいです。

設定例




series

概要説明

Series options for specific data and the data itself. In TypeScript you have to cast the series options to specific series types, to get all possible options for a series.

概要説明(日本語)

特定のデータとデータ自体のシリーズオプション。 TypeScriptでは、シリーズのすべての可能なオプションを取得するために、シリーズオプションを特定のシリーズタイプにキャストする必要があります。

ObjectまたはArrayが渡せるらしいです。

設定例




legend

概要説明

The legend is a box containing a symbol and name for each series item or point item in the chart. Each series (or points in case of pie charts) is represented by a symbol and its name in the legend.

It is possible to override the symbol creator function and create custom legend symbols.

概要説明(日本語)

凡例は、チャート内の各シリーズアイテムまたはポイントアイテムの記号と名前を含むボックスです。 各シリーズ(または円グラフの場合はポイント)は、凡例に記号とその名前で表されます。

シンボル作成機能をオーバーライドして、カスタム凡例シンボルを作成することができます。

設定例

      legend: {
        align: 'left',
        x: 100,
        squareSymbol: true,
        symbolHeight: 12,
        borderColor: 'black',
      },

tooltip

概要説明

Options for the tooltip that appears when the user hovers over a series or point.

概要説明(日本語)

ユーザーがシリーズまたはポイントにカーソルを合わせたときに表示されるツールチップのオプション。

設定例

      tooltip: {
        backgroundColor: '#ffffff',
        borderWidth: 1,
        borderRadius: 4,
        useHTML: true,
        formatter: function (): string {
          return `<div><span>${this.x}</span><span>${this.y}</span></div>`;
        }
      },

その他

Optionsによって設定できる項目は、他にもまだまだ沢山あるので、必要な方は公式ドキュメントで調べてみてください。

optionsに渡すオブジェクトの例

そのうち書きます。

import { Options as ChartOptions } from 'highcharts';

const chartOptions: ChartOptions = {

}

Day.jsの使い方について

参考にさせていただいたページ

Day.js公式

その他

parse

'2022-03-03' みたいな文字列をDay.jsのオブジェクトに変換します。

const example = dayjs('2022-03-03');

format

例えば現在時刻のオブジェクトを取得して、以下のように任意の文字列に変換できます。

const example = dayjs().format('YYYY-MM-DD-HH-mm-ss');

unixtimeを取得する

秒の場合

const example = dayjs().unix();

ミリ秒の場合

const example = dayjs().valueOf();

任意の文字列フォーマットで現在日時を取得する

年と月だけ取得する場合

const example = dayjs().format('YYYY-MM');

秒まで取得する場合

const example = dayjs().format('YYYY-MM-DD HH:mm:ss');

フォーマットについては、「String + Format · Day.js」をご確認ください。

00時00分00秒のオブジェクトを取得する

現在の日付の場合

const example = dayjs().startOf('date');

23時59分59秒のオブジェクトを取得する

現在の日付の場合

const example = dayjs().endOf('date');

日付を指定したい場合

const example = dayjs('2022-03-03').endOf('date');

今月を取得する

const example = dayjs().month(); // 0〜11が取得されます。

1週間後の日時を取得する

以下のようにすると現在日時を起点に、1週間後を取得できます。

const example = dayjs().add(1, 'week');

以下のようにすると現在日時を起点に、2週間後を取得できます。

const example = dayjs().add(2, 'week');

day、month、year、hour、minute、secondなど、色々あるので、nか月後、n年後などを取得することもできます。

1週間前の日時を取得する

以下のようにすると現在日時を起点に、1週間前を取得できます。

const example = dayjs().subtract(1, 'week');

以下のようにすると現在日時を起点に、2週間前を取得できます。

const example = dayjs().subtract(2, 'week');

day、month、year、hour、minute、secondなど、色々あるので、nか月前、n年前などを取得することもできます。

今週の始まり、今週の終わりを取得する

週の始まりを日曜日に設定している場合、

現在日時を基点として、 今週の始まり、つまり日曜日の00時00分00秒のオブジェクト 今週の終わり、つまり土曜日の23時59分59秒のオブジェクト を取得します。

const thisSundey = dayjs().startOf('week');
const thisSaturday = dayjs().endOf('week');

date range pickerなどで、ある期間を指定したいときに役立ちます。

たぶん週の始まりを月曜日に設定することもできそうです。

先週の始まり、先週の終わりを取得する

現在日時を基点として、 先週の始まり、つまり日曜日の00時00分00秒のオブジェクト 先週の終わり、つまり土曜日の23時59分59秒のオブジェクト を取得します。

const lastSundey = dayjs().startOf('week').subtract(1, 'week');
const lastSaturday = dayjs().endOf('week').subtract(1, 'week');

date range pickerなどで、ある期間を指定したいときに役立ちます。