コラボスタイル Developersのフィードのフィード

コラボスタイル Developersのフィード

私達は『ワークスタイルの未来を切り拓く』という理念のもとワークフローの本質を追求し、新しいワークスタイルを提案するとともに、コラボスタイルが率先して時代に適したワークスタイルを常にバージョンアップし発信していきます。

フィード

コラボスタイル Developersのフィード

はじめにBunは非常に動作が早いNode.js互換のJavaScriptランタイムになります。今回はBunを使いつつ、フロントエンド開発では絶対に欠かせない、コンポーネントカタログ生成ツールのStorybookを導入します。この記事では、Bun + Vite + Reactの環境にStorybookを導入する方法を書きます。bunx run storybook --initでは環境がセットアップが出来なかったので、手動で用意する方法を紹介します。プロジェクトを生成以下のコマンドで新しいプロジェクトを生成します。bun create vite my-appframew...

15時間前

Amazon Bedrock Claude3 Haiku モデルを AWS SDK for Rust を使ってプロンプトを動かす

コラボスタイル Developersのフィード

はじめに巷で話題の Amazon Bedrock。3月には、Claude3 の Haiku モデルが登場し、4月にも Opus モデルが登場しています。さらに、これらのモデルは GPT 系のモデルよりも優れているとされていて、私も興味関心があります。今回は、Claude3 の Haiku モデルを AWS SDK for Rust を使って簡単に叩いてみようと思います。https://aws.amazon.com/jp/blogs/news/anthropics-claude-3-haiku-model-is-now-available-in-amazon-bedrock/...

6日前

Animate.cssで簡単CSSアニメーション（エフェクト全部載せ）

コラボスタイル Developersのフィード

はじめに今回は、CSSアニメーションのライブラリ「Animate.css」をご紹介します。フェードイン、フェードアウト、スライド、点滅など様々なアニメーション効果を、シンプルなCSSクラスを指定するだけで簡単に適用できるライブラリです。https://animate.style/ Animate.cssの基本的な使い方インストールCDNを使う場合は、以下のようにURLを指定します。<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/lib...

11日前

Rust の文字数カウントでちょっと詰まった話 - len()、chars().count -

コラボスタイル Developersのフィード

はじめにRust の文字数カウント処理で若干詰まってしまったところを紹介します。この記事を読んでいただければ、文字数チェックは容易にできることでしょう。私自身のメモ的なところが多くなりそうですが、ぜひ、読んでいただけると嬉しいです。 len() はバイト数でのカウント半角英字&strの文字列チェックにて私は以下のように実装していました。fn main() { let sample = "aaaaaa"; // 文字数の長さを取得 let len = sample.len(); println!("文字数: {}", len...

17日前

Rust 基本文法 - 型引数 -

コラボスタイル Developersのフィード

はじめに前回の Rust 基本文法記事の続編（？）になります。https://zenn.dev/collabostyle/articles/b8bd5bc56fd1f6Rust を使っていると、ジェネリクスは当然のことながら、型引数もテクニックのうちの一つとして覚えておきたいところです。必ずどこかで利用する場面が来ると思います。Rust という言語において型を自在に操ることができれば怖いもの無し！今回も Rust Playground にて一緒に手を動かしてみてください。https://play.rust-lang.org/ 関数の型引数型引数とは、ジェネリック型...

20日前

Rust 基本文法 - ジェネリクス -

コラボスタイル Developersのフィード

はじめに恒例化している Rust 基本文法もボリュームアップしてきました。本記事では、Rust のジェネリクス、ジェネリック型について説明していきます。TypeScript 等の言語でも利用するケースがありますので、Rust に限らず押さえておきたい文法です。Rust Playground でも試すことができますので、もし宜しければぜひ。https://play.rust-lang.org/ ジェネリクスプリミティブ型のジェネリクスジェネリクスを使うと、クラスや関数の引数や、返り値に任意の型を指定することができます。これらの任意の型をジェネリック型と呼んでいま...

20日前

Rust で HashSet を使って値の重複をチェックする

コラボスタイル Developersのフィード

はじめにRust を使っていて、連想配列、配列の値の重複を検知させたい！と思ったのがきっかけです。Rust に限らずですが、連想配列や配列の重複チェックは実装する必要も出てくるかもしれませんので、同じような境遇の方の救いになればと思います。https://doc.rust-lang.org/std/collections/struct.HashSet.html HashSet で重複を検知する値のみの配列の場合とある配列の要素1つ1つに対して重複チェックをします。use std::collections::HashSet;fn main() { le...

23日前

Rust | Ntex と SQLx で REST API を開発する

コラボスタイル Developersのフィード

Ntex とはRust の Web フレームワークである Ntex については以下の記事で説明しているので、割愛します！！https://zenn.dev/collabostyle/articles/eeabc851943af2 Stateアプリケーション内でリソースを共有するために State を使用します。アプリケーションの初期化時に web::types::State<T> を渡し、アプリケーションを起動します。そうすることで、ハンドラー関数からその State にアクセスすることができます。以下のコードでは、AppState の app_name ...

24日前

Yew で始める Rust のフロントエンド開発

コラボスタイル Developersのフィード

はじめにRust でフロントエンド開発を可能にするフレームワークの Yew を使ってみます。最初は Rust でフロントエンド？！と思いましたが、割と前からある有名なフレームワークみたいです。今回はチュートリアルにフォーカスしていますが、ゆくゆくは React 等のフレームワークとパフォーマンスにどのような違いがあるかなど、調べてみたいと思います。▼ Yew ドキュメントhttps://yew.rs/ja/ 下準備＆ Hello, world!チュートリアルのページに沿って、順番にやっていきます。まずは Trunkをインストールする必要があるようなので、以下コマ...

25日前

Confluenceでグラフを作成する

コラボスタイル Developersのフィード

はじめにコンフル（Confluence）でグラフを作成する方法を記述します。2パターンご紹介します。表からグラフ挿入一番シンプルでわかりやすい方法です。まずは通常通り / で表を選択します。表を作成後、表の下に表示されているグラフアイコンを選択します。デフォルトで棒グラフが表示されます。グラフを編集するため、「グラフのオプション」を選択します。グラフの種類を「折れ線」に変更します。「カスタマイズ」で色や軸のタイトルを変更できます。とても簡単にグラフを作成することができました。ただし、この方法だと痒いところに手が届きません。もう一つの方法を試して...

1ヶ月前

Rust | Micro-framework "Ntex" で Web アプリを実装する

コラボスタイル Developersのフィード

Ntex とはhttps://ntex.rs/Ntex is a powerful, pragmatic, and extremely fast framework for composable networking services for RustNtexは、Rust向けのコンポーザブル・ネットワーキング・サービスのための、強力で実用的、そして非常に高速なフレームワークです。公式ページでは、以下の 4 つの特徴が挙げられています。Type Safe: 型安全であることFeature Rich: 豊富な機能を提供していることExtensible: 拡張可能...

1ヶ月前

【国家資格】ITパスポートと基本情報技術者の違い

コラボスタイル Developersのフィード

春ですね。前回こんな記事を書きました。https://zenn.dev/collabostyle/articles/92301d82360717「ITパスポート」と「基本情報技術者」どちらも国家資格なのですが、なんとなくITパスポートはIT初学者向けで、基本情報はエンジニアの登竜門的なイメージが強いです。具体的にどのような違いがあるのか、まとめてみます。 ITパスポートhttps://www3.jitec.ipa.go.jp/JitesCbt/index.htmlｉパスは、ITを利活用するすべての社会人・これから社会人となる学生が備えておくべき、ITに関する基礎的な...

1ヶ月前

資格がなくてもエンジニアはできるのか

コラボスタイル Developersのフィード

ITパスポート、基本情報、応用情報…「エンジニアが取得する資格」と聞いてわたしがパッと思い浮かぶのは↑だ。エンジニアのみなは、「資格」を取得しているだろうか。わたしはITに携わって5年ほど経つが、持っていない。今回はわたしが「ITパスポート」を取得しようと思ったキッカケを話す。能動的か、受動的か社内の開発部にもこういった国家資格を持っている人と、持ってない人がいる。つまり資格を持っていなくても、エンジニアとして仕事をすることができる。しかし最近思うのが、「なぜ資格を持たずとも技術者として働けるのか」というところだ。そこで答えの中の1つに最近気づいたのだが、...

1ヶ月前

PlaywrightとCSVでデータ駆動テストを作成する

コラボスタイル Developersのフィード

はじめに今回はE2Eテストツール「Playwright」とCSVファイルを使い、データ駆動テスト(Data Driven Testing)を作成してみます！データ駆動型のテストは、正常なデータ、異常なデータ、境界値のデータなど、1つのシナリオで入力値をいろいろ変えてテストしたい場合に役立ちます。作成するテストの対象はデモ用のToDo管理アプリで、以前作成したテストをもとに、データ駆動に変えたいと思います。https://zenn.dev/collabostyle/articles/482bb93bf3bd89 修正前のテストコード以下が、以前Playwrightの...

1ヶ月前

serde_json の to_value と from_value をうまく活用する

コラボスタイル Developersのフィード

はじめにRust を扱っている中で、serde の Value を扱うケースが多くあり、登場頻度のそこそこ高い、to_valueと from_valueについてアウトプットします。 serde_json::Value についてドキュメントにもある通り、Value の正体は enum で表現された列挙型です。https://docs.rs/serde_json/latest/serde_json/value/enum.Value.html▼ enum 型についてhttps://doc.rust-jp.rs/rust-by-example-ja/custom_types/...

1ヶ月前

マイグレーションファイルの命名を考えてみる。- Rust × SQLx CLI -

コラボスタイル Developersのフィード

はじめにマイグレーションファイルの命名、皆さんはどうしていますか？言語や、ライブラリごとに命名ルールが敷かれていることもあると思うので、特に気にしたことがない人もいらっしゃるかもしれません。私が Rust を使い、さらに SQLx というライブラリを使っている中で命名をいくつか考えてみました。参考になれば幸いです。 SQLx CLI を使ってマイグレーションファイルを作成する事前に SQLx のクレートを追加しておく必要があります。▼SQLxhttps://crates.io/crates/sqlx▼SQLx CLIhttps://crates.io/crat...

1ヶ月前

supabase使い始めて一番最初に詰まった話

コラボスタイル Developersのフィード

最近supabaseを個人で触っています。以前、とりあえず触ってみようと流し読みしながら触っていると、いきなり詰まったのでどなたかの参考になればと思いアウトプットします。なお、supabaseの構築は割愛します。コチラ（Use Supabase with Next.js）をご参照ください。詰まったところsupabaseでサンプルのDBを作成し、以下のようなコードでDBからフェッチしてみました。export const fetchAllData = async () => { const supabase = createClient() try {...

1ヶ月前

Tailwind CSSでのimportantの適用方法

コラボスタイル Developersのフィード

Tailwind CSSでスタイルを強制（優先度を高める）したい時、どうするかについてメモをアウトプットしたいと思います。 Tailwind CSSでimportantで優先させる方法Tailwindはデフォルトではimportant属性はついていません。その為、他のUIライブラリやCSSを組み合わせたときに、意図通りに反映されない事が起きます。（環境依存の影響で意図通りに反映されないケースもある）実際に簡単な参考例をアウトプットします。方法についてですが、以下のようなボタンがあるとします。<Button className="mx-[8px] border-...

1ヶ月前

【ISMS】セキュリティ事故が起こったときの心理的なアレコレ

コラボスタイル Developersのフィード

先日こんな感じの記事を出しました。https://zenn.dev/collabostyle/articles/c24c13c4eca57bこれがなんと続きます。どういうことかと言うと、でも、最低限「なにかあったらSlackチャンネルで報告」というのを記憶していただければ、なにかあったときに情報が1つのチャンネルに集約するため、対応する側の負担も減ります。この内容がですね、報告者にとってのメンタルが問われる問題だったのです😣 セキュリティ事故が発生するのは、超レアケースなので、専用のチャンネルを設けて「事故が発生しました！」という報告をするのは、不特定多数のメンバ...

1ヶ月前

【ISMS】セキュリティ事故が起こったときの動線

コラボスタイル Developersのフィード

実はわたしはこう見えても結構めんどうくさがりなので、朝の身支度なんかは流れ作業でやりたいモンなのです。朝起きて、服持ってとりあえず湯を沸かし、洗面所へ行き、ハミガキして顔洗って着替えて、沸いた湯でコーヒーを作る・・これが最近のわたしなのですが、我ながら綺麗に動けてるなぁと思いませんか😎これは家の間取りがわたしにマッチしており、寝室→キッチン→風呂が一直線で行けることがひとつの理由だと思ってます。このように、動線が綺麗だとスムーズに事が運びますよね。これはセキュリティ事故が起こったときにも同じことが言えるのです。（むりやり繋げてないﾖ。）事故が発生した！なんて想定は...

1ヶ月前