ふぉい

WEB制作をしている20代エンジニアです。 WEB制作の情報をメインで発信していきます…

ふぉい

WEB制作をしている20代エンジニアです。 WEB制作の情報をメインで発信していきますが、WEB開発の勉強日記も投稿しようかなと思ってます！

ReactのTooltipについて

自作したチャットアプリ（https://queryroom-9178b.web.app/login）を隙間時間を見計らってアップデートしてる際に、Reactの新たな知識を仕入れたので、アウトプットしておきます〜。 Tooltipとは・・・？ チャットアプリでよくある、ユーザーのアイコンをホバーしたらユーザー名やアドレスが表示されるやつ！の実装をしていました。 通常のWeb制作ならjQueryでエレメントの表示/非表示を切り替えるわけですが、Reactには「Tooltip」

ふぉい

    • チャットアプリをリリース！

      開発に没頭しており、note更新が疎かに・・・😭 ただ、遂に個人開発したブラウザアプリ「QueryRoom」をリリースしましたー！開発に至った経緯など詳細は前回の記事に書いてあるので、ご覧いただければと思います！！ 👇実際のアプリがこちらになります〜〜！ まだ、正直満足はしてないのです。 独自ドメインを取得していなかったり、チャットアプリとしては機能が不足している面もあり・・・リリースを躊躇していたのですが・・・>< ただ、最低限身近な人とのコミュニケーションでは使え

      ふぉい

      • アプリの個人開発👨‍💻その1👨‍💻〜チャットアプリ〜

        またまた、２週間ぶりの投稿〜〜！ もうちょっと頻度上げたいなー😭 前回の記事でお伝えした通り、ついに個人開発のプロジェクトをスタートさせました！！ 1月中旬くらいからセルフ要件定義を始めて今日からやっとReactのコードを書けるフェーズになりましたー！！（長かった・・・） そして気になるアプリ名ですが・・・ QueryRoom です！カッコつけた名前で大変恐縮なのですが、 要はチャットアプリです。 たたのチャットアプリではなく、エンジニアの悩みを効率的に解決かつコミュニ

        ふぉい

        • Web開発勉強日記 🧸その12🧸〜ユーザー管理アプリ（完結！）〜

          どうにもこうにも本業が忙しく、半月程発信ができませんでした〜〜（ ; ; ） ただ最近思うのは、エンジニアとして贅沢な過ごし方をしているな！と思ってきました🤓忙しい中でなぜそう思うのか・・・についてはどこかで発信したいと思います！ 本日の学び✍️本日はUdemyの実践アプリ作成にて遂に…遂に… ユーザー管理アプリの開発が終わりました！！！ まぁ、言われた通りにコードを書いているといったらそれまでです。 しかし、10分の動画でも1時間くらいかけて理解を深めてきたので、

          ふぉい

        ReactのTooltipについて

        ふぉい

          Web開発勉強日記 🧸その11🧸〜ユーザー管理アプリ〜

          相変わらず本業は忙しいのですが、忙しさに怠けてはいけない・・・と平日も短い稼働ではありますが、学習を継続しています🤗 本日の学び✍️改めてですが以前からUdemyのじゃけえさんの講座を受講しています。 その中で実践的なユーザ管理アプリの開発があり年明けから取り組んでおります！ちょっとした自慢ですが前回の記事で書きましたが、開発環境はテンプレートを自作してオリジナルな環境で受講しています🤓気になる方はぜひ見てくださいw（大した事ないですがw） そしていよいよ9割型受講し出来

          ふぉい

          Web開発勉強日記 🧸その11🧸〜ユーザー管理アプリ〜

          ふぉい

          Web開発勉強日記 🧸その10🧸〜開発環境のテンプレート作成〜

          本業に追われめちゃめちゃ忙しく1ヶ月以上更新が空いてしまいました・・・ 普段から忙しくはありますが、12月は年末ということで更に忙しく。。。 それなりに体を壊しました😇 仕事も大事ですが命も大事ですね・・・(o´д`o)ﾄﾎﾎ ただ、改めて今後のキャリアを考える良いキッカケとなりました🙏 本日の学び✍️本日は年末に作成したReactの開発環境のテンプレをGitHubにあげました！！ テンプレとして使うため、pullをした際は不要なファイルやディレクトリがあったため、テンプレ

          ふぉい

          Web開発勉強日記 🧸その10🧸〜開発環境のテンプレート作成〜

          ふぉい

          Web開発勉強日記 🧸その9🧸〜雑記〜

          Udemyの講座も終盤に入ってきたので、今までCodeSandBoxでコードを書いていましたが、慣れ親しんだVS CODEでReact✖️TypeScriptの環境を構築しました！！ ReactやTSをインストールするのは一瞬ですがESlintやPrettierのインストールや初期設定が中々大変だった・・・。 手順も長く難しかったため、ググりつつ自分の極秘Notionに手順書を作成しました！後々この手順書がきっと生きてくると思います！！ 最近はviteとかいう環境構築を

          ふぉい

          Web開発勉強日記 🧸その9🧸〜雑記〜

          ふぉい

          Web開発勉強日記 🧸その8🧸〜カスタムフック〜

          昨日に引き続き今日もReact！React！ ちょっとずつ感覚でコードが打てるようになってきたぞ 本日の学び✍️今日はカスタムフックについて学習しました！ カスタムフックとは コンポーネントに直接処理を書くのではなく、1つの機能を1つのファイルに切り出してフックスとして定義した関数のことだと理解しました！ メリット 複数のReact Hooksを1つの関数内でまとめることができる。 使用方法 暗黙のルールとしてReact Hooksのようにuse〜〜と命名するべ

          ふぉい

          Web開発勉強日記 🧸その8🧸〜カスタムフック〜

          ふぉい

          Web開発勉強日記 🧸その7🧸〜TypeScript〜

          お、お久しぶりです！！ 先週は本業の疲れからか学習をサボってしましました！ 2週間ぶりに学習したので、アウトプットしていきますー！ 本日の学び✍️前回に引き続きTypeScript（以下、TS）について学習しております。 TSは現代のフロントエンド開発では必須と言われているそうなので、しっかり学ばないといけなさそうですね。。。 ただ僕みたいにカオス(w)なコードを書く人にとっては、TSで規律性やルール付けをできると、他の人からもレビューしてもらいやすくなるのかなーと思ってま

          ふぉい

          Web開発勉強日記 🧸その7🧸〜TypeScript〜

          ふぉい

          Web開発勉強日記 🧸その6🧸

          本日2本目のアウトプットはTypeScriptについてです！ 2本目なので余談は無しで！！ そして学習してたらいつの間にかこんな時間に・・・！ 眠い！ 本日の学び✍️冒頭でも書きましたが本日午後はTypeScriptについて学びました TypeScriptとは TypeScriptはJavaScript（以下、JS）を静的に型付けしたプログラミング言語です。通常のJSは動的型付け言語であり、変数の型は処理が実行されるまでは決定されません。ある意味で空気が読める天才ですね

          ふぉい

          Web開発勉強日記 🧸その6🧸

          ふぉい

          Web開発勉強日記 🧸その5🧸

          とりあえず午前中に学んだことをアウトプット！！ 恒例の余談ですが・・・ GPTsにてポートフォリオ作成をサポートしてくれる先輩を召喚しました！ 名前は「パイセン」、性格は社内にいる優しい先輩風で自己肯定感を上げてくれる・・・と他にも細かく性格を設定してみました。 早速、ポートフォリオのアプリを作るにあたってのサポートをしてくれているので、ありがたい🥹 AIなのでお礼の品とかをプレゼントできなくて残念…🙏 本日の学び✍️午前中はJSONPlaceholderを扱ってみました

          ふぉい

          Web開発勉強日記 🧸その5🧸

          ふぉい

          Web開発勉強日記 🧸その4🧸

          さて、本日はお出かけをしていたので、お出かけまでのわずか1時間で学習したことをアウトプットしていきます！ あ、余談ですがGPTsすごですね〜🙌 目的に応じた専用の先生？メンター？になってくれる、より専門性の高い回答を引き出せるようになりましたね！！密かにバリバリ使いこなして周りと差をつけたいと思ってます・・・😇 本日の学び✍️本日はRecoilについて学びました！ Recoilとは RecoilとはMeta社が開発したReactの状態管理ライブラリです。 Reactを

          ふぉい

          Web開発勉強日記 🧸その4🧸

          ふぉい

          Web開発勉強日記 🧸その3🧸

          昨日に引き続き今日もがっつり学習しました！ 例の通り今日のサムネもDALL-E3に作ってもらいました〜。 サムネを生成する過程も楽しい😆 多分これからしばらくは生成してもらうかも。 本日の学び✍️本日は1日中AtomicDeignを活用したコンポーネントの分割をしていました。 AtomicDesign そもそもAtomicDesignとは・・・ アトミックデザインと読む・・・ かっこいい・・・ デザインを5つの要素に分割して構成する考え方。 ここで重要なのがあくまで概

          ふぉい

          Web開発勉強日記 🧸その3🧸

          ふぉい

          Web開発勉強日記 🧸その2🧸

          前回の投稿からだいぶ時間が経ってしまった・・・ 本業が忙しくなかなか学習できずにいました🥹 今日から連休！！ということもありガッツリアプリ開発の学習を進めていきます( ＾∀＾) 今回からは学んだ内容を具体的に書き残していきます！ アウトプットすることで、より理解が深まると良いな〜なんて思ってます。 あ、関係ないけどサムネはDALL-3に作ってもらいました笑 本日の学び✍️主にURLパラメーター、クエリパラメーター、ページ間でのStateの受け渡しを学びました。 URL

          ふぉい

          Web開発勉強日記 🧸その2🧸

          ふぉい

          Web開発勉強日記 🧸その1🧸

          またまた投稿スパンが伸びてしまった・・・！(◎_◎;) 最近は、元々チャレンジしてみたかったWeb開発の勉強を本業の傍らしています！ Web開発はサイト制作と違い、よりアプリ風な動きのあるブツを開発できるので、面白い！！ これからは、Web開発関連の投稿もしていきたいと思います〜🙆‍♂️ WEB開発をしたいと思った経緯✍️元々、フロントエンド系のプログラミングを勉強し始めた頃はサイト制作、アプリ開発どっちが自分に合っているのかわかりませんでした。 じゃあ、より取っ掛か

          ふぉい

          Web開発勉強日記 🧸その1🧸

          ふぉい

          フロントエンドエンジニアな生活

          どうも( ＾∀＾) 週1で投稿を目標にしていましたが、先週はサボってしまい2週間ぶりの投稿になってしましました🥹 本日は、 フロントエンドエンジニア（以下、FE）になった後の生活について書いていきます！ まだ転職してないけどFEについて気になっている方に向けて少しでも参考になればと思います！ 業務内容👨‍💻FEにも色々ありますが、 私はWEBサイトやLPの作成、SEO向上施策（保守作業）を行っています！ いわゆる、WEB制作ってやつですね！！ 私の会社は生粋のWEB制

          ふぉい

          フロントエンドエンジニアな生活

          ふぉい