ReactNative
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
概要
PoCでReactNativeを扱うことになりました。 初めて扱うので、色々と調べてブログにすることにします。 レベルは高くありませんが、興味がある方はぜひ読んでいただければなと思います。
ReactNative
一言で言うと？
Facebookが中心になって開発しているモバイルアプリケーションフレームワークです。つまりモバイルアプリを開発できるフレームワークですね(←そのまま)
クロスプラットフォームアプリ開発フレームワーク
具体的に書いていきます。
ReactNativeは名前の通りReactライクにネイティブアプリをクロスプラットフォームで開発することができます。
クロスプラットフォームはiOSとAndroidどちらでも動くことを意味し、ほぼ同じコードでiOSとAndroidどちらでも動くネイティブアプリを開発することができます。
余談ですが、自分はIonicで個人アプリ開発をしています。IonicはAngularライクでWebアプリの開発ができ、さらにそのコードはそのままネイティブアプリやPWAにも対応させることができます。
一方で、ReactNativeはネイティブアプリのみを開発します(ReactNative for Webを使えばWebアプリの開発も可能です)。最初ReactNativeの話を聞いた時に、私はIonicと同じだと勘違いしてしまいましたので要注意です(自分だけか←)
WebViewを使用せずに、各OSのネイティブをラップしたComponent・APIを使ってコードを書いているので、Webアプリを開発しているような感覚で、よりネイティブ感のあるアプリを作成することができます。
プログラミング言語・CLI
- JSX
- JavaScript
- TypeScript
ReactNativeは、Reactの思想「Learn once, Write anywhere(一度学んだら、どこでも書ける)」を少なからず受け継いでいるようです。Reactでネイティブアプリを書けるようにしているので、JavaScriptやTypeScriptでも書くことができます。
【CLI】
- Expo
- React-Native
- React-Native-CLI(非推奨)
Expoは開発環境を容易にし、開発の支援をしてくれるサービスです。初心者向けのCLIのようです。
React-Native-CLIは最近非推奨になり、組み込みのReact-Nativeを使用することが推奨されています。こちらは本格版のCLIのようで、玄人向けもしくはよりネイティブ寄りにアプリを開発したい場合などで使用するのが良いかと思います。
Setting up the development environment · React Native
採用実績
メリット
本格的なネイティブアプリを求められない場合において、開発スピードがとても速くなるのが特徴かなと思います。
また、ReactやWebの思想でWeb開発をしているエンジニアは、ReactNativeへの参入障壁は低いです。
デメリット
- ネイティブエンジニアには学習コストが高い
- エラー箇所が分かりにくい
- ReactNativeのアップデート対応が大変
やはりネイティブ感はJaveやSwiftには劣るのかなと思います。
また、これはIonicでアプリ開発をしていた時に感じたことですが、Webとネイティブでは思想が違うので、その考え方の切り替えや、Webと共通のコードでネイティブを開発するとエラーやデザインの崩れが出て大変でした。ReactNativeも同じようなことが起きると思います。
UIコンポーネント
NativeBase | Essential cross-platform UI components for React Native
React Navigation | React Navigation
React Native Paper
React Native Elements | React Native Elements
今後に向けて
あくまでも個人的な考えですが、フレームワークやプログラミング言語などを選ぶ際の基準の一つにその技術を開発・サポートしている会社があります。ネイティブアプリだとGoogleとAppleが開発に関わっている技術を選択するようにしています。
今回はその基準から外れたフレームワークに触れる機会に恵まれましたので、存分に活かして知見を広げていきたいと思っています。
...Pythonも調べないとなぁ
参考
素晴らしい記事に感謝致します。
「React Native」はなにがすごい？ リクルートのエンジニアが徹底調査 - ログミーTech
【入門編】React Nativeとは？メリット・デメリット…｜Udemy メディア
React Native - Wikipedia
Expo
react-native-cliパッケージが非推奨になっていました
Setting up the development environment · React Native
今日のワード(9/11)
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
概要
学んだワードを書き留めていく。
特定商取引法(特定商取引に関する法律)
訪問販売や通信販売などのトラブルが生じやすい取引において、購入者が受ける被害を防止するために事業者が守るべき義務を定めた法律。
- 氏名等の明示の義務付け
- 不当な勧誘行為の禁止
- 虚偽・誇大な広告の禁止
- クーリング・オフ制度の適用
訪問販売・通信販売・電話勧誘販売・連鎖販売取引・特定継続的役務提供・業務提供誘引販売取引・訪問購入の7つの取引について記載がある。
セキュリティバイデザイン
情報セキュリティを企画・設計段階から確保するための方策。
- 手戻りが少ない
- 低コスト
- 保守性の向上
NISCによると、IoTシステムについてはセキュリティバイデザイン思想で設計・構築・運用することを推奨している。
スプーリング
プリンタなどの低速な入出力装置に対するデータの転送を外部記憶装置(磁気ディスク装置など)を介して実行する機能のこと。
コアコンピタンス経営
他社にはマネのできない、企業独自のノウハウや技術などの強みを核とした経営を行うこと。
投機実行
分岐判断の結果が出る前に分岐先を予測して命令を先行実行していく方式。分岐の予測が正しければ先行実行していた命令で処理継続ができるので、予測の精度が高いほど性能向上が期待できる。 CPUの高速化のために使用されるパイプライン処理で使われる技術。
今日のワード(9/9)
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
概要
学んだワードを書き留めていく。
SOA
Service-Oriented Architecture(サービス指向アーキテクチャ) アプリケーションをコンポーネント化する手法の一つ。 業務上の一処理に相当するソフトウェアで実現されている昨日や部品を独立したサービスとし、それらを組み合わせ連携させることで全体のシステムを構築する手法、またはそれ自体のこと。 Webサービスやシステム構築の考え方として利用できる。
コンパイラ
人間が書いた(理解できる)ソースコードを一括して機械語に変換するプログラムのこと。 ソースコード→字句解析→構文解析→意味解析→最適化→目的プログラム
関係演算
関係データベースのデータ操作において、ある特定の条件に従い、新しい表を作り出すこと。または関係データベースの集合の操作を体系化したもの。 典型的なものは、射影、選択、結合、商。 関係データベースの操作を内容を表現するために使用できる。
ビットパターン
ビットの1と0の羅列のこと。
今後に向けて
不定期開催。
参考
素晴らしい記事に感謝致します。
SOAとは何だろう？---目次 | 日経クロステック（xTECH）
今日のワード(7/10)
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
概要
学んだワードを書き留めていく。 今日はここ。 インターフェース | TypeScript 日本語ハンドブック | js STUDIO
リテラル
「文字通り」「字義通り」を意味する語。ラテン語のlittera(文字)に由来する。 ソースコードに定められているデータ型の書式で直に記載した値やその書式自体のことをリテラルと呼ぶ。 文字列リテラルやオブジェクトリテラルなどのように使われる。
シグネチャ
シグネチャ(signature)は、署名を意味する。 メソッドや関数の名前や引数の数、型の順序、戻り値の型などの組み合わせのことで、そのメソッドや関数が唯一無二であることを示すものです。プログラミング言語によって、その組み合わせは異なる。 例えば名前が同じメソッドをいくつか定義した際に、シグネチャによってコンパイルなどで明確に識別することができる。 インデックスシグネチャやコールスシグネチャ、コンストラクトシグネチャなどのように使われる。
コールバック
コールバック(callback)は、直訳すると「呼び出し返す」を意味する。 プログラム中である関数などを呼び出す際に、途中で他の関数などを指定して実行すること。 途中で実行されるものが関数だった場合(コールバックされる関数)は、コールバック関数と呼んだりする。
メンバ
メンバ(member)とは、構成員や構成要素、一部分、部材などの意味を持つ英単語。 オブジェクト指向プログラミングでは、クラスやオブジェクト、インスタンスの持つ変数や関数などの要素をメンバと呼ぶことがある。 オブジェクトが持つ関数を「メンバ関数」、変数を「メンバ変数」と呼んだりするが、プログラミング言語によっては、関数(メンバ関数)を「メソッド」、変数(メンバ変数)を「プロパティ」と呼ぶことがある。
今後に向けて
学んで書いても、日々使わないと覚えられないジレンマ。 次はここから。 クラス | TypeScript 日本語ハンドブック | js STUDIO
参考
素晴らしい記事に感謝致します。
TypeScript プログラミング - オブジェクト型 - オブジェクト型リテラル
【Typescript/交差型/分割代入】分からなかったコードの解説
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
前回の記事で悩んだコードについて解説していきます。
const { tab } = event.composedPath().find((ele: any) => ele.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };
【Ionic/Angular】ion-tabsでページ遷移時に前データが残る場合の対処法【When used with Angular's router】 - 大田区から発信するゆるゆる日記
コード解説
疑問点
左辺の書き方でどうなるのかが分かりませんでした。
const { tab }
まずは代入する側の解説
event.composedPath().find((ele: any) => ele.tagName === 'ION-TAB-BUTTON') as EventTarget
eventはテンプレート側からクリックイベントで取得したものです。
composedPathはイベントから取得したノードを順番に含む配列を取得しています。
そして、取得したいtagNameを配列から取得し、as EventTargetで型キャスト(型アサーション)を行っています。
& { tab: string };
先ほどのEventTargetで定義ができていないtabプロパティを定義します(交差型)
左辺の解説
const { tab }
これは分割代入構文です。
右辺にある配列やオブジェクトから値を取り出して、左辺の変数に代入(変数宣言)します。
スプレッド構文と一緒に使うとさらに幸せになりそうです。
【JavaScript】スプレッド構文の便利な使い方まとめ - Qiita
今後に向けて
スプレッド構文や分割代入構文を使って、オブジェクトの部分更新を行う記事を書きたいと思います。
参考
素晴らしい記事に感謝致します。
Event.composedPath() - Web APIs | MDN
EventTarget - Web API | MDN Type Assertion（型アサーション） - TypeScript Deep Dive 日本語版
TypeScriptの型入門 - Qiita
分割代入 - JavaScript | MDN
【Ionic/Angular】ion-tabsでページ遷移時に前データが残る場合の対処法【When used with Angular's router】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
今回の記事はIonicのIssuesに投稿されている内容ですが、私の解釈で大丈夫か不安です(理由は後ほど説明します)
Allow to reset tab navigation stack on changing tabs. · Issue #17761 · ionic-team/ionic-framework · GitHub
現在、開発中のアプリはion-tabsでページ遷移を実現しています。また、各tab内でもページ遷移も行うことができます。
この場合、以下の手順でページ遷移を行うと、元ページには前のコンポーネントが残っていると思います。
tab1内でページ遷移→tab2に移動→tab1に移動 ➡️tab1にはページ遷移後のコンポーネントが残ったまま
理想とする仕様は、tab1に戻ったらtab1の最初のページが表示されることです。今回はこの仕様を実現するための記事を書いていきます。
ion-tabsでページ遷移後に、前のページの情報が残ってしまう時の対処法
懸念事項や実現方法の考察など
この章は読み飛ばしてもらっても問題ありません。
懸念事項
問題の解決にあたり、頭によぎった不安要素を列挙しておきます。
- 私自身がion-tabsの構造について完全に理解しきれていない。
- ネイティブアプリ/Ionicの仕様では、tab移動では前の情報を残しておくのが普通？
- Ionicの便利な機能を見落としているかもしれない
- Ionic5では良い解決策が用意されているかもしれない
そもそもtabは1つのページ内を遷移するための機能っぽいので、前の情報が残っているのが普通の仕様なんだと思います。
つまり僕のion-tabsの使い方が邪道ぽいです。。。
実現方法の考察
今回は2パターンを考えていました。
この記事では以下の2の実装をします。
- ページ遷移先のURLを指定する
- tabのスタックからpopする
1は簡単に実装可能でしたが、ページ遷移した時に前のコンポーネントが一瞬だけ見え不格好になったのでやめました。
手順
スタックについて
Ionicのtabやnavigationはスタック(stack)と呼ばれる方法でページ遷移を実現しています。
プッシュ(push)やポップ(pop)についても知っておけば、今回の記事が理解しやすくなると思います。詳しくは以下から。
https://wa3.i-3-i.info/word14717.html
ion-tab - Ionic Framework 日本語ドキュメンテーション
ion-tab-buttonにクリックイベント実装
該当する各ion-tab-buttonにクリックイベントを実装します。
また、ion-tabsに参照(ローカル)変数を定義します。
component.html
<ion-tabs #myTabs> <ion-tab-bar slot="bottom"> <ion-tab-button tab="tab1" (click)="popTab($event)"> <ion-icon name="home"></ion-icon> <ion-label>tab1</ion-label> </ion-tab-button> <ion-tab-button tab="tab2" (click)="popTab($event)"> <ion-icon name="book"></ion-icon> <ion-label>tab2</ion-label> </ion-tab-button> <ion-tab-button tab="tab3" (click)="popTab($event)"> <ion-icon name="checkmark-circle"></ion-icon> <ion-label>tab3</ion-label> </ion-tab-button> </ion-tab-bar> </ion-tabs>
テンプレート側の情報をコンポーネント側で取得
先ほど定義したクリックイベントと参照変数から情報をコンポーネント側で取得します。
component.ts
... @ViewChild('myTabs', {static: false}) myTabs: IonTabs; resetStackTabs = ['tab1', 'tab2', 'tab3']; ... popTab = (event: MouseEvent) => { const { tab } = event.composedPath().find((ele: any) => ele.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string }; } } ...
Tabsのスタックから前情報をポップする
component.ts
... popTab = (event: MouseEvent) => { ... return this.myTabs.outlet.pop(1, tab); } } ...
今後に向けて
以下のコードの解説記事を書こうと思います。
const { tab } = event.composedPath().find((ele: any) => ele.tagName === 'ION-TAB-BUTTON') as EventTarget & { tab: string };
参考
素晴らしい記事に感謝致します。
Allow to reset tab navigation stack on changing tabs. · Issue #17761 · ionic-team/ionic-framework · GitHub
https://wa3.i-3-i.info/word14717.html
ion-tab - Ionic Framework 日本語ドキュメンテーション
【HTML/Javascript】フロントエンドでCSVデータを出力する方法
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
【20/6/26 追記】
この記事の内容だとExcelでcsvを開くと文字化けする可能性があります。
この記事の内容+以下のサイトを参考にすると、Excelで開いても文字化けしないcsv(tav)ファイルを作ることができます(サイトのコメント欄も要チェックです)。まあExcel2016以降はUTF-8に対応されたみたいなので、この記事の内容でも問題ないかもですが...
javascript で作成したCSVファイルをエクセルで表示可能にする - Qiita
概要
Angular(フロントエンド)からCSVデータを出力したかったのですが、HTMLとJavascriptだけで簡単に出力ができたので、その備忘録を書きます。
今回のブログのコードはAngular(Typescript)で記述しますが、使用している技術はHTMLとJavascriptの技術になります。ですので、Javascriptを使用されている方も参考にできる記事になっていると思います。
CSVデータ出力方法
処理の流れ
- ユーザ(画面)がクリックイベントを発火する
- 多次元(2次元)配列でデータを作成
- 多次元(2次元)配列のデータをJSON形式に変換し、さらにCSV出力方法を追加
- HTMLでa要素を作成
- 4のa要素に3のJSON形式のデータとdownload属性を追加する
- HTMLドキュメントに5のa要素を追加する
- a要素でクリックイベントを発火させる
- a要素を破棄する
最終的にJSON形式に変換できればCSV出力はできるので、多次元(2次元)配列ではなくても、オブジェクトデータなどでもCSV出力は可能です。
多次元(2次元)配列を使った理由
2次元配列の構造は以下のような感じです。
var a = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ]
上記のデータのうち1つの要素がCSVの1行になるわけですが、上記データの構造と以下のCSVデータ構造(分かりやすいようにスプレッドシートの画像を載せています)を見比べてみるとどうですか？構造が似ていていませんか？
私は似ているなと思い、データ構造のイメージがしやすかったので、2次元配列を使うことにしました。
多次元(2次元)配列とは？
2つ以上のインデックスが組み合わさっている配列で、配列の中に配列があるイメージです。JavaScriptでは多次元配列という構文は用意されていませんが、多次元配列のように配列を組み合わせても使うことはできます。
詳しくはこちらをご覧ください。
画面とメソッドを作成
component.html
<button (click)="downloadCsv()">CSVダウンロード</button>
component.ts
export class TestComponent { downloadCsv() { // 以下で記述 } }
2次元配列データを作成し、JSON形式に変換
component.ts
downloadCsv() { const array: stirng[][] = [ ['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9'], ] // 本来であれば、foerEachやmapなどを使って2次元配列を作ることになるかと思います。その場合は、pushやconcat、new Arrayなどを使うことが多いと思います。 const csvData: string = this.arrToCSV(array) } arrToCSV(array: string[][]): string { let csvData = 'data:text/csv;charset=utf-8,'; /// 最初にcsvDataに出力方法を追加しておく arr.forEach(a => { const row = a.join(','); csvData += row + '\r\n'; }); return csvData; }
a要素を作成して、csvを出力
component.ts
downloadCsv() { ... const csvData: string = this.arrToCSV(array) const encodedUri = encodeURI(csvData); // csvDataをエンコード化する const ele = document.createElement('a'); // a要素を作成する ele.setAttribute('href', encodedUri); // a要素に出力データを追加 ele.setAttribute('download', 'test' + '.csv'); // a要素に出力情報を追加。「'test'」部分は変数を入れることも可能。 ele.style.visibility = 'hidden'; document.body.appendChild(ele); ele.click(); // HTMLドキュメントに追加したa要素を実行(clickイベント発火) document.body.removeChild(ele); }
今後に向けて
知らないことが無限に出てくる。
参考
素晴らしい記事に感謝致します。
多次元配列 - 配列 - JavaScript入門
クライアント側でCSV生成してダウンロードさせる - ryotah’s blog
【JavaScript】配列データをCSVファイルとして保存できるようにする | あれは魔法だろうか？
Export JSON to CSV file in Angular - GeeksforGeeks
