始めに こんにちは😵 まんじです😃🙏 サーチコンソールを見てたら「React 実務レベル」でググってる人がいるのを見つけてしまいました😍 ということで今回はReactでフリーランスをしてるっていうのもあるので、Reactの実務レベルについて書いていきたいと思います。 結論から書くと職場次第でレベルが変わると思いますが、以下の項目らへんを満たすのがReactの実務レベルに落ち着くのではないかと思います。 コンポーネントのライフサイクルを理解できてる カスタムフックが使える 状態管理ツールがなんかしら使える フェッチしたデータをキャッシュするSWRとかreact-queryとかが使える Next.jsなどの知見、SSG、SSR、CSRがある程度分かってるというか、分かってる サーバーサイドのAPI通信からデータベースにアクセスする層のコードがわりと読める CSSフレームワークが1個なん

人生初アドベントカレンダーです。よろしくおねがいします。 概要 Three.jsユーザーの皆さん、「Blender」、使っていますでしょうか？ BlenderはThree.jsと同じくオープンソースで開発されている統合型3DCGツールです。モデリングからコンポジットまで、CG作りはこれ一本で事足ります！ 今年の夏頃v2.8の大型アップデートがリリースされ、glTFのインポート/エクスポートがデフォルトでできるようになったりと、Web業界でも非常に熱いツールになってきたのではないかと思います。 ただ、Blender、統合型ツールということもあり、機能がいっぱいでこれから始める方には少しとっつきにくいところもあると思います。 というわけで今回はThree.jsユーザー目線でBlenderのおおまかな使い方を紹介したいと思います。 最低限の操作ができる、 モデルを配置することができる モデルのイ

まえがき React のアニメーションライブラリである Framer Motion を利用してページ遷移アニメーションを実装した際に、いくつか引っかかった点があったので、備忘録として残しておこうと思います。 バージョン Next.js v12.1.1 Framer Motion v7.6.1 今回実装するもの ↑ こんな感じのふんわりしたフェードイン / フェードアウトを実装します。 手順 1. アンマウント時のアニメーションを有効にする import { AnimatePresence } from 'framer-motion' import type { AppProps } from 'next/app' import 'styles/globals.css' const MyApp = ({ Component, pageProps, router }: AppProps) =>

ブルーピリオド展のような縦スクロールしても横スクロールするサイトが作りたいWEBフロントエンドエンジニアよるReactとGSAPを使った試み リポジトリはこちら 完成したサイトはこちら 環境 yarn create next-app --typescript で生成 Next.js 12.3.1 react 18.2.0 gsap 3.11.3 ざっくり解説 完成品をもとに抜き出して解説していきます GSAPの準備 import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) 使う機能をregisterPluginしておく 今回は『スクロールで発火する処理』を作るので、ScrollTriggerをいれておく Reac

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

こんにちは、グッドパッチでUIデザイン組織のマネージャーをしている蔡（さい）です。 普段はプロジェクトでUIデザインも行いながら、採用や評価制度など、デザイナー視点での組織づくりにも携わっています。2023年から新卒採用に関わっており、説明会や面接を通して、デザイナーを目指す学生の方たちと日々接しています。 私は留学を機に来日し、UIデザインに触れたのはGoodpatchのサマーインターンがきっかけ。その後、長期インターンでより深くUIデザインを学び、2016年に新卒のUIデザイナーとしてGoodpatchにジョインしています（詳しくはこちらのインタビューをどうぞ）。 現在のデザイナー就活においては、学生はポートフォリオを制作し、企業は書類選考時に提出を求める、というスタイルが一般的になっています。皆さんの中にも、学校で先輩のポートフォリオを見せてもらった、という方も多いかもしれません。一

HTMLのvideo要素やaudio要素は、source要素を使って複数のリソースを指定することができます。実は、このsource要素の順番によっては、想定したリソースは決して読み込まれません。この記事では、正しい記述順序と、ブラウザが読み込んでいるリソースを確認する方法を書きます。 ベストプラクティス video要素では次の通りです。 <!-- this is best practice --> <video> <source src="myvideo.webm" type="video/webm"> <source src="myvideo.mp4" type="video/mp4"> <video> 上記の例だと、WebMが再生できるなるならWebMを、そうでないならMP4を読み込みます。 解説 2018年現在のHTMLでは、video要素・audio要素に、特定形式のリソースをサポ

はじめに 初めまして、現在エンジニアをしながら起業をしてサービスを開発中の橋田至です。 私は今Swappyという同人誌のフリマサイトを開発中です。 現状まだサービスはリリース前でして、起業したと言っても売り上げは0のため、生きていくにはサラリーマンも行う必要があります。 今回は現在働いてる会社を退職し、新しい会社に転職することが決まったのでその経緯などを詳しく記載していきます。 自身の経歴 March卒 新卒では別業界に就職 ２年働いたあとエンジニアに転職 現在エンジニア３年目 保有資格 ITパスポート 基本情報 応用情報 AWS CCP Salesforce PDI 転職理由 現在勤務している会社が倒産しそうなため というのも受託開発の会社で働いていたのですが、取引先がほぼ一社のみでその会社がエンジニアを内製化することになったと社長から伝えられました。 さらに元々従業員が１桁程度しかいな

初めに 私は独学でプログラミングその他について勉強をしていますが、基本的に知識を得るために金はかけません。調べれば何とかなるので。 私がプログラミングを始めるにあたって自分に投資したものは安いノートパソコンとマウスのみで合計金額は14600円（ノートパソコン14000円、マウス600円）ですね。 もちろんいいものはお金をかけなければ手に入りません。しかし、いいものというのはある程度のレベルにならなくては持っていても意味がほとんどないと思います。 実際にプログラミングの勉強を独学で始めると、なかなか教材を見つけることができず、え？こんないいサイトあったの！？もうちょっと早く見つけときゃあよかった！というものがめっちゃありましたので、これから独学でプログラミングの勉強をしたいという方に向けて、少しでもお役に立てたらと、紹介をしたいと思います。 というわけで、今回は私が感謝する神サイトおよびその

はじめに あなたはブラウザからデータベース(DB)に情報が行き着くまでにどんな技術が使われているか説明できますでしょうか？ どのようなプロトコルが用いられ、どの技術を駆使してサーバと通信しているのか、Webサーバでは何が行われ、どのようにして負荷が分散されているのか、トランザクションはどのように管理されているのか、そしてデータベースではシャーディングや負荷対策のためにどのような対策が取られているのか… なんとなくは理解しているものの、私は自信を持って「こうなっている！！」とは説明ができません。 そこで今回は「大規模サービス」を題材としてブラウザからデータベースに至るまでの、情報の流れとその背後にある技術について、明確かつ分かりやすく解説していきたいと思います。 対象としてはこれからエンジニアとして働き出す、WEB、バックエンド、サーバーサイド、インフラ、SREを対象としております。 1.

inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で

前提 Next.js v13.4.3 での話です。 後述の回答の指針は、あくまで執筆者個人の一意見です。参考までにどうぞ。 はじめに フロントエンド開発に入門じゃい。Reactじゃい。Next.jsじゃい。 と息巻いて、とりあえずcreate-next-appを叩いたら $ npx create-next-app my-next-app ✔ Would you like to use TypeScript with this project? … No / Yes ✔ Would you like to use ESLint with this project? … No / Yes ✔ Would you like to use Tailwind CSS with this project? … No / Yes ✔ Would you like to use `src/` direct

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はZOZOテクノロジーズ TECH BLOGにも同じ内容で投稿しています。よろしければ他の記事もご覧ください。 こんにちは！ ZOZOテクノロジーズ フロントエンドエンジニアの高橋（ニックネームはQ）です（@anaheim0894） 昨年12/26、毎年年末に行われる大忘年会（ZOZOCAMP2018）で、グループ会社も含めた1,000人規模でのリアルタイムアンケートを、FirebaseとVue.jsを使って制作しました。 当日会場にて弊社の昨年の事業紹介や、「楽しく働く」というコンセプトの動画を流し、動画の合間で質問をし動画と

どうも、デザイナーのけんてぃです。こないだポートフォリオを作ってみました。 非常事態宣言もあり、なかなか公園に行きづらく、1年ぶり？ くらいにデザイン系の記事を書こうと思います。 いきなりなのですがWebサイト制作のデザインに取り掛かる際、“らしさ”を出すために重要なものってなんでしょうか。 ・ ・ ・ それはもうたくさんあるしワーディング含め表層に関わるものすべてだとは思いますが、今回は「書体」について綴ろうと思います。デザインはじめてまだちょっとみたいな方（歴1～2年）向けに書くので、非常にライトな内容となっています。中堅層以上の方はサッと読み飛ばしてください。 LIGのWeb制作の場合、PC/SPのデバイスフォントのほかにGoogle Fontsを使うケースが多いです（クライアントによってはAdobe fontsやその他のWebフォントサービスを使うこともあります）。そこで今回は、”

はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と

2023年もCSSの進化がすごかったですね！ その進化を2024年でも生かしていけるように、今回まとめておいていつでも参照できるように記事を書こうと思いました。 お読みいただけると幸いです。 一緒に2024年もスタートダッシュで走り抜けましょう。 まず、はじめに この記事では、最近登場した、エキサイティングで、アクロバティックでファンタジックなインパクトのある機能をピックアップして紹介したいと思います。 CSSの多彩な新機能を広く紹介することで、読者がこれらに触れる機会を持てるように努めています。 特に興味を引く機能があれば、他の媒体を通じて更に詳しく掘り下げることをお勧めします。 コンテナクエリ スタイルクエリ :has()セレクタ :nth-child()の「of S」構文 text-wrap: balance initial-letter ダイナミックビューポート単位 広色域のカラー

はじめに こんにちは、宮内あかり(@akari_myuc)と申します。 2015年からデザイン関係の仕事を中心に活動していましたが、2020年7月にIT企業に転職。 2023年2月からは、SESでアプリ開発業務に携わりながら、副業でデザイン業務をしています。 デザインの経験を活かして、フロント側で開発業務をしたいのですが、案件ガチャに外れまくり…。 ほとんどフロントの実務経験が積めていないので、転職を視野に入れはじめました😞 そこで、私が調べた転職サイトを公開します！同じように転職したい人たちの役に立ちますように…🥺 私の経歴(ちょっと長いので、見たい人だけ見てね) 2015〜2020年 生活雑貨デザイナー・DTPデザイナー・役者など。 2020年7月〜2022年5月 Progateやドットインストールで勉強後、SES企業に入社。 エンジニア志望で入ったのに、建設会社のIT担当に配属さ

2017 年から新卒で社内 SE として 3 年働いた後、よりモダンな技術に触れたいという思いで Web アプリケーションエンジニアに転職しました。そこで 3 年間フロントエンドを中心に開発した後、現在の株式会社よりそうに転職しました。 転職理由 ざっくりと以下のような感じです。 エンジニアとしてキャリアアップをしたかったため エンドユーザーからフィードバックをもらいながらプロダクトを改善していきたかったため フルリモートで働きたかったため より社会貢献性の高い事業ドメインに挑戦してみたかったため 利用した求人媒体 転職ドラフト 自分の市場価値の相場感を知りたいという理由で利用してみました。 触れ込み通り、企業からの入札から始まり、選考がスタートするというものでした。 2 回参加して指名は合計 7 件ありました。そのうちカジュアル面談を受けたのは 4 社、選考は 3 社、内定は 1 社でし

この記事はNuco Advent Calendar 2023の18日目の記事です。 はじめに 本記事ではGithubレポジトリTop28を紹介します！ Githubレポジトリは日々の業務や学習に役立てることが可能です。必要な機能や学習教材は、無料で利用出来る高機能なものがあるのなら積極的に利用して役立てるべきです。 以下の内容に分けて合計28個のGithubレポジトリを紹介します！ 開発用Githubレポジトリ 学習用Githubレポジトリ QOL高めのエンジニアとして日常を過ごしたい方は参考にしてください！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。