<input type="file" webkitdirectory />は、Chromium系ブラウザでディレクトリごとファイルを選択するタグですが、Reactで使うのに一工夫必要だったのでメモします。 普通にそのまま書いた場合 <input type="file" webkitdirectory /> Type '{ type: string; webkitdirectory: true; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'. Property 'webkitdirectory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'. does not existって怒られてしまいます。 解決策 <input type="file" directory="" webkitdirectory="" /> directory="" webkitdirectory=""と書くと動くようになります。 TypeScriptを使っている場合 <input type="file" /* @ts-expect-error */ directory="" webkitdirectory="" /> /* @ts-expect-error */で強制的に黙らせます。

はじめに 学習するに至った経緯 2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。 入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、 卒業後、フロントエンドのエンジニアを目指す事に。 Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。 const, let等の変数宣言 var JavaScript時代ともにバージョンが更新されて、「ES6（ECMAScript6）」が現時点での最新版。 以前までは変数宣言に『var』のみを使用していたが、ES6の環境から『let』と『const』が新たに追加された。『var』はスコープの範囲を広げる自由度の高い変数のため、意図していないエラーが起こり得ることから、使用頻度は低い。 let 『let』と『var』においては初期値の設定は必須ではない。 『let』と『var』の違いは2つで、① 『var』は再宣言可、『let』は再宣言不可と② 『var』は関数スコープ、『let』はブロックスコープである。 const 『const』で定義した変数に値を代入することはできない。 『let』と『const』の違いは、『再代入ができないこと』である。 つまり、『const』は、再宣言も再代入もできないため、値を一度決めたら途中で変更ができない。 『const』で定義したオブジェクトはプロパティの変更が可能。 let, const, varの特徴 　 l e t const v a r 再代入 ⚪︎ × ⚪︎ 再宣言 × × ⚪︎ ブロックスコープ ⚪︎ ⚪︎ × 関数スコープ ⚪︎ ⚪︎ ⚪︎ 変数の宣言文字列や数字、配列などを格納すること。 再代入文字列や数字、配列などを格納すること。 再宣言一度宣言した変数を、同じ変数名を使って再び宣言をし直すこと。 スコープ変数や関数の有効範囲のこと。 ブロックスコープブロックごとに囲まれた範囲のこと。 関数スコープ関数のブロックごとに作られる範囲のこと。 テンプレートリテラル（テンプレート文字列） 文字列の中に変数や定数などを埋め込んだり、改行を入れたりすることができるようにして、 文字列の扱いを楽に便利にできる構文のこと。 参考サイト モダンJavaSciptの基礎から始める挫折しないためのReact入門 【JavaScriptの基本】letとconstどうやって使い分ける？スコープとの関係性も意識しよう JavaScriptのletとは？知っておくべき特徴と使い方について

こんにちは、にんじゃわんこさん JavaScript JavaScript const name = "にんじゃわんこ"; console.log(`こんにちは、${name}さん`); JavaScript const name = "にんじゃわんこ"; console.log("こんにちは、" + name + "さん"); Ruby Ruby name = "にんじゃわんこ" puts "こんにちは、#{name}さん" Ruby name = "にんじゃわんこ" puts "こんにちは、" + name + "さん" 連結は文字列同士でしかできないため、基本的に変数展開を使うのが無難

初投稿 アウトプットが苦手な自分が練習の一環として記事を書いてみる。 第一回目はJavaScript配列の操作（forEach map filter reduce）の使い方について書いていく。 forEach 配列の各要素に対して関数を1つずつ実行するメソッド ※後述するmapやfilterと違い新しい配列を作成しない。 forEach const arr = [10, 20, 30, 40, 50]; arr.forEach(function(elm) { console.log(elm); }); // 実行結果 // 10 // 20 // 30 // 40 // 50 map 配列の各要素に対して関数を1つずつ実行し、戻り値を元に新しい配列を作成するメソッド map const arr = [10, 20, 30, 40, 50]; const result = arr.map(function(elm) { return elm * 2; }); console.log(result); //　実行結果 // [ 20, 40, 60, 80, 100 ] filter 配列の各要素に対して関数を1つずつ実行し、戻り値を元に新しい配列を作成するメソッド mapと違い、戻り値が「true」の要素のみで配列を作成する。 ※作成した配列の値は関数実行時の要素の値が格納される。 filter const arr = [10, 20, 30, 40, 50]; const result = arr.filter(function(elm) { return elm > 29; }); console.log(result); // 実行結果 // [ 30, 40, 50 ] reduce 配列の各要素に対して関数を1つずつ実行し1つの値を取得するメソッド ※使ったことなかったので使い方を調べた reduce const arr = [10, 20, 30, 40, 50]; const result = arr.reduce(function(a, b) { return a + b; }); console.log(result); // 実行結果 // 150 ソースを見ればなんとなくやっていることが分かるが念の為、実行時のイメージを作成。 関数実行回数 a b 返り値 1回目 10 20 30 2回目 30 30 60 3回目 60 40 100 4回目 100 50 150 1回目のaには配列の最初の要素「10」が入り、bには次の要素「20」が入る。 2回目のaには1回目の返り値「30」が入りbには1回目のbの次の要素（今回は）「30」が入る。 以降は配列の要素分同じように繰り返し、最後の返り値の「150」がresultに代入される動きとなる。

はじめに こんにちは。SBI証券での投信積立にクレカが使用できるようになったので、対象の三井住友カードを申し込みました。 クレカで積立できるとポイントたまるのでお得です！皆様もぜひ！ さて、今回は、JavaScriptでPHPのarray_padをしたいときがあり、生み出したコードを共有します。 コピペで使えるので良ければ使ってくださいませ PHPのarray_pad関数とは 配列が指定長に満たない場合、指定長まで指定の値で埋めることができる関数です。 リファレンスこちら↓ $ php --rf array_pad Function [ <internal:standard> function array_pad ] { - Parameters [3] { Parameter #0 [ <required> array $array ] Parameter #1 [ <required> int $length ] Parameter #2 [ <required> mixed $value ] } - Return [ array ] } 使用例 <?php $array = [12, 10, 9]; $length = 5; $val = 'hello'; $result = array_pad($input, $length, $val); // [12, 10, 9, 'hello', 'hello'] ?> JavaScriptでarray_padしたい！ const array = [12, 10, 9] const length = 5 const val = 'hello' const result = [ ...array, ...[...Array(length - array.length)].map(e => val) ] // [12, 10, 9, 'hello', 'hello'] おわりに いろいろやり方あると思いますが、個人的に一番シンプルにできた気がしてます それでは！

はじめに こんにちは。SBI証券での投信積立にクレカが使用できるようになったので、対象の三井住友カードを申し込みました。 クレカで積立できるとポイントたまるのでお得です！皆様もぜひ！ さて、今回は、JavaScriptでPHPのarray_padをしたいときがあり、生み出したコードを共有します。 コピペで使えるので良ければ使ってくださいませ PHPのarray_pad関数とは 配列が指定長に満たない場合、指定長まで指定の値で埋めることができる関数です。 リファレンスこちら↓ $ php --rf array_pad Function [ <internal:standard> function array_pad ] { - Parameters [3] { Parameter #0 [ <required> array $array ] Parameter #1 [ <required> int $length ] Parameter #2 [ <required> mixed $value ] } - Return [ array ] } 使用例 <?php $array = [12, 10, 9]; $length = 5; $val = 'hello'; $result = array_pad($array, $length, $val); // [12, 10, 9, 'hello', 'hello'] ?> JavaScriptでarray_padしたい！ const array = [12, 10, 9] const length = 5 const val = 'hello' const result = [ ...array, ...[...Array(length - array.length)].map(e => val) ] // [12, 10, 9, 'hello', 'hello'] 2021/07/26(月) 追記 コメントをいただきまして、こちらの方がスマートで素敵なコードになります ぜひこちらを使用してくださいませ！ concat使うならスプレッド構文は不要でしたね。 const result = array.concat(Array(length - array.length).fill(val)); const array = [12, 10, 9] const length = 5 const val = 'hello' const result = array.concat(Array(length - array.length).fill(val)); おわりに いろいろやり方あると思いますが、個人的に一番シンプルにできた気がしてます それでは！

この記事では「Anime.jsをプロダクトで使用する4つの理由」と題して、Anime.jsを実際にプロダクトで使用した中で見えてきたポイントについて、以下の順番でまとめたいきたいと思います。 軽量で扱いやすい（実装したいアニメーションがシンプルなものだったため） 公式ドキュメントが読みやすい チームでの開発/運用がしやすい 変更が容易（突発的な仕様変更にも耐えうる） 一つずつ、詳細に見ていきます。 理由１: 軽量で扱いやすい Anime.jsはシンプルながらもパワフルな、JavaScriptアニメーションライブラリです。 GitHubスター数は39,900（2021年7月現在）と人気で、また、その機能の豊富さ・手軽かさから、はてなブログでも一時期話題となりました。 はてブスター数は996（2021年7月現在） そしてminifyがかかったビルドファイルが総容量は17.3kbと、非常に軽量です。 またその軽量さとは裏腹に、CSSプロパティ、SVG、DOM操作といった多彩なアニメーションが可能です。 Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. 理由２： 公式ドキュメントが読みやすい 個人的な推しポイントとしては、ドキュメントの読みやすさです。 ライブラリの使用方法が直感的にわかる、非常に読みやすいドキュメントとなっています。 ↓公式Documentの一部を画面キャプチャしたもの。画面右側にはコードの記述例が書かれており、その動きを画面左側で実際に確認することができる（マウスオーバーすることでアニメーションが動作する）。 軽量であるだけでなく、ドキュメントも読みやすく、非常に使いやすそうな点が導入の要因となりました。 （実際にプロジェクトで使用してみて、混乱するようなことはとても少なかったように感じます。） 理由３: チームでの開発/運用がしやすい アニメーションライブラリの選定にあたっては、パフォーマンスを重要視した上で、それと同じくらいに、今後もチームで継続的に使用していけそうかという観点を意識していました。 # 意識した優先順位 パフォーマンス（速さ、軽さ） == コードの可読性、メンテナンス性(チーム開発に適しているか) <<< 機能の豊富さ この点に関して、Anime.jsは比較的コードの可読性・メンテナンス性が高いと言えます。 それは一つ一つのアニメーションをJavaScriptのオブジェクトとして管理することができるためです。 アニメーションをオブジェクトとして管理する ここでは例として、Anime.jsを使用した簡単なアニメーションの実装を見てみましょう。 // 下記のようにアニメーションを定義します。 const nankaUgoki = { targets: "#nanka", // DOMを指定. 配列で複数指定することも可能. easing: "linear", // easingの設定値は他にも多数あり duration: 1000, // 動作にかかる時間を設定 translateX: 250, // 加えたいアニメーションを記述. 基本はCSSプロパティを設定する. rotate: 2, // アニメーションは複数指定可能 begin: function () { // アニメーション開始時に実行される処理を記述する }, complete: function () { アニメーション完了時に実行される処理を記述する }, // その他にも多数のプロパティを設定できます。 } // 実行には anime()メソッドを使用します。 anime(nankaUgoki) // 指定したDOMが動く 上記のように、個々の動作をオブジェクト単位で管理することで、コードのメンテナンスが快適になりました。 このようなわかりやすいインターフェースは、初めてコードを見た人にとっても、理解し易いものかと思われます。 また、動作とターゲットを一つのオブジェクトでまとめて管理できるのも面白いポイントであり、コードを通して実際の動作をイメージすることが容易なのも嬉しい点です。 これらの点がチームでの開発・メンテナンスを容易にしてくれると感じました。 理由４: 変更が容易 Anime.jsには、複数のアニメーションを同期的に連結する Timelines という機能があります。これを使用することで、個々のアニメーションの実行順序を制御することができます。 Timelines let you synchronise multiple animations together. 実行の順序を制御するだけの機能ではありますが、これが可能であることにより、複雑なアニメーションを、小さなアニメーションの集合体として分割することができます。 アニメーションを連結する 以下の例では、「小さなアニメーション」を連結して、「連続した複雑なアニメーション」を実装しています。 // timelineを初期化する const renzokuShitaUgoki = Anime.timeline({ easing: "linear", // 初期値を設定可能 duration: "1000", // addした個々の動きは初期値を継承する }); // 小さな動きを作っておく const tiisanaUgoki01 = { targets: '#nanka', duration: 2000, // 初期値が上書かれる translateX: 250, } const tiisanaUgoki02 = { targets: '#nanka', duration: 500, translateY: 100, } // timelineに `add` メソッドを使って動きを追加する. 追加した順番にアニメーションが行われる. renzokuShitaUgoki.add(tiisanaUgoki01).add(tiisanaUgoki02); // この場合は、2000msかけてX方向に250px移動した後、500msかけてY方向に100px移動する。 大きなアニメーションをイチから作り上げるのではなく、小さなアニメーションを組み合わせて一つの大きなアニメーションを組み上げるイメージです。 一つ一つの動作がオブジェクト化されているため、部分的に動作を追加したり、また調整したりといったことが行いやすいため、とても開発者フレンドリーな機能だと言えます。 実装途中に仕様変更が発生しても、該当箇所に対応するオブジェクトを調整することで、柔軟な対応を行うことが可能です。 詰まったところ 開発中に何点か詰まったところがあったため残しておきます。 動きが複雑になってくると実装が難しい 例えば、translateX: ["0", "100%"] のように開始位置と終了位置を定義することはできても、translateX: ["0", "40%", "100%"] のように中間点を追加することができません。 // OK! anime({ targets: '#nanka', translateX: ["0", "100%"], // 開始位置と終了位置を設定可能 }) // NG!! anime({ targets: '#nanka', translateX: ["0", "40%", "100%"], // しかし中間点を追加することはできない }) このように細かく動きを調整する場合は、工夫が必要となってきます（例えば["0", "40%"]のオブジェクトと["40%", "100%"]のオブジェクトの二つに分割して連続で動作させるなど）。 CSSのdisplayプロパティの操作ができない anime({ display: 'none' }) という制御が効きません。 そのため、とあるタイミングでDOMを表示/非表示した...というときには、begin や complete といったプロパティを使用したり、あるいは opacityを使用するといった代替表現をする必要があります。 // NG! anime({ targets: '#nanka', duration: 300, display: 'none', // 300ms後にふわっと要素を消したい => NG! }) // OK!! anime({ targets: '#nanka', duration: 300, opacity: 0, // 300ms後に要素を透明にし、 complete: function () { // 完了後に直接DOMを消す document.querySelector('#nanka').style.display = 'none'; } }) 参考： StackOverFlow おわりに 本記事では「Anime.jsをプロジェクトで使用する4つの理由」として、Anime.jsをプロダクトの中で使用した際によかったと感じた点について記しました。 ライブラリを選定する際には、他のCanvasライブラリやAdobe Animateなど多様なものを比較しましたが、今回はAnime.jsがうまくはまりました。 必ずしも万能なライブラリとは言い切れませんが、使い所にマッチすれば、非常に強い力を発揮するでしょう。

やりたいこと 過去７日間の投稿数を取得し、折れ線グラフで表示する. グラフが表示できなかったり、１２日分表示してしまったり・・・ととにかく大変でした。 そもそもJavascriptの知識が浅いため、、難しかったです。 7日間の投稿データ取得 前回作成した記事と同様です。グラフ化が大変だったのでここはサクッと行きます 違う点は、、 コントローラーに記述しなくても、モデルで定義した値をviewで使用できるということです。 ７日間の投稿データ取得 models/book.rb 　　scope :created_today, -> { where(created_at: Time.zone.now.all_day) } scope :created_yesterday, -> { where(created_at: 1.day.ago.all_day) } scope :created_2days, -> { where(created_at: 2.days.ago.all_day) } scope :created_3days, -> { where(created_at: 3.days.ago.all_day) } scope :created_4days, -> { where(created_at: 4.days.ago.all_day) } scope :created_5days, -> { where(created_at: 5.days.ago.all_day) } scope :created_6days, -> { where(created_at: 6.days.ago.all_day) } users_controller.rb def show @user=User.find(params[:id]) @books = @user.books.page(params[:page]).reverse_order @today_book = @books.created_today @yesterday_book = @books.created_yesterday @this_week_book = @books.created_this_week @last_week_book = @books.created_last_week @book=Book.new end users/show.html.erb <table class="table"> <thead> <tr> <th>６日前</th> <th>5日前</th> <th>4日前</th> <th>3日前</th> <th>２日前</th> <th>昨日</th> <th>今日</th> </tr> </thead> <tbody> <tr> <th><%= @books.created_6days.count %></th> <th><%= @books.created_5days.count %></th> <th><%= @books.created_4days.count %></th> <th><%= @books.created_3days.count %></th> <th><%= @books.created_2days.count %></th> <th><%= @yesterday_book.count %></th> <th><%= @today_book.count %></th> </tr> </tbody> </table> グラフ化①・・・chart.js ? chartkick をいれる chart.jsで検索するとchartkickが出てきます。 もう何を入れるのか分からなくなりました 以下の記事で別物であるということに気づきました。多くの記事で、chartkickを使用しているので、chartkickでやっていきたいと思います。 Gemインストール 以下の記事の通り行いました。groupdateもインストールしてしまいましたが、今回使わなかったです。 （正しくは、理解できず、うまく使えなかったです・・・) Turbolinksの無効化 無効化にしないと、グラフが表示されないのではないかと思います。 私は、とにかくTurbolinksの記述を全削除してしまいましたが、個別削除がベストですね。 以下の記事で全削除できます。 Viewの記述 Turbolinks全削除済みの場合 users/show.html.erb <canvas id="myChart" width="300" height="100"> </canvas> <script> var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['6日前', '5日前', '4日前', '3日前', '2日前', '1日前', '今日'], datasets: [{ label: "投稿数", data: [<%= @books.created_6days.count %>, <%= @books.created_5days.count %>, <%= @books.created_4days.count %>, <%= @books.created_3days.count %>, <%= @books.created_2days.count %>, <%= @yesterday_book.count %>, <%= @today_book.count%>], backgroundColor: 'rgba(255, 80, 120, 1.0)', borderColor: 'rgba(255, 80, 120, 1.0)', fill: false }] }, }); </script> Turbolinksを個別で無効化 ``` これで、折れ線グラフの表示ができました。 参考にさせていただいた記事 以下の記事でも、グラフができましたが12日分表示されてしまいました。 どうやって７日間分に抑えれば良いのだろう？？ 今回、groupdate使えこなせてないですが、使えたら便利