Javascript

1/2ページ

【React】Reactに爆速で入門する4。Webpackを使ってバンドルする

はじめに Reactに爆速で入門する1~3までで、React自体に対する理解はできてきました。(第1回はこちら) しかし、入門1~3では、1つのファイルで、しかもReactやBabelの読み込みをscriptタグでCDNで行っていました。 実際のフロントエンド開発においては、この方式はまず採用されていなくて、大体はWebpackやBrowserifyやらを使用して、トランスパイル&バンドル […]

【React】Reactに爆速で入門する3。リストに画面から入力した値を追加する

はじめに 前回では、親コンポーネントから値を流し込んで、その値をリスト表示しました。 今回は、その画面表示した値に、画面からの入力値を追加していくというコードを書いていきます。 一旦ここまでできれば、親-子コンポーネントの関係、値表示、イベントハンドルまでが出来るようになりますので、とりあえずReactでの開発ができるようになってくる、はずです。実践で使うにはまだ足りませんが入門としては最低限やっ […]

【React】Reactに爆速で入門する2。親から値を受け取りリスト表示する

はじめに 業務でReactを使うことになったので爆速で入門するぜ!の第2回です。 前回の第1回では、とりあえずReactを使ってもともと決まりきったDOMを画面表示していましたが、今度はコンポーネントの外から値(配列)を与えて、その値を画面にリスト表示してみます。 雛形は前回記事のものと同じものを使用しますので、用意しておいてください。 前回にも書きましたが、暫くはReduxは使いませんし、Web […]

【React】Reactに爆速で入門する1。まずは1ファイルだけでHelloWorldする

はじめに みなさん、こんにちは!今回は、Javascript、というかReactの話です。 最近のフロントエンド開発ではまぁまず名前を耳にするReact。 私も、もう2年前位に遊びで手を出してみましたが、どうにもコンポーネントの切り単位の統一やデザイナーの分業といったところで引っ掛かりを感じ、結局Angularをメインで使用しています。 が、遂に、業務でReactを使った案件に携わることになり、重 […]

【Javascript】Canvasに多角形で「花」を描いてみる

花弁って幾何学的ですよね ある日、植物園で見たお花が、四角形を組み合わせたような形だったんですよ。 この写真の中心の部分、なんだか四角形とか、五角形とか…の組合せで描画できそうじゃないか…! ということで、JavascriptでCanvasに多角形を組み合わせたお花風の何かを書くようなコード書いてみました。 Canvasの使い方を学んでたけど…なんかいい練習問題 […]

【Javascript】$.ajax(jQuery)の代わりにはfetchがいいらしい

はじめに Javascriptで、動的に外部コンテンツをロードする際、ajaxしますよね。 ネットで「Javascript ajax」なんて調べると、大体jQueryでajaxする方法が出てきます。 が、最近はjQuery無しでクールにajaxするfetchというAPIがあるようなので、その話題です。 (もちろん、jQuery無しでもXMLHttpRequestをJavascriptで書けばいいん […]

日本の絶景を地図/写真の一覧で見れるWebアプリを作りました。旅行やツーリング計画にどうぞ

今回は、こんな感じのアプリを作った(作ってる)という紹介です。下記リンクで公開しています! 日本の絶景マップ どんなもの? 写真と地図で、日本の絶景を一覧化したものです。下記のような感じです。 写真で 写真で一覧表示写真の左上に表示されている数字が、その場所のオススメ度です。 高い程オススメで、最高は9です。勿論、この数字は主観です(キリッ) この数字は変動する可能性が大いにあります。 地図で 位 […]

【Javascript】Google Sheets APIを簡単に使うためのラッパーClassを作りました

はじめに 「Googleドライブ上のスプレッドシートをJavascriptで操作したいんじゃ!」 という要望がありました。 色々勉強して、一応JavascriptだけでSheetsAPIを操り、値の取得~更新はできるようになったのですが…これをいちいち手書きするのも大変だな、ということで、classにしておきました。 意外と日本語のSheetsAPI(Javascript)に関する情報 […]

【Javascript】爆速でmap, filter, reduceを学ぶ。js関数型プログラミングの入り口です。

今回は、3種の配列メソッド、map, filter, reduceについて使い方をさらっと学ぶよ!という記事です。 近年、じわりじわりと「関数型プログラミングの時代がくるぞ…!!」と言われ続けていますので、私も波に乗ろうと勉強を始めたところ、map, filter, reduceに出会いました。 私のように、さらっと触れておきたいという方向けの記事です。 簡単に試せる(Chromeとか […]

GoogleMapの検索結果から情報抽出するChrome拡張機能(プラグイン)を作りました(ソースもあるよ)

はじめに 今回は、GoogleMapの検索結果の場所情報から、 場所名称 郵便番号 住所 緯度/経度 現在のズーム値 の情報をワンクリックで抽出するよ、というChrome拡張を作りました、という記事です。 諸事情で、GoogleMapの位置情報を沢山集める必要が出たので作りました。 ちなみに、このChrome拡張は、2017/04/26時点のGoogleMapの仕様に合わせて作っていますので、仕様 […]