しないと蓄積するようですページ遷移してcreatedやmountedが何度も呼ばれると、そのたびに蓄積されてしまうらしい。$onでメソッドを直接叩くこともできるはず。this.test_method_child2);とすることも。239日目100日チャレンジの239日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。2020TweetQiitaで続きを読む投稿日:2020-02-14T19:31:11+09:00ユーザー目線のVueコンポーネント実装この記事についてVueを開発・運用してアプリケーションの規模が段々増えてきました。チームの人員も増やしていく中で慣れていないエンジニアがコンポーネントの実装に関わるというケースが増えてきて、どんなデータ構造やアクション定義を作るのが良いのか悩んでいるケースを見受けるようになりました。今回は自分がコンポーネントを実装する時に考えていることを簡単に紹介しておきます。コンポーネントはユーザーに最も近いコードコンポーネント思考で実装していくと、ユーザーと近い距離に居るコードは各コンポーネント郡になります。言い換えるとコンポーネントとユーザーは密接な関係にあり、お互いの共通認識が合っていることが望ましいということになります。利用するユーザーの思い浮かべるデータ構造や行動と実装されたコードの変数や関数が同じであるということです。コンポーネントを使うユーザー側の気持ちがわからなければコンポーネントの実装も困難ということです。}})</script>何かしらのコンテンツに対していいね!したりするサンプルです。この実装には2つの問題点があります。ユーザーにとってはいいね!なのにコード上ではお気に入りという変数名になっているいいね!を変更する処理がコード上では同一の関数で定義されているどちらも動作上は問題ありません。後々の機能追加や変更などで破壊的変更をする必要が出てしまうコードで良いコードとは言えません。ユーザーの行動原理から外れている実装だからです。定義してやり過ごすことはできますが、今後コードを見た人が混乱してしまうと思います。なっているケースがあります。サンプルではバックエンドと連携していませんが、こういったアプリケーションのサービス内の名称とユーザー側の名称が違う問題はそのままコンポーネントの実装にまで影響してしまうケースが多くあります。統一することが理想ですがデータベースごと名称の変更を全て反映するのは規模によっては難しいです。差異を無くしておくことはできます。フロントエンドは比較的変更がやりやすい分類なのでこういったものは先にフロントエンド側で吸収しておくことで、機能追加や改善・インフラ整備の時に役立つことになるでしょう。いう関数は効率的です。ユーザーの意思とは連動していません。極端な例ですが、例えば「誤動作を避ける為にいいねする時だけ確認のアラートをして欲しい」といったユーザーの要望を反映する時にどうでしょうか?両方の機能を内包している為、片方のアクションに対して何か付加価値を付け足す時に拡張しにくいと感じませんか?ユーザーにとって「いいね!する」という行動と「いいね!を解除する」という行動は全く別の意思から行われるアクションです。いったユーザーの行動ごとに特殊な処理を挟むケースはフロントエンドではとても多いです。経験上Vuexでステート管理すると更に複雑化していきます。「関数は最低限の方が...」「HTML上では同じ場所にあるボタンなのに...」と思うこともあるかもしれません。アプリケーションは利用するユーザーの為に動くべきであり、機能追加や変更もユーザーの行動結果から発生していくものです。ユーザーの意思この考え方はテストケースも作成しやすい利点があります。現実のユーザーの行動と反しています。実行してデータ構造をチェックする方がよりユーザーの行動に近いテストケースになると思います。同じようにバグの発生源を特定する上でも有効です。問い合わせなどのユーザーの行った行動がそのまま再現手順に近くなり、関連するデータやメソッドに対してデバッグを行えば見つかりやすくなります。実装上ではとても小さなことですが、こういった考えが規模の大きくなったアプリケーションにおいて効果的になっていきます。ユーザーの気持ちになって脳内でコンポーネントを操作するイメージを掴むことが大事です。アプリを進めておりました📱Vuexとは状態管理のライブラリです。・methodsに何度も同じ処理書かずに済むとかとか。$emitも何回も書かなくていいし楽!とにかく楽!!!そんな感じです。--savehttps://vuex.vuejs.org/ja/installation.html使い方(超簡単ver.)まずは分かりやすくcomponents使わずpagesだけで完結させます。今度はvuexを使用しない場合それぞれの対応箇所が分かりますね。},},}</script>使い方(Components使用ver.)作るものは全く同じです。コンポーネント化するだけです!🌟Point・index.jsはバグるので新しいjsファイルを作成。・そのため呼び出し方が変わります。・gettersでstateの状態を取得する必要あり。},}</script>🎈🧸vuexを使わないと$emitとか親でどう処理するかとかいちいち分けたり何度も書く必要が出てきます。)を表示するまとめ・stackoverflowのこの記事を参考に、Awesome-Markersプラグインを改修してマーカー(アイコン)にgeoJSONから読み込んだデータを載っけた。やろうとしたこと以下のようなGeoJSONファイルを.getJSON()でJavaScriptに取り込み、Leaflet上で"number"をアイコン上に表示させる。Markersプラグインをインストールします。GitHubから必要なファイルをダウンロードし、適したディレクトリに保存します。Font)の参照先をURLで指定します。jsonファイルを読み込み、その後の処理を定義します。{})でgeojsonという名の関数を定義します。L.geoJson()はリーフレットのライブラリのうちGeoJSONを扱うオブジェクトです。公式ドキュメントを参考に、{}内にオプションを入れていきます。{})で、JSONファイル(ここではfeature)からcoordinatesフィールドにある緯度経度データを読み取り、緯度経度に基づいてマーカーを表示させます。Markersプラグインのアイコン設定を参照させます。最後に、geojson.addTo(map);で、定義したgeojson関数を地図に追加しています。先ほど改修したleaflet.awesome-markers.js内に定義されているicon関数を呼び出します。(feature.properties.number)でマーカーに表示させるデータのフィールドを指定します。今回は、読み込んだJSONファイル(feature)の中のプロパティのうち、numberフィールドを指定しました。桁数が多いとはみ出したりしますが、登録されたデータから引っ張ってきた情報をアイコンに載せることに成功しました。して外出ししてみましたが、データの継承の問題?でfeatureが定義されてないよ!という以下のエラー文が出てしまいました。definedこれを回避するため、今回はL.geoJSON()の中に直接アイコン設定を書き込んだ次第です。独自ドメインの設定Nuxt.jsで作成したSPAアプリケーションをFirebaseにデプロイする方法をいつも忘れるので、メモしておきます。プロジェクトの追加Firebaseへ行き、Googleアカウントでログイン後、コンソールに移動します。"プロジェクトを追加"から、プロジェクトの追加を行います。・Googleアナリティクスの設定ここでは、とりあえず無効にしておきます。有効にすると、アナリティクスアカウントの設定が必要です。firebase-tools次に、firebase-toolsのインストールを行います。firebase-toolsインストール後、ログインします。initいくつかの質問があります。今回はHostingを利用するので、スペースで選択し、Enter。冒頭の「プロジェクトを追加」で追加した、プロジェクト名を選択します。SPAとして設定するかを聞かれます。私は、SPAで作成しているので、yを入力します。deploy完了すると、最後にURLが表示されるので、アクセスしてみます。deploy独自ドメインの設定Firebaseのコンソールページに行き、独自ドメインを設定したいプロジェクトを選択します。次に、左サイドバーのHostingを選択。"カスタムドメインを追加"をクリック。;)反映するのに、少し時間がかかると思います。説明不足だと感じた点や、変更点が出てきましたら、随時更新していきたいと思います。この記事が参考になりましたら幸いです。見た目や演出が要求されるのですが顧客受けが良いのか画像にマウスのカーソルを乗せるとふわっと変化するを求められる場面が結構あります。書くだけで対応できるのですがふわっとすることなく一瞬で変わってしまします。CodePen.CSSでホバーしていない状態の画像を上から被せておき、ホバーするとimgタグで入れた方の画像が現れる仕組みになっています。1s;の部分をいじれば変化のさせ方を変えることができます。追加するだけでカーテンが上がるような動きにできます。Error('パスワード(確認)を入力してください。Error('二つのパスワードが異なります。'メールアドレスを入力してください。'正しいメールアドレスを入力してください。'1文字以上255文字以内で入力してください。'パスワードを入力してください。'1文字以上50文字以内で入力してください。}}</script>バリデーションのルール詳細は「async-validator」のREADMEとかを参考にしてください。scriptタグ内でRuby/Railsのメソッドを使用する際のescape_javascriptについてこの記事を書くきっかけjQueryを書いていると、scriptタグ内でRailsのメソッド(正確にはapplication_helper内のメソッド)を使用したいときがあります。正しい書き方をしないと正確に呼び出せないため、失敗した書き方と成功した書き方をまとめます。hogehoge_path_forとし、application_helper.rbに定義します。endendこれをとあるviewのscriptタグ内で呼び出します。hogehoge_path_forの返り値としたいです。%>;</script>普通はこう考えるはずですが、これだと呼び出せません。%>;</script>これも呼び出せません。失敗例3escape_javascriptというメソッドを使用します。これはaliasとしてjの使用が許されています。%>;</script>上記は下記と同じです。%>;</script>どちらも失敗します。失敗例4=をつけます。%>;</script>上記は下記と同じです。%>;</script>これもどちらも失敗します。失敗例5=を外して、''で囲います。%>';</script>上記は下記と同じです。%>';</script>これもどちらも失敗します。%>';</script>上記は下記と同じです。%>';</script>これで無事呼び出すことができました。APIドキュメントhttps://js.tensorflow.org/api/latest/実装例https://github.com/tensorflow/tfjs-examples試行環境Windows10Node.js版とブラウザ版tensorflowjsはC++で書かれたtensorflowのwrapperですが、クライアントサイドのブラウザで動作するjavascript版とサーバーサイドで動作するNode.js版があります。Node.js版はローカル環境に最適化された追加ライブラリで高速に動作しますしCUDAを使ってGPUもフルに使えるようになっているんだそうです。ブラウザ版はCPUのみで比較してもNode.jsと比べると速度は劣りますがクライアントのリソースを使えるのが大きなメリットです。pandasが使えるpython版と比べるとNode.js版でも使い勝手は悪いので、pythonでモデルを作ってコンバートしたものをNode.jsをバックエンドとする環境でNode.js上で使うか、サーバーサイドの負荷を低減するためにブラウザ上のjavascriptで使うというやり方が多くなるのではないかと思います。python版のモデルを用意するmodel.save()で保存したh5ファイルを変換することが出来ます。入力1次元、出力1次元の回帰モデルを作って保存してみます。installして使用します。2.0.1~2.1.0とは依存パッケージが競合してしまいますので、tensorflowjs用のconda環境を作って専用にした方が良いと思います。2.1.0で作ったモデルも現状は問題なく変換できるようです。モデルを変換するtensorflowjsをインストールしたpythonにPATHが通った環境で、tensorflowjs_converterを使って変換します。以下の場合、カレントディレクトリのhoge.h5ファイルを読み込んで、/model/以下にモデル構造を記述したjsonファイルと重みを記録したbinファイルを書き出してくれます。modelブラウザ版tensorflowjsで使うtf.loadLayersModel()でjsonファイルのPATHを指定してやると保存したモデルを読んで、tf.tensorを放り込むと推定してくれます。ブラウザ上で動作するjavascriptはローカルのファイルを読めなくなっているので、面倒ですが適当なウェブサーバーを立ててドキュメントルート以下に上記で変換したモデルをフォルダごと置いてブラウザでURLを読み込むようにします。Node.jsにプロジェクトを作るNodeJS環境を初期化します。initすると必要なファイルが作成されます。nameなどを聞かれますがすべてdefaultで大丈夫です。OK?にyesと回答すれば実行されます。Node.jsプロジェクトにtensorflowjsをインストールするプロジェクトのディレクトリで以下を実行すればインストールされます。tfjs-nodeはNode.jsに最適化したライブラリで、ブラウザ版で実行するより高速に動作します。@tensorflow/tfjs-node-gpuすればGPUを使った高速演算ができると書かれているんですが、CUDA10.0をインストールしたWin10でやってみたらMODULE_NOT_FOUNDで動きませんでした。PATHが通ってないとかだと思いますが未確認です。Node.jsでpython版modelを使うtf.loadLayersModel()でjsonファイルのPATHを指定してやると保存したモデルを読んで、tf.tensorを放り込むと推定してくれます。ブラウザ上で動作する場合とは異なりウェブサーバーを立てる必要はありません。console.log(arr);}run();index.jsと同じディレクトリからindex.jsを実行するとデモコードが動きます。]推定結果が表示されれば正常です。tensorの計算python版のtensorflowは適当に配列を放り込めばlistだろうがnp.arrayだろうが適当に処理してくれましたが、tensorflowjsではtf.tensor型に変換してからでないと扱えません。tf.tensorにするとjavascript標準の四則演算は出来なくなりますが、tf.add()やtf.sub()などで高速な演算が出来るようになっていますので不足はないと思われます。四則演算以外にも三角関数とか最大最小とか色々計算できます。詳しくは以下のAPIドキュメントを参照してください。tf.scalar(4)x.add(a).print()x.sub(a).print()x.mul(a).print()x.div(a).print()tensor同士の計算も同じようにできます。tf.tensor1d([2,3,4])console.log('add')x1.add(x2).print();console.log('sub')x1.sub(x2).print();console.log('mul')x1.mul(x2).print();console.log('div')x1.div(x2).print();tf.tensorを配列に戻すにはdataSync()メソッドを使います。b.dataSync();console.log('b_value')console.log(b_value)メモリの解放tf.dispose()openGLでtensorflowjsを使う場合、明示的に変数を消去しないとメモリが解放されない為、明示的にメモリを解放するためにtf.dispose()が用意されています。tf.memory()でメモリが正常にリリースされたか確認できるようになっていますので、tf.dispose()した場合としない場合を比較してみましょう。a.dispose()}console.log(tf.memory());上記をそれぞれ実行するとtf.dispose()を使った場合にはtensorflowjsが保持するメモリがゼロになっている事が確認できます。tf.tidy()複数の演算を続けて行った場合に計算途中で生じる変数も残ってしまう為、tf.dity()でこれが残らないように処理するようです。tf.memory().numTensors);y.print();CSVファイルの読み込みCSVファイルはtf.data.csv(source)で読み込めます。sourceにPATHを指定して読み込みますが、ブラウザ上で動作するjavascriptはhttpで指定されたPATHしか読めないようになっていますので、ローカルでテストする際にもhttpサーバーに置いて実行する必要があります。Node.jsの場合はそういう制限はないので普通にローカルで実行できます。take()メソットでデータの頭出し、toArray()メソッドで配列への変換ができます。tf.data.csv("http://localhost/hoge.csv")console.log(df.take(10).toArray())グラフを描くjavascriptにはpython勢の大好きなmatplotlibがないんですが、ありがたいことに可視化の為のメソッドを用意してくれています。tfvisをインポートすれば簡単にグラフを描画できます。CodePen.TweetQiitaで続きを読む投稿日:2020-02-14T00:24:18+09:00お絵かきできるSNSを作りたい!4今回は少しでもアプリに近づけるためにmanifest.jsonを追加したいと思います。これを追加することでAndroidでページを開いた際、ホーム画面にタイルを置きませんか?とメッセージを表示することが出来るんだとか。場所はHEADの中に一行以下の記述を書くだけです。href="manifest.json">manifest.jsonの中身は↓こんな感じです。"standalone"}言語、アプリ名・短縮アプリ名とタイルに置く画像を指定します。start_urlはサーバがないので適当です。最後に自分がやりたそうにしていることをまとめておきます。・好きな画像を下絵にしてトレースできるようにするTweetQiitaで続きを読むJavaScriptの最新記事を毎日チェックされたい方はフォローお願いします。