GN125と過ごすSEのブログ GN125、グラディウス400のメンテナンス/カスタムブログです。ときどきIT系の話。
はじめに Reactに爆速で入門する1~3までで、React自体に対する理解はできてきました。(第1回はこちら) しかし、入門1~3では、1つのファイルで、しかもReactやBabelの読み込みをscriptタグでCDNで行っていました。 実際のフロントエンド開発においては、この方式はまず採用されていなくて、大体はWebpackやBrowserifyやらを使用して、トランスパイル&バンドル […]
はじめに 前回では、親コンポーネントから値を流し込んで、その値をリスト表示しました。 今回は、その画面表示した値に、画面からの入力値を追加していくというコードを書いていきます。 一旦ここまでできれば、親-子コンポーネントの関係、値表示、イベントハンドルまでが出来るようになりますので、とりあえずReactでの開発ができるようになってくる、はずです。実践で使うにはまだ足りませんが入門としては最低限やっ […]
はじめに 業務でReactを使うことになったので爆速で入門するぜ！の第2回です。 前回の第1回では、とりあえずReactを使ってもともと決まりきったDOMを画面表示していましたが、今度はコンポーネントの外から値(配列)を与えて、その値を画面にリスト表示してみます。 雛形は前回記事のものと同じものを使用しますので、用意しておいてください。 前回にも書きましたが、暫くはReduxは使いませんし、Web […]
はじめに みなさん、こんにちは！今回は、Javascript、というかReactの話です。 最近のフロントエンド開発ではまぁまず名前を耳にするReact。 私も、もう2年前位に遊びで手を出してみましたが、どうにもコンポーネントの切り単位の統一やデザイナーの分業といったところで引っ掛かりを感じ、結局Angularをメインで使用しています。 が、遂に、業務でReactを使った案件に携わることになり、重 […]
花弁って幾何学的ですよね ある日、植物園で見たお花が、四角形を組み合わせたような形だったんですよ。 この写真の中心の部分、なんだか四角形とか、五角形とか…の組合せで描画できそうじゃないか…！ ということで、JavascriptでCanvasに多角形を組み合わせたお花風の何かを書くようなコード書いてみました。 Canvasの使い方を学んでたけど…なんかいい練習問題 […]
はじめに Javascriptで、動的に外部コンテンツをロードする際、ajaxしますよね。 ネットで「Javascript ajax」なんて調べると、大体jQueryでajaxする方法が出てきます。 が、最近はjQuery無しでクールにajaxするfetchというAPIがあるようなので、その話題です。 (もちろん、jQuery無しでもXMLHttpRequestをJavascriptで書けばいいん […]
今回は、こんな感じのアプリを作った(作ってる)という紹介です。下記リンクで公開しています！ 日本の絶景マップ どんなもの？ 写真と地図で、日本の絶景を一覧化したものです。下記のような感じです。 写真で 写真で一覧表示写真の左上に表示されている数字が、その場所のオススメ度です。 高い程オススメで、最高は9です。勿論、この数字は主観です(ｷﾘｯ) この数字は変動する可能性が大いにあります。 地図で 位 […]
はじめに 「Googleドライブ上のスプレッドシートをJavascriptで操作したいんじゃ！」 という要望がありました。 色々勉強して、一応JavascriptだけでSheetsAPIを操り、値の取得~更新はできるようになったのですが…これをいちいち手書きするのも大変だな、ということで、classにしておきました。 意外と日本語のSheetsAPI(Javascript)に関する情報 […]
今回は、3種の配列メソッド、map, filter, reduceについて使い方をさらっと学ぶよ！という記事です。 近年、じわりじわりと「関数型プログラミングの時代がくるぞ…！！」と言われ続けていますので、私も波に乗ろうと勉強を始めたところ、map, filter, reduceに出会いました。 私のように、さらっと触れておきたいという方向けの記事です。 簡単に試せる(Chromeとか […]
はじめに 今回は、GoogleMapの検索結果の場所情報から、 場所名称 郵便番号 住所 緯度/経度 現在のズーム値 の情報をワンクリックで抽出するよ、というChrome拡張を作りました、という記事です。 諸事情で、GoogleMapの位置情報を沢山集める必要が出たので作りました。 ちなみに、このChrome拡張は、2017/04/26時点のGoogleMapの仕様に合わせて作っていますので、仕様 […]
