yucatio@システムエンジニア

趣味で作ったものいろいろ

JavaScript

Draft.jsで何も出てこない→出てるはず

Facebook社のReact用リッチエディタDraft.js。 Overview | Draft.jsにあるサンプルを試したけれど、何も出てこなかったときのメモ。 ソースコード import React from 'react'; import {Editor, EditorState} from 'draft-js'; import 'draft-js/dist/Draft.c…

「ピーターからの問題」1から9までを使って分数の穴埋め算。解答のJavaScriptプログラム

Qiitaでこちらの問題をみたので、解いてみました。 これをjsで解けと会社の上司に言われたんですが全然わからん。誰かわかります?笑 pic.twitter.com/ZM6VmigaVQ— ケイセイ@JavaScriptと仲良くなりたい (@keisei_otsuka) 2020年2月2日 アルゴリズム 考える…

JavaScriptでPython風のzip_longest関数を実装する

こちらの記事でPython風のzip関数を実装しました。 yucatio.hatenablog.com 今回はzip_longest関数を作成します。以下のように、各配列の同じインデックスの要素をまとめます。 const a1 = [1, 2, 3] const a2 = ["Jan", "Feb", "Mar"] const a3 = ["Garnet"…

JavaScriptでPython風のzip関数を実装する

JavaScriptにzip関数がなかったので実装してみました。以下のように、各配列の同じインデックスの要素をまとめます。 const a1 = [1, 2, 3] const a2 = ["Jan", "Feb", "Mar"] const a3 = ["Garnet", "Amethyst", "Aquamarine"] zip(a1, a2, a3) #=> [[1, "J…

JavaScript Ruby Pythonで文字列中に変数を展開できる機能の名前と書き方

こんにちは。JavaScriptとRubyとPythonが頭の中でごちゃごちゃになっているブログ主です。 JavaScriptとRubyとPythonの文字列中に変数を展開できる機能の名前と書き方が頭の中でごちゃごちゃです。 RubyなのにJavaScriptの記法で書いてしまい、なぜ思った通…

JavaScript Ruby Pythonの配列やキーバリュー要素を展開したり多重代入したりする操作の名前と記号

こんにちは。JavaScriptとRubyとPythonが頭の中でごちゃごちゃになっているブログ主です。 JavaScriptとRubyとPythonの配列とキーバリューオブジェクトが頭の中でごちゃごちゃです。ググろうとしても、「あの、アスタリスクつける操作、なんだっけ」となり、…

date-fnsを使用してカレンダー作成する(その1: 今月のカレンダーを表示する)

簡単なカレンダーを作成します。date-fnsというJavaScriptの日時ライブラリを使用します。 デモ : date-fns calendar 要件 今月のカレンダーを表示したい 仕様 今月のカレンダーを表示する 日曜日を行の一番始めにする 今回はこのような表示まで完成させます…

date-fnsの日本語ファイルから月名を取得する

date-fnsの日本語ファイル( date-fns/index.js at master · date-fns/date-fns · GitHub )に、['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']という配列が用意されていたので、自分のプログラムから使えないかと…

date-fnsの日本語ファイルから曜日を取得する

date-fnsの日本語ファイル( date-fns/index.js at master · date-fns/date-fns · GitHub )に、['日', '月', '火', '水', '木', '金', '土']という配列が用意されていたので、自分のプログラムから使えないかと調べました。 調査結果 ja.localize.day(index, …

JavaScriptでn個ずつ配列を分割する

JavaScriptで配列を指定された個数ずつに分割します。 例えば、 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] という配列を3個ずつ分割するのであれば、 [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]] という配列になります。 実装方針 配列から一部を通り出すのには、 Arra…

date-fnsで「○分前」「約○時間前」「○日前」など現在時刻からのざっくりした時間経過を表示する

やりたいこと Twitterのように、投稿日付を表示したい。「○分前」「○時間前」「○日前」など、現在時刻からの経過時間をざっくり表示したい。 date-fnsのformatDistanceToNowでできる date-fnsのformatDistanceToNowを使えば、現在からのざっくりした経過時間…

nコマンドを使用してnode.jsをバージョンアップする

nを使用してnode.jsをアップデートしたときの記録です。 こちらの記事を参考にしました。 parashuto.com nのインストール nとは、node.jsのバージョンを管理するツールです。 nをインストールします。バージョン6.1.3がインストールされました。 $ npm insta…

JavaScriptのsetTimeoutを使用して途中経過を表示する (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 前回までで解けた場合のフィールドを表示しました。今回は途中の経過も表示します。 ピースが置けた時にフィールドを更新します。 途中経過の表示方法 途中経過を表示します。ピースが置けたときに画面を更新します。 画…

JavaScriptで値を指定して削除する(置かれていないピースの更新) (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 続いてunPlacedPieceの更新をします。unPlacedPieceはまだ置かれていないピースの番号を格納しています。置かれたピースの番号をここから削除します。 実装 JavaScriptでは、引数に渡された値と同じ値を削除する関数は用…

JavaScriptで2次元配列の重複を取り除く (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com 前回までで8パターンの回転・反転パターンを作成することができましたが、いくつかのピースについては重複があります。例えばこちら↓ このピースの配列は、下記のようになってます。 [ [ [1,1,1], [1,0,1] ], [ [1,1], […

JavaScriptで2次元配列のコピーと配列の反転 (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com ピースの反転を行うために2次元配列の反転を行います。8パターンのスピンの作成については以下の記事を参照してください。 yucatio.hatenablog.com 各spinは0番を始めとして矢印の順番で生成します。 前回は0番のスピン…

JavaScriptで転置を実装する (KATAMINOを解くプログラムを作成する)

★前回の記事 yucatio.hatenablog.com ピースの回転、反転を行うために2次元配列の転置を行います。転置を行う理由については以下の記事を参照してください。 yucatio.hatenablog.com 各spinは0番を始めとして以下の順番で生成します。 はじめに0番目のスピン…

JavaScriptのnew Array(n)をmapしたいとき fillをはさむ理由

経緯 配列をオブジェクトで初期化したい場合、 new Array(3).fill({foo: "ふう", bar:"ばあ"}) というコードだと、全てのインデックスが同じオブジェクトを指してしまうので、 調べたら new Array(3).fill().map(() => ({foo: "ふう", bar: "ばあ"})) という…

JavaScriptで「○分前」「○時間前」「○日前」など現在時刻からのざっくりした時間経過を表示したい場合は、Moment.jsのfromNowを使う

やりたいこと Twitterのように、投稿日付を表示したい。「○分前」「○時間前」「○日前」など、現在時刻からの経過時間をざっくり表示したい。 moment.jsのfromNowでできる moment.jsのfromNowを使えば実現できます。 Time from now デフォルトの設定では以下…