OmniAICreator/Qiita-1.07M huggingface dataset:
Flutter環境構築(Windows)_2024/08/30



## VScode インストール

https://code.visualstudio.com/download

## VSCodeの拡張機能にあるFlutterをインストール
```
Dart-Code.flutter
```
そのほかに入れた便利拡張機能
```
PKief.material-icon-theme
formulahendry.auto-close-tag
formulahendry.code-runner
pranaygp.vscode-css-peek
smelukov.vscode-csstree
dNk.halfscroll
vincaslt.highlight-matching-tag
ecmel.vscode-html-css
bradgashler.htmltagwrap
oderwat.indent-rainbow
MS-CEINTL.vscode-language-pack-ja
glenn2223.live-sass
esbenp.prettier-vscode
shardulm94.trailing-spaces
```

## Gitのインストール＋環境設定

https://gitforwindows.org/

### システムの詳細設定を開く
![240830_01_システムの詳細設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222234/79a9a2de-c6c4-4e50-394e-a28744b971de.png)

### 環境変数を設定
画面下部のシステム環境変数を編集し、Gitのインストール先フォルダ（C:\Program Files\Git\bin）（C:\Program Files\Git\cmd）を設定


## Android Studio インストール
下記を参考にさせていただきました。ありがとうございます！
こちらの初期設定までを実施。「2. Hello Worldの表示」は不要。

https://qiita.com/okada_ryo/items/0434ccf8d66f7859f75c

## Android toolchain
Android Studio を起動し、SDK Manager を起動

![240810_Android_Studio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222234/748254ff-6af0-0d65-34af-1367026ddd09.png)

SDK Tools を選択し、下記画面にして、
Android SDK Command-line Tools をチェックし、OK押して、
Android toolchain をインストール

![240810_Android_toolchain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222234/417e095a-ef17-e27f-5590-cef2f1ee90c9.png)

## Visual Studio インストール
下記からVisual Studioをインストール
このときに "Desktop development with C++"もインストールすること。
https://visualstudio.microsoft.com/downloads/ 

もし"Desktop development with C++"のインストールを忘れてしまったら、インストールプログラムを起動後に下記の「変更」を押すこと
![240830_02_VisualStudioインストール後にやる場合.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222234/d1e76a9d-e628-2248-cead-3e00962e6abe.png)


## FlutterSDKのインストール

VSCodeを開く→Ctrl+Shift+P からコマンドパレットを開き、 flutter new project を選択
Download SDK を実行
進捗はVisual Studio Code 画面下部にある Output タブを参照。
Gitのパスが通っていない場合はここでエラーが出る。

## FlutterSDKのパスを環境変数に追加

- Win+R→cmd からコマンドプロンプトを起動し、下記コマンドにてパスが通っていることを確認
```bat
flutter -v
```
## Flutterプロジェクトを新規作成
```bat
rem プロジェクト作成先のフォルダに移動
cd flutter
rem "sample"プロジェクトを新規作成
flutter create sample
```
![240810_flutterプロジェクト作成時.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222234/5a89a7dd-b5f0-f9ce-1fbe-273b56dbb672.png)

## 具体的な進め方
```bat
rem libフォルダ内にmodelsフォルダを作成
mkdir lib\models
rem Windows版の場合、niコマンドでファイルを新規作成
ni lib\models\hoge.dart
```

## flutter run 実行
もし環境設定に不備がある場合、flutter run コマンドでプロジェクトを起動しようとして失敗する。
```bat
flutter run
```
![240810_flutter_run実行時.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222234/6c92d19a-8495-f6e4-4f27-3cc210d723b0.png)
ここでは flutter doctor コマンドの実行が要求される。
要するに問題点を特定してくれる。すごい。


## Flutter doctor 実行
```bat
flutter doctor
```

![240810_flutter_doctor実行時.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222234/bc18657c-be02-fd61-81ba-7e7155336d18.png)

[☑]はOKなやつ。[！]とか[ｘ]がダメなやつ。
インクリメンタルサーチを実装してみた。

# はじめに
インクリメンタルサーチは、ユーザーが検索ボックスに入力するたび、検索結果がリアルタイムで更新される機能です。これにより、ユーザーは検索結果を即座に確認できるため、よりスムーズな検索体験を提供できます。本記事では、LaravelとjQueryを使用してインクリメンタルサーチを実装する方法を紹介します。

### 1. データベースの設定
まず、検索対象となるデータベーステーブルを準備します。今回は、usersテーブルを例に、ユーザー名やメールアドレスを検索対象とします。

### 2. ルートの設定
検索リクエストを処理するために、routes/web.phpにルートを追加します。

```php
use App\Http\Controllers\UserController;

Route::get('/search', [UserController::class, 'search'])->name('user.search');
```
このルートは、検索処理を行うコントローラーにリクエストを転送します。

### 3. コントローラーの設定
次に、検索処理を行うコントローラーを設定します。UserControllerを使って検索機能を実装します。

```php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class UserController extends Controller
{
    public function search(Request $request)
    {
        $query = $request->input('query');

        // 検索条件を定義
        $users = User::where('name', 'LIKE', "%{$query}%")
                     ->orWhere('email', 'LIKE', "%{$query}%")
                     ->get();

        // 結果をJSONで返す
        return response()->json($users);
    }
}
```
このメソッドでは、ユーザーが入力したクエリに基づいてusersテーブルを検索し、その結果をJSON形式で返します。

4. ビューの作成
次に、検索フォームを含むビューを作成します。resources/views/search.blade.phpというファイルを作成し、以下のコードを記述します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>インクリメンタルサーチ</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>
        <h1>ユーザー検索</h1>
        <input type="text" id="search" placeholder="ユーザー名またはメールアドレスを入力">
        <ul id="results"></ul>
    </div>

    <script>
        $(document).ready(function() {
            $('#search').on('keyup', function() {
                let query = $(this).val();

                $.ajax({
                    url: "{{ route('user.search') }}",
                    type: "GET",
                    data: {'query': query},
                    success: function(data) {
                        $('#results').empty();
                        if (data.length > 0) {
                            $.each(data, function(index, user) {
                                $('#results').append('<li>' + user.name + ' (' + user.email + ')</li>');
                            });
                        } else {
                            $('#results').append('<li>結果が見つかりません</li>');
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>
```
このビューでは、ユーザーが検索ボックスに文字を入力するたびに、jQueryのkeyupイベントが発生し、AJAXリクエストが送信されます。サーバーからのレスポンスに基づいて、検索結果が更新されます。

### 5. 動作の確認
ブラウザで/searchにアクセスし、検索フォームに名前やメールアドレスの一部を入力すると、インクリメンタルサーチが動作するはずです。

# まとめ
 LaravelとjQueryを使用してインクリメンタルサーチを実装する方法を紹介しました。この機能を使うことで、ユーザーはリアルタイムで検索結果を確認できるため、より快適な検索体験を提供できます。
 
 ぜひ、プロジェクトに導入してみてください！
【備忘録】実行計画・統計値の確認方法

## 実行計画とは
 - OracleでSQL文を実行する際に、DBが実行する一連の操作
 - 実行計画を分析することで、SQL文のメンテナンスが出来る
 （SQL文の実行速度を上げるなど）

 ## 統計値とは
  - テーブルやインデックス内で、どんな値が、どんな頻度で出現するのかをまとめた情報

## 実行計画・統計値の確認方法
 - 下記のSQL文について、実行計画・統計値を確認する方法は3パターンある
 - 実際に実行結果に基づく結果なのか、予測した結果なのかはパターンによって異なるので使い分ける必要がある
```
SELECT * FROM COMPANY WHERE NAME = '会社名A'
```

### 1.実行計画：予測値、統計値：予測値
```
EXPLAIN PLAN FOR SELECT * FROM COMPANY WHERE NAME = '会社名A'
SELECT * FROM TABLE(DBMS_XPLAN.DISPLAY()) ;
```
### 2.実行計画：実行値、統計値：予測値
```
SET SERAVEROUTPUT OFF
EXPLAIN PLAN FOR SELECT * FROM COMPANY WHERE NAME = '会社名A'
SELECT * FROM TABLE(DBMS_XPLAN.DISPLAY_CURSOR) ;
```

### 3.実行計画：実行値、統計値：実行値
```
SET SERAVEROUTPUT OFF
ALTER SESSION SET STATISTICS_LAVEL=ALL;
EXPLAIN PLAN FOR SELECT * FROM COMPANY WHERE NAME = '会社名A'
SELECT * FROM TABLE(DBMS_XPLAN.DISPLAY_CURSOR(FORMAT=>'ALL STATS LAST'))) ;
```

## 3つの確認方法の使い分けについて
 - SQL文を実行することでDBに負荷がかかる可能性が高い場合は1.を使用する
 - ただし、1.は実際の実行計画・統計値と異なる場合があるので参考程度に使用する
 - より正確なのは2.と3.
ODT ファイルとは？ODTファイルの開き方や復元方法

<strong><a href="https://x.gd/vC6QN">ODTファイルとは</a></strong>、Open Document Textの略で、オープンソースの文書フォーマットの一つです。Microsoft WordのDOCXファイルのようなもので、テキスト、表、画像などを含む文書を作成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3873918/eb2e25f9-354f-4782-72e3-12ed88a1d38b.png)

## ODTファイルのメリット
+ オープンソース: 特定のソフトウェアに依存せず、様々なソフトウェアで開くことができます。
+ 互換性: Microsoft Wordとの互換性も高く、多くのワープロソフトで開くことができます。
+ 軽量: DOCXファイルに比べてファイルサイズが小さく、扱いやすいです。

## ODTファイルが利用される場面

+ 論文: 大学や研究機関で作成される論文
+ レポート: 企業や学校でのレポート作成
+ 文書作成: 一般的な文書作成

## ODTファイルの開き方
ODTファイルを開くには、専用のODTファイルを開くソフトウェアまたは一般的なオフィススイートを使用します。

### 方法1．専用ソフトウェアでODTファイルを開く

1\. LibreOffice Writer: オープンソースのオフィススイートで、ODTファイルの編集に特化しています。
2\. Apache OpenOffice Writer: LibreOfficeと同様に、オープンソースのオフィススイートです。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3873918/556e79b2-29e7-f0bb-eff8-7f05d86e1050.png)


### 方法2．一般的なオフィススイートでODTファイルを開く

Microsoft Word: 最新バージョンのMicrosoft Wordでは、ODTファイルを開くことができます。
Googleドキュメント: GoogleドキュメントでもODTファイルを直接開くことができます。
ODTファイルの復元方法
ODTファイルが破損したり、誤って削除された場合でも、復元できる可能性があります。

## データ復元ソフトでODTファイルを復元する

<a href="https://x.gd/dC5u6">Tenorshare 4DDiG</a>などのデータ復元ソフトを使用することで、削除されたODTファイルを復元できる場合があります。
「<a href="https://x.gd/dC5u6">Tenorshare 4DDiG</a>」は世界中で使われていて人気のデータ復元ソフトで、削除されたODTファイルを簡単に復元することができます。
HDD、SSD、USBメモリやSDカードなど多くのデバイスに対応し、デバイスをスキャンして復元可能なファイルを見つけます。無料でダウンロードして、シンプルな操作でスキャンできますので安心して使うことができます。使い方は以下のとおりです。

1\. <a href="https://x.gd/dC5u6">Tenorshare 4DDiG</a>が起動後の画面で、復元したいODTファイルが存在するハードディスクを選択します。「スキャン」をクリックします。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3873918/6ccb1157-f753-f352-d7d5-ae36161ca865.png)

2\. 削除されたODTファイルを全てスキャンするのには時間がかかります。スキャン結果が出ましたら、ODTファイルの詳細をプレビューするためにお探しのファイルタイプをクリックすることができるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3873918/ef994ebd-b1c5-f0f6-2019-bad9becf9c6b.png)

3\. 右下の「復元」をクリックし、復元したODTファイルの保存場所を選択し、例えばOneDriveまたはGoogle Driveなどのクラウドディスクに保存することを検討してください。

## まとめ
<strong><a href="https://x.gd/vC6QN">ODTファイルは</a></strong>、オープンソースで互換性が高く、軽量な文書フォーマットです。様々なソフトウェアで開くことができ、<strong><a href="https://x.gd/dC5u6">データ復元ソフト</a></strong>を使用すれば、失われたファイルも復元できる可能性があります。

https://4ddig.tenorshare.com/jp/windows-data-recovery.html


## ODTファイルに関するよくある質問

<strong>質問：ODTファイルをPDFに変換したい場合は？ </strong>
回答：多くのPDF変換ソフトや、Microsoft Word、Googleドキュメントなどの機能を使って変換できます。

<strong>質問：ODTファイルで使えるフォントは？ </strong>
回答：<a href="https://x.gd/vC6QN">ODTファイルは</a>、一般的なフォントをほとんど使用できます。

<strong>ODTファイルのセキュリティは？ </strong>
回答：<a href="https://x.gd/vC6QN">ODTファイルは</a>、パスワードを設定してセキュリティを強化することができます。

:::note info
★<a href="https://x.gd/taiTO">Tenorshare 4DDiG  (Windows版) で無料データ復元</a>
★<a href="https://x.gd/pp5sw">Tenorshare 4DDiG (Mac版) で無料データ復元</a>
:::
WioLTE: Grove-LCD の使い方

「GR0-3350 I2C電圧変換」を使います。

![wiolte_i2c_aug30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a8b469b7-1ce4-7ad1-52d9-d1fd7cab3dd1.jpeg)

## プログラム

```text:grove-lcd.ino
// ---------------------------------------------------------------
//	grove-lcd.ino
//
//						Aug/30/2024
// ---------------------------------------------------------------
#include <WioLTEforArduino.h>
#include <Wire.h>
#include "rgb_lcd.h"

WioLTE Wio;

rgb_lcd lcd;

const int colorR = 255;
const int colorG = 255;
const int colorB = 0;

// ---------------------------------------------------------------
void setup() {
	SerialUSB.println("### I/O Initialize.");
	Wio.Init();
  
	SerialUSB.println("### Power supply ON.");
	Wio.PowerSupplyGrove(true);
	delay(500);

	Wire.begin();

	delay(500);
	// set up the LCD's number of columns and rows:
	lcd.begin(16, 2);
	delay(500);

	lcd.setRGB(colorR, colorG, colorB);
	lcd.setCursor(0, 0);
	lcd.print("			   ");
	delay(500);
	// Print a message to the LCD.
	lcd.setCursor(0, 0);
	lcd.print("Good, Morning!");
  
	delay(500);
}

// ---------------------------------------------------------------
void loop() {
	int it = millis()/ 1000;
	lcd.setCursor(0, 1);
	lcd.print(it);
   
	SerialUSB.printf("LED Sample %d\n",it);
  
	lcd.setCursor(0, 0);
	lcd.print("Good, Afternoon!");
	delay(3000);
}

// ---------------------------------------------------------------
```

## Arduino IDE
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/fd119fd0-5e1a-fae8-d5c9-e98a8fcd4fd3.png)
【ChatGPT＋Code Interpreter】でPDFの指定したページを抜き出します。


　どうも、カーブミラーです。

　今回は、PDFの指定したページを抜き出します

:::note info
本記事は、ChatGPT（有料版）
で行なっております。画像は
ありません。　あしからず。
:::

　まずは、ニュース。

　少し前から
　　話題に上っていたのですが、
　　　Googleが、
　　　　画像生成AI「Imagen 3」を
　　　　　発表しました。

　Image FXから
　　使えます。
　　　[Image FX](aitestkitchen.withgoogle.com/ja/tools/image…)

　スマホからやってみましたが、
　　ちゃんとした入力が
　　　できませんでした。

　ひと文字入れたら
　　すぐに確定されて
　　　漢字変換できませんでした。

　Promptをエディタなどで
　　書いてコピーしてから
　　　ペーストして送信すれば
　　　　使えます。
　　　　　メンドイ😅

　日本語ではダメでした。
　　英語のみです。
　　　もしかしたら私の指示が
　　　　足りなかった可能性も
　　　　　あります。

　汗をかいた女性を
　　描画したのですが
　　　本物の女性を撮ったような
　　　　現実的な画像が得られました。

　ほかの作品を見てみると
　　どうも描かれる女性のパターンが
　　　少なく感じました。
　　　　だいたい五人くらいに。

　Promptを入れたら
　　画像が得られる、というのは
　　　ありがたいのですが、
　　　　やり取りするわけでは
　　　　　ありませんので
　　　　　　私的には不満です。

　ChatGPTさんで
　　慣れてますからね😅
***
　さて、本題です。

　今回は、
　　PDFの指定したページを
　　　抜き出します。
　　
　ページを
　　抜き出すにあたり
　　　ページの指定方法に
　　　　注意が必要です。

　ページといえば、
　　１からはじまるものと
　　　無意識に思いますが、
　　　　実は、０からはじまるのです。

　だから
　　最初のページを抜き出すには
　　　１ではなく、
　　　　０を指定しなければ
　　　　　なりません。

　３ページもののPDFであれば
　　１、２、３ではなく、
　　　０、１、２になります。
***
　ここでは
　　３ページ目を
　　　抜き出します。

　ですから
　　指定するのは、２です。

　手順は
　❶GPT-4oであることを確認
　❷もとのPDFをアップロード
　❸Prompt入力
```Text:
CodeInterpreterで、このPDFからページ番号2を抜き出して、PDFにしてください。
コード不要。
必ず実行してください。
```
　❹送信
　❺ダウンロードリンクが表示

　これで
　　抜き出したページのPDFが
　　　ダウンロードできます。

　ちなみに
　　もとのPDFが３ページ分で、
　　　間違えて
　　　　３を指定した場合、
　　　　　最後のページである
　　　　　　２のページが
　　　　　　　抜き出されます。
　　　　　　　　ご注意を。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
JavaScriptの配列マスター講座：便利なメソッドたち



こんにちは、JavaScriptを学んでいる皆さん！今回は、配列を操作する上で非常に便利なメソッドについて詳しく見ていきましょう。これらのメソッドをマスターすれば、配列の扱いが格段に楽になりますよ。

## 1. Array.isArray() - 配列かどうかを確認

まずは、与えられた値が配列かどうかを判定する`Array.isArray()`メソッドから始めましょう。

```javascript
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray('こんにちは')); // false
```

このメソッドは、特に関数の引数が配列であることを確認する際に便利です。

## 2. concat() - 配列の結合

`concat()`メソッドを使うと、複数の配列を一つに結合できます。

```javascript
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4, 5, 6]
```

## 3. join() - 配列を文字列に変換

`join()`メソッドは、配列の要素を指定した区切り文字で連結した文字列を返します。

```javascript
let fruits = ['りんご', 'バナナ', 'オレンジ'];
console.log(fruits.join(', ')); // "りんご, バナナ, オレンジ"
```

## 4. indexOf() と lastIndexOf() - 要素の位置を検索

これらのメソッドは、指定した要素の位置（インデックス）を検索します。

```javascript
let numbers = [1, 2, 3, 2, 1];
console.log(numbers.indexOf(2)); // 1
console.log(numbers.lastIndexOf(2)); // 3
```

## 5. slice() - 配列の一部を切り出す

`slice()`メソッドは、配列の指定した部分を新しい配列として切り出します。

```javascript
let animals = ['犬', '猫', '鳥', 'うさぎ'];
console.log(animals.slice(1, 3)); // ['猫', '鳥']
```

## 6. splice() - 配列の一部を削除・置換

`splice()`メソッドは、配列の一部を削除したり、新しい要素を追加したりできます。

```javascript
let colors = ['赤', '青', '緑'];
colors.splice(1, 1, '黄', '紫');
console.log(colors); // ['赤', '黄', '紫', '緑']
```

## 7. reverse() - 配列の順序を逆転

`reverse()`メソッドは、配列の要素の順序を逆転させます。

```javascript
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]
```

## 8. sort() - 配列のソート

最後に、`sort()`メソッドを使って配列をソートする方法を見てみましょう。

```javascript
let fruits = ['バナナ', 'りんご', 'オレンジ'];
fruits.sort();
console.log(fruits); // ['オレンジ', 'バナナ', 'りんご']
```

数値のソートには注意が必要です：

```javascript
let numbers = [10, 2, 5, 1, 9];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 5, 9, 10]
```

## まとめ

これらのメソッドを使いこなすことで、配列の操作がより簡単かつ効率的になります。実際にコードを書いて試してみることをおすすめします。

練習問題：
1. 2つの配列を結合し、重複を除いた新しい配列を作成する関数を書いてみましょう。
2. 文字列の配列を受け取り、最も長い文字列を返す関数を作成してください。

これらの問題に挑戦して、配列メソッドの理解を深めてください。それでは、Happy Coding!
Rails7後からimportmapでBootstrap5を導入するで大いに躓いた

公式や他の記事をみて、以下をおこなった。

```bash
bin/importmap pin bootstrap 
```

まず、application.jsのimport"popper"でimportに関係するエラー
そうだよね、"@popperjs/core"という名前でpinしているんだもんな、で

```
pin "@popperjs/core", to: "popper.js", preload: true
```
を
``` 
pin "popper", to: "popper.js", preload: true
```
に変更

次はpopperがbootstrapで見つからないエラー
他のページをみてpin先をcdnに変えたりなど頑張った。
```
pin "popper", to: "popper.js", preload: true
```

結局application.jsのimportの順番を
```
import "bootstrap";
import "popper";
```

から

```
import "popper";
import "bootstrap";
```

で無事解決。
でもトラップ多すぎだな。特に初心者はきつい
JavaScriptの配列：便利なメソッドとテクニック

こんにちは、JavaScriptを学んでいる皆さん！今回は、配列の強力な機能と便利なメソッドについて詳しく見ていきましょう。

## 1. Array(配列)の基本

配列は複数の値をまとめて扱うことができるデータ構造です。JavaScriptでは、以下のように配列を作成できます：

```javascript
let fruits = ['りんご', 'バナナ', 'オレンジ'];
```

## 2. 便利な配列メソッド

### push() と pop()

`push()`メソッドは配列の末尾に要素を追加し、`pop()`メソッドは末尾の要素を削除して返します。

```javascript
fruits.push('いちご');  // ['りんご', 'バナナ', 'オレンジ', 'いちご']
let lastFruit = fruits.pop();  // lastFruit = 'いちご'
```

### join()

`join()`メソッドは配列の要素を指定した区切り文字で連結した文字列を返します。

```javascript
console.log(fruits.join(', '));  // "りんご, バナナ, オレンジ"
```

### indexOf() と lastIndexOf()

これらのメソッドは、指定した要素の位置（インデックス）を検索します。

```javascript
console.log(fruits.indexOf('バナナ'));  // 1
```

### slice()

`slice()`メソッドは配列の一部を切り出して新しい配列を作成します。

```javascript
let someFruits = fruits.slice(1, 3);  // ['バナナ', 'オレンジ']
```

### splice()

`splice()`メソッドは配列の一部を削除したり、新しい要素を追加したりします。

```javascript
fruits.splice(1, 1, 'キウイ');  // 'バナナ'を'キウイ'に置き換え
```

## 3. 高度な配列操作

### map()

`map()`メソッドは各要素に対して同じ操作を行い、新しい配列を作成します。

```javascript
let upperFruits = fruits.map(fruit => fruit.toUpperCase());
```

### filter()

`filter()`メソッドは条件に合う要素だけを抽出して新しい配列を作成します。

```javascript
let longFruits = fruits.filter(fruit => fruit.length > 5);
```

### reduce()

`reduce()`メソッドは配列の要素を累積的に処理します。

```javascript
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, cur) => acc + cur, 0);  // 15
```

## まとめ

これらのメソッドを使いこなすことで、配列を効率的に操作できます。実際にコードを書いて試してみることをおすすめします。次回は、オブジェクトについて詳しく見ていく予定です。それでは、Happy Coding!
JavaScriptの配列マスター：基本から応用まで

 
こんにちは、JavaScriptを学んでいる皆さん！今回は、プログラミングの基本的かつ強力なデータ構造である「配列（Array）」について詳しく見ていきましょう。

## 1. 配列の基本

配列は、複数の値をひとまとめにして扱うことができるデータ構造です。JavaScriptでは、以下のように配列を作成します：

```javascript
let fruits = ['りんご', 'バナナ', 'オレンジ'];
```

配列の各要素には、インデックス（添字）を使ってアクセスできます：

```javascript
console.log(fruits[0]); // 'りんご'
console.log(fruits[1]); // 'バナナ'
```

## 2. 配列の操作

### 要素の追加

配列の末尾に要素を追加するには `push()` メソッドを使います：

```javascript
fruits.push('いちご');
console.log(fruits); // ['りんご', 'バナナ', 'オレンジ', 'いちご']
```

### 要素の削除

配列の末尾から要素を削除するには `pop()` メソッドを使います：

```javascript
let lastFruit = fruits.pop();
console.log(lastFruit); // 'いちご'
console.log(fruits);    // ['りんご', 'バナナ', 'オレンジ']
```

### 配列の結合

2つ以上の配列を結合するには `concat()` メソッドを使います：

```javascript
let moreFruits = ['キウイ', 'マンゴー'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ['りんご', 'バナナ', 'オレンジ', 'キウイ', 'マンゴー']
```

## 3. 配列の反復処理

配列の要素を順番に処理するには、いくつかの方法があります：

### for ループ

```javascript
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
```

### forEach メソッド

```javascript
fruits.forEach(function(fruit) {
    console.log(fruit);
});
```

### map メソッド

各要素に対して同じ操作を行い、新しい配列を作成します：

```javascript
let upperFruits = fruits.map(function(fruit) {
    return fruit.toUpperCase();
});
console.log(upperFruits); // ['りんご', 'バナナ', 'オレンジ']
```

## 4. その他の便利なメソッド

- `indexOf()`: 指定した要素のインデックスを返します
- `includes()`: 指定した要素が配列に含まれているかをチェックします
- `slice()`: 配列の一部を切り出して新しい配列を作成します
- `splice()`: 配列の一部を削除したり、新しい要素を追加したりします

## まとめと練習問題

配列は、多くのデータを効率的に管理するのに役立ちます。以下の練習問題に挑戦して、理解を深めましょう：

1. 数字の配列を作成し、すべての要素の合計を計算する関数を作ってください。
2. 文字列の配列から、5文字以上の単語のみを含む新しい配列を作成してください。
3. 2つの配列を結合し、重複する要素を削除する関数を作成してください。

これらの練習問題を解くことで、配列の扱い方をしっかり身につけることができます。次回は、オブジェクトについて詳しく見ていく予定です。それでは、Happy Coding!
JavaScriptマスター への道: 制御構造と条件分岐を極める

こんにちは、プログラミング学習者の皆さん！今回は、JavaScriptの重要な概念である制御構造と条件分岐について詳しく解説します。これらの概念を理解することで、より柔軟で効率的なコードが書けるようになりますよ。

## 1. if文による条件分岐

if文は、特定の条件が真（true）の場合にのみ、特定のコードブロックを実行します。

```javascript
let age = 20;
if (age >= 18) {
    console.log("成人です");
}
```

この例では、ageが18以上の場合にのみ"成人です"と表示されます。

## 2. if-else文

if-else文を使うと、条件が偽（false）の場合の処理も指定できます。

```javascript
let temperature = 25;
if (temperature > 30) {
    console.log("暑いです");
} else {
    console.log("快適です");
}
```

## 3. else if を使った複数の条件分岐

複数の条件を順番にチェックしたい場合は、else if を使います。

```javascript
let score = 75;
if (score >= 90) {
    console.log("優");
} else if (score >= 70) {
    console.log("良");
} else if (score >= 50) {
    console.log("可");
} else {
    console.log("不可");
}
```

## 4. switch文

多くの条件分岐がある場合、switch文を使うとコードが読みやすくなります。

```javascript
let day = "月";
switch (day) {
    case "月":
    case "火":
    case "水":
    case "木":
    case "金":
        console.log("平日です");
        break;
    case "土":
    case "日":
        console.log("週末です");
        break;
    default:
        console.log("無効な曜日です");
}
```

## 5. 三項演算子

簡単な条件分岐なら、三項演算子を使うとコードを短く書けます。

```javascript
let isRaining = true;
let action = isRaining ? "傘を持つ" : "傘は不要";
console.log(action);
```

## まとめと練習問題

これらの制御構造を使いこなすことで、様々な状況に対応できるプログラムが書けるようになります。以下の練習問題に挑戦して、理解を深めましょう：

1. ユーザーの年齢を受け取り、"未成年"、"成人"、"シニア"（65歳以上）を判定するプログラムを書いてください。

2. 1から7までの数字を受け取り、対応する曜日を返すswitch文を作成してください。

3. 二つの数値と演算子（+, -, *, /）を受け取り、計算結果を返す関数を作成してください。不正な演算子の場合はエラーメッセージを返してください。

これらの練習問題を解くことで、条件分岐の使い方をしっかり身につけることができます。次回は、ループ構造について詳しく見ていく予定です。それでは、Happy Coding!
JavaScriptの基礎をマスターしよう：関数と条件分岐

こんにちは、プログラミング初心者の皆さん！今回は、JavaScriptの重要な基礎概念である関数と条件分岐について詳しく見ていきましょう。これらの概念を理解することで、より柔軟で効率的なコードが書けるようになります。

## 1. 関数の基本

関数は、特定のタスクを実行するためのコードブロックです。JavaScriptでは、関数を以下のように定義します：

```javascript
function greet(name) {
    console.log("こんにちは、" + name + "さん！");
}

greet("太郎"); // 出力: こんにちは、太郎さん！
```

関数を使うことで、コードの再利用性が高まり、プログラムの構造がクリーンになります。

## 2. return文の使い方

関数は値を「返す」ことができます。これには`return`文を使います：

```javascript
function add(a, b) {
    return a + b;
}

let result = add(3, 4);
console.log(result); // 出力: 7
```

`return`を使うことで、関数の結果を変数に格納したり、他の計算に使用したりできます。

## 3. 条件分岐（if/else文）

プログラムの流れを制御するために、条件分岐を使います：

```javascript
let age = 20;

if (age >= 20) {
    console.log("成人です");
} else {
    console.log("未成年です");
}
```

この例では、`age`の値によって異なるメッセージが表示されます。

## 4. 比較演算子

条件分岐でよく使われる比較演算子には以下のようなものがあります：

- `==` （等しい）
- `===` （厳密に等しい）
- `!=` （等しくない）
- `!==` （厳密に等しくない）
- `>` （より大きい）
- `<` （より小さい）
- `>=` （以上）
- `<=` （以下）

例えば：

```javascript
if (5 === "5") {
    console.log("等しい");
} else {
    console.log("等しくない");
}
// 出力: 等しくない（型も比較するため）
```

## 5. 論理演算子

複数の条件を組み合わせるには、論理演算子を使います：

- `&&` （AND）
- `||` （OR）
- `!` （NOT）

例：

```javascript
let isAdult = true;
let hasLicense = false;

if (isAdult && hasLicense) {
    console.log("車を運転できます");
} else {
    console.log("車を運転できません");
}
// 出力: 車を運転できません
```

## まとめ

関数と条件分岐は、プログラミングの基礎中の基礎です。これらを使いこなすことで、より複雑な問題も解決できるようになります。

練習問題：
1. 2つの数値を受け取り、大きい方を返す関数を作成してください。
2. ユーザーの年齢を受け取り、「子供」「若者」「大人」のいずれかを返す関数を作成してください。

これらの概念をしっかり理解し、実際にコードを書いて練習してみてください。次回は、配列とループについて学んでいきましょう。Happy coding!
マウスジグラーをJavaで作る

# 目的

定期的にマウスカーソルを動かして、スクリーンセーバーの起動を阻止します

# 使い方

起動して10秒後にマウスの位置を記録し、適当にマウスカーソルを動かして元の位置に戻ります。

移動の方向や時間間隔は適当に調整してください。


# コード


```Java
package hello.mouse;
import java.awt.AWTException;
import java.awt.MouseInfo;
import java.awt.Point;
import java.awt.Robot;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
import javax.swing.JFrame;
public class MouseMover {
	private static boolean running = true;
	public static void main(String[] args) {
		try {
			Robot robot = new Robot();
			JFrame frame = new JFrame("Mouse Mover");
			frame.setSize(640, 480);
			frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
			frame.setVisible(true);

			// キーリスナーを設定してEscキーで停止する
			frame.addKeyListener(new KeyAdapter() {
				@Override
				public void keyPressed(KeyEvent e) {
					if (e.getKeyCode() == KeyEvent.VK_ESCAPE) {
						running = false;
						frame.dispose();
					}
				}
			});

			int moveDistance = 100; // 移動距離（ピクセル）
			int delay = 3000; // 1秒間隔（ミリ秒）

			for (int n = 0; n < 10; n++) {
				System.err.println((10 - n));
				Thread.sleep(1000);
			}

			// 初期位置を取得
			Point initialPos = MouseInfo.getPointerInfo().getLocation();

			while (running) {
				Point currentPos = initialPos;

				// 元の位置に戻す
				robot.mouseMove(initialPos.x, initialPos.y);
				Thread.sleep(delay);
				if (running == false) {
					break;
				}
				// マウスを上に移動
				robot.mouseMove(currentPos.x, currentPos.y - moveDistance);
				Thread.sleep(delay);
				if (running == false) {
					break;
				}
				// マウスを右に移動
				robot.mouseMove(currentPos.x + moveDistance,
						currentPos.y - moveDistance);
				Thread.sleep(delay);
				if (running == false) {
					break;
				}
				// マウスを下に移動
				robot.mouseMove(currentPos.x + moveDistance, currentPos.y);
				Thread.sleep(delay);
				if (running == false) {
					break;
				}
				// マウスを左に移動
				robot.mouseMove(currentPos.x, currentPos.y);
				Thread.sleep(delay);
				if (running == false) {
					break;
				}
				// マウスを元の位置に戻す
				robot.mouseMove(currentPos.x, currentPos.y);
				Thread.sleep(delay);
				if (running == false) {
					break;
				}
			}
		} catch (AWTException | InterruptedException e) {
			e.printStackTrace();
		}
	}

}

```

---

以上.
JavaScriptの関数マスター：定義と戻り値を徹底解説！

# JavaScriptの関数マスター：定義と戻り値を徹底解説！

こんにちは、JavaScriptを学んでいる皆さん！今回は、プログラミングの要となる関数について、特にその定義方法と戻り値（return）の使い方を詳しく見ていきます。

## 1. 関数の基本

関数は、特定のタスクを実行するためのコードブロックです。これを使うことで、コードの再利用性が高まり、プログラムの構造化が容易になります。

### 関数の定義

JavaScriptでは、関数を定義する方法がいくつかあります：

1. 関数宣言
```javascript
function greeting(name) {
    console.log("Hello, " + name + "!");
}
```

2. 関数式
```javascript
const greeting = function(name) {
    console.log("Hello, " + name + "!");
};
```

3. アロー関数（ES6以降）
```javascript
const greeting = (name) => {
    console.log("Hello, " + name + "!");
};
```

## 2. 戻り値（return）

関数は処理を行うだけでなく、値を「返す」ことができます。これを「戻り値」と呼びます。

### returnの基本

```javascript
function add(a, b) {
    return a + b;
}

let result = add(3, 4);
console.log(result);  // 7
```

この`add`関数は、二つの数値を足し算し、その結果を返します。

### 複数の値の返却

JavaScriptでは、一度に複数の値を返すことはできませんが、オブジェクトや配列を使って複数の値をまとめて返すことができます。

```javascript
function getPersonInfo() {
    return {
        name: "Alice",
        age: 30,
        city: "New York"
    };
}

let person = getPersonInfo();
console.log(person.name);  // "Alice"
```

### 早期return

条件に応じて関数の実行を早期に終了させたい場合、returnを使用できます。

```javascript
function divide(a, b) {
    if (b === 0) {
        return "Error: Division by zero";
    }
    return a / b;
}

console.log(divide(10, 2));  // 5
console.log(divide(10, 0));  // "Error: Division by zero"
```

## 3. 練習問題

1. 2つの数値を受け取り、大きい方の数を返す関数`max`を作成してください。

2. 文字列を受け取り、その文字列が空文字でない場合はその文字列を、空文字の場合は"Empty string"を返す関数`checkString`を作成してください。

答えは以下の通りです：

1. 
```javascript
function max(a, b) {
    return a > b ? a : b;
}
```

2. 
```javascript
function checkString(str) {
    return str !== "" ? str : "Empty string";
}
```

関数と戻り値を適切に使用することで、より柔軟で再利用可能なコードを書くことができます。これらの概念をしっかり理解し、日々のコーディングに活用してみてください！

次回は、関数のスコープとクロージャについて詳しく見ていく予定です。それでは、Happy Coding!
多次元配列（多次元連想配列）をJSONに変換した際に想定外の変換がされる

## 事象
Ajax経由でテーブルから取得した多次元連想配列を`JSON`に変換したが、想定外の形式になってしまった。

## 変換する配列
`default_flg`の設定値を基準に、グループ化してから変換したい。
```
Array
(
    [0] => Array
        (
            [id_name] => aaa
            [content] => aaaaaaaaaaaaaa
            [default_flg] => 0
        )

    [1] => Array
        (
            [id_name] => bbb
            [content] => bbbbbbbbbbbb
            [default_flg] => 1
        )

    [2] => Array
        (
            [id_name] => ccc
            [content] => cccccccccccccc
            [default_flg] => 0
        )

    [3] => Array
        (
            [id_name] => ddd
            [content] => dddddddddddd
            [default_flg] => 1
        )

)
```
## 実行するソースコード
```
$defaultContents = array_filter($contentArray, function ($array){
    $default_flg = 1;
    return $array['default_flg'] == $default_flg;
});

$Contents = array_filter($contentArray, function ($array){
    $default_flg = 0;
    return $array['default_flg'] == $default_flg;
});

return json_encode([$defaultContents, $Contents]);
```


## 変換したい形式
```
[
    [
        {"id_name":"bbb","content":"bbbbbbbbbbbb","default_flg":"1"},
        {"id_name":"ddd","content":"dddddddddddd","default_flg":"1"}
    ],
    [
        {"id_name":"aaa","content":"aaaaaaaaaaaaaa","default_flg":"0"},
        {"id_name":"ccc","content":"cccccccccccccc","default_flg":"0"}
    ]
]
```

## 結果
違う、そうじゃない。
```
[
    {
        "1":{"id_name":"bbb","content":"bbbbbbbbbbbb","default_flg":"1"},
        "3":{"id_name":"ddd","content":"dddddddddddd","default_flg":"1"}
    },
    {
        "0":{"id_name":"aaa","content":"aaaaaaaaaaaaaa","default_flg":"0"},
        "2":{"id_name":"ccc","content":"cccccccccccccc","default_flg":"0"}
    }
]
```

## 原因
変換元の配列のindexが"0"から始まっていない。

`$defaultContents`の配列

```
Array
(
    [1] => Array
        (
            [id_name] => bbb
            [content] => bbbbbbbbbbbb
            [default_flg] => 1
        )

    [3] => Array
        (
            [id_name] => ddd
            [content] => dddddddddddd
            [default_flg] => 1
        )

)
```

## 解決策
`array_values`を使用して、indexが"0"から始まるようにした。
※`array_values`＝元の`index`を無視して値を順に設定していく関数とのこと。

```
$defaultContents = array_filter($contentArray, function ($array){
    $default_flg = 1;
    return $array['default_flg'] == $default_flg;
});

$Contents = array_filter($contentArray, function ($array){
    $default_flg = 0;
    return $array['default_flg'] == $default_flg;
});

return json_encode([array_values($defaultContents), array_values($Contents)]);
```
# JavaScriptマスターへの道：短絡評価を徹底解説！

こんにちは、JavaScriptを学んでいる皆さん！今回は、プログラミングの中級者へのステップアップに欠かせない、論理演算子の詳細と短絡評価について深掘りしていきます。

## 1. 論理演算子の復習

まず、基本的な論理演算子を簡単に復習しましょう：

- AND演算子（&&）：両方の条件がtrueの場合にtrueを返す
- OR演算子（||）：少なくとも1つの条件がtrueの場合にtrueを返す
- NOT演算子（!）：真偽値を反転させる

## 2. 短絡評価（ショートサーキット評価）とは？

短絡評価は、論理演算子を使用する際に、最小限の評価で結果を決定する JavaScript の機能です。これにより、不要な処理を省略し、コードの効率を上げることができます。

### AND演算子（&&）の短絡評価

```javascript
console.log(false && anything);  // false
```

最初の式が `false` の場合、2番目の式は評価されません。なぜなら、ANDは両方が `true` でなければ `false` になるからです。

### OR演算子（||）の短絡評価

```javascript
console.log(true || anything);  // true
```

最初の式が `true` の場合、2番目の式は評価されません。ORは少なくとも1つが `true` であれば `true` になるからです。

## 3. 短絡評価の実用例

### デフォルト値の設定

```javascript
function greet(name) {
    name = name || "Guest";
    console.log("Hello, " + name + "!");
}

greet("Alice");  // "Hello, Alice!"
greet();         // "Hello, Guest!"
```

この例では、`name` が falsy（undefined, null, "", 0, falseなど）の場合、"Guest" がデフォルト値として使用されます。

### 条件付き関数実行

```javascript
function isAdmin(user) {
    return user && user.isAdmin;
}

let user1 = {name: "Alice", isAdmin: true};
let user2 = null;

console.log(isAdmin(user1));  // true
console.log(isAdmin(user2));  // null
```

この関数は、`user` オブジェクトが存在し、かつ `isAdmin` プロパティが `true` の場合にのみ `true` を返します。

## 4. 注意点

短絡評価は便利ですが、意図しない結果を招く可能性もあります。特に、0や空文字列を有効な値として扱いたい場合は注意が必要です。

```javascript
let count = 0;
let result = count || "No count";
console.log(result);  // "No count"
```

この場合、0は falsy 値として扱われるため、"No count" が返されます。

## 練習問題

1. AND演算子を使用して、オブジェクトのプロパティが存在する場合にのみそのプロパティを出力する関数を作成してください。

2. OR演算子を使用して、引数が与えられなかった場合にデフォルト値を返す関数を作成してください。

答えは以下の通りです：

1. 
```javascript
function printIfExists(obj, prop) {
    obj && obj[prop] && console.log(obj[prop]);
}
```

2. 
```javascript
function getDefaultValue(value) {
    return value || "Default";
}
```

論理演算子と短絡評価をマスターすることで、よりクリーンで効率的なコードを書くことができます。これらのテクニックを日々のコーディングに活用してみてください！

次回は、条件分岐とループ構造について詳しく見ていく予定です。それでは、Happy Coding!
JavaScriptの基礎：論理演算子と比較演算子2

こんにちは、JavaScriptを学んでいる皆さん！今回は、プログラミングの要となる論理演算子と比較演算子について詳しく解説します。これらの演算子を理解することで、より複雑な条件分岐やデータ操作が可能になりますよ。

## 1. 論理演算子

JavaScriptには3つの主要な論理演算子があります：

1. AND演算子（&&）
2. OR演算子（||）
3. NOT演算子（!）

### AND演算子（&&）

AND演算子は、両方の条件が`true`の場合にのみ`true`を返します。

```javascript
console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false
```

### OR演算子（||）

OR演算子は、少なくとも1つの条件が`true`の場合に`true`を返します。

```javascript
console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false
```

### NOT演算子（!）

NOT演算子は、真偽値を反転させます。

```javascript
console.log(!true);  // false
console.log(!false); // true
```

## 2. 比較演算子

比較演算子は、2つの値を比較し、その結果として真偽値を返します。

1. 等価演算子（==）
2. 厳密等価演算子（===）
3. 不等価演算子（!=）
4. 厳密不等価演算子（!==）
5. 大なり演算子（>）
6. 小なり演算子（<）
7. 以上演算子（>=）
8. 以下演算子（<=）

```javascript
console.log(5 == "5");   // true（型変換後に比較）
console.log(5 === "5");  // false（型も含めて比較）
console.log(5 != "6");   // true
console.log(5 !== "5");  // true
console.log(10 > 5);     // true
console.log(5 < 10);     // true
console.log(5 >= 5);     // true
console.log(5 <= 10);    // true
```

## 3. 演算子の組み合わせ

これらの演算子を組み合わせることで、複雑な条件を表現できます。

```javascript
let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
    console.log("You can drive a car!");
} else {
    console.log("You can't drive a car.");
}
```

## 練習問題

1. `x`が10以上20以下の範囲内にある場合に`true`を返す条件式を書いてください。
2. `name`が"Alice"または"Bob"の場合に`true`を返す条件式を書いてください。
3. `isStudent`が`false`で、かつ`age`が30未満の場合に`true`を返す条件式を書いてください。

答えは以下の通りです：

1. `x >= 10 && x <= 20`
2. `name === "Alice" || name === "Bob"`
3. `!isStudent && age < 30`

これらの演算子をマスターすることで、より柔軟で強力なJavaScriptプログラムを書くことができます。練習問題を解いて、理解を深めていきましょう！

次回は、条件分岐（if文）とループ構造について詳しく見ていく予定です。それでは、Happy Coding!
JavaScriptの基礎：算術演算子と真偽値を理解しよう

こんにちは、JavaScriptを学んでいる皆さん！今回は、プログラミングの基本中の基本、算術演算子と真偽値について詳しく見ていきましょう。

1. 算術演算子

JavaScriptでは、基本的な数学演算を行うための演算子が用意されています。

- 加算（+）: 2 + 3 = 5
- 減算（-）: 5 - 2 = 3
- 乗算（*）: 2 * 4 = 8
- 除算（/）: 10 / 2 = 5
- 剰余（%）: 7 % 3 = 1（7を3で割った余り）

これらの演算子を使えば、複雑な計算も簡単に行えます。例えば：

```javascript
let result = (3 + 4) * 2 / (1 + 1);
console.log(result); // 7が出力されます
```

2. インクリメント/デクリメント演算子

変数の値を1増やしたり減らしたりする特別な演算子もあります。

- インクリメント（++）: 変数の値を1増やします
- デクリメント（--）: 変数の値を1減らします

```javascript
let count = 5;
count++; // countは now 6
count--; // countは now 5に戻ります
```

3. 真偽値と比較演算子

プログラミングでは、条件が真か偽かを判断する場面がよくあります。これには真偽値（Boolean）と比較演算子を使います。

真偽値は `true` または `false` の2種類のみです。

比較演算子には以下のようなものがあります：

- 等しい（==）: 5 == 5 は true
- 厳密に等しい（===）: 5 === '5' は false（型も比較します）
- 等しくない（!=）: 5 != 3 は true
- 大なり（>）: 5 > 3 は true
- 小なり（<）: 3 < 5 は true
- 以上（>=）: 5 >= 5 は true
- 以下（<=）: 5 <= 5 は true

これらの演算子を使って、条件分岐や繰り返し処理を制御できます。

```javascript
let age = 18;
let canVote = age >= 18;
console.log(canVote); // true が出力されます
```

4. 論理演算子

複数の条件を組み合わせるときに使う演算子もあります。

- AND（&&）: 両方の条件が true の時に true
- OR（||）: どちらかの条件が true の時に true
- NOT（!）: 条件の真偽を反転させます

```javascript
let isAdult = age >= 18;
let hasID = true;
let canEnter = isAdult && hasID;
console.log(canEnter); // true が出力されます
```

これらの基本的な演算子を理解し使いこなせるようになれば、より複雑なプログラムも書けるようになります。練習問題を解いて、理解を深めていきましょう！

次回は、条件分岐やループ構造について詳しく見ていく予定です。それでは、Happy Coding!
JavaScriptの基礎：データ型と関数を理解しよう

プログラミング初心者の皆さん、こんにちは！今日はJavaScriptの基本中の基本、データ型と関数について解説します。これらの概念を理解することで、JavaScriptでのコーディングがぐっと楽しくなりますよ。

1. JavaScriptのデータ型

まずは、JavaScriptで扱うデータの種類について見ていきましょう。

- 数値型（Number）：1や3.14のような数字を扱います。計算するときに使いますね。
- 文字列型（String）：'Hello'や"JavaScript"のように、文字の並びを表します。
- 論理型（Boolean）：trueかfalse、つまり「はい」か「いいえ」を表現します。
- Undefined：変数に値が設定されていない状態を示します。
- Null：意図的に「空」を表現するときに使います。
- オブジェクト型（Object）：複雑なデータ構造を作るときの基本です。配列や関数もオブジェクトの一種なんですよ。

これらのデータ型を使い分けることで、プログラムは様々な情報を効率的に扱えるようになります。

2. 関数：プログラムの便利ツール

次に、関数について学びましょう。関数は、一連の処理をひとまとめにしたものです。

```javascript
function greet(name) {
    console.log("こんにちは、" + name + "さん！");
}

greet("太郎");  // 出力: こんにちは、太郎さん！
```

この例では、`greet`という関数を定義しています。`name`というパラメータを受け取り、挨拶文を表示します。関数を使うと、同じ処理を何度も書く必要がなくなり、コードがすっきりしますね。

さらに、関数は値を返すこともできます：

```javascript
function add(a, b) {
    return a + b;
}

let result = add(3, 4);
console.log(result);  // 出力: 7
```

この`add`関数は、二つの数値を足し算して結果を返します。

3. 実践：データ型と関数を組み合わせる

では、学んだことを活かして、簡単なプログラムを作ってみましょう。

```javascript
function describeNumber(num) {
    if (typeof num !== 'number') {
        return "これは数字ではありません。";
    }
    
    if (num % 2 === 0) {
        return num + "は偶数です。";
    } else {
        return num + "は奇数です。";
    }
}

console.log(describeNumber(7));    // 出力: 7は奇数です。
console.log(describeNumber(10));   // 出力: 10は偶数です。
console.log(describeNumber("abc")); // 出力: これは数字ではありません。
```

この`describeNumber`関数は、与えられた値が数値かどうかをチェックし、数値なら偶数か奇数かを判定します。ここでは数値型、文字列型、そして論理型（等価演算子`===`を使用）を活用していますね。

まとめ

今回は、JavaScriptのデータ型と関数について学びました。これらの基礎を押さえることで、より複雑なプログラムにも挑戦できるようになります。プログラミングは実践が大切です。ぜひ、自分でもコードを書いて試してみてくださいね。

次回は、もう少し進んだ話題、例えばオブジェクトや配列について詳しく見ていきたいと思います。それでは、Happy Coding!
Power Apps で日付の選択コントロールでフィルターする際上手くデータが表示されない


# はじめに

以下のようなトレーニングの日程を管理しているリストを作成しています。そして、ユーザーが Power Apps で申し込み可能なトレーニングを探したいとします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/9e7f08c5-1a91-3fdf-e00a-e807d8d7f034.png)

この場合、以下のような感じで、期間、ステータスでフィルターするアプローチがあります。
しかし、以下の場合、8/30 に申し込み可能なトレーニングがあるにもかかわらず、上手く見つかりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/645b1296-822c-8f51-d3f5-964d181639a2.png)

```
Filter(
    Training,
    StartTime >= dteStart.SelectedDate && EndTime <= dteEnd.SelectedDate && TrainingStatus.Value = "申し込み可"
)
```

今回は、原因と対策について備忘のため整理しておきます。

# 原因

モニターツールで原因を調査してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/6e4c1ee6-db34-089d-5482-1d0310992ee1.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/7b2d4064-6f8f-86ea-d756-d73248fcc4fa.png)


ポイントは以下の部分です。実際には以下のようなリクエストを SharePoint に送っています。これを見ると、UTC の"2024-08-29T15:00:00.000Z"、つまり、日本時間の開始時間と終了時間が 8/30 0:00 から 8/30 0:00 のトレーニングを検索していることになります。

```
$filter=((StartTime ge datetime'2024-08-29T15:00:00.000Z')and(EndTime le datetime'2024-08-29T15:00:00.000Z'))and(TrainingStatus eq '申し込み可')
```

# 対策

対策としては、終了時間の方の日付の選択コントロールの時間について、その日の最終時間、例えば、23:59:59、または翌日の 0:00:00 にしてあげる方法があります。以下、式のイメージです。

```
Filter(
    Training,
    StartTime >= dteStart.SelectedDate && EndTime <= DateTimeValue(
        Text(
            dteEnd.SelectedDate,
            "yyyy-mm-dd"
        ) & " 23:59:59"
    ) && TrainingStatus.Value = "申し込み可"
)
```

```
Filter(
    Training,
    StartTime >= dteStart.SelectedDate && EndTime <= DateAdd(dteEnd.SelectedDate,1,TimeUnit.Days)
       &&  TrainingStatus.Value = "申し込み可"
)
```

上手くトレーニングが表示されるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/660bcbac-fd41-ba9a-84fd-e91073c8d1e9.png)
【JavaScript】関数まとめ

## 使用した教材
以下の動画でJavaScriptの関数について勉強したので、簡単にまとめてみました

https://www.udemy.com/course/the-web-developer-bootcamp-2021-japan/

## JavaScriptの関数
### 基本的な書き方
- 関数の定義 ... `function 関数名() { 実行したい処理 }`
- 関数の実行 ... `関数名();`
```javascript:app.js
// 関数の定義
function rollTheDice() {
    const number = Math.floor(Math.random() * 6) + 1;
    console.log(number);
}

// 関数の実行
rollTheDice();
```
### 引数
関数の実行時に、関数側に渡す情報のこと
- 関数の定義 ... `function 関数名(パラメータ) { 実行したい処理 }`
- 関数の実行 ... `関数名(引数);`
```javascript:app.js
// 関数の定義
function greet(person) {
    console.log(`Hello, ${person}!`);
}

// 関数の実行
greet("Yamada");

// 出力結果
// Hello, Yamada!
```
#### 複数の引数を扱う場合
- 関数の定義 ... `function 関数名(パラメータ1, パラメータ2, ...) { 実行したい処理 }`
- 関数の実行 ... `関数名(引数1, 引数2, ...);`
```javascript:app.js
// 関数の定義
function greet(firstName, lastName) {
    console.log(`Hello, ${firstName} ${lastName}!`);
}

// 関数の実行
greet("Taro", "Yamada");

// 出力結果
// Hello, Taro Yamada!
```
#### デフォルトパラメータ
関数のパラメータに設定する初期値
```javascript:app.js
function cheer(player, msg = "頑張れ!!") {
    console.log(`${player}選手、${msg}`);
}

cheer("大谷");

// 出力結果
// 大谷選手、頑張れ!!
```
### 戻り値
関数側から関数の呼び出し元（`関数名();`）に返される情報
- 関数の定義 ... `function 関数名(パラメータ) { return 実行したい処理 }`
``` javascript:app.js
// 関数の定義
function calculatePriceIncludingTax(price) {
    return price * 1.1;
}

// 関数の実行
const taxIncludedPrice = calculatePriceIncludingTax(1000);
```
- 関数の実行結果を他の処理で扱えるように、実行結果を変数に入れておくとより便利
- 関数内の`return`が書かれた処理の後に書かれた処理は実行されない
### 関数式
- 関数の定義 ... `const 関数名 = function (パラメータ) { 実行したい処理 };`
```javascript:app.js
// 関数の定義
const calculatePriceIncludingTax = function (price) {
    return price * 1.1;
};
```
#### より簡潔な書き方（アロー関数）
- 関数の定義 ... `const 関数名 = (パラメータ) => { 実行したい処理 };`
```javascript:app.js
// 関数の定義
const calculatePriceIncludingTax = (price) => {
    return price * 1.1;
};
```
上記コードのように、パラメータが1つ、実行したい処理が1つの場合は、さらに簡潔な書き方ができる
- 関数の定義 ... `const 関数名 = パラメータ => 実行したい処理;`
```javascript:app.js
// 関数の定義
const calculatePriceIncludingTax = price => price * 1.1;
```
- パラメータを入れる`()`を外せるのは、パラメータが1つの時だけ
- 実行したい処理が１つ、かつその処理が`return`を伴う場合は、`return`の文字も省略できる
機能紹介：BigQueryのSEARCH関数がGA！

こんにちは。codepoetです。

### 目次
1. [はじめに](#はじめに)
2. [SEARCH関数の基本構文](#SEARCH関数の基本構文)
3. [パラメータの詳細](#パラメータの詳細)
4. [検索クエリのルール](#検索クエリのルール)
4. [使用例](#使用例)
4. [まとめ](#まとめ)
4. [参考文献](#参考文献)

### はじめに
BigQueryで、データを効率的に検索するための`SEARCH`関数がGAになりました。この記事では、`SEARCH`関数の使い方とその応用方法について解説します。

### SEARCH関数の基本構文
`SEARCH`関数は、指定されたデータが検索クエリに基づいて特定の検索用語（トークン）を含んでいるかどうかを確認するために使用されます。関数は、検索クエリとテキスト解析のルールに基づいて、すべての検索用語がデータ内に現れる場合に`TRUE`を返し、それ以外の場合は`FALSE`を返します。

```sql
SEARCH(
  data_to_search, search_query
  [, json_scope => { 'JSON_VALUES' | 'JSON_KEYS' | 'JSON_KEYS_AND_VALUES' } ]
  [, analyzer => { 'LOG_ANALYZER' | 'NO_OP_ANALYZER' | 'PATTERN_ANALYZER'} ]
  [, analyzer_options => analyzer_options_values ]
)
```

### パラメータの詳細

| パラメータ       | 説明                                                                                      | デフォルト値            | 備考                                        |
|----------------|-----------------------------------------------------------------------------------------|-------------------------|---------------------------------------------|
| `data_to_search` | 検索対象のデータ。`STRING`、`ARRAY<STRING>`、`JSON`、`STRUCT`など、様々なデータ型が使用可能。テーブル参照も可能。 | なし                    | テーブルのカラムを含む`STRUCT`として評価される場合あり。 |
| `search_query`   | 検索クエリを表す`STRING`リテラルまたは定数式。`NULL`の場合はエラーが発生。                       | なし                    | 例： `'foobar'`                            |
| `json_scope`     | `JSON`データに対する検索スコープを指定するオプション。                                         | `'JSON_VALUES'`         | 値の検索を行う。                           |
| `analyzer`       | テキスト解析を行う際の解析方法を指定。                                                        | `'LOG_ANALYZER'`        | `NO_OP_ANALYZER`（正規化なし）、`PATTERN_ANALYZER`（正規表現）など。 |
| `analyzer_options` | JSON形式で指定されるオプション。テキスト解析ルールを設定。                                       | なし                    | 例： `{ "case_sensitive": false }`         |


### 検索クエリのルール
検索クエリは、初めに空白で分割され、それぞれの用語（サブクエリ）がさらにテキスト解析ルールに基づいてトークンに分解されます。具体的には以下のようなルールがあります。

- **バッククォートで囲まれたテキスト**: `LOG_ANALYZER`を使用すると、バッククォートで囲まれたテキストは正確に一致する必要があります。たとえば、`Hello World`は`Hello World`として扱われます。

- **予約文字**: クエリ内でエスケープが必要な予約文字には、`[ ] < > ( ) { } | ! ' " * & ? + / : = - \ ~ ^`があります。これらはダブルバックスラッシュ`\\`でエスケープします。

- **フレーズ検索**: ダブルクォートで囲まれたテキストはフレーズとして扱われ、そのフレーズ内のトークンが指定された順序で連続してデータに現れる場合に一致します。

### 使用例
以下に、`SEARCH`関数を使用したいくつかの例を示します。

```sql
-- テーブルを作成する
WITH sample_data AS (
  SELECT 'foobar' AS text_column
  UNION ALL
  SELECT 'foo bar'
)

-- 検索を実行する
SELECT
  -- 正確な一致をチェックする
  SEARCH(text_column, 'foobar', analyzer=>'NO_OP_ANALYZER') AS exact_match,

  -- 区切り文字を考慮した一致をチェックする
  SEARCH(text_column, 'foo bar', analyzer=>'LOG_ANALYZER') AS delimiter_match,

  -- 正規表現を使用したパターンマッチ
  SEARCH(text_column, R'"foo[ \d]*"', analyzer=>'PATTERN_ANALYZER') AS regex_match_space_or_digit
FROM sample_data;
```
クエリ結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665456/c30b8427-bed2-9e75-23d1-6cebbf1cda68.png)


### まとめ
BigQueryの`SEARCH`関数は、大規模データセットから特定の情報を効率的に検索する際に活用できます。検索クエリやテキスト解析の設定を適切に利用することで、検索の幅が広がりそうですね。

### 参考文献
- [Search functions](https://cloud.google.com/bigquery/docs/reference/standard-sql/search_functions#search)
Claude 3.5を活用したAI占いサイト「TaroTap」の開発体験

こんにちは。最近、私はClaude 3.5を活用して、AIタロット占いサイト「[TaroTap](https://tarotap.com/ja)」を開発しました。今回は、このプロジェクトについて皆さんと共有したいと思います。

## TaroTapとは

TaroTapは、最新のAI技術を活用したオンラインタロット占いサービスです。ユーザーは、AIが生成した占い師を選び、様々なタロットスプレッドを通じて占いを行うことができます。

主な特徴は以下の通りです：

1. 24時間365日利用可能なAIタロットシステム
2. 多彩なAI占い師のキャラクター
3. オラクルカードの祝福機能
4. インタラクティブなカード選択プロセス
5. デイリータロット運勢
6. イエス・ノータロット機能

## 開発のきっかけ

私は以前から占いに興味があり、AIの発展により、伝統的なタロット占いとAI技術を融合させた新しいサービスを作れるのではないかと考えました。Claude 3.5の自然言語処理能力は、タロットカードの解釈や占い結果の生成に非常に適していると感じ、このプロジェクトを始めることにしました。

## 技術的な課題と解決策

1. **AI占い師の個性の実現**
   
   各AI占い師に独自の性格や話し方を持たせるため、Claude 3.5に詳細なプロンプトエンジニアリングを適用しました。これにより、ユーザーは自分に合った占い師を選べるようになりました。

2. **タロットスプレッドの実装**
   
   様々なタロットスプレッドを実装するため、Reactを使用してインタラクティブなカード選択インターフェースを作成しました。ユーザーの選択に基づいて、Claude 3.5が適切な解釈を生成します。

3. **多言語対応**
   
   国際的なユーザーに対応するため、next-intlを使用して多言語サポートを実装しました。現在は日本語と英語に対応しています。

4. **パフォーマンスの最適化**
   
   AIによる占い結果の生成に時間がかかる場合があるため、バックグラウンドでの処理とプログレスバーの実装により、ユーザー体験を向上させました。

## 今後の展望

1. より多くのタロットスプレッドとオラクルカードの追加
2. AIの学習データの拡充による、より正確で詳細な占い結果の提供
3. コミュニティ機能の実装（占い結果の共有、ディスカッションフォーラムなど）
4. モバイルアプリの開発

## まとめ

TaroTapの開発を通じて、AIと伝統的な占いの融合が新しい可能性を生み出すことを実感しました。技術の進歩により、私たちは古代の知恵を新しい形で体験できるようになっています。

皆さんも、ぜひ[TaroTap](https://tarotap.com/ja)を試してみてください。AI占いの世界を体験し、その可能性を感じ取っていただければ幸いです。

最後に、このプロジェクトについて、ご質問やフィードバックがありましたら、ぜひコメントでお聞かせください。一緒にAI占いの未来を探っていけたらと思います。
IT未経験者の勉強方法

## なぜこの記事を書こうと思ったのか
私は29歳の時に未経験からIT業界に転職しました。その際、実際に役立った勉強方法や、逆にあまり効果がなかった学習内容について共有したいと思い、この記事を書きました。振り返ると、無駄が多かった学習や、不安を解消するためだけに行っていた勉強もありました。これからIT業界を目指す方や、転職を検討している方々に少しでも参考になればと思います。

::: note warn 
記事の注意点：IT未経験者にとって最高の勉強方法という記事ではありません。あくまでも自分が経験した内容の共有です。
:::

## 経歴
29歳の時に未経験からIT業界に転職しました。前職ではITとは無縁の車部品の営業をしていました。
開発経験：JAVA、PHP（Laravel）
備考　　：実務におけるAWS開発は未経験（趣味でサイトを構築） 
現在は開発に集中することが少なくなり、他の業務が増えています。

## 転職前後に行った勉強一覧
転職を考え始めてから半年間、前職の業務を続けながら勉強を進めました。その際に行った勉強内容は以下の通りです。土日をほぼ勉強に充てていたため、かなりの勉強量でしたが、未経験者の方がここまで勉強する必要はないかもしれません。

### 転職前に行った勉強
|勉強内容|所感|
|-|-|
|プラグラミングスクール見学|いくつか見学しましたが、料金が高く、また開発経験1年程度のメンターが多かったため、見学のみで帰りました。|
|プログラミングの勉強|PaizaかProgateでHTML、CSS、JS、PHPを勉強しました。|
|IT資格取得|ITパスポートの勉強をし、基本情報技術者試験の取得を目指しましたが、基本情報は取得できませんでした。|
|Wordpressでサイト構築|YouTubeの動画を見ながら、WordPressでサイトを構築しました。|

:::note
当時は情報の入手方法がわからず、プログラミングスクール見学で「PHP（Laravel）またはRuby（on Rails）をやっておけばいい」と言われたことに影響されたり、一時期はUnityにも手を出し迷走していました。
:::

### 転職後に行った勉強（転職後1年）
|勉強内容|所感|
|-|-|
|IT資格取得|AWSのCLF（クラウドプラクティショナー）とSAA（ソリューションアーキテクト アソシエイト）を取得しました。|
|静的なWebサイト構築|AWS S3上にHTML、CSS、JSを使用して静的なWebサイトを構築しました。コードは拾ったものを改修した程度です。|
|PHPで簡易なサイト構築|Udemyのコースを見ながら、AWS上にサイトを構築しました。|

## 転職時に役に立った事
①サイトの構築
人によって異なるかもしれませんが、私にとって最も役立ったのはWordPressでサイトを構築したことです。実務で実際に触れることはあまりないのですが、一通りの構築経験は、転職当初、IT用語が飛び交う中で、ある程度理解できたのが大きかったです。実際にドメインを購入したり、レコード設定、DBの中身を見たりした経験が、会話を理解する助けになりました。

::: note warn
通常、WordPressはDBを触らなくても運用可能です。SQL文でデータを削除したり、どこのテーブルに何があるのかを探したりと、半日かけて無駄なことをしていましたが、結果的にそれが役立つこともありました。
:::

②資格の勉強
基本情報技術者試験（取得はしませんでしたが）を勉強する中で、たくさんの専門用語を覚えました。その後、サイトを構築したり、AWSを触った際に、ドメインやレコード、CIDRなどの言葉が自然に理解でき、スムーズにサイトを構築できました。資格取得が無駄だという声もありますが、未経験者が開発現場に投入される際、最低限の共通言語やITリテラシーがなければ、会話を理解するのが難しいと思います。



## もっとこうしておけばよかった
### ①プログラミング言語の勉強時間の短縮
HTML、CSS、PHPの勉強に数か月かけましたが、もっと短期間で良かったと思います。当時はプログラミングをきっちり覚える必要があると考え、不安を打ち消すためにPaizaやProgateを何周もしていましたが、2〜3周で十分だったと思います。その後、実際にWordPressやPHPでサイトを構築する際には、サンプルコードを修正して作り上げていくことで、必要なことは勉強できました。PaizaやProgateはもちろん良いサイトですが、開発においてはわからないことを調べる能力が非常に重要です。この能力は実際にサイトを構築する中でしか身につかないと感じています。

### ②お金をある程度かける
Webサイトを構築する際、無料のYouTube動画を見ていましたが、想像以上に時間がかかりました。現在はYouTubeでも良質な勉強動画が増えていますが、未経験者がどの動画が良いかを判断するのは難しいです。そのため、早い段階でUdemyなどに多少のお金をかけておくべきだと感じました。無料のコンテンツは、コードがうまく動かない時、対処が難しい場合が多く、特に未経験者にとっては、質問ができる環境やサポート体制が重要だと思います。

:::note info
作りたいものがあれば、作りたいものを作るのがITにおける最高の勉強法です。
多くの人は作りたいものは最初からないので、Udemy等で少しでも興味のあるものがあれば、とりあえず作ってみるのが大事かと思います
:::

## 転職後の勉強範囲
転職後、半年ほどで実務の範囲で自然と知識が身につくことを感じたため、自学習では実務とは異なる範囲をメインに勉強しています。私の場合、AWSを実務で触る機会がほとんどないため、AWS上にアプリを構築したり、資格試験を受けたりしています。周りの人と差をつける必要はないと思っていますが、できる限り、周りの人が知らない知識を身に着け、職場で役立つ部分を持つことを意識して勉強しています。

:::note info
人によっては実務で広大な範囲を任せられる場合もあるかと思います。その場合は実務範囲も自学習の範囲に含めるべきかと思います。
:::

## さいごに
転職後の実務内容や、転職までにどれくらい時間を費やせるか、前職の経験などによって、取るべき学習の方向性は人それぞれだと思いますが、私の経験を共有しました。最初はわからないことだらけで、一日何をしていたのだろうと思う日もありましたが、そういった経験をしておいて良かったと今では思います。

現在、2024年におけるITやプログラミングを学ぶ環境は昔より充実しており、ハードルは下がっていますが、それでもある程度の勉強は必要です。最初は時間がかかるかもしれませんが、皆さんと共に一歩一歩、ITや周辺知識を学んでいければと思います。
Power Automate で SharePoint ドキュメントライブラリの列の情報を基に行のフィルターをする


# はじめに

Power Automate で SharePoint リストの列の情報を基に行のフィルターするケースはよくありますが、ドキュメントライブラリについてはやったことなかったため、備忘のため記事を書いておきます。

# アプローチ

最初に以下のようなドキュメントライブラリ、列を作成しておきます。
ドキュメントライブラリもファイルの属性情報として、こんな感じで列を追加できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/636229bb-5391-4fd0-b405-c7453658fa35.png)

なお、ドキュメントライブラリの列の内部名は以下の方法で確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/71efb879-cf4a-7aed-506c-8e49ec1cf8bd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/eae4e0bf-bed4-948c-5d8b-ed2f3cdb807e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/29c00c8c-4ef9-5d39-eecd-f8502c88bc99.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/9a5db722-4b23-6ae1-7370-6d3bb66dca4d.png)

Power Automate では、以下のアクションで列の情報を基にフィルターできます。リストと同じ感じですね。今回は、TimeOff という単語を決め打ちでフィルターしていますが、もちろん、前のアクションの出力、つまり、動的なコンテンツを使ってフィルターもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/6fcc8db0-3811-285e-fe01-f02da0374a74.png)

今回は、全体構成として、以下のような感じで見つかったファイルを別のフォルダー配下に保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/a6a86f4a-1e1c-35a6-e7a1-f52758aaa080.png)

実行してみます。合致する行が取得でき、別の場所にファイルを保存できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/7355b3d5-a8c4-13e7-684d-e896e9b89dad.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/49d602ff-6116-dd9a-9cff-607db3eff8f0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/e9f28479-eeed-b70a-a48c-4114e3d6bd46.png)

# 並び替え

なお、データの並び変えを行う際は以下の [並べ変え順] を設定します。`Created desc`は、作成日時の降順となります。

* 昇順（古い→新しい）にしたい場合は asc
* 降順（新しい→古い）にしたい場合は desc

また、[上から順に取得] を 1 にすると、最新の 1 のデータだけ取得することになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/968137f2-90b5-46e3-8f0d-caf727b7478c.png)

テストしてみます。取得対象のファイルは以下です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/7f1186ed-08be-43c4-97c2-aff84193158d.png)

取得できたファイルの名前を [作成] アクションの結果に代入してみたところ、問題なく最新のファイルの情報を取得できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/87d220f1-c34e-46ec-9ae2-43d2fc473367.png)