pnpm workspace実践ノウハウ~ 秋のエンジニア大交流会 & LT会！！~( https://devguil.connpass.com/event/290596/ )で発表したセッションのスライドです。 サンプルリポジトリ: https://github.com/MH4GF/pnpm-workspace-knowhow-sample
Next.jsにSentryを導入した際の課題と解決策について｜食べログ フロントエンドエンジニアブログ
はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。 1. はじめに「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。 Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを作成して、エラーやパフォーマンスをトラッキングするのに様々な設定を行う必要がありました。 そこでSentryが簡単にセットアップができるように@sentry/nextjsでwizardを提供してくれています。 wizardはコマンドを実行するだけでSentryに必要なファイルを自動で生成し、設定までしてくれる便利な代物です。
Chart.js のグラフを画像化し、透過する背景に色を指定する
アニメーションを禁止して画像に変換 Chart.js はデフォルトではグラフの表示時にアニメーションする。 そのため普通に画像化すると何も描画されていない。 そこでまず、アニメーションを停止して画像にするサンプルを記す。 コードは以下の通り。 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <style> #ex_chart {max-width:640px;max-height:480px;} </style> <canvas id="ex_chart"></canvas> <img id="ex_img" src="" /> <br /> <a id="ex_imglink" href="">画像</a> <script> var ctx = docum
Chart.js 図全体背景色、グラフエリア背景色、イメージダウンロードの問題を解決する - Oboe吹きプログラマの黙示録
Chart.js を使用して canvas に描画するグラフは、canvas の中のグラフエリアだけは、 以下 stackoverflow の返答にあるように、描画前に実行する関数プラグインを書き option の chartArea で backgroundColor を指定すれば、グラフエリアだけは背景色が適用できる。 javascript - Chart area background color chartjs - Stack Overflow Chart.js プラグインへの登録：beforeDraw (描画前に実行する関数)を記述して Chart.pluginService.register({ beforeDraw: function(c){ if (c.config.options.chartArea && c.config.options.chartArea.backgr
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
2018年の”JavaScript” 再入門/re-learning-about-js-in-2018
KMC春合宿2018での発表資料です
Vue.jsの今後と次世代Web開発について
MANABIYA 2018-03-24 (sat) Webセッション ３時限目の発表内容 https://manabiya.tech
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 - Qiita
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜JavaScriptwebpack はじめに 先日リリースされたwebpack 4でCommonsChunkPluginは廃止されました（CommonsChunkPluginの解説はこちら）。 その代わりとした追加されたoptimization.splitChunksの基本的な使い方、使い所に関しての記事です。 optimization.splitChunksを利用すればサイトパフォーマンスの改善（詳細は後述）ができるため、利用する機会が多い設定（機能）です。 解説に利用しているコードの最終形態はGitHub上にあります。 hira777/webpack-split-chunks-example webpackを理解していることを前提
webpackのCommonsChunkPluginの使い方、使い所 （webpack 4で廃止） - Qiita
#2018/3/15追記 先日リリースされたwebpack 4で、CommonsChunkPluginは廃止され、代わりにoptimization.splitChunksが追加されました。 詳細は記事に書きましたのでwebpack 4を利用している方は以下をご覧ください。 webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 それ以前のバージョンでは有用なツールだと思いますので、まだ移行できない方はご覧いただければと思います。 はじめに webpackのプラグインであるCommonsChunkPluginに関しての基本的な使い方、使い所に関しての記事です。 CommonsChunkPluginを利用する機会はそこそこあると思うですが、日本語の解説記事をほとんど見かけなかったため本記事を
スコープ付きCSSで別のコンポーネントにスタイルを当てる - Qiita
書かれなかったみたいなので、代わりに先日投稿したものを紹介します。 Vue.jsを使っているときに、scoped内で別のコンポーネントにスタイルを当てるときにはまったので備忘録として残しておきます。 概要 scopedを使っている際に親のコンポーネントで子のコンポーネントのスタイルを変更しようとしても、別のスコープとなるため変更できません。 グローバルに書いていくという手もありますが、するとSFCの利点が得られませんし、すぐに管理できなくなります 外部で定義された汎用コンポーネントとかを使う場合によく遭遇します。 例 簡単な例で確認していきます。 ※ pugとsassを使っています 子コンポーネント デフォルトで赤色のテキストを表示するだけのコンポーネントです。 <template lang="pug"> .child-container .child-layout p.title Chi
webpack v4について
Transcript XFCQBDL�W�ʹ͍ͭͯ� 'PSFGSPOU�+BWB4DSJQU���ٸதͷαʔϏεͷٕज़ୡʂ None XFCQBDL�͕ϦϦʔε͞Ε·ͨ͠ IUUQT���HJUIVC�DPN�XFCQBDL�XFCQBDL�SFMFBTFT ओͳมߋ wઃఆϑΝΠϧ͕ͳͯ͘ಈ࡞͢ΔΑ͏ʹͳͬͨ� wQSPEVDUJPO�NPEFͱEFWFMPQNFOU�NPEF͕ Ճ͞Εͨ� w$PNNPOT$IVOL1MVHJO͕আ͞Εͨ� wϏϧυεϐʔυ͕͔ͳΓ্͞Εͨ� wϝδϟʔϦϦʔεʹίʔυωʔϜ͕ͭ͘Α͏ʹͳͬͨ ʢXFCQBDL�W�ͷίʔυωʔϜ-FHBUPʣ ओͳมߋ wઃఆϑΝΠϧ͕ͳͯ͘ಈ࡞͢ΔΑ͏ʹͳͬͨ� wQSPEVDUJPO�NPEFͱEFWFMPQNFOU�NPEF͕ Ճ͞Εͨ� w$PNNPOT$IVOL1MVHJO͕
Vue.jsとRailsの最適な融合を考える - メドピア開発者ブログ
もう新年を迎えて2ヶ月が経ちますね。 多くの人は新年の目標を立てますが、皆さんは何かしら立てましたでしょうか? 英語を毎日勉強するという目標を立てましたが、既に挫折してしまったエンジニアの村上(pipopotamasu (pipopotamasu) · GitHub)です。 本日はその懺悔も込めてVue.jsとRailsの話をお送りします。 この記事を書く背景 以前ブログで書いた通り、現在Webpackerへの移行を機にフロントエンド周りの改善を進めています。 tech.medpeer.co.jp その中でVue.jsとRailsをいい感じに組み合わせるにはどうしたら良いかについて悩むことがあったので、本記事にて共有させていただきます。 悩んだ内容としては以下になります。 1. Ajax通信時にCSRFトークンをどう設定すればいいか? 2. 単一ファイルコンポーネントで書くHTMLをもっと
async/awaitでajax(axios)処理のエラー時の処理を考える
async,awaitを使った非同期処理（特にajax処理）の実装でエラー時の処理をどのように実装したらいいか、いろいろと調べてみました。 try-catchを使う方法最初は以下のように、awaitの処理をtry-catchで囲う方法で実装しました。 let response; try { response = await ajax(); } catch (e) { console.log('エラー発生'); return; } console.log(response); この方法だと、tryの中に複数のawaitの処理があった場合、catchに入った時にどのawait処理でエラーになったのかというのがわからないです。（サーバー処理でエラー時のレスポンスデータに工夫が必要になる） 個々のawait処理をtry-catchで囲うのならPromiseで実装したほうがスッキリする気もするので、
axios、async/awaitを使ったHTTPリクエスト(Web APIを実行) - Qiita
GitHubリポジトリ 発音はアクシオスのようです。 http://ejje.weblio.jp/content/Axios 戻り値がPromiseベースなのでjQueryの$.ajaxやFetch APIのように使える ブラウザだけでなくNode.jsでも使える 使い方 npmからaxiosをインストールします。 const axios = require('axios'); const url = "https://qiita.com/api/v2/items"; axios.get(url).then(res => { const items = res.data; for (const item of items) { console.log(`${item.user.id}: \t${item.title}`); } }).catch(error => { const { sta
[Vue.js2.x]ページ番号付きのページネーション（ページナビゲーション）を実装する
2年ほど前に以下のような「Vue.jsでページネーションをつくる」系の記事を書いた。 2年前の記事なのでVue.jsのバージョンもv0.12とかなり古い。 これらの記事を参考にしてくだっている方の中に、バージョンが違うことでハマっている方がいらっしゃった。 ということで、Vue2.x系で書き直す。 動作イメージは以下のとおり。 使用してるバージョンは以下のとおり。 vue@2.5.2 bootstrap@4.0.0-beta.2（←なくても大丈夫） ページネーションを実装する <div id="app" class="container"> <nav> <ul class="pagination"> <li class="page-item"> <a @click="first" class="page-link" href="#">«</a> </li> <li class=
![[Vue.js2.x]ページ番号付きのページネーション（ページナビゲーション）を実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc02b2ed55b317b47ec7c4ab9db346e559d09e1e/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEi-AO8dDM0zaClm7-CxHgvmzbvLOzQFawRprV3apBYsw8I1TJhiWQnI6ZaxdTHvL64m8Q7C2RMFbkEUlwFEPVdG97vC6S277ZbPljgK4BlToUkzhyphenhyphen9UAZK5EfTPDjeeLYCVsRJVzbmFYAvE%2Fw1200-h630-p-k-no-nu%2Fpagination.gif)
vue-test-utilsを使用してテストを書いてみた(Vue.js) - Qiita
この記事について vue-test-utilsのbetaがそろそろnpmに出るかも1というステータスだったので、 EDIT: betaが公開されました。 公開しているboilerplateでvue-test-utilsを使用してユニットテストを書いてみました。 vue-router、vuex周りのテストの話やavoriazから乗り換える際の変更点を紹介します。 vue-test-utilsとは Vue.js のテストをサポートするライブラリです。 リポジトリ ドキュメント 背景としては、 avoriaz爆誕 Vue.js公式でもテストをサポートするやつを出した方が良いのでは avoriazの作者が中心となってvue-test-utilsを作成開始 といった流れになっています。 avoriazの作者が中心となっているので、APIは多少違うものの似通っています。 そのため、APIについては以下
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Effective Deno
Yarn + CI + GitHub で挑む npm パッケージの定期更新
uiv | uiv
https://laracasts.com/series/testing-vue/episodes/8