仕事で印象に残っている小ネタ。 普段はEC関連のシステムエンジニアをしています。とあるアプリをチームメンバーが改修した時の話です。 改修内容 担当しているサービスで、商品画像の上限枚数を5枚から12枚に変更する改修をしました。 私のチームが担当して…

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

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

前回は組み込みコンポーネントをMaterial-UIのコンポーネントに置き換え、簡単なスタイルを適用しました。 今回はuseStyleにプロパティを渡して、プロパティごとに表示を切り替えます。 ★前回の記事 yucatio.hatenablog.com 今回の変更点 日曜日と土曜日の日…

前回までで基本的なカレンダーの機能を作成することができました。今回は見た目を整えて行きましょう。Material-UIを利用します。 ★前回の記事 yucatio.hatenablog.com 今回の変更点 余白を作成する Material-UIのボタンを使用する ボタンを左端、中央、右端…

前回の記事の続きです。前の月や次の月に遷移できるようにします。Reactバージョン16.8.0から登場したReact hooksを使用します。 ★前回の記事 yucatio.hatenablog.com 要件 カレンダーを表示したい 最終的にはこちらが出来上がります↓ デモ : date-fns calen…

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

前回の記事の続きです。 yucatio.hatenablog.com 今回はひらがなに加えて、カタカナも国語辞典の見出し語順に並べます。 大辞泉の見出しの配列のページから、ひらがなとカタカナに関係ある部分をを引用します。 見出しは、五十音順に配列した。一字目が同じ…

Pythonなどのプログラミング言語では文字列のソートは 辞書式順序 - Wikipedia でされます。 これは、1文字目をみて、違う値であれば、その順序を、同じ値であれば2文字目を比較して…ということを繰り返す方法です。 例えば、 'はっか', 'はっぱ', 'はつか',…

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

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

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

ReactのJSX内で波括弧({と})を通常の文字として出力しようとしたところ、エラーになってしまったので、回避方法を記載します。 うまくいかない例 function App() { return ( <div> <div>JavaScriptではオブジェクトを、{key: value} の形式で作成できます。</div> </div> ); } こち…

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

エラー内容 create-react-appのバージョンを2.0.4から3.2.0へアップグレードしたところ、yarn create react-appの実行時にエラーが発生しました。 $ yarn create react-app time-in-words yarn create v1.9.4 [1/4] Resolving packages... [2/4] Fetching …

久しぶりにReactアプリを作成しようと思い、reate-react-appのバージョンも最新にしようとして試行錯誤したことを記録しておきます。 結論 メジャーバージョンをまたいだ最新バージョンにアップグレードする場合は--latestを指定する。 $ yarn global upgrad…

こんにちは。今の会社(web系)に新卒で入って今年で10年になるブログ主です。IT業界で10年ともなるとかなりの古株です。担当しているサービスはECで、入社した時にはすでに大きなサービスでしたが、ありがたいことに、この10年でさらに大きくなりました。 会…

こんにちは。新しい技術を学ぶとき、概念を表す単語でつまづくブログ主です。Dockerの用語がよくわからなかったのですが、Javaに例えると少しはわかるようになったので書いておきます。 Docker用語とJava用語の対比 かなりざっくりですが、以下のようにDocke…

★前回の記事 yucatio.hatenablog.com 現在の実装では、フィールドに新しくピースが置かれたときにフィールドのピースを描画しています。 フィールドに置かれたビースを再描画する際、フィールドに置かれたピースが一気に置き換わる瞬間があります。 このよう…

★前回の記事 yucatio.hatenablog.com ピースの表示をもう少し工夫してみましょう。 KATAMINOを遠いている最中、フィールドに置かれたピースをピースの選択エリアから消します。 これによって、ピースの選択エリアにあるピースを取ってフィールドに置いている…

★前回の記事 yucatio.hatenablog.com 現在のUIでは、解くのをスタートさせたときに、どの位置までKATAMINOが置かれるべきかわかりにくいです。今回はこれを改善します。 本物のKATAMINOでは区切りとなる位置にバーを置いて、どの範囲の中にピースを収めるの…

★前回の記事 yucatio.hatenablog.com 現在300ms間隔で描画を行なっていますが、ピースの数が多い場合は若干遅く感じます。そこで速度調節機能を追加します。 速度設定の追加 速度の設定を追加しましょう。 下記の記事で5段階のスライダーを用意しました。 yu…

★前回の記事 yucatio.hatenablog.com 一時停止、再開機能を実装します。 一時停止機能は、solver.solveで実行したsetTimeoutをキャンセル(clearTimeout)することで実現します。 timerの保存 setTimeoutをキャンセルするには、setTimeouotの戻り値が必要にな…

★前回の記事 yucatio.hatenablog.com "ピースをえらびなおす"ボタンが押されたときの動作をプログラミングしていきます。 フィールドに置かれているピース(placedPieces)を空にして、画面の状態(solverState)をピースの選択中(selectPiece)に変更します。 ac…

★前回の記事 yucatio.hatenablog.com KATAMINOが解き終わったときに、解けたか解けなかったかをダイアログに表示します。 ダイアログにはbootstrapのmodalコンポーネントを使用します。 ダイアログパーツの作成 Modal · Bootstrap に載っている例を参考にダ…

★前回の記事 yucatio.hatenablog.com KATAMINOを解くのが終わったときに、解けた(solvedSuccess)または解けなかった(solvedFailed)へ状態を遷移させます。 解けたか解けなかったかはsolverの中でわかるので、コールバックを使用してstateを更新します。 終了…

★前回の記事 yucatio.hatenablog.com フィールド上のピースの表示を行います。また、KATAMINOを解いているときのピースの選択エリアやボタンの部分も変更します。 フィールドに置かれているピースの表示 前回、表示に必要な情報をstate.placedPiecesに格納し…

★前回の記事 yucatio.hatenablog.com スタートボタンを押したときの挙動をプログラミングしていきます。 actionの登録 スタートボタンへactionを登録します。スタートボタンがクリックされたときにaction.startSolveを呼びます。この関数はすぐ下で実装しま…

★前回の記事 yucatio.hatenablog.com プログラミングをしていきます。まずは使うピースの選択です。 状態の追加 選択中のピースをstateに追加します。 初期値はpieceIdが1, 2, 9, 5, 10ですので、これを追加します。 js/state.js const state = { // One of …