はじめに先日、初心者でも簡単に参加できる GitHub チュートリアル 『First Contributions JA』を共同開発しました！ 振り返りも兼ねて、プロジェクトの背景や使用技術について、紹介していきます。 ▼ GitHub のリンク： なぜ First Contributions JA を構築したのか？さて、First Contributions JA には、次のような特徴があります： - React/ Next.js で構築されたWebサイト - 初心者向けのGitHubチュートリアル - オープンソースのプロジェクト 上記を踏まえて、プロジェクトの経緯は、主に２つあります。 （技術スタックは、後で詳しく説明します） 1. JavaScript/ React 学習コミュニティで、共同開発を提案した！以前、 「JavaScript/ React を学習するコミュニティを、期間限
2024年最新版：Pythonデータ解析ライブラリ総まとめ - 実践的ガイド - Qiita
はじめに Pythonのデータ解析エコシステムは日々進化を続けています。2024年現在、効率的なデータ処理、直感的な可視化、高度な機械学習の自動化など、様々な新しいツールが登場しています。本記事では、最新のPythonデータ解析ライブラリを紹介し、それぞれの特徴や使用例、実際のユースケース、そして導入方法まで詳しく解説します。 1. データ操作ライブラリ 1.1 Polars: 高速データ処理の新標準 Polarsは、Rustで実装された高速なデータ操作ライブラリです。pandasに似たAPIを持ちながら、大規模データセットでより高速に動作します。 特徴: 高速な処理速度 メモリ効率が良い pandasに似たAPI 使用例: import pandas as pd # サンプルデータを作成 data = { "age": [25, 32, 28, 35, 40, 50], "categor
海外のセキュリティ企業「Phylum」はトロイの木馬化された「jQuery」がnpmやGitHub、jsDelivr のCDNホストで拡散している事を指摘しました。 「jQuery」を悪用したサプライチェーン攻撃の概要 Phylumは 2024 年 5 月 26 日以来、トロイの木馬化された jQuery のバージョンを悪用する執拗なサプライ チェーン攻撃者を監視しており、最初に npm でこのjQuery を悪用する亜種を発見しました。 そこでは、1 か月にわたって数十のパッケージで侵害されたバージョンが公開されていました。 調査の結果、GitHubや、jsDelivr の CDN ホスト リソースでも、トロイの木馬化された jQuery のインスタンスを発見しました。 なお、今回解説されている内容は正規の「jQuery」へ今回のトロイの木馬が紛れ込んでいるのではなく、 悪意のあるユーザ
ウェブブラウザのバージョン間の違いを無効化するJavaScriptライブラリ「Polyfill.io」が、2024年2月のプロジェクトオーナー変更後、マルウェアが混入されてサプライチェーン攻撃に利用され、10万以上のサイトに影響が出ています。 Polyfill supply chain attack hits 100K+ sites https://sansec.io/research/polyfill-supply-chain-attack 「Polyfill.io(polyfill.js)」はアンドリュー・ベッツ氏が開発したJavaScriptライブラリです。ウェブブラウザのバージョン間で機能の違いがあると開発時に苦労しますが、Polyfill.ioを利用すれば、新しいバージョンにしかない機能を古いバージョンで利用できるようになるため、バージョンの違いを気にすることなく開発を進めること
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
結局 useEffect はいつ使えばいいのか
useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#
module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-typ... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになるPRが出てきました。 背景 TC39でも型注釈の話題(議事録を読むとブラウザとの兼ね合いもあり道のりは長そう)が存在するほどJSのコードにおいて、型は当たり前となっています。 Node.jsと同
HTMX入門【はじめからそうやって教えてくれればいいのに！】
JavaScriptにはだいぶ前からSetオブジェクトがありましたが、何故か集合演算は全く定義されておらず自力で実装しなければなりませんでした。 その後、まあ不便だねってことでSet Methods for JavaScriptというproposalが提出されました。 実装は珍しくSafariが最も早く、2023/09/18のSafari17から対応しました。 その後2024/02/21にChrome122、そして2024/06/11にFirefox127で実装されたことにより、主要全ブラウザで集合演算が使用可能になりました。 複数環境で実装されたことから、無事ES2025としてStage4、つまり上がりになりました。 ということで使い方を紹介するよ。 Set.prototype.intersection() 要素と引数の、両方に含まれる値を返します。 new Set([1, 2, 3,
米セキュリティ企業のPhylumは7月3日（現地時間）、JavasScriptライブラリ「jQuery」の特定バージョンがトロイの木馬化され、GitHubなどで拡散していると警告した。 同社は5月26日、パッケージ管理システム「npm」でトロイの木馬化されたjQueryを確認。少なくとも1カ月にわたって、数十のパッケージで“汚染”されたバージョンが公開されているのを確かめた。さらに、GitHubやCDNサービス「jsDelivr」でも拡散していることが分かったとしている。 対象のパッケージには、悪意あるコードが追加されたjQueryのコピーが含まれていた。汚染されたバージョンはWebサイトのフォームデータを抽出し、外部に送信するという。 Phylumは「マルウェアを作動させるために必要な条件は限られているが、パッケージが広く配布されていることから、潜在的な影響は広く、多くの開発者に影響を与
はじめに どんな人向けの記事？ ローカルLLMに興味のある人 zoltraakに興味のある方 LLMを用いて要件定義書を作りたい方 内容 今回は元木さんのZoltraakを使って、自然言語から要件定義書を作ってみようと思います。 ただし、リリースされてから2ヶ月以上経ったzoltraakを普通に動かすだけでは面白くないので、この記事ではローカルLLMを使った場合にどの程度の品質のアウトプットが得られるか、そもそもまともに使えるのかを検証してみたいと思います。 結論 結論から述べると、下記の通りになりました。 現状のローカルLLMだけでzoltraakを完全に動作させるのは難しそう。 要件定義書は問題なく作成できる。 その後の工程の、ディレクトリ・ファイル構成を作成するための実行可能なpythonコードを作ることができなかった。 grimoiresの記載を工夫することで、ある程度は改善できる
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
GitHub - dotenvx/dotenvx: a better dotenv–from the creator of `dotenv`
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
javascripter です。ハローでは、初期メンバーとしてプロダクトのローンチ前からAutoReserve の開発に関わっています。 前回の記事に引き続き、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 前回の記事については、こちらを参照下さい。 Reactベストプラクティス: react-hooks/exhaustive-de
Node.js 本体で TypeScript ファイルを実行できるようにするプロポーザルが出されているという話が先週あたりから話題になっている。しかしそれほど嬉しいかといわれると、正直いらんなあと思っている。 TypeScriptで簡単なスクリプトを書くときは、長らくtsxを使って実行している。tsxを使い始めるより前は ts-node を使っていたが、tsxを使ってからは何の不満もなく使い続けている。 tsxは内部的にはesbuildでTypeScriptをトランスパイルしていて、型チェックは行わない。tsxのありがたい点は、すべての node コマンドのオプションを tsx コマンドでサポートしていることだ。単純にコマンドを置き換えるだけでいいので、何も新しく覚えることがない。 構造的にはNode.jsの中でswcでJavaScriptに変換されるか、外でesbuildで変換されるかの
Next.jsで不要なファイルを一掃する
Knipというツールが便利。JaveScriptやTypeScriptで書かれているプロジェクトの未使用のファイルやexportを見つけることができる。 Find unused files, dependencies and exports in JavaScript and TypeScript projects https://knip.dev/ インストールせずに使いたいのでnpxコマンドを使って実行する。 また、Next.jsのプロジェクトで使いたいのでプラグインを導入する。 上記のプラグインの中にNext.jsがあるのでこれを使う。 knip.jsonというファイルをプロジェクトのルートに配置する。除外したいディレクトリはignoreで指定できる。 { "ignore": [ "hoge" ], "next": { "entry": [ "next.config.{js,ts,c
Object.groupBy で作られるオブジェクトの prototype は null - Object.create(null)
おさらい: prototype JavaScript のオブジェクトはみんな prototype というのを持っていて, この prototype からプロパティを継承, より正確には, プロパティアクセス時にそのプロパティがオブジェクトに存在しなければ prototype を辿って見つけにいくことになっている. あるオブジェクトを prototype とした別のオブジェクトを作るには Object.create を使う (あるいは new 演算子や __proto__ を使っても良い). const x = {}; x.foo = "foo"; const y = Object.create(x); y.bar = "bar"; const z = Object.create(y); z.baz = "baz"; console.log(z.foo); // => "foo" conso
Kotlin Fest 2024のためにCompose HTMLでWebサービスを開発した話 - エムスリーテックブログ
2024.06.28 Kyoto.js #22 の登壇資料です https://kyotojs.connpass.com/event/321343/
こんにちは！クライアント開発チームの安野です。 クライアント開発チームでは、クライアントポータルという to B 向けのサービス開発を担当しており、私はそこでフロントエンド・バックエンドの開発に携わっています。 クライアントポータルの内容はこちらからも確認できるので、ご興味があれば是非ご一読いただけますと幸いです！ square.visasq.com そんなクライアント開発チームですが、この度、 Dependabot というライブラリの脆弱性管理ツールを導入しました。 今回は導入にあたって調査した Dependabot について共有できればと思います。 はじめに ソフトウェア開発において、外部ライブラリの利用はもはや常態化しています。 豊富な機能や開発効率の向上といったメリットから、多くのプロダクトにライブラリが活用されています。 しかし、外部ライブラリにも脆弱性が含まれる可能性があり、発
【読売新聞】 出版大手「ＫＡＤＯＫＡＷＡ」グループが身代金要求型ウイルス「ランサムウェア」による攻撃を受けた問題で、ハッカー集団が闇サイト上で、新たに同グループの内部情報とみられるデータを流出させたことがわかった。ＫＡＤＯＫＡＷＡ側
jQuery Attack Hits NPM and GitHub; Can Extract Web Form Data
jQuery Attack Hits NPM and GitHub; Can Extract Web Form Data The trojanized jQuery attack has been spread on npm, GitHub and elsewhere since May. A trojanized version of jQuery has been spreading on the npm JavaScript package manager, GitHub and elsewhere, for use in a jQuery attack, security researchers have discovered. Phylum researchers said they have been monitoring the “persistent supply chai
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「GitHub難しい!!」を30分で解決するサイトを共同開発しました🚀｜kazzyfrog
トロイの木馬化された「jQuery」がnpmやGitHubで拡散
Poku
JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響
Vite ってよく聞くけど何なんですか？ あれは
Node.jsでTypeScriptのコードを実行できるようになるかも - hiroppy's site
【JavaScript】ネイティブで集合演算できるようになった - Qiita
React Server Componentsを理解したい
トロイの木馬化したjQueryがGitHubやCDN経由で拡散 米セキュリティ企業が警告
ローカルLLMでzoltraakを動かせるか検証してみた
UIコンポーネントの大きさは外から制御しよう - Qiita
Reactベストプラクティス2: SWRを正しく使うには - Hello Tech
.tsファイルを直接実行するのにtsxで特に困っていない | Marginalia
君は新しい日付/時刻API Temporal を知っているか？
Dependabotを導入してライブラリの脆弱性対策を自動化する - VISASQ Dev Blog
Bun の非互換な拡張 API - moriken's project
ハッカー集団、ＫＡＤＯＫＡＷＡ内部情報を公開…闇サイト上に給与明細など
ブラウザ上で可愛いフィルターを実現！TensorFlow.jsを使ったリアルタイム顔認識 - ICS MEDIA
jQueryは時代遅れなのか？ - Qiita