2024年4月19日金曜日

JavaScript – 配列内の最大値を取得する3つの方法

何が起こったか

最近、問題を解決している際に、JavaScriptで配列の最大値を取得する必要がありました。具体的には、LeetCode #300 Longest Increasing Subsequenceの問題に取り組んでいました。

しかし、JavaScriptはC#のLINQ やJavaのStream、Python 3の多機能なmax関数と比較すると、伝統的なforループによる比較が主流であるという印象がまだ残っているかもしれません。

そこで今日は、JavaScriptを使用して配列内の最大値を取得する3つの異なる方法をまとめてみましょう。


解決方法

解決方法1 – forループ

const arr = [12,20,8,44,31];
const max = arr[0];
for(let i=1; i<arr.length; i++){
    if(arr[i]>max){
        max = arr[i];
    }
}
確かに、これはおそらく最も一般的に使用されるアプローチです。配列の最初の要素を仮の最大値として設定し、forループを使用して各要素を比較する方法です。

ES6の機能がサポートされていない場合、この方法が唯一の選択肢です。constやletはES6の構文であるため、varに置き換えることを忘れないでください。


解決方法2 – Array.reduce

const arr = [12,20,8,44,31];
const max = arr.reduce((max, current) => {
    return current > max ? current : max;
}, arr[0]);  
このコードスニペットでは、ES6のreduce構文を使用して反復的な計算を行います。

この関数では、各要素が現在の最大値と比較されます。現在の要素が現在の最大値より大きい場合、新しい最大値となります。最終的には最大値が返されます。

初期値については、提供されていない場合、reduceは配列の最初の要素をデフォルト値として使用します。

解決方法3 – Spread構文とMath.Max

const arr = [12,20,8,44,31];
const max = Math.max(...arr); 

これは、ES6で導入されたSpread構文を利用した最も短い方法です。

メインの概念は、配列を個々の要素に展開して、それらをMath.Max関数の引数として渡すことです。Math.Max構文は任意の数の引数を受け入れるため、この組み合わせを効果的に使用できます。


2024年4月2日火曜日

C#.NET FTP操作パッケージ – FluentFTP

 何が起こったか

最近、私のプロジェクトで、クライアントの要件としてファイルをローカルマシンやデータベースではなくFTPサーバーに保存する必要性が発生しました。そのため、C#でFTPを簡単に操作する方法を調査し始めました。


以前、私のFTPに関する理解は手動でFileZillaを使用することに限られており、プログラムでの操作についてはまだ探求していませんでした。


FluentFTPの紹介

GitHubの作者によると、FluentFTPは.NETをベースにしたFTPとFTPS向けのツールで、ファイルのアップロード/ダウンロード、SSL/TLS接続、自動ディレクトリリストの解析、ファイルのハッシュ/検証、ファイルのパーミッション/CHMOD、FTPプロキシ、FXP転送、UTF-8サポート、Async/awaitサポート、PowerShellサポートなど、いくつかの一般的な操作をサポートしています。

さらに、外部依存関係を排除して完全にC#で書かれています。プロジェクトで使用するには、NuGetを介して簡単にダウンロードできます - NuGet Gallery | FluentFTP 48.0.3


一般的な機能

ここでは、プロジェクトで使用したいくつかの機能を紹介します(後で追加の紹介が提供される場合があります)。

機能のいずれかを使用する前に、接続を確立してください(C#のusingディレクティブにFluentFTPを含めることを忘れないでください)。


接続の確立


private static FtpClient createFtpClient() {
	FtpClient ftp = new FtpClient(ftpAddress, ftpPort);
	ftp.Credentials = new System.Net.NetworkCredential(ftpAcc, ftpPwd);

	ftp.Connect();
	return ftp;
} 
ここに共有接続を確立する簡単な方法があります。プロジェクトでFTPに関するさまざまな操作があるため、接続方法は抽出して独立して書かれています。

接続の詳細には以下が含まれます:
  • ftpAddress:FTPサーバーのIPアドレス(エイリアスも機能するようです)。
  • ftpPort:FTPサーバーのポート番号。
  • ftpAcc、ftpPwd:FTP接続のユーザーアカウントとパスワード。
また、Connectメソッドがあるので、Disconnectもあります。通常、使用後に接続を終了するために呼び出されます。


フォルダの作成

public static bool initDict() {
	bool result = false;
	try
	{
		FtpClient ftp = createFtpClient();
		result = ftp.CreateDirectory("pdf");

		ftp.Disconnect();
	}
	catch (Exception ex) {
		throw ex;
	}

	return result;
} 
ftp.CreateDirectory:指定したディレクトリが存在しない場合、作成されます。

これは複数のレベルを作成するのにも役立ちます。たとえば、ftp.CreateDirectory("pdf\\test")は、ルートに「pdf」というフォルダを作成し、その下に「test」というサブフォルダを作成します。


ファイルのアップロード(単一ファイル)

public static bool uploadPdf(HttpPostedFileBase file) {
	bool result = false;
	FtpClient ftp = createFtpClient();
	
	byte[] fileBytes;
	using (BinaryReader reader = new BinaryReader(file.InputStream))
	{
		fileBytes = reader.ReadBytes(file.ContentLength);
	}

	FtpStatus ftpStatus = ftp.UploadBytes(fileBytes, "pdf\\" + file.FileName);

	ftp.Disconnect();
	return result;
}

このセクションでは、UploadBytesメソッドを使用してバイト配列をアップロードします。提供された例では、PDFファイルをFTPサーバーの「pdf」フォルダに送信します。

さらに、FtpStatusには3つの可能な値があります:失敗の場合は0、成功の場合は1、スキップされた場合は2です。 「スキップされた」ステータスは、ファイルがすでにFTPサーバーに存在する場合に発生します。


FTPディレクトリにディレクトリ全体をアップロード

public static void uploadDir(string uploadDir, string desDir) {
	FtpClient ftp = createFtpClient();

	ftp.CreateDirectory(desDir);
	List<FtpResult> res = ftp.UploadDirectory(uploadDir, desDir);
	ftp.Disconnect();
}
ftp.UploadDirectory:ローカルディレクトリ全体をFTPサーバーの指定したディレクトリにアップロードします。

このメソッドは、アップロードプロセスの各ファイルの状態を含むFtpResultオブジェクトのリストを返します。


単一ファイルのダウンロード

public static byte[] downloadPdf(string pdfName) {
	byte[] arr;
	FtpClient ftp = createFtpClient();

	bool res = ftp.DownloadBytes(out arr, "pdf\\" + pdfName);
	ftp.Disconnect();

	return arr;
}

outパラメータを使用してファイルをダウンロードし、byte[]を提供し、ファイルの場所を指定します。

この例では、以前にアップロードしたPDFをダウンロードします。


現在のディレクトリをリストします

/// <summary>
/// 現在のディレクトリの内容をリストします(再帰的ではなく)。
/// </summary>
public void ListAll()
{
    FtpClient ftp = CreateFtpClient();

    foreach (var item in ftp.GetListing())
    {
        Debug.WriteLine(item.ToString());
    }

    ftp.Disconnect();
}

2024年3月28日木曜日

EdgeでIEモードを有効にした後、F12(開発者ツール)を開く方法は次の通りです

何が起こりましたか?


最近、プロジェクトが完成に近づき、展開の準備を進めている中で、大きな問題に遭遇しました。FTP関連の問題を解決した直後、クライアントがシステムがInternet Explorer(IE11互換モードでのEdge)に依存していることを伝えていなかったことが判明しました。

これは大きな課題となり、さまざまなパッケージをダウングレードしたり代替手段を探したりする作業に精を出しています。将来的には、各問題がどのように解決されたかを1つずつ紹介する時間を取ります。

今日は、Microsoft EdgeでIEモードを有効にしてその開発者ツールを開くことに焦点を当てましょう。


EdgeでのInternet Explorer互換モード

2022年6月にInternet Explorer(IE)のすべてのサポートが終了したにも関わらず、エンジニアたちはその影響から完全に逃れたわけではありません。

実際、EdgeはIE互換モードで開くことができます。通常、IE11の互換性をエミュレートします。この機能により、古いプログラム(銀行や政府機関などで使用されているものなど)がどれほど時代遅れでも生き残ることができました。

しかし、私たち開発者にとっては悪夢です(後で詳細に説明する価値があるかもしれません)。EdgeとChromeは同じ基盤エンジンを使用していますが、IEはまったく異なるストーリーです。

(確かに、これは悪名高いオプションです!)


適切な規約に従って、Internet Explorerでウェブページを開いていると、予期せぬ問題に遭遇しました。F12を押しても、開発者ツールが空白の画面を表示し、要素の選択さえも不可能になりました。

解決策を探る中で、Googleに頼り、IEモードでは開発者ツールにアクセスするには別の呼び出しが必要であることを発見しました。その鍵はIEChooser.exeというユーティリティにあります。

IEChooser.exe

開く方法は2つありますが、どちらも同じコマンドを使用します。

%systemroot%\system32\f12\IEChooser.exe



最初の方法は、「Windowsキー + R」のショートカットで「実行」ダイアログを開き、次にコマンドを貼り付けて実行することです。



あるいは、コマンドを直接検索ボックス(拡大鏡)に貼り付けることもできます。 - Windows11



この時点で、IE互換性で開いたすべてのページのリストが表示されます。興味のあるページを選択してください。



ミッション完了! おめでとうございます。これで、別の取り返しのつかない旅に参加しました(IEの領域にはさまざまな古代の問題が待ち受けています)。


2024年3月18日月曜日

Windowsで利用可能なすべてのPythonバージョンをリストする方法

何が起こりましたか?


ある日、オンラインチュートリアルに従って安定したDiffusionを設定しようとしていると、Pythonバージョン3.10.6が必要であるという要件に出会いました。すぐにコンピューターをチェックすると、私のバージョンが正しくないことがわかりました。私は3.9を使用していました...


Windows 上のすべての Python バージョンをリストする

基本的な Python コマンドを使用します。まず、すべてのパラメーターをリストします。
py -h # Pythonのヘルプコマンド

⬇そして、次のようになります
py-h


ほとんどのコマンドは起動に関連していますが、最後に次のようなものがあります:
  • -0 / –list: 利用可能なすべてのPythonバージョンをリストします。
  • -0p / –list-paths: 利用可能なすべてのPythonバージョンとそれらのパスをリストします。
興味深いことに、これらのコマンドには2つのバリエーションがあります。どちらかを選択できます( -0は –listと同じです)。


では、その動作を見てみましょう。
py-0_example

(*は現在のデフォルトバージョンを示します)

新しいバージョンは公式のPythonインストーラーを使用してインストールされており、古いバージョンはAnacondaを介して管理されていることがわかります。


デフォルトのバージョンを切り替えます

デフォルトのバージョンを切り替えるには、PATH(システムプロパティ > 詳細設定)で構成する必要があります。

PATHにより上位に表示されるバージョンがデフォルトに設定されます。

HTML属性classListの紹介:要素クラスの魔法使いになる

 classList

classListは、HTML5で新たに導入された属性で、DOM要素のDOMTokenListを返します。これは読み取り専用のリストで、要素のすべてのクラスを含んでいます。


さあ、試してみましょう!たとえば、次のようなdiv要素があるとします。「apple」、「pen」、「pineapple」という3つのクラスがあります。


<div id="testDiv" class=" apple pen pineapple">
  classList test
</div>

classList_example

⬆️上記のように、3つのクラスが表示されていることがわかります。次に、これらのクラスを操作する方法について説明しましょう。



対応するメソッド

classList属性には、クラスリストを操作するためのいくつかの関数が用意されています。これには以下が含まれます:
  • add: 新しいクラスを追加します。
  • remove: クラスを削除します。
  • replace: あるクラスを別のクラスに置き換えます。
  • toggle: クラスをトグルします - 存在する場合は削除し、存在しない場合は追加します。


// 上記の例から続ける
tarDiv.classList.add('orange')   // 新しいクラス - orangeを追加
tarDiv.classList.remove('apple') // appleを削除
tarDiv.classList.replace('pen','pencil') // penをpencilに置き換える
tarDiv.classList.toggle('pineapple')     // 存在する場合は削除します

皆さんはこの手順に従って実行し、結果を想像してみることができます。


⬇ 結果をステップバイステップで出力し、期待通りかどうかを確認してください。



クラスが存在するかどうかを確認するための関数もあります:
  • contains: 特定のクラスが存在するかどうかを示すブール値を返します。
tarDiv.classList.contains('apple')



複数のパラメーター - 複数のクラスの操作と強制

addとremoveの両方は、コンマで区切られた複数のクラス名を操作対象として受け入れることができます。
tarDiv.classList.add('orange', 'melon') 
tarDiv.classList.add('apple', 'pen') 



toggleも第二引数を受け入れます。forceはブール値です。

名前が示すように、forceがtrueに設定されている場合、クラスが存在しているかどうかに関係なく操作が強制されます。falseに設定されている場合、逆の方法で動作します - クラスは常に削除されます。
// クラスを強制的に追加する
tarDiv.classList.toggle('apple', true); // 存在していても、'apple'クラスを追加します

// クラスを強制的に削除する
tarDiv.classList.toggle('apple', false); // もはや存在しなくても、'apple'クラスを削除します 


2024年3月17日日曜日

重要なCSSプロパティ - Displayの紹介、display:noneにとどまっているのですか?

 "display"プロパティとは、具体的には何ですか?

"display"プロパティは、要素がどのように表示されるかを制御するCSSの重要な属性です。

より技術的な言葉で言えば、指定された要素ボックスがどのようにレンダリングされるかを制御し、全体のレイアウトに大きな影響を与えます。


よく使われるdisplayの値は以下の通りです:

  • none: これはおそらくみんなにとって最も馴染み深いものです。要素を非表示にします。
  • block: 要素をブロックレベルの要素としてレンダリングし、親要素の全幅を占有します。次のレイアウトは次の行で開始されます。
  • inline: インライン要素は同じ行に表示され、コンテンツに必要な幅のみを占有します。
  • inline-block: インライン要素とブロック要素の特性を併せ持ちます。要素は同じ行に表示されますが、幅と高さを設定することができます。
  • flex: フレックスコンテナーを確立し、フレックスレイアウトモデルを使用してそれ内のアイテムの柔軟な配置を可能にします。
  • grid: グリッドコンテナーを作成し、グリッドレイアウトモデルを使用して強力な2次元のレイアウトを可能にします。
  • table: HTMLの <table> 要素のように振る舞い、要素をテーブル要素に変換し、関連する table-row 要素と table-cell 要素を持たせます。

これらの異なるdisplay値は、ウェブページ内の要素のレイアウトと配置を制御する多様な方法を提供します。

以下は、block、inline、inline-blockの違いの例です。


See the Pen Untitled by story zyra (@story-zyra) on CodePen.

⭐ 実際、<div> 要素のデフォルトの表示値は block です。そのため、自然に改行を起こし、親コンテナの全幅を占有します。

2024年3月16日土曜日

テキストエリア入力のプレースホルダーに改行を追加する方法

何が起こりましたか?



最近、Chart JS を探求していて、いくつかの実験のための機能を作成しようと考えました。

しかし、プレースホルダーテキストの改行に関する問題に遭遇しました。

なぜ ' \n ' 改行文字がプレースホルダーの書式設定に機能しないのでしょうか?

結局のところ、これはプログラミングコミュニティで広く使用されているテクニックですよね?

⬇こちらで試すことができます


See the Pen textarea_placeholder_test by story zyra (@story-zyra) on CodePen.

(中国語での意味は:改行したいです! 改行、改行)


少し検索した結果、解決策をついに見つけました!
それらはそれぞれ "&#13;""&#10;" です。


彼らはそれぞれ次のASCIIコードです:
LF(改行):ASCIIコード10で、改行を表します。= \n
CR(キャリッジリターン):Enterキーを押す効果と類似 = \r、ASCIIコード13です。

したがって、元の \r\n はこれらのコードを使用して置換できます。


それでは、実際にどのように機能するか見てみましょう。

See the Pen textarea_placeholder_asciicode by story zyra (@story-zyra) on CodePen.


JavaScript – 配列内の最大値を取得する3つの方法

何が起こったか 最近、問題を解決している際に、JavaScriptで配列の最大値を取得する必要がありました。具体的には、 LeetCode #300 Longest Increasing Subsequence の問題に取り組んでいました。 しかし、JavaScriptはC#の ...