注目のストーリー
すべてのストーリー
【React】useSyncExternalStoreでlocalStorageの値をuseStateライクに扱う
React18で追加されたuseSyncExternalStoreというhookを使って、localStorageのデータ取得、更新を行ってみたいと思います。useSyncExternalStoreの概要ゴールの確認useLocalStorageを作っていく型と雛形作成第一引数（subscribe）第二、第三引数（スナップショットを返す関数）setterを作る完成おわりにuseSyncExternalStoreの概要イメージ的には、外部ストアの値を取得しつつ、変更を加えればそれを検知してReactが再レンダリングしてくれるといった機能です。例えば、useSyncExternalStore...
VScodeの拡張機能REST ClientでHTTPリクエストを簡単に送信
ロジカルスタジオでは、8、9月に学生さん向けにお仕事体験を開催しました。多くの学生さんにご参加いただきました。ご参加いただいた方はありがとうございました！さて、お仕事体験の際に使用したVisual Studio Code(以下VScode)の拡張機能である『REST Client』が、便利でしたので、本稿ではRESC Clientを使ってみたという内容になっています！REST ClientとはVScode内で直接、HTTPリクエストの送信やそのレスポンスを確認することができるものです。作成したAPIがしっかりと機能するかのテストを簡単に行うことができます。どのように使用するのかを説明して...
Three.jsで簡単な動き地球を作ってみた
さて、今回はThree.jsを使って動くページを作成してみたいと思います。基本的なテンプレートを設定地球のメッシュを作成SphereGeometryを作成し、カメラの位置とレンダリングを設定地球のマテリアルを作成画面が見えるように光も追加地球のテクスチャを作成雲層を追加大気圏を追加星空の背景を追加おわりに基本的なテンプレートを設定// HTML-Three.js ライブラリの読み込みsrc="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"// CSS-画面全体のレイアウト設定body { margin...
【kintone/krewData】krewDataの出力アプリ設定で「値の重複を禁止するが有効になっている必要があります」とエラーが出る場合の解決法
今回は、最近案件で使用していたkrewData（kintoneプラグイン）についてお話をしたいと思います。目次 [非表示]krewDataとは発生した現象どうしようもないので公式に問い合わせ仕方がないので妥協案を考える最後にkrewDataとは今kintoneプラグインの一種で、アプリのデータはもちろん、外部ファイルなどからもデータを取得し、集計・計算・出力などを行うことができます。KrewData公式サイトはこちら発生した現象アプリA、B、Cがあります。アプリAにある数値フィールドをアプリBのルックアップフィールドでキーとして参照しており、さらにそのルックアップフィールドをアプリCのル...
【Wireframe】新人ディレクターがワイヤーフレーム作ってみた
フロントエンドエンジニアからディレクターにジョブチェンして数日後のある日、とある案件にアサインされ、ワイヤーフレームを作成することになりました。ということで、実際にワイヤーフレームを作成してみて気づいたことや注意した方が良かった点についてお話していこうと思います！▶ワイヤーフレーム（WF）とは？Webページのレイアウトやコンテンツの配置を定めたサイトの骨格・情報の設計図のようなものです。一般的にディレクターが要件定義をした後、デザインに着手する前に作成します。▶実際にワイヤーフレームを作成してみた①サイトのコンセプトや目的を整理するこのサイトを作成することでどのような効果を狙っているのか...
SelectBoxのキーボード操作を再現してみた
この前、JSのある実装に少してこずったのでそちらについて紹介したいと思います。multiple属性で複数選択可能にしたselectの選択移動をキーボード操作で行うというものです。「そんなのデフォルトで、方向キーで移動できるよ」と思いますが、デフォルトでは上方向キー(↑)と下方向キー(↓)でしか、選択移動できなかったので今回の実装では、左方向キー(←)と右方向キー(→)でも上記と同じ操作ができるようにしました。まずはざっくり準備※今回の記事はReactでの説明になります。キーボード操作のイベントハンドラを記述するために以下のように準備します。DOMへの参照をrefで行い、onkeyDown...
【Laravel】ダミーデータ作成（factory）でよく使うfaker一覧
Laravelの標準ライブラリであるfactoryとphpのライブラリのfakerを使用すれば、大量の異なる内容のダミーデータを簡単に作成することができます。fakerのメソッドは大量にあるのですが、個人的によく使うものを紹介します！ダミーデータ作成の準備まずはダミーデータを作成するための環境を作ります。記事のダミーデータを作成するという前提で進めていきます。ダミーデータを日本語化するための「config\app.php」ファイルの言語設定を英語から日本語へ変更をします。'faker_locale' => env('APP_FAKER_LOCALE', 'ja_JP'),キャッシュのクリ...
【Python】ほぼコピペで作れる！discord.pyでおやすみBot を作ってみた
もう寝るつもりだったのに、友達とのおしゃべりが楽しくてついつい長話をしてしまう…皆さんそんな経験を１度はしたことがあるのではないでしょうか？（あると信じてます）自制したいけど楽しくてなかなかやめられない…意思もよわよわなのでやめられない…なのでプログラムに頼ることにしました。今回はどれだけ会話が盛り上がっていても、設定した時間になったら強制的に通話を終了させるBotをdiscord.pyで作成しました。--Pythonを書く前に--Botの作成についてはこちらの記事をご参照ください。チャンネルIDを取得まずBotを使用するサーバーのチャンネルIDを取得します。このIDを使用してユーザーを...
【Swiper】サムネイルのマウスホバーとスライダーを連動させてみた
さて今回は、メインのスライダーとサムネイルがあるデザインで、サムネイルをホバーするとメインのスライドが切り替わるようにします。swiperのメソッドを使用してシンプルに実装できるので、是非使ってみてください！基本の連動するスライダーを作成まずは基本となるスライダーを作成します。この状態では、クリックで連動します。thumbsでサムネイルにしたいスライダーのインスタンス名thumbnailSwiperを指定すると、2つのスライダーが連動するようになります。thumbs: { swiper: thumbnailSwiper}メインスライダーのコードをサムネイルにしたいスライダーの前に書くと...
ExpressとPrismaでAPIを作ってみた
はじめにバックエンドでLaravelを使って画面込みでシステムを作ることが多かったのですが、最近はフロントエンドはVue.js、ReactでバックエンドはAPIのみという案件も増えているのでLaravelに拘らなくてもいいかなと思うこともあり、他のフレームワークを探したところ、フロントエンドで使われるNode.jsやTypeScriptに相性の良さそうなExpressとPrismaがあったので使ってみました。ExpressはNode.jsで動作するWebフレームワークで、PrismaはNode.jsで動作するORMです。Prismaを入れるではまず、Prismaをインストールして、データ...
手書き署名プラグイン『jSignature』を使ってみた！
皆さん誰しも携帯ショップの契約などの場面で、タブレットに指やタッチペンでサインを書いた経験が一度はあるのではないのでしょうか。今回はそんな直筆サインをブラウザ上で手軽に実装できるjQueryプラグイン『jSignature』をご紹介したいと思います。jSignatureでできること冒頭で触れたとおり、jSignatureは手書きの署名をブラウザ上で実装する上で非常に便利なプラグインです。私の場合は、記載事項に同意のうえサインしてもらう項目をフォームに実装する際に利用しました。以下のような主要なメソッドが提供されており、簡単なものであればほんの数行で実装できます。reset：サイン領域をク...
【Python】Pylanceを使ってPythonをより安全に！
1. はじめにさて、今回のテーマなのですが、ズバリ Python の型についてです！！Python 標準ではタイプアノテーションという「ここはこの型だよ～」くらいの意味合いしかないメモ書きを残すことができます。各種エディタの拡張機能やライブラリを導入することで、より厳密に型を定義することができます。今回はそんな拡張機能の１つ「Pylance」を使ってみようと思います！2. 例こんな感じでよくある足し算をするだけのプログラムを作ってみました。これを実行してみると・・・まあもちろん結果は期待通りですね！ただこの状態だと関数に対して一体どのような型の変数を渡して、どのような型の戻り値を返すのか...
【Laravel11】RFC違反メールアドレス使用時の例外スローを抑制する
経緯数年前にLaravel5で構築したシステムを、Laravel11にアップデートすることになりました。既存の仕様はそのままにフレームワークと関連ライブラリのみアップデートが必要になったのですが、 仕様の一つに「RFC違反のメールアドレス宛に送信時、エラーが発生しないこと」がありました。「Laravel RFC違反 メール送信」といったキーワードでGoogle検索をすると実装例がいくつかヒットしますが、Laravel9以降はSymfony Mailerが採用されたことで、Laravel11ではそれらは使用できなくなっています。Gmail等、一般的なメールサーバではRFC違反のメールアドレ...
新卒0年目で部長になった話。～Part5～
現在僕は内定者アルバイトとして働かせていただいております。働く前は、簡単な業務や雑用をするのかなと考えていました。しかし、実際の業務は案件に関わることばかりです！案件のコーディングチェックをしたり、React案件をさせていただけるなど・・。さらには、技術系ブログの記事の執筆までさせていただけました。↓僕の初執筆は下記となります【CSS】z-indexが効かない！？そんな時はスタックコンテキストに注目してみよう！日々挑戦できる環境で働かせていただいております！そんなある日、PR部長から突然の呼び出しが・・・。PR部長からの呼び出し。いつものように出社したある朝、突然、PR部長のあいあいさん...
