プログラマーノート

プログラマーの学習や雑記のメモです

【Vue.js】Composition APIをscript setupへリファクタリングする

JavaScript Vue.js

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

本日は、Vue.jsのComposition APIをscript setupへリファクタリングする方法をまとめます。

Vue.js3.2よりscript setupが導入されました。

script setup で書くことにより、より簡潔な記述ができるようになります。

既存のComposition API から、script setupへリファクタリングするにはどうしたらいいのでしょうか？

注意

script setupはvue.js3.2以上でないと動作しないので、ご注意ください。

Composition API の書き方

親子コンポーネントがあるとします。

親は、子コンポーネントを呼び、

子コンポーネントは、親コンポーネントの関数をemitするような作りとなっております。

親コンポーネント

<script>
export default {
    setup() {
        const testValue = 'test_value'
        const testFn = param => console.log('emit! ' + param);
        return {
            testValue,
            test: 'aaaa',
            testFn,
        }
    }
}
</script>

<template>
    <ScriptSetupChild :prop_id="1" @emitTest="testFn"></ScriptSetupChild >
</template>

子コンポーネント

<script>
export default {
    props: {
        prop_id: {
            type: Number,
        }
    },
    emits: ['emitTest'],
    setup(props, context) {
        console.log(props.prop_id)
        context.emit('emitTest', 'param1');
    }
}
</script>

<template>
    this is composition component
</template>

script setupへリファクタリングする(親コンポーネント編)

まずは、親コンポーネントをリファクタリングしましょう。

やることは以下になります。

1.scriptタグの属性にsetupを追加

2.export defaultはコメントアウトする

3.setupもコメントアウトする

4.setup()のreturnは、コメントアウトする

5.ただし、returnのオブジェクトで定義している値は、const定数として逃がす

<!-- 1.scriptタグの属性にsetupを追加 -->
<script setup>
// 2.export defaultはコメントアウトする
// export default {
// 3.setupもコメントアウトする
//     setup() {
        const testValue = 'test_value'
        const testFn = param => console.log('emit! ' + param);
        // 4.setup()のreturnは、コメントアウトする
        // return {
            // testValue,
            // 5.ただし、returnのオブジェクトで定義している値は、const定数として逃がす
            const test = 'aaaa'
            // testFn,
    //     }
    // }
// }
</script>

<template>
    <ScriptSetupChild :prop_id="1" @emitTest="testFn"></ScriptSetupChild >
</template>

清書するとこのうなります。すっきりしましたね。

export defaultとsetup関数を消すと、こんなにもスッキリするんですね。

<script setup>
const testValue = 'test_value'
const testFn = param => console.log('emit! ' + param);
const test = 'aaaa'
</script>

<template>
    <ScriptSetupChild :prop_id="1" @emitTest="testFn"></ScriptSetupChild >
</template>

script setupへリファクタリングする(子コンポーネント編)

続いて、子コンポーネントのリファクタリングです。

scriptタグへ、setup属性を付与したり、ecport defaultのsetup関数を削除することは省略します。

1.propsは、definePropsへリファクタリングする(importは不要)

2.emit定義は、defineEmitsへリファクタリングする

3.emitの実行は、contextではなく、defineEmitsの返り値から実行する

4.コンポーネントのprops取得は、definePropsの返り値から実行する

<script setup>
// 1.propsは、definePropsへリファクタリングする(importは不要)
const props = defineProps({
    prop_id: Number
})
// 2.emit定義は、defineEmitsへリファクタリングする
const emit = defineEmits(['emitTest'])

// 3.emitの実行は、contextではなく、defineEmitsの返り値から実行する
emit('emitTest','param1')

// 4.コンポーネントのprops取得は、definePropsの返り値から実行する
console.log(props.prop_id)
</script>

<template>
    this is child component
</template>

まとめ

いかがでしたでしょうか 。

script setupで書くと、とてもスッキリしますね。

可能なことなら、script setupで書いていきたいですね！

果たして、export defaultは何のためにあったのやら・・・

皆様の開発のお役に立てたら光栄です。読んで頂いてありがとうございました。

Windows環境でphpstormのphpcsを動かす

PHP Windows

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

本日は、Windows環境でCodeSnifferをインストールし、phpstormで静的解析するにはどうしたらいいのか記事にしたいと思います

CodeSnifferとは

CodeSnifferとはコードスタイルをチェックする、静的解析ツールです。

PHPのコードスタイルには、PSR-0,PSR-2,PSR-3など様々なコードスタイルがあります。

通常、サーバーサイドでComposerでグローバルインストールし、ファイルに対して実行するものです。

指定のコードスタイルに添っているかどうかチェックします。

$ vendor/bin/phpcs hoge.php

ソースを静的解析し、間違っているかどうかチェックできるのは便利なことですが、

いちいち実行するのは、面倒ですね。

そこで、PHPerの大好きなIDEである、phpstormでコード規約を実行できないか調査しました。

IDEでコード規約に添っているかどうかチェックするには、どうすればいいのでしょうかね。

試してみましょう。

PHPをWindowsにインストールする

もうインストールされていれば不要なのですが、

まずはPHPをWindowsにインストールすることが必須です。

以下、PHP公式からダウンロードしてください。

動作させたいPHPバージョンのダウンロードをクリックしてください。

f:id:takafumiat:20211009202900p:plain
windowsダウンロード

スレッドセーフ版のzipをクリック

f:id:takafumiat:20211009204004p:plain
php_download

ダウンロードしたzipを解答してどこかのディレクトリに適宜配置してください。

PHPのパスを通すことを忘れずに

phpのパスを通さないと動かないと動作しないとで気をつけてください。

パスの通し方

・windowsマークをクリック
・設定をクリック
・左袖下部にある、下部にある、詳細情報をクリック
・下の方にある、システムの詳細設定をクリック
・詳細設定をクリック
・下部の環境変数をクリック
・Pathを選択し、編集をクリック
・新規を押下し、PHPのzipを解凍先を指定する。

phpがインストールされたか確認する

PowerShellを開いて、phpが動作できることを確認してください。

PS C:\Users\strat> php -v
PHP 7.4.24 (cli) (built: Sep 21 2021 13:38:25) ( ZTS Visual C++ 2017 x64 )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies

ComposerをWindowsにインストール

下記サイトから、Composer-setup.exeをクリックしてダウンロードしてください。

f:id:takafumiat:20211009205715p:plain
composer-install

たぶんポチポチボタンを押していけばインストールされます。

最後に、PowerShellを開いて、composerがインストールされたことを確認してください。

PS C:\Users\strat> composer -v
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 2.1.9 2021-10-05 09:47:38

php_codesnifferをcomposerからグローバルインストールします

下記コマンドでグローバルインストールしてください。

composer global require "squizlabs/php_codesniffer"

このようにインストールされます。

PS C:\Users\strat> composer global require "squizlabs/php_codesniffer"
Changed current directory to C:/Users/strat/AppData/Roaming/Composer
Using version ^3.6 for squizlabs/php_codesniffer
./composer.json has been created
Running composer update squizlabs/php_codesniffer
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking squizlabs/php_codesniffer (3.6.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Downloading squizlabs/php_codesniffer (3.6.0)
  - Installing squizlabs/php_codesniffer (3.6.0): Extracting archive
Generating autoload files

以下ディレクトリにインストールされました。

C:\Users\strat\AppData\Roaming\Composer\vendor\squizlabs\php_codesniffer

phpstormの設定

phpstormを開き、File＞settings＞PHPQuality tool＞PHP_Codesnifferから、composerからインストールしたphp_codesnifferの実行パス（phpcs.bat）を指定してください。

f:id:takafumiat:20211009211305p:plain
codesniffer_setting

実行パスを指定した後、validationを押して異常なければ設定に問題はありません。

もし仮に、実行ファイルでないファイルを指定した場合は、エラーとなります。

次に、PHP_CodeSniffer Inspectionsを開き、

PHP_CodeSniffer validation にチェックを入れ、Coding standardにお好みのコーディングスタイルを指定してください。

f:id:takafumiat:20211009211742p:plain
php_codesnifffer_inspections

phpstormがPHP_CodeSnifferのエラーを出すことに成功

これで、phpstormでphpcsのエラーを出すことに成功したはずです。

非推奨のコードを記述したところ、無事にphpcsのエラーが出るようになりました。

f:id:takafumiat:20211009213111p:plain
phpcs_error

まとめ

いかがでしたでしょうか

phpstormのお供に、静的コード解析を導入することで品質担保できたら良いですね！

皆様の開発のお役に立てたら光栄です。読んで頂いてありがとうございました。

【JavaScript】整数を四捨五入するのではなく丸める（JS編）

JavaScript フロントエンド開発

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

今回は、JavaScriptで、整数を四捨五入するのではなく丸めるにはどうしたらいいかまとめたいと思います。

JavaScriptで整数を丸めたい

たとえば、6770 という数字を下二桁落として丸めたい場合です。

6700と表示したい場合、どうしたらいいのでしょうか？

PHPには round関数というものがあって、第二引数にマイナスの値を渡すと、その桁数で四捨五入ができました。

では、はたしてJavaScriptでは四捨五入をどうするのでしょうか？

JavaScriptには、Math.round という処理があり、これを使うと四捨五入できるようです。

実行してみましょう。6700になるのでしょうか？

let number = Math.round( 6770 );
console.log(number)
// 6770と出力

四捨五入するんだから、結果は6800になるのかと思ってました。

しかし、6800になるどころか、数字は変わっていません。

どうやら、JavaScriptの四捨五入は整数に対応しておらず、小数点のみ有効そうです。

試しに、6.77で試してみます。

let number = Math.round( 6.770 );
console.log(number)
// 7と出力

小数点は、無事に四捨五入できました。

JavaScriptの、Math.roundは小数点のみ有効で、どうやら整数を使用した関数は自作しないといけないようです。

どうすれば整数を丸めることができるのか？

以前の記事で紹介しましたが、整数を特定ケタ数で丸めるには

以下の公式を使います。

数字 ÷ 丸めたい桁数 = Num

Num の小数点を切り捨てる

Numを丸めたい桁数掛ける。

JavaScriptで式を作る

JavaScriptで上の処理を書くと以下のようになります

// 対象の数字
let number = 6770
// 丸めたい桁数
let digit = 100
// 対象の数字を丸めたい桁数で割る　結果は67.7
number = number / digit
// 小数点以下を切り捨てる 結果は67
number = Math.floor(number)
// 桁数で掛ける（すると、桁数分が復活） 
number = number * digit
// 結果的に6700となる
console.log(number)

上記の式では、無事に桁数を丸めることができていることを確認できました。

整数を丸める式を関数化する

上記のコードを関数化し、繰り返し使えるようにします。

const roundDown = (number,digit) => {
    // まるめたい数字より、桁数のほうが大きい場合0になってしまうことに注意
    if ( digit < number ) {
        return Math.floor(number / digit) * digit;
    }
    return number;
}
console.log(roundDown(6770,100))
// 6700と出力される

注意点

ご注意ください

丸めたい数字が、桁数よりも小さい場合は丸められません。

丸めたい数字が桁数よりも小さい場合は、丸めずに返すようになっております。

PHP版で整数を丸める処理の紹介はこちら

PHPで整数を丸める処理の記事は以下になります。

PHPerの方はこちらの記事もどうぞご覧ください。

まとめ

いかがでしたでしょうか

JavaScriptで整数を丸めるお話でした。

皆様の開発のお役に立てたら光栄です。読んで頂いてありがとうございました。

【PHP】整数を四捨五入するのではなく丸める

PHP サーバーサイド アルゴリズム

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

今回は PHP で整数を丸める処理をするのはどうしたらいいかまとめたいと思います。

PHPでround関数を使用し、整数を丸めようと思ったが？

例えば4670という数字があったとします。

これを4600に丸めるにはどうしたらいいでしょうか?

つまり、下二桁を丸めたいのです。

丸め対策にround関数を使ってみる

PHPには、round関数があります。

これは、第２引数にマイナスを設定すると 整数の何桁以上で四捨五入する処理です。

早速動かしてみましょう。

丸めることができるでしょうか？

<?php
        $number = 4670;
        $number = round($number,-2);
        var_dump($number);
        // float(4700) と出力

残念ながら、4600にはなりませんでした。

当然のことですが、 round関数は、四捨五入する処理なので

整数を丸める処理ではありません。

round関数では、整数の丸めを実行する処理にはならないのです。

PHPは、整数を丸める処理が無いようです。

どうやら丸め処理を自作しないといけないようです。

整数の丸め方

ではどうしたら、整数を丸めることができるのでしょうか？

桁数を無くす、という考えは、数学チックな考えが必要なのではないでしょうか？

そうなのです。

これを解決するには数学的なテクニックを使う必要があるのです。

整数で桁数を丸める計算式を考える

整数の桁数を丸めたいのですが、どうしたらいいか考えます。

数学的な思考を使って考えてみましょう。

たとえば、4670 ÷ 100 = 46.70 になります。

46.70の小数点を切り捨て、46になり

46に100を掛けると、

4600になります！

これを、PHPの関数にして処理してみましょう。

PHPで整数を丸める関数を自作する

<?php
        /**
         * 整数の丸めを実行する関数
         * 
         * @param int $num 丸めたい値
         * @param int $digit 丸めたい桁数
         *   2桁丸めたいなら100
         *   3桁丸めたいなら1000
         * @return float|int
         */
        function roundDown(int $num,int $digit) {
            // まるめたい数字より、桁数のほうが大きい場合0になってしまうことに注意
            if ( $digit < $num ) {
                return floor($num / $digit) * $digit;
            }
            return $num;
        }
        $number = 4670;
        $number = roundDown($number,100);
        var_dump($number);
        // float(4600) と出力

無事に整数を丸めることができました！

数学の問題を解いているようで、面白いですね。

注意点

丸めたい数字より、桁数のほうが大きい場合は、0になってしまいます。

したがって、桁数よりも丸めたい数字が大きいときにのみ、丸める処理を動作しています。

その点にご注意ください。

まとめ

いかがでしたでしょうか?

PHPの関数に、整数を丸める処理が無かったので丸め関数を自作しました。

整数を丸めたい機会がありましたら、ぜひご活用ください。

皆様の開発のお役に立てたら光栄です。読んで頂いてありがとうございました。

npmとcomposerの比較

サーバーサイド PHP フロントエンド開発

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

本日は、npmとcomposerの比較を行いたいと思います。

WEB系エンジニアで、サーバーからフロントまで一貫して作業していると、

npmと、composerの使い方について、どっちがどうだったか迷ってしまう時ないでしょうか。

わかりやすいよう、まとめます。

パッケージ管理ツールとは

プログラミング言語の多くにはパッケージ管理ツールが存在します。

Pythonはpip、Rubyはgem、PerlはCPAN、golangはglide などがあります。

パッケージ管理ツールを使うことで、依存しているライブラリの管理や、

ライブラリのアップデートを容易に行えます。

また、管理されているパッケージは、git管理外に設定することができ

リポジトリにコードを減らすことができます。

今回は PHP で使うComposerと、JavaScriptで使うnpmの比較をしたいと思います。

npmとは

javascriptのパッケージ管理ツールです。

Node.jsをインストールすると、ついてきます。

正確に言えば、javascriptというよりもNode.jsのパッケージ管理ツールですが

JavaScriptのほうが使う機会が多いので、JavaScriptのパッケージ管理ツールという印象が強いです。

composerとは

PHPのパッケージ管理ツールです。

ただ単にパッケージをインストールするだけではなく、

クラスのオートロード機能も付いています。

機能の比較

では、composerとnpmの機能の違いについて

比較し、並べていきたいと思います。

プロジェクト新規作成

npmもcomposerも、同じinitです。
npmはpacage.json、composerは、composer.jsonを生成します。

npm init
composer init

ロックファイル

npmが、package-lock.jsonです。

composerが、composer.lockです。

これら２つのファイルは、２つとも、ロックファイルであり、

パッケージをインストールする時に、依存するライブラリ関係が明記されていたりします。

git clone後の初期パッケージインストール

gitをcloneした後、新たにパッケージを新規インストールする際に使用します。

2つとも、同じinstallですね。

npm install
composer install

# Laravelなど、フレームワークにパッケージ初期作成用のコマンドが存在する場合がある
composer create-project --prefer-dist laravel/laravel

パッケージ追加

続いて、パッケージの新規追加のコマンドです。

composerは、vendorという概念があるのが、npmと違いますね。

npmは、新規追加と、初期設定のコマンドが変わらないことが特徴ですね。

npm install パッケージ名
composer require ベンダー名/パッケージ名

パッケージ追加（開発のみ）

続いて、開発時のみインストールするパッケージのコマンドです。

npmも、composerも、オプションをつければ可能です。

npm install --save-dev
composer require --dev ベンダー名/パッケージ名

パッケージ追加（グローバルインストール）

各プロジェクトではなく、システム全体にパッケージをインストールする際は

以下のコマンドを打ちます。

npm install -g パッケージ名
composer global require ベンダー名/パッケージ名

パッケージがインストールされるディレクトリ

npm install や、composer installを実行すると パッケージがインストールされるディレクトリは以下になります。

npm: node_modules
composer: vendor

パッケージ更新

composer.lockや、package-lock.jsonが更新され、

パッケージが全て最新版になります。

全てパッケージを最新に更新すると、影響範囲が広すぎるので

使う機会は無いですね。

npm update
composer update

パッケージ一覧

インストールしたパッケージ一覧が出力されます。

npm list
composer show

パッケージ削除

パッケージ削除コマンドです。

npm uninstall パッケージ
npm unlink パッケージ
npm remove パッケージ
composer remove パッケージ

スクリプト実行

スクリプト実行コマンドです

npmは、ビルドの実行やテストコードの実行、

composerは、phpunitの実行によく使われます

npm run スクリプト名
composer  スクリプト名

表にします

一覧にして整理します

npm composer
プロジェクト新規作成 npm init composer init
ロックファイル package-lock.json composer.lock
初期パッケージインストール npm install composer install
パッケージ追加 npm install パッケージ名 composer require ベンダー名/パッケージ名
開発のみインストール npm install --save-dev composer require --dev
グローバルインストール npm install -g パッケージ名 composer global require ベンダー名/パッケージ名
インストールディレクトリ node_modules vendor
パッケージ更新 npm update composer update
パッケージ一覧 npm list composer show
パッケージ削除 npm uninstall composer remove
スクリプト実行 npm run スクリプト名 composer スクリプト名

まとめ

いかがでしたでしょうか 。
composerとnpmのコマンドが、どっちがどうだったか混乱しがちだったので、まとめました。 皆様の開発のお役に立てたら光栄です。読んで頂いてありがとうございました。

【Windows】cipherでデータを完全に削除し退職する。

Windows

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

本日は、Windows の完全なデータ削除について記事にしたいと思います。

職場を辞める時、パソコンのデータってどうしているでしょうか？

職場によっては、情シスが綺麗にパソコンをしてくれる場合もありますが

綺麗にしてくれないこともあります。

念のため自分で可能な限りデータを削除してから職場を去った方がいいと思います。

秘密鍵や、gitファイルを誰かに悪用されるなんてこともあるかもしれません。

今回はそんな、データ消去する方法についてまとめたいと思います。

ゴミ箱を空にしてもデータ削除されない

データを削除する場合どうしているでしょうか?

データを削除し、ゴミ箱にデータを移動して、右クリックで「ゴミ箱を空にする」ボタンを押せば、データは削除されると思っていないでしょうか？

しかし、データは削除されません。

世の中には削除したデータを復旧させるソフトが出回っています。

ファイナルデータ11plus 特別復元版|ダウンロード版

ファイナルデータ11plus 特別復元版|ダウンロード版

  • AOSデータ
Amazon

ゴミ箱を空にしてもデータは削除されたものではなく

HDDまたはSSDのどこかに眠っているのです。。。

データを完全削除する方法

ではデータを削除するには、どうしたらいいのでしょうか？

windowsにはcipherコマンドが有り、これを使うと完全削除できる模様です。

cipherコマンドを使用する

powerShell起動

まず、powerShellの起動からです。

画面左下にある、windowsマークを右クリック
↓
windows power shellをクリックしてください。

真っ青な、power shell が起動されたと思います。

※Powershell ではなくコマンドプロンプトでも代用は可能です。

cipherとは？

Windows に標準で付いているコマンドです

本来の用途は、暗号化のためのコマンドです。

cipherは、Windows の空の領域をすべて暗号化することによってデータを削除します。

つまり見えないデータを暗号化で上書きいたします。

cipherの使用はNTFSだけしか実行できない

NTFSのストレージのみ使用可能です。FATには使えないのでご注意ください。

Cドライブなど、ドライブ名を右クリック→プロパティを見るとファイルシステムが表示されており、

ファイルシステム:NTFS

と、書かれていればcipherが実行できます。

cipher実行してみる

データを削除するコマンドは、【cipher /w:実行したいディスク名:】で実行が可能です。

例えば、C ドライブで実行したい場合は

cipher /w:c:

とpowerShellに入力してください。

cipher /wは実行中に何をしているのか？

以下のような画面が出力されます。...が逐次表示され、どれぐらい進んだのか分かります。

0x00(つまり0)に空き容量をすべて書き込みし、

0xFF(つまり1)に空き容量をすべて書き込みし、

それから乱数に書き込みます。

C:\Users\strat>cipher /w:c:
できるだけ多くのデータを削除するために、CIPHER /W の実行中
はほかのアプリケーションをすべて終了してください。
0x00 に書き込み中
.........................................................................................................
0xFF に書き込み中
.........................................................................................................
乱数 に書き込み中
.........................................................................................................

データに書き込みをしているので、ストレージの容量はどんどんなくなっていきます。

cipherを実行したディスクの直下には、【EFSTMPWP】　ディレクトリが作成され

そちらに書き込みをすることでデータ削除をしているようです。

cipherの実行にどれぐらい時間がかかるのか？

Intel core i5 のメモリ16GBのSSDでは、約１時間で、全体の約半分を実行できました。

つまり全部終わらせるには約2時間かかります。

SSD だから短時間で済んだものの、HDDの場合はもっと時間がかかることでしょう。

なぜ半分しか実行できないかというと、

定時が来たのでcipherを途中で止めてしまったのです（汗）

cipherを実行するのであれば、長時間放置したほうがいいですね。

cipher /wを途中で止めたらどうする？

全部暗号化されてないかもしれませんし、cipherを途中で止めることは推奨はできません。

最低、０x00だけ実行すれば、データの上書きはされたと思いますけどね。

ではcipherを途中で止めてしまった場合はどうするのでしょうか？

cipherを実行したディスクの直下に、【EFSTMPWP】ディレクトリが出来ています。

こちらに暗号化を書き込んでいるので、削除しても問題ないようです。

cipherを最後まで実行すれば自動的に削除されるのですが

最後までを実行が終わってないので、 EFSTMPWPがの残ってしまっていたのです。

EFSTMPWPをフォルダごと削除しましょう。

まとめ

いかがでしたでしょうか 。

辞めていく職場が信用できない場合、またはSSD、HDDを破棄する際にcipherを実行した方がいいかもしれません。

皆様の開発のお役に立てたら光栄です。読んで頂いてありがとうございました。

【マネジメント】システム開発はなぜ炎上するのか

マネジメント 炎上

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

本日はシステム開発はなぜ炎上するのかについて、まとめたいと思います。

炎上する現場の特徴:人を集めれば良いと思っている

駄目なプロジェクトの特徴として、無理に人を集めることが原因です。

プロジェクトが上手く行かないから、人を増やして解決しようとする。

しかし、人が必要じゃないんですよ。優秀な人が必要なんです。

ロクに仕事のできない人間を１００人集めるより、１人の優秀なエンジニアを雇ったほうがいいのです。

人月の神話という本があります。

人月計算でシステム開発はできない、というような内容で

いくら人を集めても、管理コストが増えていくので、システム開発は人を増やすことによりスケジュールが遅延する。

という内容ですが、マネジメントをする方は、必ず読んでほしいですね。

人を増やすことは、炎上の鎮火にはならず、余計に炎を燃やします。

炎上プロジェクトで人を増やすことは、火に油を注ぐような危険行為なのです。

SIerの立場からすれば、人が増えれば増えるほど、利益があがります。

SIerは人を入れたがるし、発注者は人を増やせば解決できると思ってる。

こうしてプロジェクトは炎上し、システム開発は失敗するのです。

無駄に大人数を使って開発させても炎上の元です。

少数精鋭の開発が望ましいですね。

炎上する現場の特徴:誰かに丸投げすれば解決する

とりあえず作っておいてほしい。みたいなスタンスでシステムを発注されても困る。

そりゃ、ちゃんと、ウォーターフォール的な工程で、要件定義し、仕様を詰めて、開発する、という流れだったら良いのですが、期日だけ決められて、なんとなく発注するのは無理である。

具体的にどういうものを作って欲しいのか、RFPやRFIをまとめて発注するべきなのです。

しかし、世の中の多くの一般企業はそういったドキュメントをまとめる能力は無く、適当に発注して大損して、莫大な金額を支払ったことに対して憤怒するのです。

アジャイル開発で小さいシステムをちょっとづつ作っていくような感じで 開発を進めることが理想です。

炎上する現場の特徴:複数の会社で一つの仕事をさせる

一つのプロジェクトを複数のベンダーにお願いしたとします。

たとえば、サーバーサイドと、フロントエンドでA社とB社に分業したとか。

するとどうなるでしょう。

この処理は、そっちがやるべきだ！とか

バグが出たらサーバーサイド側のせいだ！いや、フロントエンドが悪いんだ！などと、お互いを責め合い、憎しみ合っていくのです。

同じ会社で、分業するならまだよかったかもしれません。

一つプロジェクトを、違うベンダーで進めると、お互いが責め合い、自社の利益を主張し、開発はまとまりを欠けて混沌としていきます。

しかし、複数のベンダーを混ぜても成功するケースもあります。

発注者側の会社が、主導権を握り、A社はここまでやって、B社はここまでやってほしいと、ちゃんとベンダーコントロールすれば問題はありません。

問題は、何もしなくてもシステム開発ができると思ってる発注者が多いということです。

会社は利益を求めるものなのだから、自分の主義主張を述べるものです。

しかし、複数の会社が主張しあってても、システムは完成しません。

ベンダー側もかなり疲弊して撤退していく場合もありえます。

システム開発は、請負契約ではなく、業務委託契約を締結して進めることがあります。

請負契約に完成義務はありません。

良心のある管理者の元、作業を進めるのです。

つまり、作業を進めるのが仕事であって、システム開発を納品させることは義務ではないのです。

したがって、発注者側の企業が主体性を持って、仕様を考え、ベンダーをコントロールしなければならないのです。

SIerに責任はありませんからね。よくシステム開発会社に訴訟沙汰が起こったりしますが、しばしば発注者側が負けています。

そりゃ、SIer側は、お金を貰うことが目的であって、システムの完成は二の次だからね（笑）

そうやって企業は痛い目を見て、ベンダーに頼ることを辞め、自社開発を始めていくのです。

まとめ

いかがでしたでしょうか 。 苦い思い出を振り返りながらブログにしました。
皆様の開発のお役に立てたら光栄です。読んで頂いてありがとうございました。

【Vue.js】Vue.js(Vue3)でDay.jsを使う

Vue.js フロントエンド開発

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

javascriptの日付処理ライブラリである、Day.jsをVue3で使用する方法についてまとめたいと思います。

Day.jsの導入経緯

JavaScriptは日付処理がややこしい。

Javascriptは、日付処理がややこしいです。年月日の表示を以下のように、わざわざオブジェクト指向チックに扱わなければいけません。

const now = new Date()
const year = now.getFullYear()
const month = now.getMonth() + 1
const day = now.getDate()
console.log(`${year}年${month}月${day}日`)
// 2021年9月29日 と出力

PHPだったら、日付表示は以下のように簡単に表示できるのにね。

<?php
echo date("Y年m月d日") ;

JavaScriptで簡単に日付処理を扱えるライブラリないのか探すことにしました。

momentは既に死んでいる

Javascriptの日付処理ライブラリで人気のものはmoment.jsだと思います。

githubでスターが4万件もついている人気のライブラリです。

しかし、moment.jsの公式を見ると、メンテナンスモードのレガシープロジェクトであり、もう機能の追加などはしないようです。

フロントエンド界隈の進化は早いので、もう開発しないのであれば、moment.jsの使用はためらいます。

Day.js、君に決めた

moment.jsの代替ライブラリは何がいいのでしょうか？

候補として、Luxon,Day.js,date-fns,js-jodaが挙げられていますが、私はDay.jsを採用することにしました。

理由としては、日付フォーマットの仕方がPHPに似ており、シンプルに使えそうだからです。

PHPerでフロントエンドも開発する方に、Day.jsは向いてるかもしれません。

また、他の日付ライブラリと比較して軽量ライブラリであるというのも非常に強みです。

Vue.js(Vue3)でのDay.js使用方法

Day.jsのインストール

npmでのインストール方法です

npm install dayjs --save

Day.jsをvue.jsへ読ませる方法(inject/provide使用)

vue.jsをマウントする処理にて、以下のようにprovideへ設定してあげると、便利に使えます。

app.config.globalPropertiesへ渡して使う方法もあるのですが、それはdayjsの呼び出し方が少し手間になるので、provide/injectで考えたほうがベターだと思います。

main.js

import {createApp} from 'vue'
import App from './App.vue'
// dayjsのインポート
import dayjs from 'dayjs'
// ロケールのインポート
import 'dayjs/locale/ja'

// ロケール設定
dayjs.locale('ja')

const app = createApp({
    components: {
        App
    },
})
// dayjsをprovideに設定する
app.provide('dayjs', dayjs)
app.mount('#app')

App.vue

<script setup>
import {inject} from 'vue'
// injectからdayjsを呼び出す
const dayjs = inject('dayjs')
console.log(dayjs().format('YYYY年M月DD日'))
</script>

<template>
今日は{{dayjs().format('YYYY年M月DD日')}}です。
</template>

Day.jsをvue.jsへ読ませる方法(globalProperties使用)

なお、globalPropertiesに設定した場合は以下のようになります。

VueのインスタンスのglobalPropertiesにdayjsを設定します。

ただし、globalPropertiesに定義する場合、コンポーネントのscript内部では、getCurrentInstanceからdayjsを呼び出して使用しないといけません。少し面倒ですね。

しかし一方で、メリットも存在し、コンポーネントでdayjsの関数を定義しなくてもtemplate側でdayjsが使用できるメリットも存在します。

結局は、inject/provide方式のほうがシンプルで良い気がします。

main.js

import {createApp} from 'vue'
import App from './App.vue'
// dayjsのインポート
import dayjs from 'dayjs'
// ロケールのインポート
import 'dayjs/locale/ja'

// ロケール設定
dayjs.locale('ja')

const app = createApp({
    components: {
        App
    },
})
// dayjsをglobalPropertiesに設定する
app.config.globalProperties.dayjs = dayjs
app.mount('#app')

App.vue

<script setup>
import {getCurrentInstance} from 'vue'
const app = getCurrentInstance()
// dayjsをglobalPropertiesから取得
const dayjs = app.appContext.config.globalProperties.dayjs

console.log(dayjs().format('YYYY年M月DD日'))
</script>

<template>
<!--この関数は、script側で定義しなくても動作します-->
今日は{{dayjs().format('YYYY年M月DD日')}}です。
</template>

Day.jsプラグインの読ませ方

day.jsにはプラグインが存在します。
日付が特定日より前かどうかなど、便利関数がプラグインとして定義されています。

それらプラグインの読み込ませ方は、以下のように、dayjsをインポートした後、extendsして設定します。

main.js

import {createApp} from 'vue'
import App from './App.vue'
// dayjsのインポート
import dayjs from 'dayjs'
// ロケールのインポート
import 'dayjs/locale/ja'

// ロケール設定
dayjs.locale('ja')
// ↓使用するプラグインを追加
dayjs.extend(require('dayjs/plugin/isBetween'))
dayjs.extend(require('dayjs/plugin/isSameOrAfter'))
dayjs.extend(require('dayjs/plugin/isSameOrBefore'))

const app = createApp({
    components: {
        App
    },
})
// dayjsをprovideに設定する
app.provide('dayjs', dayjs)
app.mount('#app')

以下のように、プラグインを使用することができます

import {inject} from 'vue'
const dayjs = inject('dayjs')

// 2021年10月1日は、2021年9月15日と2021年11月1日の間にあるかどうかtrue/falseで返却される
console.log(dayjs('2021-10-01').isBetween('2021-09-15', '2021-11-01')) // true

// 2021年10月1日は、2021年10月11日より後なのかtrue/falseで返却される
console.log(dayjs('2021-10-01').isSameOrAfter('2021-10-11'))　// false

// 2021年10月1日は、2021年10月11日より前なのかtrue/falseで返却される
console.log(dayjs('2021-10-01').isSameOrBefore('2021-10-13'))　// true

まとめ

いかがでしたでしょうか。JavaScriptの日付操作ライブラリである、Day.jsをVue.jsで使用する方法についてまとめました。 皆様の開発のお役に立てたら光栄です。ありがとうございました。

【Vue.js】Composition APIを使用した共通関数の作り方

Vue.js フロントエンド開発

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。

Composition APIを共通化する際に、参考としてください。

mixisは共通関数としてどうなのか

vue.jsには、mixinsという機能がありますが、mixinsには以下のデメリットがあります。

  • Options APIで動く想定なのでComposition APIでは使いにくい。
  • オブジェクト指向的に考えると複数のインスタンスを持てない。
  • グローバル定義した場合、どこで定義されているのかわかりにくい。

共通関数としては不便ですね。使い勝手がよくありません。

vue.jsで共通関数をどう作るか

export default functionで関数を外出ししてしまいましょう。
関数を外出しすると、reactiveを使用してオブジェクト指向のメンバ変数のように扱うこともできます。

仮に、ユーザー情報をセットする処理、ユーザー情報を取得する処理、ユーザー情報を編集する処理を定義し
returnします。

/functions/userHelper.js

import {reactive} from 'vue'
export default function (){
    /**
     * メンバ変数的なリアクティブデータです
     */
    const user = reactive({
        id:0,
        name:'',
    })
    /**
     * ユーザーをセットします
     * @param data
     */
    const setUser = (data) => Object.keys(data).forEach(key => user[key] = data[key])
    /**
     * ユーザーをゲットします
     */
    const getUser = () => user
    /**
     * ユーザーを編集します
     * @returns {string}
     */
    const editUser = () => user.name = user.name + 'さん'
    return {
        setUser,
        getUser,
        editUser,
    }
}

呼び出す側のコンポーネントでは、このようにimportで関数を読み込んで、分割代入で関数を定義することが可能です。

<script setup>
import UserHelper from '../../functions/UserHelper'
// 分割代入で関数定義
const {getUser,setUser,editUser} = UserHelper()
// 値をセット
setUser({id:1,name:'ひかきん'})
// 値を取得してみる
console.log(getUser()) // {id: 1, name: 'ひかきん'}
// 値を編集してみる
console.log(editUser())
// 再び値を編集してみる
console.log(getUser()) // {id: 1, name: 'ひかきんさん'}
</script>

共通関数のメリット

Composition APIで使用可能

Composition APIで使用可能になったのは、かなり大きいメリットですね。
Composition APIiを使用すると、かなりコードがスッキリしますので、
それに合わせて共通関数を使用したいです。

オブジェクト指向的に考えられる

このような共通関数を作ると、オブジェクト指向で言うと、別インスタンスで共通関数を作成することが可能になります。

export default functionを、importして関数を使用しているので、関数名を別名定義すれば他の関数として使用可能です。

メンバ変数を持たせて共通関数を別定義したい場合にたいへん便利ですね。

<script setup>
import UserHelper from '../../functions/UserHelper'
// 別定義としてインポート
import UserHelper2 from '../../functions/UserHelper'
const {getUser,setUser,editUser} = UserHelper()
// 関数名を別名定義できる
const {getUser:getUser2,setUser:setUser2,editUser:editUser2} = UserHelper2()

setUser({id:1,name:'ひかきん'})
console.log(getUser())
console.log(editUser())
console.log(getUser())


setUser2({id:2,name:'ひかる'})
console.log(getUser2())// {id: 2, name: 'ひかる'}
console.log(editUser2())
console.log(getUser2())// {id: 2, name: 'ひかるさん'}
</script>

どこから呼び出したのか分かりやすくなる

mixinsはどこから処理を呼び出したのかわからないことがデメリットでした。

しかし、このような共通関数を使用すれば、どこから定義された処理なのか一目瞭然となり、可読性が上がります。

まとめ

以上です。Composition APIを使用するに場合は、ぜひともこのような共通関数を使用していきたいですね。

皆様の開発のお役に立てたら光栄です。ありがとうございました。

【Vue.js】vue-routerでPOSTやGETと同じようなパラメーターの渡し方

Vue.js フロントエンド開発

はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

今日はPHPなどのサーバーサイド言語でよく使う、POSTやGETのようなパラメーターの渡し方をVue.jsのvue-routerではどのように処理するのかまとめていきたいと思います。

ルーティング設定

今回の記事で、使用するルーティングをまず公開します。
main.jsなどで設定する、ルーティング設定です。
Topのページがあって、Userのページに遷移するイメージです。

ファイル名を router.js とします。

import {createRouter,createWebHashHistory} from 'vue-router'

export default createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/root',
            name:'top',
            component: () => import(
                /* webpackChunkName: "routes" */
                /* webpackMode: "lazy-once" */
                `../pages/Top/Top.vue`
                )
        },
        {
            path:'/users',
            name:'user',
            // props:true,
            component: () => import(
                /* webpackChunkName: "routes" */
                /* webpackMode: "lazy-once" */
                `../pages/User/Index.vue`
                )
        },
    ]
})

GET渡し

サーバーサイド言語で言うGETのようなパラメータ渡しの方法です。

画面遷移するrouter-link :to=の値に、queryを設定すれば、それがパラメーターとなります。

下記の例は、トップページからhttp://localhost/#/user?id=1と、GETのような値で渡す方法です。

/pages/Top/Top.vue

<template>
    <router-link :to="{name:'user',query:{id:1}}">to user</router-link>
</template>

/pages/User/Index.vue

<script setup>
import {useRoute} from 'vue-router'
const route = useRoute()
const { id } = route.query
// Top画面で設定した http://localhost/#/user?id=1　のidの値を取得できる
console.log(id)
</script>

POST渡し

POSTのように、URLのクエリには値を出力したくないが、画面遷移時にパラメータを渡したい場合です。

以下のようにparamsへオブジェクトを渡したものが値となります。

/pages/Top/Top.vue

<template>
   <!--queryはGET、paramsはPOST的な渡し方-->
    <router-link :to="{name:'user',params:{id:1}}">to user</router-link>
</template>

/pages/User/Index.vue

<script setup>
import {useRoute} from 'vue-router'
const route = useRoute()
const { id } = route.params
console.log(id)
</script>

コンポーネントのパラメーターに値を渡したい場合

もしも、コンポーネントのpropsの値を渡したい場合はどうすればいいのでしょうか。

まず、ルーティングのpropsをtrueに設定する必要があります。

router.js

import {createRouter,createWebHashHistory} from 'vue-router'

export default createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/root',
            name:'top',
            component: () => import(
                /* webpackChunkName: "routes" */
                /* webpackMode: "lazy-once" */
                `../pages/Top/Top.vue`
                )
        },
        {
            path:'/users',
            name:'user',
            // コンポーネントにPOSTのような値を渡したければ、props:trueに設定
            props:true, 
            component: () => import(
                /* webpackChunkName: "routes" */
                /* webpackMode: "lazy-once" */
                `../pages/User/Index.vue`
                )
        },
    ]
})

値を送信する側は、POST的な渡し方と、特に変更はありません。

/pages/Top/Top.vue

<template>
    <!--queryはGET、paramsはPOST的な渡し方-->
    <router-link :to="{name:'user',params:{id:1}}">to user</router-link>
</template>

コンポーネントのpropsを見れば、値が渡されていることを確認できます。

/pages/User/Index.vue

<script setup>
const props = defineProps({
    id: String
})
console.log(props.id)
</script>

まとめ

以上になります。

Vue.jsのルーティングのパラメータ渡しは、PHPやJavaなどのサーバーサイド言語を経験していれば、わかりやすいですね。

開発の参考にしていただければと思います。