vite4がリリースされましたが、プロジェクト作成時に「vite@latest」を指定しているため問題ありません。 vite4は、以下を参照してください。 https://vitejs.dev/blog/announcing-vite4.html はじめに Reactの開発環境は、CRA(Create React APP)がよく使われますが、CRAは沢山のモジュールの整合性の確認などのため、アップデートがリリースされるまでの間隔が結構あります。 また、使われているモジュールをアップデートするとエラーに悩まされたりします。 ゼロからReactの開発環境を作成していたのですが、いろいろとトライを繰り返すうちに以下の方法に落ち着きました。 比較的短時間で環境が作成できますし、全て最新のモジュールが使えます。 Vite nodejsを用いたJavaSriptプロジェクトは、、Webpackなどでプ
JavaScript/ECMAScriptというプログラミング言語の歴史について書いた文章はWikipediaなどいろいろなものがあります。 その中でも、ECMAScript 2015のSpec EditorであるAllen Wirfs-Brockによって書かれた”JavaScript: The First 20 Years”が特におすすめです。 JavaScript: The First 20 Years JavaScript: The First 20 Years | Zenodo “JavaScript: The First 20 Years”はHOPL IV - History of Programming Languages向けに書かれたPaperです。 JavaScriptの誕生からECMAScriptの策定、ECMAScript/JavaScript各バージョンでの違い、ブラ
T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている T3 Stackにおいては以下3つの思想に焦点が当てられている。 simplicity(簡潔さ) modularity(モジュール性) full-stack typesafety(フルスタックの型安全) そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j
あなたのGoアプリ/ライブラリのパッケージ構成もっとシンプルでよくない？ | フューチャー技術ブログ
2023.10.5追記: Goチームからプロジェクトの目的に応じたディレクトリ構造についてのドキュメントが公式に公開されています。 https://go.dev/doc/modules/layout Goでプロジェクトのフォルダ構成どうしよう、とググると見つかるStandard Go Project Layout。とはいえ、これはかなりコード量を増やしてしまう恐れがありますので、導入する場合のデメリットも考えておく方が良いです。 特に、プログラマーは、最初にみたプログラミング言語のフォルダ構成を親だと思う特性があり、Javaや.NETに影響されるとかなり細かくフォルダを切りたくなったり、package privateなど細かく可視性を制御しようとしたりして、なおかつ「privateのテストってどうすべきなんですか？」とか議論を始めたりもしますが、Go先生によればこれぐらいは1パッケージにフ
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作成するための
React Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by subscribing to React Flow Pro. React Flow Pro Getting Started with React Flow Make sure you’ve installed npm, pnpm or yarn. Then you can install React Flow via:
この記事の目的 最近「良いドキュメントが作れているな」と思う機会が増えてきたので、その知見をアウトプットしたくなった。 想定読者 今所属してる組織(会社/プロジェクトなど)のドキュメントがイマイチで悩んでいる人 そもそもドキュメントが無い組織に所属していてつらい思いをしている人 「ドキュメントを作れ」という漠然としたタスクを振られて困っている人 想定読者ではない人 メンテなブルなドキュメンテーションのエコシステムが完成している組織で更によいやり方を模索している人 私もまだ模索中なので、いいやり方があれば教えてほしいです👀 顧客提出などの「納品が必要」なドキュメントの管理方法を模索している人 この記事では「社内の情報共有」にスコープを切って話をしています 書いている人のスペック(参考) 歴５年くらいのなんちゃってフルスタックエンジニア 普段は Node.js / React.js or R
私が愛するフロントエンドのツールたち2023
自分がチームでフロントエンドの開発をするときの技術選定について書きます。 ログインしてユーザーごとに個別の情報を扱うことがメインのサービスを前提に書きます。 考え方 メンテナンス性の優れたものを選ぶ 制限が少ないものを選ぶ 余計なことに気を使わない 一気にいろんなことに挑戦しすぎない フレームワーク 正直に書くと最近は問答無用でNext.jsを選択しています。 慎重な性格なので、自分が責任を持って開発、運用するプロダクトであれば自分の経験値が高く、多くの課題をクリアできるNext.jsを選びます。 一部インフラの制約があるものの、ページごとにSSGやSSR、On-demand ISRなどができること、Reactの大きなエコシステムの恩恵を受けられることは非常に大きいです。 採用面でも現状Reactを扱える人は他のフレームワークを扱える人より多く感じます。 次点でCloudflare Wor
この資料は 11/16(土)開催の勉強会 いまからはじめるReact の資料になります。 React未経験者/初学者向けに チュートリアルを通してReact(およびHooks)について学ぶためのものです。 そのため、サンプルコードには例外処理などが不十分な箇所があります。ご注意ください。 Reactとは？ Reactとは Facebookが中心となってオープンソースで開発されている ユーザーインターフェースを構築するためのJavaScriptライブラリです。 (2019/10/30現在、v16.10.2 が公開されています) React – ユーザインターフェース構築のための JavaScript ライブラリ https://ja.reactjs.org/ コンポーネント(部品)を作成し、これらを組み合わせることでSingle Page Applicationのような複雑なユーザーインター
PublickeyのIT業界予想2023。クラウドのコスト上昇懸念、Passkeyの普及、AIによる開発支援の進化、WebAssembly環境の充実など
PublickeyのIT業界予想2023。クラウドのコスト上昇懸念、Passkeyの普及、AIによる開発支援の進化、WebAssembly環境の充実など 新年明けましておめでとうございます。今年もPublickeyをどうぞよろしくおねがいいたします。 さて今年最初の記事では2023年のIT業界、特にPublickeyが主な守備範囲としているエンタープライズ系のIT業界はどうなるのか、Publickeyなりに期待を込めた予想をしてみたいと思います。 エネルギー価格の上昇、セキュリティへの注目など まずは予想の前提として、IT業界に影響を与えそうな現状についての認識を明らかにしておきたいと思います。 グローバルな視点で見たときに、IT業界だけでなく世界経済に大きな影響を与えているのは石油や天然ガスを始めとするエネルギー価格の上昇とインフレでしょう。 エネルギー価格の上昇はロシアによるウクライナ
この記事はKeployのバージョンv2.0.0-alpha53 を前提に執筆しております。 Keployとは KeployはeBPFを利用して取得できるWebアプリケーションの通信に関するトレース情報を元に、テストとそのテストの実行時に利用するスタブサーバーを生成することができるツールとなります。 公式サイトのトップには以下のようなスローガンが掲げられています。 2 minutes to 90% test coverage! テストに苦労した経験のある方は興味を惹かれるのではないでしょうか。 現在まだアルファ段階のプロジェクトですが、GitHubスター数は2683（2024/01/04現在）、CNCF Landscape にも掲載されているなど、一定の注目を集め始めているOSSです。 開発主体はプロダクトと同名のKeployというインド発のスタートアップで、去年GoogleによるインドのA
それはベンツなんよ 総括 今年はコードをよく読むようにした。 技術的にはひき続きPaaSやクロスプラットフォームの動向に注目した。 デファクトの移り変わりを感じるので来年以降はGoやGraphQLに手を出していきたい。 去年のエントリ: 2021年に作ったモノや技術をふりかえる 今年やったこと コード読み 去年はコードを書くことに注力していたので今年は一転コードを読んでいた。 プログラム雑談ポッドキャストを聞いていて「コード読み」っていう言葉がよく出てくるので聞きながらそういえば自分もこの分野が好きだなと思い出したので意識してやることにした。 丁度、最新技術のトレンドだけ俯瞰しているのに学びを感じなくなってきたのでより潜りたい気持ちがあったのでそれを満せたと思う。 IntelliJ IDEAで全言語のプログラミング環境が楽に揃っているのが心強い（Samuraismさんありがとう）。 読んだ
Intro SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。 近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、 API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。 コンポーネントを敷き詰めるコンテナ側の設計は、 Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも多いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。 現在、提案/実装が進んでいる CSS の新機能群には、
去年8年ぶりに vimrc を書き直した時はLSPの体験があんまりよくなくてLSPなしでNeovimを使い続けていたのだが、様々な言語のOSSをメンテする都合で用途に応じてIntelliJとVSCodeとNeovimの三刀流で暮らしていた結果、可能ならNeovimに寄せたいけどそれならLSPを使いたいなということになり、今回LSPの所を真面目に設定し直して、かなり良い体験になっている。 正直Neovimの設定はVSCodeのそれに比べたら面倒なんじゃないかという印象がありサボっていた節があるが、実際にやってみるとVSCodeと同程度に簡単に済む方法もあったので紹介したい。 何故Neovimなのか LSPの話の前に、タイトルだけ見た人がそもそも単にVSCode使えばいいじゃんと言いそうなので、どうしてIntelliJやVSCodeではなくNeovimに揃えようと思ったのかについて書いておく。
RustでWebアプリケーションのバックエンドを開発するには ─ 型システムの堅牢性と柔軟性を業務システムにも！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧RustでWebアプリケーションのバックエンドを開発するには ─ 型システムの堅牢性と柔軟性を業務システムにも！ RustでWebアプリケーションのバックエンドを開発するには ─ 型システムの堅牢性と柔軟性を業務システムにも！ 安全性に大きな特徴があるプログラミング言語Rustは、C言語やC++に代わるシステム記述言語として注目されてきました。しかし、その安全性とパフォーマンスの高さにより、ビジネスアプリケーションの構築にも採用されています。この記事ではキャディ株式会社による事例を紹介します。 こんにちは。キャディ株式会社バックエンドエンジニアの松田と申します。 キャディ株式会社では、「モノづくり産業のポテンシャルを解放する」をミッションとして、製造業分野に関連するさまざまなソフトウェアの開発を行っています。また、そのための主要な開発言語としてRustを採用
WebのフロントエンドでもDockerで開発環境を構築する理由。（余談としての脱node依存開発） - Qiita
１．数ヶ月ぶりにビルドしたらエラーになる 開発中は問題がないのですが、数カ月ぶりにWebpackなりをつかってビルドしてみるとエラーがでる。 フロントエンド開発者なら一度は経験したことがあるのではないでしょうか？ いろんな原因があると思いますが、以下のような条件で起こることが多いのではないでしょうか？ ・複数のプロジェクトを開発する端末に直接配置している。 ・nodeenvなどのバージョン切り替えツールをいれずグローバルでnodeを使っている。 ・ライブラリをプロジェクト内で限定せずグローバルでつかっている。 要は、手元のMacやWindows、Ubuntuなど開発端末上に直接、複数のプロジェクトを配置して開発しつつ、nodeを共有したり、安易にバージョンアップとかしているとビルドができないなどのエラーが発生したりします。 ２．nodeをつかったフロントエンドのビルドの脆さ （１）特定の団
軽量でインストールも簡単なシングルバイナリのKubernetesディストリビューション「k0s」、Mirantisがオープンソースでリリース。LinuxとWindowsに対応
米Mirantisは、軽量かつシングルバイナリで、インストールや運用も簡単なKubernetesのディストリビューション「k0s」をオープンソースとしてリリースしました。 新しい Kuberentes distro, #k0s が OSSで公開されました！ 軽量、ワンバイナリ、Intel/ARM対応、アップデートも簡単！ チェックしてみてください！https://t.co/B4gBUPWau2 — Mirantis Japan (@Mirantis_JP) November 13, 2020 対応するOSはLinuxとWindows（今後リリース予定）。プロセッサはIntelとARMに対応します。 軽量かつ簡単に導入できて運用も容易 k0sは、「100% upstream vanila Kubernetes distro」（100％純正で色付けのないKubernetesディストリビューショ
TypeScriptでWebサービス開発（Apollo Server/Prisma/Next.js etc...)
最近開発しているBtoB SaaSサービスの技術スタックを、RailsからNode.jsに移行した。 これにより、フロントエンドもバックエンドも全てをTypeScriptで統一することができた。 特にNode.jsのWebバックエンドの構成について、まだまだ世の中に知見が少ない気がしているので記事にしておく。 Webバックエンド - Node.js(TypeScript) Nexus/Apollo Server (Webサーバー) GraphQLサーバーとして、Apollo ServerのコードファーストなアプローチでのラッパーであるNexusを使っている。 Railsからの移行を決断できたのも、Apollo ServerとPrismaにより、外部との通信が型付きで、かつ開発体験よく書けるようになたから、というのが大きくある。 数年前の段階だと、素のexpressを使ってWebサーバーを立
UUID v6, v7, v8 : タイムスタンプでソートできる新しい UUID のドラフト仕様 - kakakakakku blog
ID を採番するときによく使われる UUID Version 4 の課題として「順序性がなくソートしにくい」という側面があり，ULID (Universally Unique Lexicographically Sortable Identifier) を使えばソートできるようになるという記事を前に書いた． kakakakakku.hatenablog.com 関連して調査をしていたら，標準化団体 IETF (Internet Engineering Task Force) によって，UUID Version 6, 7, 8 という新しい仕様が提案（ドラフト段階）されていることを発見した❗️UUID Version 6, 7, 8 の目的を簡単にまとめると「タイムスタンプ情報を使ってソートできる ID を採番できるようにする」となり，もしこの仕様が取り込まれると，UUID を活用する幅がさ
この記事はNuco Advent Calendar 2023の1日目の記事です。 はじめに 2023年最新のフロントエンド開発環境についての紹介記事です。 分野別に、おすすめツール群と、その特徴などを紹介していきます。 デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。 これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 フロントエンド開発おすすめツール集 エディタ エディタやIDEは好みの問題も大きいので、メジャーなものを簡単
私が愛用するオンライン開発ツール インターネット上には、フロントエンド開発者の生活を楽にしてくれる素晴らしいツールが沢山あります。この記事では、私が開発の仕事で頻繁に使っている11のツールについて簡単に説明します。 1. CanIUse Web APIが特定のブラウザで互換性があるのか、モバイルブラウザで使用できるのか、分からないことはありませんか？このオンラインツールを使えば、ブラウザの互換性についてWeb APIを簡単にテストできます。 Can I use―HTML5、CSS3などの対応表。 「Can I use」は、デスクトップとモバイルにおけるフロントエンドWebテクノロジーを支援する、最新のブラウザ対応表を提供します。 caniuse.com Web Share APIのnavigator.share(...)に対応しているブラウザとバージョンを知りたいとします。 結果を見てくだ
本記事は、Simon Holdorf氏による「9 Popular GitHub Repos For Every Web Developer」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。 こちらもどうぞ すべてのウェブ開発者へ。人気GitHubリポジトリ10選 便利なツール、参考になる例など はじめに GitHubは、最近の（ウェブ）開発に関連するすべてのワンストップショップです。フレームワーク、デモ、あらゆる種類のコレクションなど、GitHubで見つけられないものはないでしょう。しかし、この膨大な量が問題です。あまりにも多くのレポジトリがあるので、おそらく聞いたことのないクールなものがあります。 そこで今回も、知っておくべき最も人気のGitHubリポジトリを紹介することにします。各リポジトリには少なくとも30,000個の星が付いています。 1. Realwor
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先順
エンジニアが最初に覚えるNotion活用例！
この記事に書いてあること エンジニアがNotionを使い始めよっかな…って思った時、 意外と何から始めたらいいのか一瞬慣れるまでよく分からない場合もある気がするので、 最低限これだけでもやったら便利だよ！ ってのをまとめます。 私がマネージャーやPM・スクラムマスターとして動くことが多いため、プロジェクト管理寄りの視点が多めかもしれません。 動機 昨今のエンジニアは、いやエンジニアでなくても、日々の情報整理の重要性は爆裂に上がってますよね。 皆さんも日々多すぎる情報や思考の整理に疲れてませんか？ 安心してください。Notionを使えばオールオッケーです！！！ さっそく使用例3選 ①議事録・進捗日誌など とにかく黙ってList View。 リストで情報をまとめたかったらとりあえず思考停止でList Viewを使います。 日記 作業進捗 議事録 やりたいことリスト etc… やり方は簡単。/l
フロントエンドのデベロッパーが2021年に向けて何に注目すべきかを紹介します。 特に上級職や転職など、ステップアップを目指す人は要チェックです！ 10 Things Front-End Developers Should Learn in 2021 by Simon Holdorf 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. フレームワーク 2. 静的サイトジェネレーター（SSG） 3. JAMstack 4. プログレッシブウェブアプリ（PWA） 5. GraphQL 6. コードエディタ/IDE 7. テスト環境 8. クリーンなコード 9. Git 10. ソフトスキル 終わりに はじめに 2021年は、フロントエンドの開発がテクノロジー業界で最もホットなトレンドの1つになることは間違いないでしょう。フ
はじめまして、たにお（@tanio0125）です。 今回は私が作ったアプリの利用者が1万人を超えたので、リリースから今までにやったことを書こうと思います。 興味がある方はぜひ最後まで読んでみて下さい。 はじめにまずは製作したアプリの紹介したいと思います。 アプリ名は『Bonfire』です、iOS・Android向けに全世界に配信中です。 どんなアプリかと一言でいうと「匿名でつぶやけるアプリ」です。つぶやきアプリといえばTwitterを思い浮かべますよね。 Bonfireは「SNSに疲れた人向け」というキャッチコピーで、Twitterや他のつぶやきから離脱したいユーザーをターゲットにしてます。 要するに邪道でニッチなSNSです。 どんなアプリか知りたい方は上記のリンクから是非ダウンロードしてみて下さい。 ■アプリのコンセプト決め個人開発なのでTwitterや大手SNSと同じ土俵で戦っても勝ち
0. はじめに Bizer株式会社でフルスタックエンジニアとして働きながら、国立大学法人電気通信大学の先端工学基礎課程（通称 K課程）という社会人向けの学士課程に在籍しています。 この春（2021年3月）に卒業予定のため、いちソフトウェアエンジニアから見た大学教育や学歴に対する考えをまとめておきます。 1. 対象読者 理系大学のカリキュラムがソフトウェアエンジニアという仕事にどう活きるか分からない方 就業しながら学士を取ろうとしている方 ソフトウェアエンジニアと学歴の関係性を不透明に感じている方 2. 現職エンジニアが工学学士を取る理由 18歳で最初の大学を中退しエンジニアとして働き始めたため、途中の放浪期間などを差し引き、ソフトウェアエンジニアとしてのキャリアは現在10年程です。つまり大学入学時点では6年程のキャリアがあり、それなりに幸せなエンジニアライフを送っていました。 ではなぜ既に
lodash やめ方 - Qiita
みなさん、 lodash で消耗してますか？ 私は消耗しています。 なぜ lodash で消耗するかというと、とにかく思考停止でインストールされ、 node_modules 下で大量に重複します。サイズが大きいlodashが複数バンドルされてビルドされると、重篤なパフォーマンス上の問題を引き起こします。 lodash には実装上の問題もあり、異様に丁寧に、そして富豪的に作られており、その結果ビルドサイズが無駄に大きいです。丁寧に作られて入るのですが、現代のフロントエンド水準や一般的なポリフィルと噛み合っていません。というわけで、常々やめたいと思っています。 ちゃんとES201xを追ってる人からすると、ほとんどの lodash のメソッドは不要に見えるはずです。本エントリは、思考停止で lodash で実装しようとする人に、ちょっと考え直しては？ と投げつける用の記事になります。 現代におい
Pythonが速度改善に本気出すと聞いたので恒例のたらい回しベンチをとってみたら、RubyがYJITですごく速くなっていて驚いた話 - Smalltalkのtは小文字です
2022-09-09改訂： gcc バージョンが古すぎたのと、C が内部計測でなかった点を改め計測しなおしました。結果、Rust は C より速くはなくなりました。紛らわしいことで、ごめんなさい。また、gcc のバージョンアップに伴い、Python および Ruby についてはビルドと計測をしなおしたので、これらも少し速い値に変わっています。この点もどうぞあしからず。 2022-09-10追記：ご要望のあった Python numba.njit 使用時と Go の結果を追加しました。PHP は JIT 有効化が面倒だったので断念しました^^; 2022-09-10追記2：C の計測で clock() を使うのはフェアではないという指摘がありましたので、念のため clock_gettime() を使用したコードに差し替えました。結果に大きな差はありません。 2022-09-10追記3：PHP
100万行の大規模なJavaScript製システムをTypeScriptに移行するためにやったこと | CyberAgent Developers Blog
現在ピグ事業部の主力サービスである「ピグパーティ」でサーバーサイドエンジニアをしております新卒2年目の川口です。普段はSRE関連の業務を主とし、サーバーサイドの業務効率改善や、システムの運用保守、時には機能の開発や修正なども担当しております。 ピグパーティは、2015年にiOS/Androidでリリースされたアバターコミュニティアプリで、サーバーサイドはNode.js(JavaScript)+MongoDBを採用しています。 ピグパーティではこれまでにプライベートクラウドからGCPへの移設、Kubernetes(GKE)の採用など、技術的負債の排除や新技術の採用などを積極的に行ってまいりました。今回は、サーバーサイド開発時の大きなボトルネックになっていた、型がわからないことに起因する複数の問題を解決するために、TypeScriptを導入することにしました。その結果、システム規模に対して少な
Table of Contents:· Table of Contents: · How to type React props ∘ Creating a type alias for the props ∘ Typing optional props ∘ List of types for React component props · How to type React function components · How to type React hooks ∘ Typing useState hook ∘ Typing useEffect and useLayoutEffect hooks ∘ Typing useContext hook ∘ Typing useRef hook ∘ Typing useMemo hook ∘ Typing useCallback hook ∘ T
はじめに 対象イベント 読み方、使い方 Remote Code Execution(RCE) 親ディレクトリ指定によるopen_basedirのバイパス PHP-FPMのTCPソケット接続によるopen_basedirとdisable_functionsのバイパス JavaのRuntime.execでシェルを実行 Cross-Site Scripting(XSS) nginx環境でHTTPステータスコードが操作できる場合にCSPヘッダーを無効化 GoogleのClosureLibraryサニタイザーのXSS脆弱性 WebのProxy機能を介したService Workerの登録 括弧を使わないXSS /記号を使用せずに遷移先URLを指定 SOME(Same Origin Method Execution)を利用してdocument.writeを順次実行 SQL Injection MySQ
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発
jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発 JavaScriptのUIフレームワークであるjQuery UIと、モバイルアプリケーション向けフレームワークであるjQuery Mobileは今後新規機能の開発が行われず、jQuery UIについてはメンテナンスへ移行、jQuery MobileについてはDeprecated（利用を推奨せず）になることがOpenJS Foundationから正式に発表されました。 jQuery UIは2007年に登場、jQuery Mobileは2011年に登場しました。一時期はWebサイトなどで広く使われ、関連書籍なども数多く出版された主要なライブラリ群の開発が正式に終わることになります。 ただしjQuery本体の開発は引き続き積極的に行われていくとのことです。 Follo
WebAssembly (wasm) allows code written in languages other than JavaScript to run on browsers. If you haven’t been paying attention, all the major browsers support wasm and globally more than 90% of users have browsers that can run wasm. Since Rust compiles to wasm, is it possible to build SPAs (Single Page Applications) purely in Rust and without writing a single line of JavaScript? The short answ
DB設計書の管理が楽になるDBML入門 – DBMLの書き方,dbdiagram.io, dbdocs の紹介 – | SIOS Tech. Lab
こんにちは！サイオステクノロジーの安藤 浩です。DB設計書の生成が容易にできるDBMLをご紹介します。DBMLの入門として、DBMLの書き方、ER図生成方法、Github actionsでCIを実行して閲覧する方法をご紹介させていただきます。 DBMLとは DBML は DataBase Markup Language の略でDB構造を定義するために設計された言語です。 DB構造に焦点を当てており、可読性の高い言語です。 dbdiagram.io や dbdocs.io などを利用することでDBドキュメントの生成が可能です。 コードベースで図を生成できる点でPlantUMLと似ていますね。 DBMLの書き方 テーブルの書き方 まずはテーブルの定義の例をもとにDBMLの記法を紹介していきます。users というテーブルを作成してみます。コードは以下のようになります。 Table users
Fastify 速いですね Express が hapi より遅いのは意外でした Koa は本体だけだと Express 以上に何もしないので その分速めです よくみると驚きなのが http.Server より Fastify が速いというところ http.Server はフレームワークを使わない Node.js 自体の API です Koa や hapi はこれを中で使っています これより速いということは Fastify は http.Server は使わずに net などを使って ソケット通信部分を直接操作しているのでしょうか？ http.Server を使ってない？Fastify のソースコードを見た限りでは 特に設定をしなければ http.createServer でサーバを作成しています つまり http.Server を使っています https://github.com/fas
はじめに 初めまして、バックエンドエンジニアの伊藤皓程です。2015年にサイバーエージェントに入社してからソーシャルゲーム2本、その後アドテクで広告配信システムの開発に携わりました。以前のプロジェクトではデイリーで数TBのログを収集と分析を行なっていた経験があり、また個人でAWS AthenaのTypeScript・Node.js用のクライアントライブラリ1を公開しています。今回は今年にリリースしたアプリボットの新データ分析基盤についてご紹介したいと思います。 経緯 アプリボットではゲームの運用の改善のためにユーザの行動ログの分析に力をいれており、Redshiftを利用したデータ分析基盤2がありました。一方でゲームの運用年数や運用タイトルの増加などにより以下のような課題がありました。 Redshiftのストレージ容量の枯渇 デイリーのレポート集計バッチの実行時間の増加 データ分析基盤の運用
【バックエンド】駆け出しエンジニアが目指すジュニアレベルのエンジニアとは【2024年版】 - Qiita
はじめに こんにちは。 普段はフロントエンドの開発をメインでやっておりますmamiと申します。 最近バックエンドの方の勉強や、少しずつですがDB設計やAPI作成などの業務もやらせてもらえるようになったので、自分のエンジニアとしてのレベル感や、この先目指すべき道筋を明確にしたいな〜という思いでこの記事を書いております。 これは自分のための記事であると同時に、同じように駆け出し中のエンジニアさんや、ミドル層を目指す手前のエンジニアさんにも刺さる内容になっているかと思います。 今、自分がどのようにキャリアアップしていくべきなのか、どのような道筋でスキルを磨いていけばいいのか。そんなふうに悩んでいる方は是非読んでみてください。 ※内容はバックエンドエンジニアが対象になりますが、フロントエンドの方もなにか通じるものがある…かもしれません。 ちなみにですがフロントエンドの方の記事は下記で執筆しています
こんにちは。たかぱい（@takapy0210）です。 本日は自然言語の可視化を手軽にできるようにしたパッケージnlplotをPyPIに公開したので、これのご紹介です。 nlplotとは？ nlplotで何ができるか 使い方 使用データ 事前準備 ストップワードの計算 N-gram bar chart N-gram tree Map Histogram of the word count wordcloud co-occurrence networks sunburst chart まとめ nlplotとは？ 自然言語の基本的な可視化を手軽にできるようにしたパッケージです。 現在は日本語と英語で動作確認済みです。 基本的な描画はplotlyを用いているため、notebook上からインタラクティブにグラフを操作することができます。 github.com （スター★お待ちしております🙇♂️）
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年秋版 最新React/Typescript開発環境の作成 - Qiita
JavaScriptの歴史については「JavaScript: The First 20 Years」を読む
フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた
Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita
Node-Based UIs in React – React Flow
【汎用ソフトスキル】ドキュメンテーションの続け方
いまからはじめるReact - Qiita
eBPFを使った自動テストツール「Keploy」がすごい
2022年の技術トピックをふりかえる - laiso
次世代 CSS 仕様が与えるコンポーネント時代の Web への影響 | blog.jxck.io
Neovimを一瞬でVSCode並みに便利にする - k0kubun's blog
2023年度版フロントエンド開発環境構築徹底解説 - Qiita
フロントエンド開発者のための便利なオンラインツール11選 - Qiita
すべてのウェブ開発者へ。人気GitHubリポジトリ9選 - Qiita
JavaScriptの非同期処理をじっくり理解する (2) Promise
フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと
【個人開発】Flutterで利用者1万人のアプリを作るまでの話｜たにお
Webエンジニア(30歳)だけど4年かけて工学学士を取った - Qiita
React with TypeScript Cheatsheet
【2020年】CTF Web問題の攻撃手法まとめ - こんとろーるしーこんとろーるぶい
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
Single Page Applications using Rust
どうして Fastify は生の Node.js より速いの？ : (*x).b=z->a+y/c
ソーシャルゲームの運用に欠かせないデータ分析基盤の作り方
自然言語を簡単に可視化・分析できるライブラリ「nlplot」を公開しました - ギークなエンジニアを目指す男