JavaScript

Date PickerライブラリのFlatpickrを使ってみる

Date PickerライブラリのFlatpickrを使ってみる

File APIを使用してローカルのJSONファイルをブラウザで読み込む

ローカルのJSONファイルを読み込んでオブジェクトに展開する。

firebaseのログアウト機能を実装してみる

ユーザーがログインしていたらログアウトボタンを、ログインしていなかったらログインボタンを表示する。

firebaseのログイン機能を実装してみる

題の通り。firebaseのユーザー登録ログイン機能を実装してみる。

firebaseユーザー登録機能を実装してみる

firebaseのユーザー登録機能を実装してみる。

【JavaScript実験】 Google Apps ScriptでLINEにメッセージを送る

Google Apps ScriptからLINEにメッセージを送信してみた。

【JavaScript実験】 Google Apps ScriptでTwitterの検索結果を取得する

さしあたりコードのみ。 function app() { var properties = PropertiesService.getScriptProperties(); var KEY = properties.getProperty("TWITTER_API_KEY"); var SECRET = properties.getProperty("TWITTER_API_SECRET"); var credentials = createCrede…

【JavaScript実験】 Google Apps Scriptをバックエンドとして利用する

Google Apps Scriptをバックエンドとして使えないか試してみた。 結果としては十分使えそうだが、認証周りが厄介かもしれない(Googleにログインしていないと使えない)。 https://cosmology233.github.io/sandbox/hatena/2016/10/23/ プロジェクトを作成す…

【JavaScript実験】 即時関数を利用したループ

即時関数に名前を与えると再帰処理が便利になる。

【JavaScript実践】 Google Map上に大阪市内の保育所を表示する

Google Maps APIを利用してページに大阪市内の保育所を表示する。

【JavaScript実践】 Google Map上に阿倍野区域のポリゴンを表示する

Google Maps APIを利用してページに阿倍野区域のポリゴンを表示する。

【JavaScript実験】 カメラの映像を取得する

スマートフォンのカメラから映像を取得して `` タグで描画するサンプルを作成した。

【JavaScript実践】 言語処理100本ノック

「第1章: 準備運動」の途中まで。 www.cl.ecei.tohoku.ac.jp (function() { console.log(q03()); function q00() { // 文字列"stressed"の文字を逆に(末尾から先頭に向かって)並べた文字列を得よ. var str = "stressed"; var result = ""; for(var i = st…

【JavaScript実践】 Google Map上に2点間の経路を表示する

2点の座標を指定し、座標間の移動経路を描画する。

【JavaScript実践】 地名や住所から緯度、経度を求める

地名や住所から緯度、経度を求める。

【JavaScript実験】 Androidのブラウザで出力されるログを確認する。

ADBを使えばログが確認できるようなので導入してみた。

【JavaScript実験】複数行の文字列

文字列を複数行でどう記述するか、についての記事を読んだので、思いつくパターンを整理してみた。 https://cosmology233.github.io/sandbox/hatena/2016/09/19/ (function() { var str1 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed d…

【React実験】 Reduxテンプレート(非同期対応)

非同期対応のReact x Reduxテンプレート(自分用)を作成したのでメモを残しておく。

【React実験】 Reduxを試してみる

読み方はリダックス。リデュークスではない。stateの管理がしやすくなるエコシステム。名前をよく聞くので試してみた。

【React実験】 gulpの使用

前回の記事と同じような機能をgulpで実装してみた。

【React実験】 Webpackの使用

JavaScript関連のエントリにwebpackの話題が良く出てくる。現状必要に迫られているわけじゃないから無視してたけど、やっぱり使い方くらいは知っといた方がいいかなと思って使ってみた。

【JavaScript実践】単語帳作成 2

外部データベースとしてmilkcocoaを使う。

【ウェブ制作】 ホームページ作る 1

作っては消し、作っては消し。これで何度目かになるかわからないがまた自分のホームとなるウェブページを作ってみようと思う。雰囲気駆動開発。

【JavaScript実践】 外部データベースの利用(milkcocoa) 4

作成した掲示板に、ほかの人の書き込みがリアルタイムで反映されるようにする。

【JavaScript実験】 Auth0の利用

ユーザー認証サービスAuth0を試してみた。

【JavaScript実践】 外部データベースの利用(milkcocoa) 3

作成している掲示板にログイン機能を実装する。

【JavaScript実践】 外部データベースの利用(milkcocoa) 2

milkcocoaへの書き込み、milkcocoaからの読み込みを試す。簡易掲示板のようなものを作成する。

【JavaScript実践】 外部データベースの利用(milkcocoa) 1

外部データベースとしてmilkcocoaを利用してみる。

【JavaScript実験】 文字列内検索

自分ならどうするだろう、と考えてみたところ、 testを使うのが一番読みやすくて好きかなあと思った。もしくはmatchかなあ。

【JavaScript実践】単語帳作成 1

単語帳を作成してみようと思う。

【JavaScript実践】 シェアボタンの自作

facebookのシェアボタンのデザインが崩れたり、Twitterのツイートボタンの表示が「list」になってたりするのでシェアボタンを自作することにした。

【Reactエラー】 onClickに指定したメソッド内のthisがundefinedを返す問題

undefinedはボタンをクリックした時に出力される。ボタンクリック以外はすべてAppオブジェクトが出力されている。

【React入門】 7 refs概要

this.refs.inputを使用して、ref="input"の属性を持つ要素を取得できる。

【JavaScript実験】 Fetch

FetchはXHRと同様に外部との通信を扱う。

【JavaScript実践】 XHR

この記事ではXHRを使用した簡単なスクリプトを書く。

【JavaScript実践】 Google Map上にマーカーと吹き出しを設置する

地図上にマーカーを設置し、マーカークリック時にインフォウィンドウを表示する処理を書いていく。

【JavaScript実践】 Google Mapを表示するための最小構成

Google Maps APIを利用してページに地図を描画するようなスクリプトを書いてみる。今回は指定した座標、倍率で地図を描画するところまで。

【ES2015入門】 3 アロー関数

アロー関数と無名関数の間にはthisの扱い方の違いがある。

【ES2015入門】 2 無名関数

ES2015では無名関数の扱いが結構変わる。

【ES2015入門】 1 変数

ES2015には変数の定義の仕方が3つある。varとlet、それからconstだ。

【React入門】 7 コンポーネントのライフサイクル

実際にライフサイクルの各イベント発火時にログを出力するテストページを作成してみた。

【React入門】 6 state概要 2

明示的にDOMを書き換えなくても、stateの変更は自動的に画面に反映される。

【React入門】 5 state概要

propがコンポーネントへ渡す変数だったのに対して、stateはコンポーネント内で定義し、使用する変数である。

【React入門】 4 prop概要 2

propには文字列以外のデータも渡すことができる。

【React入門】 3 prop概要

propはコンポーネントに渡すことができる変数のようなもの。

【React入門】 2 複数コンポーネント

Reactではこのように、機能ごとにコンポーネントを複数作成して画面を構成していく。

【React入門】 1 最小構成

最小構成を意識してReactを組んでみた。まだ学び始めたばかりなので仕様や使い方を誤解している部分もあるかもしれない。

【JavaScript実践】 ブログタイトルのリンク先を記事一覧画面にする

ブログタイトルをクリックすると、普通はブログトップに飛びます。このリンク先アドレスを書き換えてみます。リンク先を記事一覧画面などに変更することができます。