注目のストーリー
フロントエンドエンジニア
【React】useSyncExternalStoreでlocalStorageの値をuseStateライクに扱う
React18で追加されたuseSyncExternalStoreというhookを使って、localStorageのデータ取得、更新を行ってみたいと思います。useSyncExternalStoreの概要ゴールの確認useLocalStorageを作っていく型と雛形作成第一引数（subscribe）第二、第三引数（スナップショットを返す関数）setterを作る完成おわりにuseSyncExternalStoreの概要イメージ的には、外部ストアの値を取得しつつ、変更を加えればそれを検知してReactが再レンダリングしてくれるといった機能です。例えば、useSyncExternalStore...
【Wireframe】新人ディレクターがワイヤーフレーム作ってみた
フロントエンドエンジニアからディレクターにジョブチェンして数日後のある日、とある案件にアサインされ、ワイヤーフレームを作成することになりました。ということで、実際にワイヤーフレームを作成してみて気づいたことや注意した方が良かった点についてお話していこうと思います！▶ワイヤーフレーム（WF）とは？Webページのレイアウトやコンテンツの配置を定めたサイトの骨格・情報の設計図のようなものです。一般的にディレクターが要件定義をした後、デザインに着手する前に作成します。▶実際にワイヤーフレームを作成してみた①サイトのコンセプトや目的を整理するこのサイトを作成することでどのような効果を狙っているのか...
GSAPでスナップする横スクロールを作ってみた！
こういうのでもスクロールするのが面倒だったり、自分の知りたい情報が画面に収まらない！などちょっとストレスに感じる人もいるかと思います。そこで、少しのスクロールでスナップするようにできる横スクロールを作成します！完成したコードまず基本となる縦スクロールすると横にスクロールされるを作成する必要があるのですが・・・・それを簡単に叶えてくれるのがGSAPです。JavaScriptライブラリで複雑なアニメーションも簡単に実装することができます。そんなGSAPを使用して作ったのがこちらです。GSAPについてライセンスGSAPは２つのライセンスがありStandard(標準ライセンス):無料Busine...
追従の実装はposition:stickyが便利！
そんな皆様お馴染みのpositionとは、要素の位置を決める際に使用するCSSプロパティです。要素を重ねたり固定したり、より自由な配置が可能になりますよね。ありがとうposition🎌そんなハイスペックpositionには、下記のような5つの値を指定できます。私はこれを見て思ったんです。sticky・・・？上の4つは普段から大変お世話になっているのですが、stickyは初めましてだったのです💨調べてみると、何やらすご～く便利だそうで。名前もかわいいし🤗ということで今回は、position:stickyについて私が学んだことを書いていこうと思います！position:stickyとはなんぞ...
clip-pathで多角形を作ろう！
ということで、今回はclip-pathプロパティを用いて、多角形をCSSで簡単に作る方法をご紹介したいと思います！最後には上記のような矢印背景の作り方もご紹介していますので、是非最後までご覧ください！■そもそもclip-pathとは？clip-pathプロパティを使用すると、要素や画像をクリッピングして（切り抜いて）表示させることが出来ます。clip-pathプロパティでクリッピング領域を設定すると、クリッピング領域の内部の部分は表示され、外部の部分は非表示になります。参考：clip-path – CSS: カスケーディングスタイルシート | MDNIllustratorやPhotosh...
リストを縦並びで折り返すのはCSSのgridで解決
・list01 ・list02・list03 ・list04・list05リストを2列で並べるときはflexを使用することが多いと思いますがこのような順序になります。・list01 ・list04・list02 ・list05・list03今回はこのように縦並びにします。【PC】liタグを縦並びに2列で並べる【SP】liタグを縦並びに1列で並べるさらに、PCとSPでの表示はこうしたいのです💪これが結構悩みどころです。。。今回は、これまでよく使っていた方法と、gridを使って縦並びにする方法をご紹介します。方法1 flex.list { display: flex; flex-wr...
【ScrollTrigger】リサイズ時などにプロパティ内で動的に関数を再計算させる方法
はじめに今回はScrollTriggerの実装をする際、リサイズ処理などのイベントでプロパティに別の値を指定したいのにもかかわらず、 プロパティ内で関数が動的に動かず、値が初期値のままという状態になったので、その実例と、失敗の備忘録も兼ねて、解説していきたいと思います。失敗例では、まず失敗例がこちらです。リサイズをしてブレイクポイントが変更されると、ヘッダーの高さが変更されたことにより、「スクロールを固定したstartの初期値 - レスポンシブによるヘッダーの高さの変更分」の余白が空いてしまい、背景の黒色の余白が見えてしまいます。▷DEMO※リサイズできる環境推奨です。▷ソースコード//...
こんなにあるの？？CSSの疑似クラス・疑似要素について調べてみた
(弊社ロジカルスタジオの麻雀事情は下記記事をご参照ください)あすにゃんのLS社員と○○やってみた！～麻雀編～私の役満のお話はさておき、ここで私のコーディング経験について。私、コーディングを小学生の頃からやっております。当時、そのとき全盛であった個人サイト文化に触れて「ウェブサイト、誰でも気軽に情報を発信できるし、いいなぁ」と感じていました。当時は親が買い与えてくれたコーディングの本を参考に、ウェブサイト制作を行っておりました。そして月日は流れ、2019年、ロジカルスタジオに入社してコーディングを学んでいたところ当時は知らなかったことがいくつかありました。その一つは疑似クラスの一つである&...
【blender】Pythonで現視点をカメラにするボタン追加してみた
Unsplashから画像を選択前回と引き続きblender記事を書こうと思います。 Blenderを初めてから約6年くらい経ちますが、 毎日コツコツ触っていたわけでなく、短期間の一点集中で制作していたので 時期が開いたりして忘れちゃうんですよね・・・・ショートカットキーを。 毎度メモを見るか調べてやってましたが、そろそろどうにかしたい 特に「視点をカメラにする」ショートカットキー(CTRL + ALT + テンキー0) 何回も使うので、ボタン押しただけで切り替えるようにしたい！！！！ と編集画面をカスタマイズできないかと調べたところ なんとBlenderにはPythonが使えるという！6...
一体何事？？iOSで「問題が繰り返し起きました」と表示される問題の解消法（開発者用）
皆様この超寒い季節、いかがお過ごしでしょうか。私は寒いときは度数が高めのお酒をコンビニで買って飲んで、なんとか寒さをごまかしております。さて本日は、この超寒い季節に似つかわしくない、私がコーディング中に出会った背筋が冷たくなる現象についてのお話。ある日私は、前任者から引き継いだコーディング案件を進めておりました。そして、テスト環境にアップして、iPhoneでブラウザチェックをしたところ、ブラウザにこんな表示が出てページが見れなくなりました…（サイトURL）で問題が発生しました！！！！！？？？？？こんな表示見たことない…というわけで、本記事ではこのような現象を解決できるかもしれない対処法を...
Reactってどうなの？Vue.js・Angular経験者が触ってみた～困りごととその解決法をまるっと紹介～
まだまだ暑いこの季節、新卒の方はいよいよ新しい会社に慣れてきたかな？という時期ではないでしょうか。弊社ロジカルスタジオにも新卒の子が７人も入ってきてくれています。しかし、入社式の自己紹介で知れるものといえば、名前、趣味、地元くらい…そんなとき、お酒を共にすれば、あんなことやこんなことも知れて、仲良くなりやすいもの。さて、今年の頭ぐらいに、私には新卒の子以外にも「名前くらいしか知らないが、仲良くなりたい」という方がいました。そして、ディレクターに根回しをしつつ、仲良くなる機会を伺っておりました。そんなある日のこと…そう、私が仲良くなりたい方の名前はReactといい、Vue.js、Angul...
BlenderとThree.jsを使って3Dモデルで遊んでみた〜モデリング編〜
そんなネオンを光らせて何をしてるねんということで、本日は3Dモデリングをテーマに解説していきます！5Gが普及しつつある昨今、3DCGを用いたWebサイトを見かけることが増えてきました。これからますます身近になるであろう3DCG、一体どのように制作されているのか気になりませんか？そこで今回Blenderという3DCGソフトを使って、弊社ロジカルスタジオのロゴのモデリングを解説していこうと思います！Blenderを使ってみたい方や、3DCGを使ったWebサイト制作に挑戦してみたいという方の参考になれば嬉しいです！そしてゆくゆくは、three.jsで3Dモデルや3Dアニメーションを実装し、we...
CSSでも大活躍！？data属性で、あなたのコーディングに+αを！
気づけば季節は春、だいぶ暖かくなってきたとはいえまだ肌を出すには早いそんなこの時期、皆様いかがお過ごしでしょうか。私T.Kは早く夏服を着たくてウズウズしながらメロディックパワーメタルを聴いて体を夏にする、そんな日々を送っております。さて、今回のテーマはdata属性の使い方。あなたのコーディングがもっと楽になる、data属性の便利な使い方を大公開！data属性とは？data属性とは、HTML5から追加された属性の一つ。下記のようにdata-hoge (hogeは任意に設定可能です)と記述するだけで、data属性を設定できます。<div data-color="red">どう使うの？それでは...
波紋エフェクトを簡単に付けられるjQueryプラグインの『Ripples』
利用するのはjQueryプラグインの『Ripples』です。読み込みからはじめようまずは「jQuery」を読み込みます。そして、Githubから「jquery.ripples-min.js」をダウンロードしてきて読み込みます。「jquery.ripples-min.js」は下記のGithubのURLからダウンロードができます↓https://github.com/sirxemic/jquery.ripples/<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><s...
