ふぉい

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

ふぉい

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

最近の記事

Laravel学習メモ(Laravel導入〜データベース接続)✍️

引き続きLaravel学習のメモ&アウトプット🙆‍♂️ Laravelの環境構築を若干苦しみましたが終わりました!! 内容はLaravelの導入〜DB接続までです。 手順をメモったので投下します💣 参考になれば幸いです🙋‍♂️ PHP&Laravel環境構築HomeBrewのインストール HomeBrewでPHPのインストール brew install php PHPのインストールを確認 php --v Homebrewがインストールされていることを確認する /

    • Laravel学習メモ✍️

      転職先の企業でLaravelを初めて触る予定なので、学習の記録やメモという位置付けで、アウトプットしていきます〜。 まず、PHPはWordPressしか触ったことがないので、基礎から学習を開始しました!! Reactは関数コンポーネントが主流なので、クラス構文に慣れず大苦戦しています😭😭 特にabstract(抽象クラス)やinterface(インターフェース)の概念が理解できなかったので、メモを投下💣💣 abstractについて特徴: クラス内の関数は詳細な記述があ

      • プログラミングで行き詰まった時の対処法

        皆さんプログラミングで行き詰まった経験はありますか? 恐らくスラスラとコードが書ける人は少ないのかなーと思います。 私も最近WEBアプリを開発中に3日ほど同じ場所で悩んでいました😇 3日も悩んでいるとモヤモヤと悩んだ末に何十行もコードを書いてしまっていたんですよね〜。そこで負のループに悩まされました。 悩んで悩んでたくさんコードを書く(100行レベル) 悩んだコードで解決できないので、悩んだコードの修正を果てしなく続ける それでもうまくいかない。。。 この何百行とあ

        • FireBaseの開発で盛大にやらかした話

          こんにちは😀 数日前から家計簿のWebアプリ開発に取り掛かっています。 我が家の家計簿はこれまでExcelで非常にアナログだったので、今後ずっと使い続けることを想定して、拡張性が高くスマホからでもアクセスできるようにブラウザベースのアプリケーションで作ろうと思いました🤔 技術スタックは私の中ではお馴染みの下記です! フロントエンド: React+TypeScript バックエンド: Firebase/FireStore CI/CD: GithubActions しか

        Laravel学習メモ(Laravel導入〜データベース接続)✍️

          フロントエンド開発における開発効率をめっちゃ上げる方法

          お久しぶりです😀 最近は開発環境について学習をしています〜。 個人開発を早くやりたい!と先走った結果、ベースとなる開発環境が貧弱になってしまったんですよね。。。 まぁ、個人で開発する分にはそれで良いのですがチーム開発とか今後していくなら、開発環境を強化してみんなで楽しく開発に集中!といったことをしていきたいし、求められるのかなーと思ったので学習を始めました! そもそも私が思う開発環境がめっちゃ強い!は以下の通りです。とっても素人なので、ご容赦ください。他にもあると思うので

          フロントエンド開発における開発効率をめっちゃ上げる方法

          ReactのTooltipについて

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

          ReactのTooltipについて

          チャットアプリをリリース!

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

          チャットアプリをリリース!

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

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

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

          Web開発勉強日記 🧸その12🧸〜ユーザー管理アプリ(完結!)〜

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

          Web開発勉強日記 🧸その12🧸〜ユーザー管理アプリ(完結!)〜

          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🧸