フロントエンドコーディング試験
RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得するAPIレスポンスから都道府県一覧のチェックボックスを動的に生成する都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない） React/Vue.jsのいずれかを用いてSPAを構築すること（バージョンはできるだけ最新版をご使用ください）ReactVueNuxt.jsやNext.jsなどの、これらを内包したフレームワークの利用も許可する都道府県一覧および総人口情報はRESAS APIのデータを用いることグラフは Highcharts や Rechar
ゆめみのフロントエンドコーディング試験の題材で React の勉強をしました - Mitsuyuki.Shiiba
ちょっと前にツイッターで見かけた、ゆめみのフロントエンドコーディング試験 フロントエンドコーディング試験 「RESAS API を使用して、都道府県別の総人口推移グラフを表示するSPAを作る」っていうお題 React の勉強をするのにちょうどいい題材だなぁって思ったのでやってみた。課題を公開してるってことは「やってみてもいいよ」ってことかなと思ってるんだけど、もし違ったら GitHub のリポジトリーを private にするので連絡ください 1週間でやらないといけないところを2ヶ月近くやってるし、コミットログも特に何も考えずにポイポイ書いたから、全然だめなんだけど、でも、色々勉強になったので、とてもよかった。楽しかったー！ つくったもの こんな感じ これでおわりにするー pic.twitter.com/K8zhrRUp54— Mitsuyuki Shiiba (@bufferings)
JavaScriptだけでExcel風のスプレッドシートを開発できる「jExcel」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptで簡単にExcelのようなスプレッドシートを作成できるライブラリをご紹介します！ 基本的な操作はすべてJavaScriptから制御可能であり、自分の好きなようにカスタマイズできる強力な機能が多数提供されています。また、簡単なプログラムだけでファイルの書き出し機能が利用できるなど便利なメソッドも多く含まれています。 自作のWebアプリなどにも手軽に組み込めるので、ご興味ある方はぜひ参考にしてみてください。 なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください。 【 jExcel 】 ■「jExcel」の使い方 それでは、まず最初に「jExcel」の導入方法から見ていきましょう！ 全部で3通りの方法が以下のように提供されています。
GitHub Actions Self-hosted Runner と Gatling による負荷試験 - スタディサプリ Product Team Blog
こんにちは。SRE の @int128 です。 先日の「負荷試験、Gatling を使ってやってみた」で紹介したように、スタディサプリではユーザ体験の改善や本番障害の予防を目的に負荷試験を行っています。 本稿では、SRE と Product Team がどのようにして一緒に負荷試験に取り組んでいるか、考え方や仕組みを紹介します。 背景 SRE では新しいマイクロサービスの開発や機能追加の契機で Production Readiness Check を行っています。 具体的には、Product Team がテンプレートにしたがって Production Readiness Checklist を記入して、SRE と一緒にレビューを行っています。 その際に、トラフィックが多い、あるいは、レイテンシが厳しい、といったリスクがある場合に負荷試験を行うことにしています。 負荷試験は以下の流れで実施し
Asanaのダッシュボード内のバーンアップチャートに予測線と完了日をプロットするChrome拡張 - hitode909の日記
Asanaのダッシュボードに置けるバーンアップチャートには今後の予測を表示する機能がなく、過去の実績だけが表示されている。 Asanaのバーンアプチャートの例一方、よくあるバーンアップチャートはこんな感じで、予測線が引かれていて、タスクがこれだけあって、タスクの完了ペースはこうなってて、このペースが続けばいつ終わりそうです、という予測ができるようになっている。 差し込みの多いプロダクト開発のスケジュールの精度を上げるためにはバーンアップチャートがおすすめです - スタディサプリ Product Team Blog タスク管理にはAsanaを使いながら、いつ終わるかも予測したい。 既存手法 社内ではいくつかのアプローチが試みられていた。 タスク一覧をCSVをエクスポートして、Google Sheetsにインポートしてバーンアップチャートを構築する 最初に試みられた手法がこれで、更新するたびに
JavaScriptで「データを可視化」何を使う？ 10種類のライブラリを比較：提供ツールや付加機能、短所、導入／使用方法を解説 CoderPadはJavaScriptでよく使われる10種類のデータ可視化ライブラリを紹介した。ApexCharやChart.js、D3.jsなどを扱う。 コーディング面接に使われるWebサービスなどを手掛けるCoderPadは2022年8月23日（米国時間）、「JavaScript」でよく使われる10種類のデータ可視化ライブラリを紹介した。 データをビジュアルでグラフィカルなフォーマットに合わせて表示するデータ可視化は、データを分かりやすく、効率的に伝える上で効果的だ。 紹介されている10種類のライブラリは次の通り。 ・ApexChart ・Chart.js ・D3.js ・Techan.js ・AnyChart ・Taucharts ・Zoomcharts
ハクスラARPG『Path of Exile』の人気大爆発、同時接続プレイヤー数最高記録大更新。「ナーフ祭りにはしない」と開発側が約束した期待の大型アプデ - AUTOMATON
Grinding Gear Games（以下、GGG）は4月8日、基本プレイ無料のハクスラARPG『Path of Exile』にて、新拡張コンテンツ「Crucible」を配信開始した。本作では拡張コンテンツ配信のたびにSteam同時接続プレイヤー数が大幅増加するのが慣例となっている。しかし、今回本作は、最大同時接続プレイヤー数記録を更新している。 『Path of Exile』は、GGGが手がけるハクスラARPG。PC向けを中心に、長年にわたり高い人気を誇っている。また、昨年末にはリリースから約9年越しに正式日本語表示対応を果たし、国内ハクスラファンから喜びの声もあがった（関連記事）。本作では、「リーグ」と呼ばれる区切りにて、定期的な拡張コンテンツの無料配信がなされてきた。そうした拡張配信のタイミングでは人口が爆発。一定期間をおいて落ち着くサイクルを繰り返し、のこぎりの刃のような特徴的な
Railsでシンプルなグラフを扱うならchart-js-rails よりchartkickを使うべし - Qiita
Railsでグラフを扱う方法として chart-js-rails を使った方法を こちらの記事で解説しました。 一方、シンプルなグラフを埋め込む場合においては chartkick を使ったほうが簡単なことがわかったので本記事で解説します。 chartkickとは chart.jsをいい感じにラッピングして、ワンラインでグラフを埋め込めるようにするプロジェクトです。 Rubyに限らず様々な言語で実装されています。 https://chartkick.com/ また、chart.jsだけでなくGoogle ChartsやHighchartsもサポートしています。 chartkickを使ったほうが良い理由 RubyとJavascript間のデータの受け渡しを意識しなくて良い こちらの記事の方法だと、Ruby側で扱う数値を何らかの方法でJavascriptで受け渡す必要がありました。 chartk
Introducing visx from Airbnb
After 3 years of development, 2.5 years of production use at Airbnb, and a rewrite in TypeScript we are excited to announce the official 1.0 release of visx (formerly vx). You can find the project on GitHub and browse documentation and examples on airbnb.io. At Airbnb, we made it a goal to unify our visualization stack across the company, and in the process we created a new project that brings tog
※サービス終了しました【ユーザー10万人超えの個人開発】「自分の声」が嫌いな人ほど使ってほしい！声成分分析サービス『Voice component』を作りました！ - Qiita
※サービス終了しました【ユーザー10万人超えの個人開発】「自分の声」が嫌いな人ほど使ってほしい！声成分分析サービス『Voice component』を作りました！RailsVue.jsポートフォリオ個人開発話者識別 はじめに 突然ですが、ご自身の声は好きですか？嫌いですか？ ちなみに私自身は後者です。理由は男なのに声が高くて電話でよく女性に間違われるからです笑 ふとそんな話を通っているスクールで話したところ男性・女性問わず「自分の声」が嫌い・苦手と思っている方が意外と多いことが分かりました。調べてみると、下記の一般向けに行われた調査データのように自分の声が好きと答えた人は約3割なのに対して、自分の声が嫌いと答えた人は約7割と圧倒的に多いということが分かります。（データ情報古いですが・・・） 参考: あなたは「自分の声」が好き？ 嫌い？ 声は生まれ持ったもので変えることはできません。その為、
A Complete Guide To Accessible Front-End Components — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. Table of ContentsBelow you’ll find an alphabetical list of all accessible components. Skip the table of contents, or j
gatringを使って負荷テストをしよう！
この記事は「eureka Advent Calendar 2019」20日目の記事です。昨日の記事は Daichi Haradaによる EC2 Image Builder + ansible + awscli を用いたゴールデンAMIの更新/反映自動化の検討でした。 こんにちはこんにちは、猫がより平和に暮らせる世界を作りたい @marnieです。 ここ最近はデータベースやウェブサーバーなどなどの負荷・性能をコードを改善したり、DB側をいじいじしたり、cache入れたりなどなど 性能改善をする日々を過ごしています。 Pairsの性能改善と猫の関連性について、首をかしげたかもしれませんね。 Pairsの安定稼働は巡り巡って、人の役に立ち、猫達の平和に繋がるはずなので問題ありません。 信じましょう。 さて、性能改善を行うためにミドルウェアやOSなどの実行環境を入れ替えてみた,etc…などなどを行
In today’s world, people are struggling more and more with the problem of scattered attention. So it is becoming more and more important to present information in a structured, interesting and well-designed way, especially if you have a complex business application. Presenting huge chunks of data in a standard spreadsheet to analyze or to study is as inconvenient as it can get. Creating different
research!rsc: What NPM Should Do Today To Stop A New Colors Attack Tomorrow
What NPM Should Do Today To Stop A New Colors Attack Tomorrow Over the weekend, a developer named Marak Squires intentionally sabotaged his popular NPM package colors and his less popular package faker. As I write this, NPM claims 18,971 direct dependents for colors and 2,751 for faker. Open Source Insights counts at least 42,000 more indirect dependents for colors. Many popular NPM packages depen
はじめに プログラミングを始めて８ヶ月目でようやく、初アプリ『みんなの家計簿』をリリースしました！ 『みんなの家計簿』は、家計簿や資産運用に興味があるひとたちに、お金と向き合う場を提供する家計簿＆資産公開サービスです。 開発期間は約２ヶ月です。 ＼みんなの家計簿／ ※停止中です サービス概要 課題解決型のサービスを意識しました。 ターゲット層 Twitter資産運用アカウントの皆さん ユーザーが抱える問題 Twitterやブログ上で家計簿や資産額について公開する人が沢山いるが、それらの情報を集約した場がないため、情報が一過性のものとなり、勿体ない。 お金の使い方を学ぶため、他人の家計簿を見て参考にしたい。 解決策 自分の代表的な月の家計簿を公開＆他人の家計簿を見られるアプリ 使いかた とってもシンプルです。 プロフィールと家計簿を登録するだけです。 TOPページです。 ログイン後は家計簿一
ふとニュースなどをみていて、新型コロナウィルスの感染状況のグラフのサイトを見つけて、お、綺麗だしシンプルでいいなと思ったのがここ。 よくある質問の部分も、一見、グラフを眺めていて、ん？？？と思う疑問点が書かれてあって良い。 「具体的な基準はMITライセンスに準拠します」とさらりと書いてあるだけなのがクール。もちろんGitHubへのリンクもあります。 これ厳密に従うとちょっと面倒なんですよね。とはいえ、数あるライセンスの中でも緩い縛りのMITライセンス。 単なるリンクまたはiframeであれば著作権表示はいらないのですが、せっかくなのでスクリーンショットを拝借しました。 ということで厳密に対応してみました。ただ、ライセンスファイルはブログの関係上置けないので、貼り付けました。 https://github.com/kaz-ogiwara/covid19/ MIT License Copyri
Leaflet地図 リスト by 晴歩雨描
ブログ：Leaflet地図、作成記事「まとめ」 Step1：OpenStreetMap。地図にマーカー表示（東京タワー） [ブログ] Step2：OpenStreetMap。ラベル表示（東京タワー） [ブログ] Step3：国土地理院地図、Esri World Topo Map 切り替え（東京タワー） [ブログ] Step4：Googleマップ 追加（東京タワー） [ブログ] Step5：緯度・経度、標高を表示（富士山） [ブログ] Step6：現在地表示ボタン（東京タワー） [ブログ] Step7：フルスクリーン表示。Leaflet.fullscreen版。 [ブログ] Step8：フルスクリーン表示。requestFullscreen()版。 [ブログ] GPX表示(1) [ブログ] GPX表示(2)（移動距離、所要時間表示） [ブログ] GPX表示(3)（＋標高グラフ：Highcha
今回はLLMと相性のいいReactのChartライブラリを探すために検証を行いました。ReactのChartライブラリといえば数多く種類が存在し、どれを採用するのがいいか迷うところです。下記のサイトはReactのChartライブラリが一覧で整理されており、これだけでも数十個候補になるライブラリがあることがわかります。 はじめに 本記事では数多くあるReactのChartライブラリの中からLLMと相性がいいライブラリを様々な観点から考察することを目的とします。 前提 LLMからChartに注入するjsonデータを生成する https://platform.openai.com/docs/guides/text-generation/json-mode レンダリングはClientで行う Vercel AI SDKではRSCを採用してServerでレンダリングしています https://sdk.
トレンド（世界）：すべての国/過去12か月/基準としたキーワードを外さずに数値を取得 トレンド（日本）：日本/過去12か月/基準としたキーワードを外さずに数値を取得 #Highcharts 公式サイト：Interactive JavaScript charts for your webpage | Highcharts デモサイト：Demos / Stock Demos / Maps Demos / Gantt Demos GitHub：https://github.com/highcharts/highcharts npm：https://www.npmjs.com/package/highcharts CDN：https://code.highcharts.com/highcharts.js ライセンス：商用利用は有償、非営利向け無料ライセンスあり（詳細後述） 推薦しておきながら入門記
ライセンス取得 ロード 最初のグラフ テーマの入手と適用 オプション設定 グローバル・オプション Highchartsを理解する タイトル（title）とサブタイトル（subtitle） シリーズ（Series） ツールチップ（Tooltip） 凡例（Legend） 軸（Axes） ドリルダウン（Drill down） 参照 --広告-- 初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発 作者:Ethan Brown発売日: 2017/01/20メディア: 単行本（ソフトカバー） ライセンス取得 商用利用は有償。 Developer License ： 535ドル / 96,700円〜 Non-Commercial License は、無料のライセンス。取得にはフォーム申請が必要。個人のサイト、学校のサイト、非営利団体、購入前の試用は利用可能。フォーム申請すると即時
中高生国際Rubyプログラミングコンテスト
開会式 応募者によるプレゼンテーション 講評・講演 大会レポート 「中高生国際Rubyプログラミングコンテスト in Mitaka」は、子供たちがプログラミングを学び、自分たちでコンピュータを操作する際の感動や、創造した作品を発表する経験を通して、情熱や将来の夢を育むことを目指しています。 第13回目となる今回の最終審査会は、2023年12月9日（土）に三鷹産業プラザで開催されました。 総応募数124件の中から、ゲーム部門6作品とWebアプリ・IoT部門5作品が最終審査に選出されました。 開会式 2023年の最終審査会開会式は、OSS-Vision株式会社の代表取締役CEOであり、中高生国際Rubyプログラミングコンテスト実行委員会委員長、井上浩氏の挨拶から始まりました。 井上氏はプログラミングの魅力と応募者たちの努力を称え、「参加者の皆さんは、最終審査に進出したことを誇りに思い、審査会を
Bimatoprost overnight shipping . & Buy Bimatoprost Over The Counter Online. | funasia.net
USA Pharmacy Bimatoprost overnight shipping Click here to buy Bimatoprost. Save Your Time and Money. - 100% legal products. - Quality and pharmaceutical dosage. - Fast delivery guaranteed. - Various payment methods: MasterCard / Visa / AMEX / PayPal / BitCoin - Fast delivery and complete anonymity - Bonus pills and big discounts for every order - Your full satisfaction is guaranteed or your money
Improve your webpack build with the DLL plugin - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. As a JavaScript developer, you’ve probably had ample opportunity to come across webpack, whether it be while bundling frontend assets with React or transpiling some TypeScript Node.js code. Most of the time you never have to interact with webpack directly. Rather, you interact with webpack in
（この記事は自サイトとのクロスポストです。） 初心者丸出し感がものすごいのですが、標題の通りのことが起こってしまいました。とあるJavaScript製の自作ソフトウェアの文法チェックにeslintやjsonlint-cliを使いたくて、package.jsonを置いておいて、npm installでそれらをインストールできるようにしていたのですが、それが突然以下のようなエラーで止まるようになってしまいました。 $ npm install npm ERR! invalid options argument npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2021-05-xxTxx_xx_xx_xxxZ-debug.log 他の自作ソフトウェアでも、npm installしようとすると
ここ数年、気候科学者、経済学者、エネルギーシステムモデル研究者による国際チームは、次の100年ほどの間に世界の社会、人口動態、経済がどのように変化するかを検討するために、さまざまな新しい「経路（pathway）」を構築してきました。これらは総称して「共通社会経済経路（Shared Socio-economic Pathways; SSP）」と呼ばれています。 これらのSSPは現在、最新の気候モデルの重要なインプットとして使用されており、2020-21年に発行予定の気候変動に関する政府間パネル（IPCC）の第6次評価報告書に反映されています。また、社会の選択が温室効果ガスの排出量にどのような影響を与えるか、つまりパリ協定の気候目標をどのように達成できるかを探るためにも使用されています。 新しいSSPは、世界が取り得る5つの経路を提示しています。これまでのシナリオと比較して、今後の気候政策を導
React で Highcharts で作成したグラフを PDF のプレビュー上に表示させる | DevelopersIO
Highcharts というグラフ用のライブラリを使って、グラフを生成し PDF で 上に表示させてみます。 前提としては React を使用しており、ビルドツールには Vite を使用しています。 デモ コードサンプル デモ 準備 hbsnow/template-vite-spa 上記のテンプレートを使用します。 Highcharts を追加します。今回は React を使っているので highcharts-react-official も追加しています。 yarn add highcharts highcharts-react-official Highcharts は 最終的なグラフを SVG として出力してくれます。綺麗でかつデモやドキュメントも豊富で使いやすいライブラリなのですが、商用の場合には有料なので採用を検討する場合には注意が必要です。 代替のライブラリとしては React
元記事：https://www.octoparse.jp/blog/top-30-data-visualization-tools データの視覚化は、情報やデータを見える化することによって、人々が効果的に洞察を得ることに役立ちます。データ視覚化ツールは、グラフやチャートなどを利用してデータをより分かりやすく読み上げます。多くのデータ視覚化ツールから最適なのはどれですか。本記事では2019年おすすめのデータ可視化ツール30選を紹介します。あなたのニーズに合わせて一番ふさわしいツールを選びましょう。 #ノーコード型ツール ##1.チャートとグラフ ###1) RAWGraphs RAWGraphsは、オープンソースのWebデータ視覚化ツールです。Microsoft ExcelおよびApple Numbersのようなスプレッドシートと、Adobe Illustrator とSketchのようなベ
下記画像を見て「ぴん」とくる方むけの記事です。 2020/11/3 追記 <app> タグで囲まれたときの問題について追記しました。 下記 JSFiddle ページにデモがあります。 https://jsfiddle.net/oktopus1959/w4gan9tk/23/ 適当にソースを修正して「Run」を実行すると、その修正を反映した表示がされます。いろんな値をいじって、表示がどのように変化するかを見るのも面白いですよ。 また、左右のY軸を固定表示したグラフを使用したサイトも作成しました1。 https://ncov.oktopus59.net/ 基本アイデア 「参考」にも書きましたが、 Y軸のイメージを別の canvas にコピーして元のイメージと重なるように配置する です。 ソースコード Chart.js, JavaScript, CSS にある程度慣れている方なら、コメントを読め
フロントエンドコーディング試験
RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得するAPIレスポンスから都道府県一覧のチェックボックスを動的に生成する都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない） React/Vue.jsのいずれかを用いてSPAを構築すること（バージョンはできるだけ最新版をご使用ください）ReactVueNuxt.jsやNext.jsなどの、これらを内包したフレームワークの利用も許可する都道府県一覧および総人口情報はRESAS APIのデータを用いることグラフは Highcharts や Rechar
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptで「データを可視化」何を使う？ 10種類のライブラリを比較
19 Online Tools for Creating Charts
【個人開発】家計簿＆資産公開あぷり『みんなの家計簿』をリリースしました - Qiita
JavaScriptで使えるグラフ描画ライブラリとその有効活用例について - Gobble up pudding
LLMと相性のいいReactのChartライブラリを考察してみた🦜
JSのグラフライブラリを今選ぶならHighchartsで決まり（2020年版）
Highcharts入門 - ギリギリジンジン
「何もしてないのに急にnpm installできなくなった」への立ち向かい方 - Qiita
解説：「共通社会経済経路（SSP）」で未来の気候変動を探る - Carbon Brief
2021年データ分析・データ可視化ツールおすすめの30選！ - Qiita
Chart.js でY軸を表示しながらグラフを横スクロールする【デモページあり】 - Qiita