はてなブックマーク

はじめに 皆さんはnpm, yarn, pnpmどのPackage Managerを使っていますか？ yarnしか使わない！という方もいるかもしれませんが、pnpm評判いいみたいだし使ってみようかなとか、チーム開発では安定のnpmなんだよなとか、複数のPackage Managerを使用するケースって少なくないかと思います。 そういった場合、それぞれのコマンドを覚えるのも面倒ですし、プロジェクトに応じて頭の切り替えをしないといけないのは大変です。 本記事は、そういった悩みを解決する方法を紹介します。 ni niはnpm,yarn,pnpm,bunに対応していて、それぞれのlockfileを読み取って、適切なコマンドを実行してくれるPackage Managerです。 niのコマンドは短く、わかりやすいのですぐ覚えられると思います。 ちなみに、作者はVueやNuxt、Viteなどのコアチーム

Ateam Group U-30 Advent Calendar 2022の1日目は 株式会社エイチームライフデザインの@oekazumaが担当します。 はじめに Svelte、SvelteKitのプロジェクトにおいて、コンポーネントテストを書きたい場合、どのようなテストランナーを使ってどう書けばいいかを解説していきます。 SvelteKitが用意してくれているプロジェクト作成のCLIではPlaywrightとVitestがデフォルトで追加できるようになっていますのでこれらのテストランナーを使ったコンポーネントテストを紹介します。 今回、作ったサンプルはこのリポジトリで確認できます。 SvelteKitとは SvelteをベースとしたハイパフォーマンスなWebアプリを作るためのフレームワークです。 ReactでいうNext.js、VueでいうNuxt.jsような立ち位置だと認識していただけ

はじめに アイランドアーキテクチャは2019年にEtsyのフロントエンドアーキテクトであるKatie Sylor-Miller氏によって考案され、Preact作者のJason Miller氏のBlogによって広められました。 現在、アイランドアーキテクチャはAstro、Fresh などのWebフレームワークが採用しています。 アイランドアーキテクチャとは ページ内でサーバー側でレンダリングされる静的な部分とインタラクティブなアプリの部分をそれぞれ独立して表示させる手法です。 静的な部分を海に見立てて、その海に浮かぶそれぞれが独立した島(インタラクティブなアプリ)というイメージでアイランドアーキテクチャと名付けられているようです。 メリット １番のメリットはパフォーマンスです。 ページのほとんどの部分は静的なHTMLで構成され、JavaScriptが必要としない部分にはJavaScriptが

はじめに あまり知られていないかもしれませんが、Svelteを使ってWeb Componentsを開発することができます。 本記事ではSvelteを使ってWeb Componentsを開発するやり方を紹介したいと思います。 Web Componentsとは webcomponents.orgから引用 Web Componentsは、WebプラットフォームAPIのセットで、WebページやWebアプリケーションで使用する、新しいカスタム、再利用可能な、カプセル化されたHTMLタグを作成することを可能にします。カスタムコンポーネントとウィジェットはWeb Componentsの標準に基づいて構築され、モダンブラウザで動作し、HTMLで動作するあらゆるJavaScriptライブラリやフレームワークで使用することができます。 Web Componentsは、既存のWeb標準をベースにしています。We

Flutterとは Flutterとは、Googleによって開発されたモバイルアプリケーションSDK (Software Development Kit)です。 クロスプラットフォームに対応していて、1つのコードで複数のプラットフォーム(iOS,Androidなど)に対応したアプリケーションを開発することができます。 開発環境構築手順 MacでFlutterの開発を始める為に開発環境を構築していきましょう。 ※所要時間約1時間(ダウンロードやインストールをするので時間かかります。) 1.Flutterをダウンロードする 下記の公式サイトからFlutterをダウンロードします。 https://flutter.dev/docs/get-started/install/macos Apple Silicon Macの場合 重要: Apple Silicon Macにインストールする場合、いくつ

はじめに Svelteで使えるUIコンポーネントライブラリを調べたのでまとめます。 新しく出てきたライブラリを追加したり、1年以上メンテナンスされていないライブラリは削除していきます。 Svelte Material UI サイト：https://sveltematerialui.com/ GitHub：https://github.com/hperrin/svelte-material-ui Skeleton サイト：https://www.skeleton.dev GitHub：https://github.com/Brain-Bones/skeleton Melt UI サイト：https://www.melt-ui.com/ GitHub：https://github.com/melt-ui/melt-ui Flowbite Svelte サイト： https://flowbite

VueやReactと違って仮想DOMがなく、ビルド時にピュアなJavaScriptにコンパイルしてくれるコンパイラー もっと詳細が知りたい方は、僕が以前書いた記事で詳しく説明していますので参照ください。 君はVue,Reactの次に来るSvelteを知っているか？ Routify Svelteのファイルシステムベースのルーティングライブラリ ファイルを生成すると自動的にルーティングを作成してくれたり、SPA、SSR、PWA、メタタグ生成、コード分割など欲しい機能が詰まっているライブラリになってます。 Star数も執筆時点で700~800ほどなので非公式のSvelteのライブラリの中では人気なライブラリとなっています。 細かい設定などもでき、ドキュメントも充実しているので詳しくは以下を参照ください。 https://routify.dev/ MDsveX MarkdownでSvelteコンポ

はじめに この記事はAteam Brides Inc. Advent Calendar 2019　5日目の記事です。 はじめまして、エイチームブライズ新卒1年目の@oekazumaです。最近僕がハマっているSvelteに関して書きたいと思います！ Svelteとは？ SvelteはRich Harris氏によって開発されたコンパイラーでVueやReactのようにブラウザー上でコンポーネント化をするフレームワークではなく*.svelteファイルをhtml, js, cssに変換します。 「すらりとした」という意味を持つ名の通り軽量で高速。 ベンチマークでReactの35倍、Vueの50倍速いです。 Svelteの３つの魅力 公式にも書かれている下記の3つを中心に説明していきます！ 1. Write less code (より少ないコードを書く) 2. No Virtual DOM (仮想DO

はじめに SvelteがTypeScriptを公式サポートしたことを発表したのでさっそく試してみたいと思います！ Svelteって何？って方は僕が以前書いた記事があるので君はVue,Reactの次に来るSvelteを知っているか？を見てから帰ってきてください！ ok, we've kept you in suspense long enough. we are absolutely cock-a-hoop to announce that Svelte now officially supports... 🎉🎉🎉 TYPESCRIPT!!! 🎉🎉🎉https://t.co/Ze8hnp0Qgi amazing, amazing work by @orta, dummdidumm, jasonlyu123, @UnwrittenFun, @halfnelson_au and @o