はてなブックマーク

はじめに この記事はAteam Brides Inc. Advent Calendar 2019　12日目の記事です。 エイチームブライズ新卒1年目の@oekazumaです。 今回は僕が新卒入社して初めてチームに提案したEmoji Prefixについてストーリー調で書きたいと思います。 ある日の会話 〜リファクタリングの作業をしている時〜 ぼく「んーこれ何の変更かな？コミットを見てなんでこうなっているのか追おう」 ぼく「ん！？いろんな変更が一つのコミットに入ってるぞ...しかもコミットメッセージ[とりあえずコミット]」って..なにをしてるか全然わからん」 ぼく「...とりあえず何してるか、コードを見てわかったけど時間かかったな...。何かいい方法ないかな...あ！そうだ！」 〜次の日〜 ぼく「すみません、この間リファクタリングをしている時に思ったんですがコミットのルールってないんですか？」

はじめに 皆さんは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

はじめに この記事は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つを中心に説明していきます！ Write less code (より少ないコードを書く) No Virtual DOM (仮想DOMはいらない

はじめに 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