[React Native]ReactNativeとWebViewのデータ連携 - Qiita
概要 ReactNativeのアプリでWebViewを使う時に、Reactの世界とWebViewの世界でデータのやり取りをする方法を調べたのでそれの紹介 本題 WebViewとは スマホアプリの中にWebページを表示する仕組み ReactNativeのWebView ReactNativeではWebViewというコンポーネントが用意されている WebViewコンポーネントにURLを属性で渡すとアプリでWebページを表示できるようになる ViewとかTextとかのコンポーネントと同じ感覚で配置するだけで使える 何をやりたいのか アプリの中にWebViewを埋め込む時に相互にデータのやりとりをしたい WebView内で入力した情報をアプリ側で使用したいとか アプリ側で持っている情報をWebView内に埋め込みたいとか アプリ->WebView アプリからWebViewに情報を渡す方法 やり方
![[React Native]ReactNativeとWebViewのデータ連携 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c129118f53e2e91384a82def5d89bad8be8fbdb7/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTc1MjEzJTJGcHJvZmlsZS1pbWFnZXMlMkYxNDkxODI1ODgxP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWFkZjNmMmZhOTcwNzNlN2Q3YzkwYzg1YzM1NzA5NmIz%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253De7737dac41084cef8c42150b2f8989b0%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUmVhY3QlMjBOYXRpdmUlNURSZWFjdE5hdGl2ZSVFMyU4MSVBOFdlYlZpZXclRTMlODElQUUlRTMlODMlODclRTMlODMlQkMlRTMlODIlQkYlRTklODAlQTMlRTYlOTAlQkEmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1iYWRkNWM0ODIzODBlNGZhYzhmNDY0YmJhN2I0ZjdlOA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBvemFraTI1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9YmUzN2UyNzAzYjZmMjUyNWFkMGE3ZGE1Y2EwNmVmZDc%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D0c2bd650d0310fb4cbb5f677aeb0013f)
JavaScriptだけでTrello風タスク管理ボードを開発できるライブラリ「jKanban」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、簡単なJavaScriptコードだけでTrello風の「タスク管理ボード」を開発することができるライブラリのご紹介です！ 非常にカスタマイズ性が高く、自分好みのタスク管理アプリを構築したい人などには最適でしょう。 コードも簡単で初心者の方もすぐに理解できると思うので、ぜひ参考にしてみてください！ 【 jKanban 】 ■「jKanban」の使い方 それでは、まず最初に「jKanban」を利用するための準備から始めていきましょう！ 必要になるのは専用の「JS / CSS」ライブラリで、GitHubからそれぞれ取得して読み込むだけなのでお手軽です。 これらのライブラリは次のようにHTMLへ追記しておけば準備完了です。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>j
Electron で外部アプリの起動・停止を行う - Qiita
ElectronのGUIに起動・停止ボタンをつけて，外部アプリの起動・停止をしてみた． 検証環境 macOS Sierra 10.12.1 electron: ^1.4.8 起動＆停止 execFile で .app を実行し，ps aux でプロセス番号を取得する方法を試した． execFile と exec を同期的に実行すると，後者でプロセス番号が取得できない時があったので， child-process-promise をつかっている． const {exec, execFile} = require('child-process-promise'); const kill = require('tree-kill'); const APP_PATH = 'path/to/app/test.app' // ※ APP_NAMEの場合、同じ名前が含まれるプロセスが他に存在するとプロセス
JavaScript：undefined値の判定
JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近の処理系ではconst扱いになって上書
ES6時代のコーディングスタイルを考える - Qiita
ここではコーディングスタイルを考える上で、ES6（ECMAScript2015)の以下の特徴に注目して考察するものです。 変数宣言は、constを基本とする クラス宣言文や関数宣言文はブロックスコープ 文字列では、テンプレートリテラルを活用する ジェネレータのために、複数の構文が拡張された また、以下の基準を採用していることを特に触れておきます。 ES5コードの混在、ES5時代のスタイルとの互換性は取らない ES6 modulesが存在しない状況で適用可能なスタイルを取る 視認性を犠牲にコーディング時のミスの影響を隠蔽するスタイル(ヨーダ記法など)は取らない 局所視認性より、全体視認性での高さを重視する 微妙に違うものを区別しやすいスタイルにする 同じものは同じスタイルを取る 一覧しやすくコンパクトに書ける方を採用する 変数宣言は、constを基本とする ES6では再代入を認めないcons
最新JavaScript E2015(ES6)の新機能―変数と関数について
2015年にJavaScriptの標準仕様として提案されたES2015(ES6)。その最新仕様を優しく紹介します。2回目の今回は、変数と関数に関する新機能を紹介します。ちなみに、最新の言語仕様であるES2015を利用しますので、最新のブラウザー（Chrome50以降やFirefox46以降）あるいは、Node.jsの最新バージョン6以降をダウンロードして試してみてください（http://nodejs.org）。 変数を宣言するletとconstが追加された！ さて、ES2015では、変数宣言を行う「let」と「const」が追加されました。もちろん、ES2015以前にも変数宣言を行う「var」がありました。以下のようにして、変数を宣言できました。
Riot はミニマルで Web Components のような UI ライブラリ - Qiita
古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと
JavaScriptのES2015クラスでmixinを実装する世界一美しい方法 - Qiita
こいつまた煽りっぽいタイトル書いてるな？ 皆さんES2015のclass使ってますか？ ES2015のクラス、prototypeを利用したり、{}を利用したりして、様々な書き方で実現できるクラスっぽい何かを、単一の記述でまとめた偉業は素晴らしいですよね。 でも、反面まだまだ機能が全然足りません。本当に足りません。 そこで今回は足りない機能をなんとかしよう、みたいな話です。 まずは基本的な継承の振り返り ES2015クラスでは、「extends」を用いることで、継承を実現することが出来ます。 class Swimmable{ swim(){ console.log("すいすいっ"); } } class Fish extends Swimmable{} const fish = new Fish(); fish.swim(); // "すいすいっ"
ES6 チートシート | POSTD
日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LINE Bot を作るための Node.js ライブラリを作った - Qiita
