おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは！逆瀬川 ( @gyakuse ) です！ きょうは発表があったばかりのChatGPT Pluginについて紹介していきたいと思います。 ChatGPT Pluginとは かんたんに言ってしまうと、ChatGPTの能力を拡張するためのプラグインです。よくわかりませんね。 わかりやすくいうと、 「来週の土日に旅行いきたいんだけど2万円以下で適当にいいとこ見繕って予約しといて」 「ｱｲﾖｰ」 みたいなことができるやつです。 もちろんこれらはChatGPTのAPIを用いてもできましたが、これを容易に実現する手段として提供されました。
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
現代のWebアプリケーションエンジニアとして最低限の常識TODO - shimobayashiパブリック
古代のWebアプリケーションエンジニアなので、現代との差分を身に付けていくぞ！ 個人的なスキルセットの差分を埋めるためのものなので、誰にでもマッチするものではありません。 習うより慣れろの精神で、読んで終わりじゃなくて手を動かします。 コンテナ化 x done.icon The Twelve-Factor App （日本語訳） done.icon What is Amazon Elastic Container Service? - Amazon Elastic Container Service 機械翻訳がひどかったので英語版をGoogle翻訳で読むほうがマシそう メニュー1階層目だけ全部読んで、気になるところがあれば深堀りする ↑で物足りなかったらKubernetes完全ガイド 第2版 impress top gearシリーズ | 青山真也 | 工学 | Kindleストア | Ama
この文章について これは Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」で基調講演をするにあたって、登壇内容を整理するために書いたものです。登壇内容とは一部に差異があります。 イベント映像 この文章はむちゃくちゃに長いので、登壇映像を見たほうがいいかもしれません。わたしの発表は13:23くらいから30分ちょっとです 登壇資料（内容は同一です） https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokitai-webakusesibiritei https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit?usp=sharing 目的 Web業界で「エンジニア」の肩書で仕事して
こんにちは、エムスリーデザイングループでチームリーダーをやりながらエンジニアリングGも兼務しているプロダクトデザイナーの大月です。 私が所属しているエムスリーのデザイン組織は以下２つの強みがあります。 多様性 スピード 特に日々の業務では"スピード"をとても大切にしており、 デザインを早くすることで、検証回数を増やし、PDCAを多く回し、価値創造を加速することを意識しています。 こうしたエムスリーのスピード文化から、日々の業務を効率化できるFigma活用法もデザイナーのみんなで学びあっています。 今回は、エムスリーのデザイナー間で話題になった、意外と知らなかった、知っているだけで日々の業務が一気に楽になった！というFigma活用術を紹介します。 少しでもFigmaでのデザイン作業をスピードアップさせたい方の参考になれば幸いです！ 爆速のための3種の神器 1. 秩序をつくる ファイル構成とコ
こんにちは、エムスリー エンジニアリンググループ の鳥山 (@to_lz1)です。 ソフトウェアエンジニアとして 製薬企業向けプラットフォームチーム / 電子カルテチーム を兼任しています。 ソフトウェアエンジニアという肩書きではありますが、私は製薬企業向けプラットフォームチームで長らくデータ基盤の整備・改善といったいわゆる "データエンジニア" が行う業務にも取り組んできました。 本日はその設計時に考えていること / 考えてきたことをデータ基盤の設計パターンという形でご紹介しようかと思います。多くの企業で必要性が認識されるようになって久しい "データ基盤" ですが、まだまだ確立された知見の少ない領域かと思います。少しでもデータエンジニアリングを行う方の業務の参考になれば幸いです。 データ基盤の全体像 収集部分の構成 RDBデータ ログデータ 活用部分の構成 データマートの実例 「データ基
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
昨日は新潟県長岡市に行って、市役所の職員向けと、一般向けに二回の講演を行った。 市役所の職員からの質問事項をよく読むと、ChatGPTを闇雲に何にでも使おうとして苦戦している姿が見てとれた。 たとえばこんな感じだ。 ⚪︎時に東京駅につく新幹線を予約したいとChatGPTに言ったが、公式サイトをチェックしろと言われた 我々からすればその回答は当たり前なのだが、闇雲になんでもChatGPTでやろうとするとこうなってしまうという典型的な例だった。当たり前だが、その目的ならえきねっと一択だ。 ChatGPTには限界がある。しかも低い。 だから通常はPluginと組み合わせたり、プログラムから呼び出したりするという「工夫」が必要になる。 GPTを使うプログラムを書くのはものすごく簡単だ。 たぶんプログラムの世界でも最も簡単な部類だろう。 たとえば僕がプログラムでGPTを使おうかなと思った時、こんなふ
背景 AWS LambdaでAPI開発をする AWS LambdaとAPI Gatewayを組み合わせることでサーバレスのAPIを開発することが可能です。サーバレスで構築することで手間をかけずにスケーラビリティやコストの最適化を手に入れることができ、さらに死活監視等が不要のため運用のコストを大幅に下げることができます。 開発パターンがまとまっていない サーバレスによるAPI開発は非常にメリットが多いのですが、開発パターンが様々あり一貫した方法があるわけではありません。例えば、Lambdaのデプロイは手動でzipをアップロードする方法や、SAM/ServerlesssFrameworkなどのデプロイ支援ツールを利用する方法、さらにオンラインエディタのCloud9を利用することもあります。関数ごとにディレクトリを分離する場合もあるし、ソースコードを共有してエントリーポイントだけ切り替える場合も
Intro OpenAI の API を用いて、長年の課題だった文書校正を VSCode 上で実現するプラグインを修作したところ、思った以上の成果だった。 文章校正と誤字脱字検出 執筆を補助するツールは多々開発されているが、基本は形態素解析を用いた品詞分析の延長で行うものが多かった。 よくある「助詞の連続」、「漢字の開き閉じ」、「一文の長さ」などは、ある程度の精度で検出可能ではあるが、結局執筆時に一番検出して欲しいのは「誤字脱字」だ。 文体をどんなに揃えたところで、誤字脱字があるとやはりクオリティが低く感じるし、そこさえ抑えられていれば、他のスタイル統一は訓練である程度なんとかなる。 英語のスペルチェックはかなり進んでいるが、日本語においてはそこまで革新的なものが見当たらない。あらゆるツールを試したが、結局満足のいく精度が出る誤字脱字検出は「Word の校正機能」しかなかった。 そこで筆者
ついに「CLIP STUDIO PAINT(クリスタ)」で画像生成AI「Stable Diffusion」を動かすプラグインが登場
マンガやイラストをデジタル上で作画する際に使用されるお絵描きソフトウェアの「CLIP STUDIO PAINT(クリスタ)」上で、テキストから画像を自動で生成してしまうAI「Stable Diffusion」を動かすことが可能なプラグイン「NekoDraw」が登場しました。NekoDrawはGitHub上で公開されており、テキストから画像を生成する「text2img」と、画像からより高精細な画像を生成する「img2img」の両方に対応しています。 GitHub - mika-f/nekodraw: NekoDraw: CLIP STUDIO PAINT plugin for executing Stable Diffusion txt2img and img2img processor. https://github.com/mika-f/nekodraw 「Stable Diffusio
この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8.
次世代の監視技術 - Telemetry技術のご紹介 - NTT Communications Engineers' Blog
こんにちは、イノベーションセンターの三島です。 本記事では、次世代の監視技術として期待されるTelemetry技術についてご紹介します。 この記事について 本記事では下記の3点を共有します。 従来の監視技術が抱える課題とTelemetryの可能性 Telemetryの技術概要と、各社の実装状況 NTT Comのネットワーク上で検証し得られた知見と、期待されるユースケース 従来の監視技術が抱える課題 ネットワーク運用においては、障害検知やパフォーマンス分析のため監視技術が重要となります。 従来のネットワークでは、SNMP（Simple Network Management Protocol）と呼ばれる技術が広く利用されています。 SNMPの仕組みを図1に示します。SNMPはUDPベースなネットワーク監視技術です。データモデルはMIB（Management Information Base）と
こんにちは！スタンディングデスクを導入して快適な開発環境と運動不足の両方を解消できるようになったのではと感じている、広告技術部のUT@mocyutoです。 今回は半年ほどEKSを運用して秒間3万リクエストのトラフィックをさばくほどになりました。 秒間3万は広告システムだと割とあるとは思いますが、kubernetesでも運用できているので紹介しようと思います。 対象のEKSで構築したサービスは広告の配信サーバです。 広告配信サーバの要件として、まず50ms以内にレスポンスを返さなければいけません。 構築したk8sのレスポンスタイムの99パーセンタイルは10msほどで返せています。 以下は必要最小限のクラスタの構成図です。 全体像 API 弊社のサーバサイドはほぼGoで作られているので、例に漏れずGoで作られています。 pod構成はAPI、fluentd、envoyの サイドカーパターン です
書評『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』 - uhyo/blog
皆さんこんにちは。今回は、2022年7月25発売の『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたびTypeScript入門書を出版したこともあり、それを過去の話として葬り去るべく技術書を読んでいくことにしました。せっかくなので、読んだ技術書の感想等を紹介します。 おことわり: この記事では、「筆者」とはこの書評を書いた人を指し、『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を書いた人たちのことは「著者ら」と呼びます。また、この記事の内容はすべて筆者の個人的な見解であり、本の内容や本を読んで得られる知識について何らかの保証をするものではありません。 筆者について筆者
こんにちは、検索基盤部 検索基盤ブロックの渡です。私は検索基盤ブロックで、主にZOZOTOWNの検索周りのシステム開発に従事しています。 以前の記事では、Elasticsearchのマッピング設定の最適化について取り上げました。そして、今回は日本語による形態素解析を実現するまでの手順をご紹介します。 techblog.zozo.com 目次 目次 はじめに Elasticsearchで全文検索を実現させる手順 全文検索のためのマッピング定義 Analyzerの構造 日本語対応のAnalyzer 日本語対応のためのプラグイン追加 kuromoji Analyzerを指定したマッピング定義の例 kuromojiプラグイン機能 カスタムしたAnalyzerのマッピング定義 Analyzerの動作確認 modeを選択した場合のマッピング定義の例 Analyzer適用の注意点 kuromoji以外の
data "aws_caller_identity" "current" {} output "account_id" { value = data.aws_caller_identity.current.account_id } 若干補足しておくと、 "${}" 自体が廃止されたわけではなく、今でも文字列の中に変数を埋め込む場合には必要ですが、式が変数の参照しか含まない場合は不要で、v0.13.4以降は冗長な書き方は警告が出ます。ちなみにv0.14のfmtはもう一歩踏み込んで、この書き方を自動で修正するようになりました。古いサンプルコードを雑にコピペできるようになってべんり。 Terraformではなく汎用的なHCLそのものの仕様を調べたいときは、 hashicorp/hcl にありますが、本稿執筆時点ではデフォルトのmasterブランチはまだHCL1であることに注意して下さい。 HCL
#Tools #Vim #MouselessA Vim Guide for Advanced UsersWelcome to the third part of this series aimed to help you unleash a power never seen on Earth using the Almighty Vim. We’ll see together in this article: Some nice keystrokes beginning with g.What ranges are and how to use them.The quickfix list and the location lists.The marvelous substitute command.The crazy useful :global (or :g) command.What
Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る (2022/10/31 追記) - Qiita
2022/10/31 追記 2022年時点ではWebpackでReactの環境を構築するより、Viteを用いて環境構築するほうがメジャーになっています。 筆者としても新規開発するならWebpackより、Viteの方で構築することをおすすめします。 ViteではReactのビルド用設定はPluginとしてパッケージされており、Webpackのように設定が必要ではありません。 下記はWebpack v4の話であり、すでに過去の物となっています。 ※自分のブログに投稿したのものと同じです。 https://mr-ozin.hatenablog.jp/entry/2020/06/20/043243 動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようと
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
Vimの思想について
ここでいくつかのルールとして motion-count-multiplied 例えば10jで十行下へ移動、d2kで上２行を削除など operator-doubled 例えばyy, dd, cc, >>とか、2回繰り返すとカーサーのある行に動作する upper case operator 例えばc->C、d->D, y->Yのように、現在のカーサーから行の最後まで動作するケースと、対になっている（逆の機能を持つ）ケース、例えばp->P, o->O, n->N, a->A, i->I, f->Fなど）に大まかに分けられる exclusive inclusive 例えば、yiw vs yaw, cib vs cabの違いで、テキストオブジェクトの内部（inner）だけか、境界線も含めるか（around） があります。これらのルールは他のプラグインにもよくみられるので、Vim wayに慣れればプラ
重いサイトを軽くしろ！年末年始は #WebSpeedHackathon 2021 に挑戦しよう | CyberAgent Developers Blog
ABEMA で Web フロントデベロッパーとして活動している 宮代 @3846masa です。CyberAgent Advent Calendar 2021 4 日目は、Web パフォーマンス改善のコンテストについてお話します。 TL;DR Web パフォーマンス改善コンテスト “Web Speed Hackathon 2021 mini” を開催します！ 改善する対象は https://web-speed-hackathon-2021.herokuapp.com/ です オンライン開催で、12 月 4 日から 1 月 3 日までの 1 ヶ月間、好きなときに誰でも参加できます 記事の後半は、課題となる「重たい短文投稿サイト」を作るまでの開催記です はじめに CyberAgent では、Web パフォーマンス改善を競うコンテスト “Web Speed Hackathon 2020” を昨年
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
2024/04/17: 更新 内容を更新した記事を書きましたので、よかったらこちらも併せて、ご覧ください。 zenn.dev こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考
リンカ
ついに、リンカの説明をするときが来た。 ここに至るまでに、何度「リンカのところで説明する」と書いただろうか？ ここまで読んできた人ならば、 リンカというものが、なにやら色々やっているんだな、というのはわかってきたのではないかと思う。 筆者が常々思っていることのひとつに、「C言語に関する書籍は、リンカの説明をおざなりにしすぎだ」というのがある。 多くのC言語の書籍は、 コンパイラがソースコードをアセンブリコードに変換します アセンブラがアセンブリコードを機械語に変換します リンカが機械語をリンクして実行ファイルが作られます と、いう解説がなされがちである。この説明を見たら、多くの人が、「え、リンクってなんですか？」と、思うに違いない。 アセンブラには、「人間が読めるニーモニックを、機械が読める機械語に変換する」みたいな、最低限の説明が付くものの、 リンカの説明は「リンクをします」のひとことだ
本稿では、基本的なDissectorの作り方と、Dissectorを活用したパケット解析方法を紹介します。 WiresharkのDissectorをご存知でしょうか？DissectorはWiresharkのプロトコル解析部分で、バイト列を人が理解できる内容に変換し表示してくれます。 Wiresharkを使った事がある方なら、独自プロトコルのバイト列を人が理解できる表示にできないかなぁと思った経験があると思います。 Dissectorを自作しPluginとして追加すると独自プロトコル解析が容易になります。 なぜ今Dissectorを紹介するの？ 技術部の安井です。 長年、制御システムを開発した経験から、現在は制御システムセキュリティを見ています。 現在、世の中の多くのプロトコルに対応したDissectorがWiresharkに搭載されています。しかし、制御システムやIoT機器など独自プロトコ
このエントリーは、Mackerel Advent Calendar 2020 5日目の記事です。 さて、多くの人が「自分は文章を書くのが遅い」と思っているのではないでしょうか。僕もそう思っていました。 ブログエントリーを書き出すと得てして思っていた以上の時間がかかります。書くことがだいたい決まっているちょいネタのつもりであっても書き出してみたら数時間かかってしまう、大作であれば丸一日潰れてしまったり、しばらく寝かして数日がかりになることも珍しくありません。そして「ああ、自分は文章を書くのがなんて遅いのだ」と嘆いてしまうのです。 そして、見事な大作ブログ記事をバンバン投稿している人を見ると「書くのが速い人は羨ましいなー」と羨望してしまいます。また故栗本薫氏が、一時間に原稿用紙96枚分を書いたなどの伝説を聞くに、圧倒されて唖然としてしまい、やる気を失ってしまいそうになります。 しかし果たして本
Obsidianを使って生産性を高める - Qiita
目次 1.はじめに 2.Obsidianとは 3.Obsidianのインストール 4.プラグインの導入 5.おすすめのプラグイン 6.Obsidian参考サイト 7.おわりに 1. はじめに 生産性を高めるツールは色々存在します。 タスク管理を例に挙げると、私はタスク管理にはカンバンツールが好きで、オフラインで使えるWekanやFocalBoardというツールを使ってきました。 しかし、タスク管理は〇〇、エディタは△△、作業記録は××といったように複数のツールを使うのは非常に面倒です。 機会があってマークダウンエディタであるObsidianを活用する方法を調べてみたところ、このツール1つで様々なツールの代替ができて非常に有用だと感じたので、Obsidianの導入方法とタスク管理機能を含めた個人的におすすめなプラグインを紹介し、Obsidianの活用方法を紹介していこうと思います。 まだまだ
WebAssemblyの歴史について
はじめに 最近、Node.jsとDenoの開発者であるRyan DahlさんがJavaScript Containersという記事を書いていることを知った。 Webとの親和性の高さがサーバーサイドで求められる中、JavaScriptがユニバーサルスクリプトとして活躍するだろう。そして、コンテナランタイムがLinuxコンテナの抽象レイヤーとしてあるように、JavaScript界隈では既存のWebAPIそのものが抽象化の手助けとなるであろう、みたいな趣旨の内容だった。 彼がChromeのV8 JavaScript Engineを使ってNode.jsを誕生させた同じ頃、JavaScriptの可能性を信じて方法を模索した人がいる。Alon Zakaiさんだ。 Alon(以降、敬称略)はWebAssemblyやその考えの元になった asm.js 、 JavaScriptコンパイラ Emscripte
JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由2020/09/21 昨日、拙作の Nuxt.js プラグインである @nuxtjs/dayjs の v1.2.0 をリリースしました。 このプラグイン自体は2019年3月に開発をはじめて、おおよそ一年半ほど管理してるのですが、それ以前から JavaScript での時刻操作では Day.js を使ってきました。 Moment.js のプロジェクト終了が告知され、時刻操作ライブラリに注目が集まっていることなので、今一度 Day.js の採用理由についてまとめてみます。 Day.js について iamkun によって開発されている時刻操作のライブラリです。Moment や date-fns などは Organization によって管理されていますが、時刻操作ライブラリとしては珍しく個人に
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? EDIT^7: blink と box86、FEX。 EDIT^6: Unikraft 。 EDIT^5: Tilck 。 EDIT^4: コメント。gVisor はすっかり忘れていました！Linuxを拡張するためにLinuxを実装した良い例だと思います。LINE有りましたね。。 SF.netのCVSはもう死んでしまったので除外にしました。。 OSvのバイナリ互換 はPIEであることが要求なので。。といっても世間的にはもうLinux = Debian/Ubuntu で良いですかね。。表現を調整しました。 EDIT^3: Noah忘れてた
前に書いた ESLint と Prettier の共存設定とその根拠について が公式推奨が変わったことにより一部間違った情報になっているのでその訂正記事です。 該当記事に書いた内容は Prettier と ESLint の関係を読み解く上で役立つ情報だと思うので、警告とこのページへのリンクを書いた上でそのまま残しておきます。 (追記) この記事の内容も間違った内容を書いていました。なので一度大幅な訂正をしています。prettier-eslint も推奨ではありません。 変更点の要約 Prettier と ESLint の組み合わせについて公式 の推奨方法が変わりました。 きっといつかこの情報も古くなるので直リンクではなく、ドキュメントの GitHub のリンクを貼っておきます。 ドキュメント自体のリンクはこちらです。 新しいドキュメントを要約すると、 Linter と Formatter
// auth.ts import NextAuth from "next-auth" import GitHub from "next-auth/providers/github" export const { auth, handlers } = NextAuth({ providers: [GitHub] }) // middleware.ts export { auth as middleware } from "@/auth" // app/api/auth/[...nextauth]/route.ts import { handlers } from "@/auth" export const { GET, POST } = handlers // src/auth.ts import { SvelteKitAuth } from "@auth/sveltekit" impor
概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント | フューチャー技術ブログ
TIGの伊藤真彦です。 ここ最近はVue.jsでのフロントエンド開発を行っています。 ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。 ※この記事は 2020/10/13 に執筆されました。調査日は2020/08/17～2020/09/01 のため、バージョンなど当時と状況が異なるものがあります。この1ヶ月の間でも、alphaからbetaに変わったり、betaが取れたりと進化が速いです。 公式ライブラリのステータスはこちらもご参考ください。 https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries 前提として押さえておきたい2点のポイント環境構築はVue CLIフューチャーでは仕事ですぐに使えるTypeScriptと題しまして、TypeScri
フロントエンドの新規開発でNext.jsの採用を見送った話 - バイセル Tech Blog
※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。 前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。 はじめに こんにちは、開発3部の神保です。 バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション「Visit」の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。 技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました
Amazon Linux 2 のインスタンスを作成する時に必ずやっておきたい事 | DevelopersIO
はじめに こんばんは、菅野です。 Amazon Linux 2 への移行は終わりましたか？ Amazon Linux 2 へ移行するには新しいインスタンスを作成する必要がありますが、その時におすすめしたい設定があります。 ※2020-07-08に「注意点 その2」を追記しました。 おすすめの設定 セッションマネージャーを利用できるようにすること メモリ使用率とディスク使用率を CloudWatch で見れるようにすること これらを設定しておくと、今後の運用が楽になります。 セッションマネージャーを使うメリット メリットとしては、SSH 接続をしなくても EC2 のコマンドが実行できるようになりますので、セキュリティグループで SSH を解放する必要が無くなりセキュリティの向上につながります。 この画像はマネジメントコンソールから EC2 にログインした時のものですが、AWS Systems
のようなイメージでしょうか？ C++がないプロジェクトでは、これらのファイル群をバージョン管理しましょう。 ProjectName Config Content ProjectName.uproject 逆に Intermediate Saved といったディレクトリは中間ファイルやキャッシュにあたるので、バージョン管理しないようにしています。 BluePrintとC++ ブループリント(BluePrint)はUE4のビジュアルスクリプトプログラミングするための機能だけでなく、BluePrint ActorとしてUnityのPrefabのような機能も持っています。(Prefab機能についてはこの記事では割愛し、プログラミング機能のみに述べます) BluePrint = PrefabのようなActor複製機能とPlayMakerのようなビジュアルスクリプトプログラミング機能 C++ = C#
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
ESLint と Prettier の共存設定とその根拠について
ChatGPT Pluginって何ができるの？ - Qiita
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
Webエンジニアとしていま知っておきたいWebアクセシビリティ
明日からできる、爆速Figma活用術 - エムスリーテックブログ
エムスリーのデータ基盤を支える設計パターン - エムスリーテックブログ
React今昔物語 - ICS MEDIA
AIを語りたいなら最低限Pythonをやるべき。足し算より簡単なんだから｜shi3z
AWS LambdaでAPI開発するときのパターン集 - Qiita
OpenAI API を用いた文書校正(誤字脱字検出) | blog.jxck.io
Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ
秒間3万リクエストをkubernetesでさばく - Gunosy Tech Blog
Elasticsearchで日本語検索を扱うためのマッピング定義 - ZOZO TECH BLOG
Terraform職人再入門2020 - Qiita
A Vim Guide for Advanced Users
俺の webpack.config.js-20200503 - mizchi's blog
WiresharkのDissectorを使った独自プロトコル解析をやさしく解説してみました
あなたは本当に文章を書くのが遅いのか | おそらくはそれさえも平凡な日々
JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由
めくるめくLinuxカーネルじゃないLinux実装の世界 - Qiita
Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった
Auth.js | Authentication for the Web
【React】リッチテキストエディタ（Quill、Tiptap、Slate...）の考え方や前提知識
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
Unity歴5年の僕がUnreal Engineをこれから学びたい人向けの記事を書く - Qiita