こんにちは当ブログは2年前にGatsby.js + Contentfulで作成しましたが、Contentfulの使い勝手が悪いのとNext14で何か作りたいという思いがあったのでこの度Next14 + MicroCMSで作り直しました。Next.jsは当ブログをGatsby.jsで作成した少し後にバージョン13がリリースされ、App Routerが導入されるなど大きな変更がありましたね。とても気になっていたのですがなかなか触る機会がなく、情報を眺めるぐらいしかできていなかったのですが今年から参画させていただいている案件の中でNext14を使用しており、また書籍も発売されたのでかなり理解が深まっていました。Next.jsの新しい機能であるApp Routerやキャッシュ機能を用いて実装し、以前のGatsbyより綺麗にブログが作れたと思います。今回のソースコードはこちらに公開しています。ではまた

こんにちは。今回は横浜市磯子区に開業された占いサロンSarey様のWebサイトを作成させていただきました。開業間もないとのことでしたのでシンプルで控えめなデザインで、実装に関してはGatsby.jsを用いてReactベースでコーディングを行い、効率的に開発することができました。私個人としては企業様の案件に参画させていただく働き方がメインで、Web制作については紹介でのみ承らせていただいています。これまで個人としての仕事について記事に書けることがあまりなかったので、今回は紹介させていただきました。

久しぶりの投稿となってしまいましたが、早いものでもう１２月となりました。今年一年は大きな動きはありませんでしたが、仕事面ではクラウドやセキュリティなど今まで苦手意識の強かったところも任せていただき、個人的な学習も含め、技術的な視野が広がった一年だったと思います。これからもコーディングだけではなく、クラウド、ネットワーク、セキュリティなどWeb開発における総合的な知識、技術を深めていき、よりクライアント様に貢献できるエンジニアなっていければと思います。今後ともよろしくお願いいたします。

こんにちは正規表現、メールアドレスやURLのvalidateなどではインターネット上に落ちているものをそのまま使ってしまったり、なかなかしっかりと理解して使えている人は意外と少ないのではないでしょうか今回は正規表現を用いて、CSSのtransformから特定のプロパティのみ取り出すソースコードを紹介します。CSSのtransformでは要素の移動、変形を指定することができます。transformで指定することができるプロパティはtranslate(移動)、rotate(回転)、scale(拡大・縮小)、skew（歪み）の４つが用意されており、実際には、transform: translate(10px,10px) rotate(10deg);のように、transform内に複数のプロパティを同時に指定する書き方になります。この際に、translateプロパティのみ取得する関数が以下になります。export const getTranslate = (transform: string) => { const translate = transform.match(/translate\(.+?\)/); return translate ? String(translate[0]).match(/-?\d+(\.\d+)?/g) : [0, 0]; };まず、 const translate = transform.match(/translate\(.+?\)/);で、transofrmからtranslateのみ取り出します。「()」は正規表現では予約語になるので、バックスラッシュを用いてエスケープします。「.」は任意の文字、「+」は1文字以上の繰り返しを表し、「?」を末尾につけることで最短マッチになります。最短マッチを用いない場合、最後方の「）」とマッチしてしまうため、translateのみでなく、他のプロパティまで取得してしまうことになります。この結果、以下が取得できます。translate(10px,10px)さらにここから数値のみ取り出すため、String(translate[0]).match(/-?(\d)+(\.\d+)?/g)とします。translateにはマイナスの値も含まれる場合があるため、「-?」と指定します。「?」は0文字以上の繰り返しの指定となるため、マイナスの指定がある場合もない場合も取得可能になりました。「\d」は数字を表すメタ文字となり、「+」をつけることで任意の桁数の取得、さらに小数点の場合も考慮し、「(\\.\d+)?」と指定しています。また、末尾の「g」は正規表現のオプションで、パターンにマッチした全てを取得します。この結果、以下が取得できました。[10,10]これでtransformからtranslateの値のみ取得することができましたね。今回の正規表現で用いた「translate」をrotateなどに書き換えることで、他のプロパティ値も取得可能になりますね。一見難しそうに見える正規表現も、あらためて勉強し直すことで苦手意識がかなり薄まりました。今後も活用していければと思います。

こんにちは12月になり、2022年ももうすぐ終わりですね。今年はフリーランスとして仕事を始めた最初の年でした。1年目で年間を通して間なくお仕事をさせていただいたのは本当にありがたいことでした。関わって下さった全ての方々に感謝いたします。これまでReactNativeの経験はありましたが、WebのReactの開発を始めたのは今年からでした。ReactNativeでReactの開発体験の良さはおおよそわかっており、またフロントエンド開発でユーザーの目に触れる部分を作りたい思いがあったため、フリーランスとしてはReactを用いたフロントエンド開発をやりたい思いで仕事を始めていましたが、１年経ち、それは間違っていなかったと思っています。React,Next.jsを用いた開発はかなりスムーズにやれるようになり自信もついてきたため、来年はバックエンド、デザインなどできることを広げていきたいです。また今年は在宅でほとんどの時間を家で過ごしてしまったので、来年はもう少し家の外に出る機会を増やしたいですね来年は30代としての1年ともなります。20代で経てきた経験を活かして、30代はより挑戦していければと思います。