Vue2→3へ移行したらチェックボックスにチェックが付かない
環境
vue3.2.6 (OptionsAPI)
node 18.16.1
内容
Vue2で元気に動いていたチェックボックスがVue3に上げたら動かなくなった。
正確にはチェックボックスをクリックしてもチェックが付かない状態になった。v- modelの中身をconsole.log()で表示しても空っぽのまま。Vue2だとクリックしたチェックボックスのvalueが入っていたのになぜ・・・。
※チェックボックスは複数あるのでv_modelは配列を指定。
細かい話は省略するが、click時の関数にはクリックしたチェックボックスによって他のチェックボックスの要素を変更するような処理が入っている状態だった。
<input type="checkbox" id="hoge_1" value="hoge_1" v-model="checklist" @click="clickfunc(hoge_1)" />
解決
@clickを@changeにしたら動いた。
前任者がclickで実装していたのでそのままにしていたが、Vue3で動きが変わったのかな・・・?
参考
(追記) Click event is triggered before value is really changed. だって。
Typescript memo
Typescript
Javascriptの世界に型システムを導入した言語。
型推論のおかげで一つの変数に型の異なるデータを宣言するとコンパイルエラーになる。
foo = 'hello world';
foo = 10; // コンパイルエラーになる
またJavascriptの機能も使えつつ、アクセス修飾子、インターフェイス、ジェネリクスも使える。
コンパイルまでの動き
Typescript
→TypescriptソースがASTへ解析される。 ※AST=abstract syntax tree
→ASTが型チェッカーによってチェックされる
→ASTによってバイトコードにコンパイルされる
Javascript
→JavascriptソースがASTへ解析される。
→ASTによってバイトコードにコンパイルされる
→バイトコードがランタイムによって評価される
インストール
npm install -g typescript
tscコマンドが使えるようになる。
実際にアプリ開発するにはコンパイラだけ用意しても不便なのでビルドツールの「webpack」とプラグインの「ts-loader」もインストールする。
npm install typescript ts-loader webpack webpack-cli webpack-dev-server -D
※オプションの-Dは開発時にのみ使うパッケージであることを記録する。(package.jsonに記述される)
備考:
・webpack
…複数のjsファイルをくっつけて1つのjsファイルを作成するバンドルツール。最適化しているらしい。
・ts-loader
…webpackのプラグイン。tscを呼び出してコンパイルしている。コンパイルされたjsファイルをwebpackに渡している。
・webpack-dev-server
…webブラウザの変更を知らせて、ソースコードの変更を検知してwebpaackを再起動?して再描画している。
※サーバを起動したままソースの変更を取り込んで反映させる。
最後にTypescriptコンパイラ用の設定ファイル(tsconfig.json)を作成する。
npm tun init
{
"include":[ //add
"src//*" //add
], //add
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
(省略)
Angular memo1
Angularメモ
Angularとは
Googleが開発したtypescriptベースのフロントエンドwebアプリケーションフレームワーク。
半年に1度バージョンが上がるので、一年に一回は更改メンテナンスが必要になる。
Javaユーザにはなじみやすいフルスタック(=必要なライブラリは用意されている)。
AngularJS(バージョン1)とAngularと互換性がない。
またReactやVue.jsと比べてファイル数やコード量が多い。
Angularに内蔵されている非同期ツールであるRxJSは難解。
開発について
事前準備
用意するもの
・ブラウザ(chrome)
・node.js(https://nodejs.org/ja/)⇒LTSをダウンロード
・コマンドプロンプトを開いて「npx conwsay hello」をたたいて牛のアスキーアートが表示されればOK。
インストール
npm install @angular/cli@next
※@nextは最新、という意味。バージョンを指定する場合は@の後ろにバージョンを指定する。
インストールしたらアプリを立ち上げる。
ng serve
コンポーネントが変更されると検知して再度コンパイルして表示しなおしてくれる。
コンポーネント
画面を構成する部品。
AngularのAppcomponentは3つの部品で出来ている。
1.Typescriptクラス
2.HTMLテンプレート
3.表示を装飾するスタイルシート
cliのコマンドで作成するとこれらを自動で作成してくれる。あとはおまけでテストコードも。
例)
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
selectorはHTML上で割り当てられる名前。htmlではこの名前を使ってデータを参照する。 備考: 下記のようにhtml上でデータを参照するときに{}を使用するがこれをinterpolation(補間)という。
{{ title }}
参考リンク: https://angular.io/guide/interpolation
styleUrlsはCSSのリンクを記載する。カンマで続けて複数読み込むことも可能。
styleUrls: ['./test.component.css','./test.component2.css']
備考:cssの共通化について。
アプリ全体に同一のスタイルを飾る場合はルートのstyle.cssに記載すれば良い。
しかし、複数あるコンポーネントのうち、一部だけスタイルシートを共通化するということは可能だが、
コンパイルされる際にはそれぞれのコンポーネントごとにcssが生成されるためファイルサイズが大きくなる。
よって開発面で言うなれば管理がしやすいかもだが、
読み込む側のhtmlが多ければ多いほどファイル(サイズ)が大きくなるので注意が必要。
※CSSはコンポーネントごとに保有する、ということらしい。
⇒共通化を設計するならcssではなくscssとして作成し、共通スタイルシートをimportを使うと共通化しやすい。
備考:typescript中にhtmlを記載するとどうなるか
クラス内はサニタイズされて出力されるため、全部文字として扱われる。
よってhtmlタグを書いてもhtmlだと解釈されない。
備考:デバッグ方法について
フロントエンドなのでコンソールでエラーログやデバッグログを出すものらしい。
サービスクラス
サーバサイドとのやりとりはServiceクラスに任せるのが鉄板。
Serviceクラスは基本的にシングルトンなので、アプリ起動中はいろんなコンポーネントから使いまわしされる感じになる。
※使い方としては、コンポーネント側のコンストラクタにサービスクラスを記述する。
export class HogeComponent implements OnInit {
foo: Foo[] = []; //そういうインターフェイスクラスがあると想定
constructor(private fooService: FooService ) { } // サービスクラス呼び出し
ngOnInit(): void {
this.foo= this.FooService .getFoo(); // サービスクラス内のメソッドを呼び出し
}
}
coffeescript
環境
Ruby : 2.6.5 RobyonRails : 5.2.3
はじめてのcoffeescript
いろいろ調べたので自分的メモ。
呼び出し
railsはhead ⇒ body の順にレンダリングするため、body内部の処理よりも先に外部ファイルのcoffeescriptが読み込まれる。 よってhtml側にcoffeescriptを呼び出すように記述しないといけない。
呼び出し側
var hoge= document.getElementById('hoge'); hoge.onkeyup = function() { foo(hoge); };
呼び出され側
@foo= (hoge) -> if hoge.length == 0 hoge.style.visibility = "hidden" else hoge.style.visibility = "visible" …
thisの扱い
CoffeeScriptの'@'はthis.を表す。
すでにオワコンときいたので。
墓標の代わりに置いておきます
Microsoft Flow でCommon Data Serviceのレコードを一覧検索する際にGroupByしたいのだが
お作法が分からない。
そしてJoin的な書き方もしたいのだが
それもお作法が分からない。
Ionic(Angular)でandroid実機で動作確認
やりたいこと
位置情報を送るアプリをAndroidで動作させてみる。
環境
OS : Windows 8.1
Ionic CLI : 5.4.2
NodeJS : v10.15.3
npm : 4.0.5
さっそく開発
- nodistインストール
インストーラをダウンロード cordovaインストール
npm install -g cordova ionic
Android Studio / コマンドラインツールのダウンロード
ダウンロードページからそれぞれのZipファイルをダウンロード- Android studio(
android-studio-ide-181.5014246-windows.zip
)を適当なところに解凍。 例)d:\android
配下 - コマンドラインツール(
sdk-tools-windows-4333796.zip
)を適当なところに解凍。 例)d:\android\android-sdk
配下
- Android studio(
-
sdkmanager "emulator" "platform-tools" "platforms;android-27" "build-tools;27.0.3" "system-images;android-27;default;x86_64"
Windows Hypervisor Platform (WHPX) インストール
sdkmanager "extras;intel;Hardware_Accelerated_Execution_Manager"
新規プロジェクトつくる(位置情報を表示したいだけなのでblankにしておく。他にもtabsとかいろんなオプションがある)
ionic start myProject blank
cd myProjectGeolocationプラグインをインストール
ionic cordova plugin add cordova-plugin-geolocation
npm install @ionic-native/geolocation開発
unmet peer dependency ionic-native/coreという警告?でビルドが失敗する事象にでくわし、
なんだろうと思っていろいろ調べていたら思ったより時間がかかってしまった。
とりあえずimport { Geolocation } from '@ionic-native/geolocation/
ではなくimport { Geolocation } from '@ionic-native/geolocation/ngx
にしたら解消した。
・myProject\src\app\home\home.page.ts
import { Component } from '@angular/core'; import { Geolocation } from '@ionic-native/geolocation/ngx'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { geoLatitude: number; geoLongitude: number; geoAccuracy:number; constructor(private geolocation: Geolocation) {} getGeolocation(){ this.geolocation.getCurrentPosition().then((resp) => { this.geoLatitude = resp.coords.latitude; this.geoLongitude = resp.coords.longitude; this.geoAccuracy = resp.coords.accuracy; }).catch((error) => { alert('Error getting location'+ JSON.stringify(error)); }); } }
・ home.page.html
<ion-header> <ion-toolbar> <ion-title> Geolocation </ion-title> </ion-toolbar> </ion-header> <ion-content padding> <h1>Get Location</h1> <ion-button (click)="getGeolocation()"> Get Location </ion-button> <div *ngIf="geoLatitude"> <p>Latitude : {{geoLatitude}}</p> <p>Longitude : {{geoLongitude}}</p> <p>Accuracy : {{geoAccuracy}}</p> </div> </ion-content>
ブラウザで確認
サーバーを立ち上げて確認
> ionic serve
実機で確認
- ビルド
> ionic cordova build android
- ドライバーを用意する
公式サイトで usbドライバーをダウンロードし、下記の場所に解凍したファイルを置く。
Android SDKをインストールしたフォルダ\extras\google\usb_driver
「コントロールパネル」→「デバイスマネージャー」→ 「ほかのデバイス」を右クリック、でドライバーを更新する。
ドライバーは上記のフォルダを指定する。
- 証明書を作成する
下記のフォルダを証明書を作成してみる。
myProject\keys\android
keytool -genkey -v -keystore debug.keystore -alias [alias名] -storepass [storepass] -keypass [keypass] -keyalg RSA
※keytoolコマンドはJDKが通っていれば使えるハズ
- デバイスが認識したら実行
> adb devices
※adbコマンドはandroid-sdk\platform-tools がpathに入っていれば動作する。
リストに表示されたら、
> ionic cordova run android --livereload
※デバッグしたい場合はChromeブラウザで操作できる。Chromeに下記URLを打ち込み、デバイスのInspectリンクをクリックする。
chrome://inspect/#devices
参考サイト
Oracleにダンプを入れてもらおうと頼んだら思いのほか大変だったはなし。
後輩に、コマンドを調べながら新規ユーザー(スキーマ)を作成してそこにダンプを入れてみて、と依頼したらいろいろ引っかかったのでその時のメモ。
環境:Windows10、Oracle11g
接続識別子が認識できないといわれる。
環境変数「ORACLE_SID」が設定されていなかった。
というか「ORACLE_HOME」もなかったので設定することに。
ORACLE_HOMEの設定パスが分からない
ORACLEの本体がどこにあるか、について自分の記憶ベースで
「c:\app\ユーザー\product\オラクルのバージョン\dbhome_1」
にないですか?、と確認してもらったらなぜか無い。
どうやら場所が違って「c:\oracleexe」というフォルダに入っていた。
まあ、とりあえず現状優先で設定。
コマンド「impdp」を実行したが「ORA-39002: 操作が無効です」と言われる。
とりあえず、新規ユーザーは作成しているらしいが、
インポートしようとしているユーザと別のユーザでインポートしてたので、ユーザがちゃうんでない?と指摘。
(つまり権限がなかったもよう)
正しいユーザーでログインしようとしたら新規ユーザでログインができないことが発覚。
パスワードが間違っていたらしい。Create文を確認(コピペそのままで気が付かなかったらしい)。
CREATE USER [ユーザー名] IDENTIFIED BY [パスワード];
パスワードを確認して再度ログインができることを確認
まだ同じエラーが出る
ダンプがどうも認識できていないようだったので、指定したパスにちゃんとファイルがあるかどうか確認。
新規にディレクトリを作成したのでパスとファイルの確認したら合ってる…。
試しにデフォルトのパス「DATA_PUMP_DIR」でやってみたら、エラーが変わった。
create or replace directory [ディレクトリオブジェクト] AS [ディレクトリオブジェクトのパス];
expコマンドでエクスポートしたダンプはimpdpじゃなくてimpでインポートする
(内部の引継ぎミスで)エクスポートコマンドがexpdpじゃなくてexpだったらしく、impdpからimpへ書き換え。
バージョンが違うんでないの?というエラーがでた
思い込みなのかなんなのか、開発環境は11gだって聞いていたのにダンプは12cからエクスポートしてきたらしい。
ダンプはバージョンの小さい方へは入れられないので、Oracle12cを入れなおすか、ダンプ情報を書き換えるしかない。
実は勉強用に用意しているのでダンプの情報を書き換えよう、ということになり、フリーのバイナリエディタをダウンロードしてバージョンを12→11へ書き換えてどうにかインポート成功。
結果
環境変数と権限の確認は大事。
Oracleのバージョンが違うとかちょっと酷い目にあった…そんな基本的なところでミスするとは思わなかった。