はてなブックマーク

Storybook 8がリリースされたので、簡単にまとめ。 📸 ビルトインのビジュアルテスト ⚛️ React Server Componentのサポート 🎛️ ReactのパフォーマンスアップとVue control autogenerationの改善 ⚡️ Vite5やVitestのサポート 🧪 2-4倍高速なテストビルド 📲 モバイル・デスクトップUIの刷新 🙅‍♀️ 非ReactプロジェクトでのReactへの依存性を削除 特に気になったもの ビルトインのビジュアルテスト アドオンで、ChromaticをStorybookに組み込み ワンクリックですべてのストーリーを同時テストし、変更点を特定可能 CIのワークフローを、Storybookの中で直接実行可能に React Server Componentのサポート React Server Componentを実験的にサポー

terraform を使って Cloud Run を管理するまでのメモ。 前提 terraform がインストールされている gcloud cli がインストールされてる GCPのプロジェクトを作成し、gcloud projects list を叩いたときに作成したプロジェクトが表示されている ① GCPの設定 基本的にコンソール画面を叩くのではなく、gcloud コマンドを使って操作していきます。 gcloud コマンドでプロジェクトをアクティブにする まず初めにterraformで扱うプロジェクトをアクティブにしておきましょう。

インフラもterraformも全くわからん人に向けて簡単にまとめてみました。 ここではクラウドインフラ（特にGCP）を例に説明します。 TL;DR AWSやGCPのようなクラウドインフラはコンソール画面からボタンをポチポチして扱うサービスを管理したり設定値を変更することができます しかしそれだと下記のような問題点があります 「いつ、誰が、どのような設定を変更したのか」が把握できない 新しい環境（ステージング環境など）を作成する際に、コンソール画面から手動で同じ手順を踏まないといけない ドキュメントが更新されていないと既存のインフラの環境を把握が困難 terraform を使えばインフラの設定をコードで管理することができます。それにより下記のようなメリットがあります。 コードで管理できるので変更の履歴を確認できる １つ環境を作ってしまえば他の環境にも設定を使いまわせる（手動でポチポチしなくて

Go × PostgreSQL × SQLBoiler (ORM) × golang-migrate (マイグレーション) の開発環境を構築するGoPostgreSQLDockerSQLBoilergolang-migration 毎回環境を作るときに何かしらド忘れしてしまい手こずってしまうので忘れないようにメモ。 はじめに 下記の知識や経験があることを前提にしてます Go言語の基礎を理解している Dockerと docker-compose の基礎を理解している バックエンド開発やデータベースの基礎を理解している ORMの使い方や各種コマンドの詳しい説明はしません パスなどはご自身のプロジェクトの構成に合わせて適宜変更してください 作ったもののサンプルです。 開発環境 Go1.20 PostgreSQL 15 Docker docker-compose 使用するツール SQLBoler　

はじめに 先々月あたりの出来事なので少しうろ覚えですが、ブラウザ上でテキストファイルをアップロードしワードクラウドとワードツリーを作成するPythonアプリケーションの作成をしていた時に見たことがないエラーメッセージが出てきました。この記事はそれをどのように修復したかを今の忘れないうちにメモし、もし同じエラーに遭遇した人がいたらヒントになってくれたらと思い記録しました。 環境 macOS Ventura 13.0 (Apple M1) Visual Studio Code 1.77.0 Python 3.9.13 問題のエラー とにかく、このPythonアプリケーションではFlaskを使用してウェブ上でテキストファイルをアプロードし、その後にまずワードクラウドのイメージを生成するのだが、こんなエラーメッセージが出てくる(ディレクトリーの一部を/....../にしてます) Traceback

概要 InnoDB では、追加・更新・削除操作を繰り返していると、断片化（フラグメンテーション）という現象が発生します。 これはいわば、ゴミみたいなもので、テーブルのデータを削除してもディスク容量が減りません。 このゴミが増えてくると、クエリ処理が遅くなる可能性があリます。 例えばレコードが100万件あるテーブルの内、99万9999件を削除し1件の状態にしても、テーブルが占有している領域は100万件分使っているということになります。 今回は実際にテストデータを作成し、フラグメンテーションの発生とその解消法について確認していきたいと思います。 フラグメンテーションの詳細については本記事では述べないので、気になる方は下記記事が分かりやすかったのでご参照ください。 前提 MySQL 5.7.31 InnoDB テストデータの挿入 まずテスト用のDBとテーブルを作り、約100万件テストデータを挿入

【29歳/未経験/独学】転職活動用SPAポートフォリオをご紹介します！【Nuxt.js, Rails, Docker, CircleCI, AWS ECS(Fargate), Terraform】RailsAWSDockerTerraformNuxt はじめに こんにちは！ Qiita記事初投稿となります。 掲題の通り、実務未経験からWeb系エンジニアへ転職するためにポートフォリオを制作しました！ まだまだ初心者レベルですが、自身の振り返りも兼ねて、簡単にご紹介できればと思います。 もし同じような境遇の方にとって何か参考になる点があれば、とても嬉しく思います！ 経歴 簡単な自己紹介です！ 29歳 大卒(文系) 営業2年→SE5年→現在 IT業界出身ではありますが、プログラミングによる開発業務はほぼ有りませんでした。 システムやプログラムに対する耐性が多少ある程度で、Web開発のスキルにおい

はじめに こんにちは、タケと申します。 SQLの練習ができる学習サービス「SQLab」を作りました。 ※ PC専用です。 ※ 推奨ブラウザはGoogle Chromeです。 なぜ作ったの？ SQLを学び始めた当初は 「SQLってなんか難しそう」 というイメージでしたが、 練習問題を解いていく中で次第に自力でクエリを組み立てることが 「クイズみたいで楽しい」 と思うようになりました。 そこでもっと多くの練習問題を解いてみたい、もう少し難易度の高い練習問題を解きたいと思ったのですが、 ・無料でバリエーション豊かな多くの練習問題に取り組める ・環境構築不要でブラウザ上ですぐに実践できる ・シンプルで使いやすいUI ・ER図やデータベース値を参考にしながら自力でクエリを組み立てる必要がある の条件を揃えた学習サービスがなかったので作ることにしました。 どんな練習問題があるの？ 現在は5つの問題集が

★記事更新しました (2022/09/24 23:00更新) 比較ソースがGoとC#とで差異があったため、再測定を行い、記事更新しました。 修正前ソースは、for文のループ変数の型がintになっており、内部的にはGoはint641、C#はint32で差異がありました。 記事本文は、以下3つのソースの測定結果を並記しております。（③が更新前の記載内容） →変数の型が、①int64　②int32　③int (Goはint64、C#はint32) 以下、本文です。 GoとC#の速度比較を行いました。 普段C#を扱っているのですが、Goを使う機会があり、Goは早いと噂なので実際に測ってみたのが動機です。 計測内容 2~Nの整数が素数かどうか、愚直にループと判定を行う処理をGoとC#で実行しました。 変数の型が以下3パターンのソースで実施。 int64　→ソース：Github(Int64ブランチ)

はじめに 受託開発企業でフロントエンドエンジニアを1年ほどやっているものです。直近2ヶ月間 gRPC を使用する案件にアサインされたのですが、「フロントエンドエンジニア視点からみた gRPC 」 に関する記事が少なく、キャッチアップするのにかなり苦労しました。この記事では「フロントエンドエンジニア」 が gRPC について最低限知っておかないといけない概念や技術などをざっくり解説したいと思います。 この記事の対象者 フロントエンドエンジニアで gRPC 案件に突然アサインされた人 フロントエンドエンジニアで gRPC について知りたい人 フロント側から見た gRPC について知りたい人 この記事で触れないこと メリット / デメリットとか マイクロサービスがどうこうとか REST との比較とか その他の深い内容 おさらい この記事に辿り着く前に色々調べて既にご存知の方もいらっしゃるかと思い

前提情報・背景・注意事項 自分の頭の整理のためにマイナンバーカードの中身を調べたメモです これを参考にして試してみる場合にはうっかり自分の個人情報を公開しないようにご注意ください。 国から認可された団体以外、他人の公的個人認証の証明書を収集・記録することは制限されています 電子署名と暗号化の仕組みはここでは書きません。 私はMacBook pro masOS BigSur(バージョン11.3）、チップApple M1で試しています PCにICカードリーダーを接続し、マイナンバーカードが読み取り可能な状態となっている必要があります マイナンバーカード 公的個人認証とは 公的個人認証サービスとは、行政や民間のオンライン申請や届出、ログイン認証の際に、他人による「なりすまし」やデータの改ざんを防ぐために用いられる本人確認の手段です。 マイナンバーカードなどの中のICチップの中に電子証明書が記録さ

はじめに LaravelでCRUDを作っていきます。 やらないこと 認証関係は扱いません。 削除の前の確認などJavaScriptで実現される機能は今回は作りません。 つくるもの アクション 画面の有無 内容

Abstract VSCodeの利便性を支える要素の一つは間違えなくターミナルではないかと思います。 本記事では最新のターミナルの設定方法を紹介し、その設定の詳細に触れていこうと思います。 Version VScode: 1.64.2 April 2021 (version 1.56)の更新以降についての話です。 またWindowsで基本的に記述しています。適宜読み替えてください。 従来の設定方法 ## 従来の設定方法 Version 1.56以前の話です。読み飛ばしても大丈夫です。 VSCodeのアップデート(since 1.56)に伴い、これまでのターミナルの一部設定項目がdeprecatedとなりました。 → 1.80.0で削除されました！ これまでshellの指定及びその起動オプションは以下のような設定でした。 { "terminal.integrated.shell.window

はじめに プログラミングをやっていると、設計する時や説明する時などに図解でプログラムの流れなどを説明したりすると思います。 よくあるやつだとdraw.ioやパワポなどを使ってシーケンス図等を使って記述してると思います。 しかしエンジニアたる物できるだけ全てをコードで管理したい！そんな需要に対して最適なのがPlantUMLです！ PlantUMLはオープンソースのUMLダイアグラム作成用のテキストベースの言語である。PlantUMLの言語はドメイン固有言語の一例である[4]。ダイアグラムの表示にはGraphvizを使用している。（wikipedia参照） 具体的には以下のような図を作成することができます シーケンス図 ユースケース図 クラス図 アクティビティ図 コンポーネント図 状態遷移図（ステートマシン図） オブジェクト図 配置図 タイミング図 などなど、、、 とてもたくさんあるので全てを

Abstract GASとVue.jsを使って社内アプリケーションを作成しようとしたとき、Vue.js側にTypeScriptを導入している記事はほとんど見なかった。筆者はかつてフルスクラッチでHTML+JS+GASで簡易的なアプリケーションを開発してそれを今でも運用しているが、型の確認が弱いことやそもそもGASはJSファイルとして独立したファイルを許してくれないの(htmlファイルとして書く)で、割と地獄を見た。 そこで本記事では、まずGAS側はclaspを導入してTypeScriptで書き、webpackを導入して複数のフォルダ構造での開発を可能にする。次にVue.js側ではvue-cliでTypeScriptのひな形を作成したのちに、vue.config.jsを編集することでGASに使える単一ファイルにまとめる手順を紹介する。以上を以て、GASもVue.jsも全てをTypeScrip

//フォーマットされているか確認する(フォーマットは実行しない) prettier --check . //ファイルを指定してフォーマット npx prettier --write js/main.js //すべてのファイルを指定してフォーマット npx prettier --write . VS Codeでの実行 1.Prettier - Code formatterプラグインをインストールし、有効化します。 2.setting.jsonに追記します。 ※ファイル保存時に自動整形されるようになります。

オイラー角には罠がたくさん！！ 3次元の姿勢表現によく用いられる『オイラー角』。 他の姿勢表現には『回転行列』、『クォータニオン』などが挙げられる。他にもいろいろあるけど、代表的なのはこの3つ。 その中でもオイラー角は、3つのパラメータで表現できることや、人間に理解しやすい構造をしている、といった利点がある。 ただし、実際に扱うとなると非常に面倒くさい性質を持っている。 この記事は、オイラー角の面倒な性質をまとめて解説する記事である。 解説というよりも愚痴に近いかもしれない。 オイラー角とは 以下、Wikipediaより抜粋。 オイラー角は3つの角度の組で表される。 一方の座標系を$( x, y, z )$で表し、他方を$( X, Y, Z )$で表す。 簡単のために、2つの座標系は原点を共有するものと考える。 オイラー角は座標軸まわりの回転を繰り返すことで表すこともできる。 1. $(

Laravelで実装していた箇所は全面的にRuby on Railsの形で作り直しが必要でした。ただ、フレームワークのアーキテクチャがLaravelとRailsが似ているので、ほぼ文法の置き換えのみでいけました。 ReactはerbからReactを呼び出す部分だけ工夫が要りましたが、Laravel版で実装していたReactのコンポーネントはほぼそのまま使えました。変更が必要だったのは、Reactへの値受け渡し部分のみでした。LaravelではbladeからReactへ値を連携する際json文字列に変換し、Reactでそのjson文字からオブジェクトへとパースしてました。とこらがRuby on RailsではerbでReactに値を連携する際json文字列にせずに渡せて、Reactでもjson文字列をパースせずともオブジェクトとして受け取れている状態となっていました。内部ではRuby on

Code Runnerを使いこなす Abstract VScodeの拡張機能で、コードのお手軽実行といえばCode Runnerではないでしょうか。 本記事ではCode Runnerで様々な言語を即座に実行できる環境を作り、その応用を考えます。 Code Runner とは コードを手軽に実行するための拡張機能です。対応している言語は公式によれば C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal,

綺麗なコミットを心がける TL;DR コードレビューを依頼する立場からgitのコミットログを見やすくするための2つのテクニック (1つ目) コミットをまとめる 1. データが消えないように小まめにコミットする 様々な開発環境によってリアルタイムに保存されているから予期せぬ事態が発生してもデータが飛ぶことがないということもあるかも知れませんが、安全第一に考えて出来る限りコミットする。 作業が終わっていなくても以下のタイミングでコミットする 休憩前 ランチなどの食事前 1日の作業を終えて帰宅する前 コミットのタイトルに[WIP]をつける 作業が終わっていないけどコミットする際にはコミットログのタイトルに[WIP]をつける 2. コミットをまとめる 作業が完了したらgit logコマンドを実行し、コミットを確認する。 [WIP]がついているコミットがある場合コミットをまとめます。 2-1. コミ

Marp(Marpit)を使って、Markdownからスライドを作成します。 Marpit 準備 VS Codeと拡張機能を使用します。 Marp for VS Code .mdファイルを作成し、左のプレビューアイコンを押します ディレクティブ ディレクティブの種類 名前 説明

概要 Laravelで同じ実装をドメイン駆動設計(DDD)とMVCで比較してみました。フロントはReactで実装しています。設計思想はドメイン駆動設計(以下DDD)、アーキテクチャはクリーンアーキテクチャを採用しました。LaravelのWebアプリケーションをDDDやクリーンアーキテクチャで構築すると、MVCで構築するのと比べて実装量やファイル数が増えるのでは？また、処理速度も遅くなるのでは？という懸念を抱いておりました。ただ、それは実際に試してみないとわからないと思い、同じ機能をDDD、MVCで実装し、比較する事にしました。やるなら実践的なプロジェクトが望ましいし、イメージし易いと考えて、題材はECのデモサイトにしました。構築パターンは、DDD、軽量DDD、MVCの3パターンです。DDD、軽量DDDの違いは、DDDはクリーンアーキテクチャに忠実に実装したのに比べて、軽量DDDはPrese

アニメーション制作のJavaScriptのライブラリ「GSAP」を試したので、使い方をまとめました。 ※この記事では、プラグインはコアプラグインまでしか扱いません。 導入 npmでインストールします。

以前からAmazonの欲しいものリストにはあったのですが、なかなか読みたい気持ちにならずリストを整理するときに削除しちゃっていたのですが 2月ぐらいからTwitterでこの本についての言及が増えたし、ちょうどそのころ開発生産性とは何か、について一考していたこともあったので、読んでみました。 LeanとDevOpsの科学 一旦さらっと読んで、面白いなー、やっぱデリバリ大事だなーと思って読了したんですが 先日texta.fmでこの本のことが取り上げられており、あー、そんな読み方があったかーと思って改めてちゃんと読み直してみました。 構成 第一部: 調査結果から見えてきたもの(パフォーマンスを向上させるケイパビリティとは何かの話。特にデリバリを中心に多面的に検討している) 第二部: 調査・分析方法 第三部: 改善努力の実際(いろんな会社の取り組みの事例) 読み方 常に付録Aの図A.1を開いてお

みなさん、ワンライナーで日本語を簡単に処理したい場合、何を使うでしょうか。 ワンライナーで言語処理といえばPerlですよね[要出展]。 Perlでは、「ひらがな」「カタカナ」「漢字」といった文字にマッチする正規表現を簡単に書くことができます。 例えば、青春→鯖鰆みたいなやつという記事では、漢字にマッチさせるのに\p{Han}という正規表現を使っていました。 $ perl -Mutf8 -CSD -le 'print "漢" =~ m{\p{Han}} ? 1 : 0' 1 $ perl -Mutf8 -CSD -le 'print 1 if "あ" =~ m{\p{Han}} ? 1 : 0' 0 なんてこった。 "「"は明らかに漢字じゃないだろう？ 調べてみると、perlunicodeに以下のような記述がありました。 Prior to Perl v5.26, the single for

状況 日々多量に受信する電子メールの多くがHTMLメールである。 しかしながら、自身はplaintextでの送信、返信をなるべく実施したい(ポリシーみたいなもの)。 周囲の標準環境はOutlookだが、自身の肌に合っているMUAはThunderbirdである。 Outlook 2016 / Thunderbird 68.7.0 / Windows 10 解決したい問題 OutlookのHTML形式で送信されたメールにThunderbirdでplaintextで返信しようとすると、元メールの引用部分に1行おきに余計な改行が入ってしまう。 単純に1行おきになるのではなく、もともと空行だった箇所はそのまま1つの空行になる。 元メール(Outlookで書かれたHTML形式)

Amplifyは、高速でアプリを開発できる開発プラットフォームです。 Amplifyで作成したVue.jsアプリでLINEとのログイン連携を試したので、メモしておきます。 Googleとのログイン連携はこちら 作成したもの LINEアカウントの入力部分は動画編集でトリム（削除）しています。 ソースコードの全量はGitHubにあります。 https://github.com/Thirosue/amplify-sns-fedaration 前提 Amplifyの設定が完了していること(amplify configure、amplify initおよびamplify pushが済んでいること) Amplifyで作成したVue.jsアプリが存在すること(aws-amplifyとaws-amplify-vueの導入・設定が済んでいること) Amplifyの状態は以下のとおり（amplify stat

Amplifyでセキュリティヘッダ（Strict-Transport-Security, X-Frame-Options, X-XSS-Protection, X-Content-Type-Options, Content-Security-Policy）を追加するAWSCloudFrontamplifyAmplifyConsole Amplifyでセキュリティ対策（カスタムヘッダを追加）した際のメモです。 CloudFrontよりお手軽に設定できます。 方法 以下2点のいずれかの方法で設定しましょう。 設定ファイル追加（customHttp.yml） Amplify Console 1. 設定ファイル追加（customHttp.yml） レポジトリのルートディレクトリにcustomHttp.ymlファイルを追加し、commit & push します。 Amplify Consoleでのデ