GDD Blog: 2021

2021年8月13日金曜日

[JavaScript]Mapを使う(連想配列)

JavaScriptは、ちょっとくらい変な実装をしてもそれっぽく動くことがあります。
コンパイルする形式の言語である、C#やJavaに慣れていると、むずがゆくなることがあります。

ということで、間違えから偶然見つけて、調べてみると普通に連想配列だった話。
JavaScriptでMapを使うには、以下のようにする。そう、何も考える必要はないのです。なぜならば、objectに連想配列の機能が混ぜ込まれているからです。
コードはこんな感じ。

let map ={};
map["aaa"] = "aaa";
console.log(map["aaa"]);
//"aaa"と表示される

//ちなみに↓のようにもアクセスができる
console.log(map.aaa); // aaaと出力される

//メンバ変数のように代入もできる
map.bbb = "bbb"
console.log(map.bbb); // bbbと出力される

JSONをオブジェクト化するとこもこんな感じでやってるんだろうね。
・・・mapというか、属性を動的に増やす。という考え方。ちなみに、objectなら何でもOK。こんなこともできる。

let list =[1,2,3];
list.bbb = "bbb";
console.log(list.bbb)；// bbbと出力される
console.log(list)；(3) [1, 2, 3, bbb: "bbb"]と出力される

JavaScript。。。何でもありですね。

[JavaScript]変数宣言の仕方(var let const)

JavaScriptの変数宣言。書き方いろいろある。制限(コーディング規約等)がないならlet使えというのが結論。

理由は、letを使っておけば、動作時に変数宣言の上書きに気が付けるから。です。

あと、定数はconstを使うのが結論。値を書き換えることができないからね。

以下、それぞれ組合せでの検証結果。

■varとletの組合せ

	var	let
var	var a="a"; var a="b"; aの値は"b"になる！	var a="a"; let a="b"; 実行時エラー
let	let a="a"; var a="b"; 実行時エラー	let a="a"; let a="b"; 実行時エラー

constもletと同じ特性。consutは、値の更新もできない。↓のような場合エラーになる。

const b = "b";
b="B"; //エラー

let c ="c";
c = "C";// こっちはOK。というか普通の使い方。

ちなみに、varの上書きパターンこういうのが正常終了しちゃう。意味の分からない障害が出そう。

var aaa = "aaa";
var aaa = 100;

ということでletがおすすめ。

[JavaScript]Listを使う(動的に要素を増やすことのできる配列)

C#やJavaはクラスライブラリで様々な機能が提供されているけど、JavaScriptで同じようなことをしようとすると、外部のライブラリをインクルードする感じで使うのが一般的かな。と思います。
と、前置きが長くなりましたが、Listを使いたかったのです。
C#でいうと、↓のような感じ。

var list = new List<string>();

で調べてみたら、JavaScriptでは、[](Arrayというクラス)を使う。使い方は以下の通り。
JavaScriptの型については、闇が深そうなので、今日は割愛。

let list = [1,2,3];
//初期値不要なら
//let list = [];
//要素の追加
list.push(4);
console.log(list);
//(4) [1, 2, 3, 4]　と表示される

つまるところ、変数に[]を代入すると、そいつは、Listになる。ってことですね。そしてなんでも入れれてしまいます。

let list = [1,2,3];
//要素の追加
list.push("あ");
console.log(list);
//(4) [1, 2, 3, "あ"]　と表示される
list.push({name:"hoge"});
console.log(list);
//(5) [1, 2, 3, "あ", {…}] と表示される

genericsがなかったころのjavaを思い出します。。。ちなみに、pushがあるならpopもあるだろと。そうあるんです。さっきの続き。

list.pop()
//戻り値→{name: "hoge"}
console.log(list);
// (4) [1, 2, 3, "あ"] 最後に突っ込んだ要素がなくなっている。
list.pop()
//戻り値→"あ"
console.log(list);
// (3) [1, 2, 3]　その前の要素がなくなっている

スタックがあるならキューもあるだろーと。そうあるんです。さらに続き。

list.shift()
//戻り値→1
console.log(list);
// (2) [2, 3]　先頭の要素がなくなっている

JavaScriptなんでもありっすね。

[JavaScript]confirmやalertをオーバーライドする

sliniumun等を使って、Webサイトの自動操作をすることがあります。んーあんまりないか。

自動操作しない場合でも、デバッグの時は、alertを出し、本番環境では、ログ出力。みたいなことをしたいことがあります。んーあんまりないか。console.log使うもんね。

ということで、強制的にalertやconfirmを何とかする方法ないかな。と思って調べてみると、alertやconfirmを上書き(オーバライド？)する方法がありました。

実装は↓のような感じ。以下は、chromeのconsoleで実行しているけど、htmlに入れれば、そのまま実現できる

window.confirm = (text) => { console.log(text); return true; }

常に「はい」ボタンを押した状態と同じになっちゃいますが、自動運転中に入力不要になりいい感じ。

ちなみに、alertも同じように、window.alert = function(text){}でOK。

で、chromeのconsoleで確認してみると、↓みたいになっている。

//chromeのconsoleで↓を入力
> window.confirm

//こんなのが表示された。edgeでは表示されなかった。。。
ƒ (text) {
    recordedConfirmation = text
    if (document.body.hasAttribute('setConfirm')) {
      document.body.removeAttribute('setConfirm')
      return nextConfirmationResult
    } else {
      l…

よくわからないけど、prompt.jsというソースにたどり着き、中身が見れる。プラグインがいろいろ入っているからかもしれないけどね。

2021年1月9日土曜日

[Other]コードのシンタックスハイライト

コードをハイライトするために、SyntaxHighlighterを使っていたんですがリンク切れで遅くなていました。
で、とりあえずスタイルやJSのリンクを消したものの、コードのサンプル表示がかっこ悪かったので、これを機に修正しました。
で、使ったのが、「highlight.js」です。
SyntaxHighlighterとくらべ軽量で言語の対応も多いらしいです。ということで使い方。
↓のコードを<head>に埋め込めばOK

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

サポートしている言語は、GitHubのほうを参照で。
使い方はhttps://highlightjs.org/usage/を参照。

当サイトは、VisualSutudio風のデザインを使っていますが、このデザイン枠がなんです。

ということで、スタイルの一部を改変。現状はこのスタイル(.hljs)が必ずセットされるので、それをチョット改変。

<style type='text/css'>
.hljs {
  display:block;
  border:1px solid #ffa500;
}
</style>

デモサイトがあり、こっちも便利。分かりやすい。参考になる。

取り合えず、チョットやな感じで何とかしたいこと。

１行目の空行<pre><code>の後ろに改行入れると、改行されちゃう
<と>。コードをそのまま貼り付けれない。１行に1個までなら何とかなるっぽいけど、理由がわからない。js内に変換してそうなコードはあるんだけど。。。うまく動いていないのだろうか

・・・こいつら何とかしたい。

2021年1月6日水曜日

[Android]非推奨になったAsyncTaskの代わりに、ExecutorServiceとLiveDataを使う

Android11(APIレベル30）がリリースされてからしばらくたちます。

その中でも困りそうなのが、AsyncTaskが非推奨になったことです。

AsyncTaskを使うと、AndroidStudioに取り消し線がつくのが気に入らないので、今のうちにイイ感じの実装方法を覚えていおたほうがいいかな。と思います。

AsyncTaskを機能分割すると、流れ的に大きく３つ。

doInBackground(Params... params) バックグラウンド処理
onProgressUpdate(Progress... values) 進捗状況をUIで表現
onPostExecute(Result result)　1.の結果を処理する(成功したらDBに登録とか)

このうち、1,3は必須。2は場合によってって感じかな。と思います。

で、よさげな実装案は、次の通り。

java.util.concurrent.ExecutorServiceでバックグラウンド処理
JetPackのLiveDataで進捗状況をUIで表現
JetPackのLiveDataで1.の結果を処理する

1,3はイイ感じかなと思います。2はちょっとダサいけどできなくはない。じゃあ実際にどうするか。というと、

JetPack LiveDataの利用準備
LiveData用モデルの作成
LiveDataの更新コールバックを受け取るリスナーの設定
ExecutorServiceを使った非同期処理の実行

という感じかな。と思います。じゃあ、実装例。

1.JetPack LiveDataの利用準備

app/build.gradleに以下追記。ADDってなっている部分。

dependencies {
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'androidx.navigation:navigation-fragment:2.2.2'
    implementation 'androidx.navigation:navigation-ui:2.2.2'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    //<<ADD
    def lifecycle_version = "2.2.0"
    implementation "androidx.lifecycle:lifecycle-viewmodel:$lifecycle_version"
    implementation "androidx.lifecycle:lifecycle-livedata:$lifecycle_version"
    implementation "androidx.lifecycle:lifecycle-runtime:$lifecycle_version"
    implementation "androidx.lifecycle:lifecycle-viewmodel-savedstate:$lifecycle_version"
    annotationProcessor "androidx.lifecycle:lifecycle-compiler:$lifecycle_version"
    implementation "androidx.lifecycle:lifecycle-common-java8:$lifecycle_version"
   //>>ADD
}

2.LiveData用モデルの作成(クラスの用意)

↓のような感じのクラスを作る。

public class MyViewModel extends ViewModel {
    private MutableLiveData<String> currentName = new MutableLiveData<String>();
    public MutableLiveData<String> getCurrentValue() {
        return currentName;
    }
}

3.LiveDataの更新コールバックを受け取るリスナーの設定
4.ExecutorServiceを使った非同期処理の実行

public class FirstFragment extends Fragment {

    //2.LiveData用モデルの作成(変数定義)
    private MyViewModel model;

    public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        //2.LiveData用モデルの作成(インスタンス生成)
        model = new ViewModelProvider(this).get(MyViewModel.class);

        //3.LiveDataの更新コールバックを受け取るリスナーの設定
        final Observer<String> nameObserver = new Observer<String>() {
            @Override
            public void onChanged(@Nullable final String newValue) {
                // 画面の更新
                TextView textView = view.findViewById(R.id.textview);
                textView.setText(newValue);
            }
        };
        model.getCurrentValue().observe(this, nameObserver);

        view.findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //4.ExecutorServiceを使った非同期処理の実行
                ExecutorService executor = Executors.newSingleThreadExecutor();
                executor.submit(new Runnable() {
                    @Override
                    public void run() {
                        //10秒経過後、ワーカースレッドより、モデルの値を更新
                        try {
                            Thread.sleep(3000);
                        } catch (InterruptedException e) {
                        }
                        String anotherName = "3秒経過 " + new Date();
                        //他のスレッドから情報更新する場合、postValueで値をセットする必要がある
                        model.getCurrentValue().postValue(anotherName);
                    }
                });
            }
        });
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_first, container, false);
    }

}

LiveDataを使うことでObserverパターンを実現しています。

また、postValueを使うことで、スレッドを意識する必要がなくなります。

Handlerを使えば、同じことはできますが、スレッドの入れ替えを隠蔽することで、コードがわかりやすくなりますね(個人的な感覚)。

また、値の取り回しが複数になる場合、面倒なので、更新通知用のフィールドを設けるのもありかなと思います。

「2.JetPackのLiveDataを使う」は、ちょっとダサいですけど、MyViewModelに進捗状況を表す数字を持たせ、postValueすればできるかな。と思います。

・・・でもダサいですね。

2021年1月3日日曜日

[PHP]Windows × xampp × Visual Studio CodeでPHPをデバッグ(Step実行)する

どのプログラム言語でも、デバッグするには変数など内部データを見る必要があります。
変数を簡単に見るには、ステップ実行するのが一番の近道かなと思います。

今回、PHPの開発に携わる機会があり、xampp環境でステップ実行するための環境を作ったんですが、うまくいかない。。。。
何がうまくいかないか。というと「ブレークポイントを設定しても止まらない」です。

環境は、以下の通りです。
　・PHP Version 8.0.0
　・Xdebug 3.0.1
　・Visual Studio Code 1.52.1
　・PHP Debug 1.14.5(Visual Studio Code のデバッグ用プラグイン)

環境により違いはあると思いますが、この環境においての原因は以下の2点でした。
　・Xdebug v3.0.0系より、php.iniに書く設定が変わった
　・デバッグ用のポート番号が変わった

対策は以下の2つ。
　1.PHP.iniの設定
　2.lunch.jsonの設定

1.PHP.iniの設定

[XDebug]
xdebug.mode=debug
xdebug.start_with_request=yes
zend_extension = C:\xampp\php\ext\php_xdebug-3.0.1-8.0-vs16-x86_64.dll

うまくいっている場合、↓のURLで確認ができる。
http://localhost/dashboard/phpinfo.php
xdebugの「Step Debugger」が「enabled」になっていたらOK。

zend_extensionはバージョンによって異なる。コイツの導き出し方は、他のサイトを探してみてください。

2.lunch.jsonの設定
ポート番号が変わったらしい。その設定を合わせる。 9001→9003


{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    'version': '0.2.0',
    'configurations': [
    
        {
            'name': 'Listen for XDebug',
            'type': 'php',
            'request': 'launch',
            'port': 9003,
            'runtimeExecutable': 'C:\\xampp\\php\\php.exe'
        },
        {
            'name': 'Launch currently open script',
            'type': 'php',
            'request': 'launch',
            'stopOnEntry': true,
            'program': '${file}',
            'cwd': '${fileDirname}',
            'port': 9003,
            'runtimeExecutable': 'C:\\xampp\\php\\php.exe'
        }
    ]
}

設定の変更は、Visual Studio Codeのメニュー「実行(R)」→「構成を開く」で編集できます。

Lunch Currently open Scriptを選択し、F5でデバッグスタート。
ブレークポイントを設定しておくと、そこで止まるようになりました。

登録: 投稿 (Atom)