てりー

都内で働くフロントエンドエンジニア。 主に私生活やガジェット、ブログに関する記事を投稿…

てりー

都内で働くフロントエンドエンジニア。 主に私生活やガジェット、ブログに関する記事を投稿しています。 プログラミングに関するブログはこちら。 https://terrblog.com/

最近の記事

  • 固定された記事

【React+TypeScript】Netflixのクローンを作るチュートリアル はじめに

こんにちは、フロントエンドエンジニアのてりーです。 記事を手に取って頂きありがとうございます。 このチュートリアルではNetflixクローンを作る過程で、React・TypeScriptの基礎やAPIを利用したWebサービス開発について学んでいきます。 ※ この記事はZennで2021年に作成したチュートリアルを2024年4月に大幅アップデートしたものです。 ソースコードも1から作成し、解説も8割が新しくなり、ボリュームもリニューアル前の2.3倍なりました!! リニュ

¥2,000
    • ts-patternを使ってTypeScriptでもパターンマッチングを導入しよう!

      こんにちは、てりーです。 普段はFEエンジニアとして活動しています。(詳しいプロフィールはこちら) ts-patternとは?TypeScriptで使用されるパターンマッチングライブラリです。 用いる事で型安全な条件分岐が書けます! 2024年現在でTypeScriptにパターンマッチングを導入しようとした時に、最も推奨される選択肢かなと思っています。 パターンマッチングとはHaskell、Scala、Elixirなどの関数型プログラミングでよく用いられる考え方です。

      • スパルタンレースガーラ湯沢に初参加してきた!

        こんにちは、てりーです。 普段はFEエンジニアとして活動しています。(詳しいプロフィールはこちら) 1. スパルタンレースとは?公式曰く「世界最大級の障害物レース」とのこと。 種目や雰囲気は日テレがドイツ村での会を撮ったこれが分かりやすいかも 2. 9/14(土)ガーラ湯沢 スプリント部に参戦先週に越後湯沢で開催された、ガーラ湯沢スプリント部に参加してきました。 内容は5kmの山登り+20種目 初参加!完走目的 スパルタンの存在は丁度1年前ぐらいに知り、Youtub

        • 【2024年9月】フロントエンドエンジニアのデスク周りのガジェット紹介~1.5万円以内~

          こんにちは、てりーです。 普段はFEエンジニアとして活動しています。(詳しいプロフィールはこちら) 先日、24インチモニターを上下分割して快適に作業してるよーって記事を書きました。 その記事の中で、2枚のモニターを写すためにデスクの写真を撮ったら、他にも紹介したいものが出て来たので、今回はこの写真に写っているガジェットを全て紹介していきます💪 メインモニターこれ 4年前ぐらいにとりあえず買ったモニター。 ずっと24インチだと思ったが、23インチだった… 1万円と手頃

        • 固定された記事

        【React+TypeScript】Netflixのクローンを作るチュートリアル はじめに

        ¥2,000
        • ts-patternを使ってTypeScriptでもパターンマッチングを導入しよう!

        • スパルタンレースガーラ湯沢に初参加してきた!

        • 【2024年9月】フロントエンドエンジニアのデスク周りのガジェット紹介~1.5万円以内~

          2024年5、6月の収益振り返り

          こんにちは、フロントエンドエンジニアのてりーです。 最近、プライベートが忙しくて振り返りが出来ていなかったので、2ヶ月分まとめて収益の振り返りを行います。 振り返りでやる事本業 額面・手取り・残業時間 副業 請求書を見ながら収益と稼働状況 技術ブログ 発生件数・発生報酬・確定件数・確定報酬 記事販売 執筆した記事と売れた数 先月まで有料でやってましたが、5、6月は大して収益が上がっていないので、無料にしようかなーと思います。 4月の振り返りはこちら 先月

          2024年5、6月の収益振り返り

          wordpressのブログのサイドバーに目次を常に表示する

          こんにちは、てりーです。 普段はエンジニアとして活動しています。 今日は普段、自分が書いているブログの追従サイドバーに目次を表示できるように変更したので、そのやり方についてまとめました。 「Easy Table of Contents」を使うことで、30分程度で実現出来ました! 難しい設定など必要なく、予想しているより軽い作業でした〜✌️ お知らせ 先月、React+TpeScriptを使ってNetflixを作るチュートリアル記事を書来ました。 4月のスキ獲得数で1

          wordpressのブログのサイドバーに目次を常に表示する

          【React+TypeScript】Netflixのクローンを作る 追加コンテンツ

          こちらは以前書いたNetflixクローンを作るチュートリアルの追加コンテンツです!! 内容は react-queryを使ったデータフェッチ それに伴うパフォーマンス改善 useContextを使ったグローバルなstate管理 Youtubeトレイラーを本家Netflixの様に画面上部に表示 音量のOn/Off機能の追加 デザイン修正 を行っています。 実際の画面の動きはこんな感じです! ヘッダー部分に広々とYoutubeトレイラーが表示され、クリックした映

          ¥500

          【React+TypeScript】Netflixのクローンを作る 追加コンテンツ

          ¥500

          私用のPCを買い替えてMac mini M2を買った

          こんにちは、フロントエンドエンジニアのてりーです。 最近、私用PCの動きがあまりにも悪いので買い替えしました。 まだポチった段階なので、届いたらレビュー的な内容も追記していきます 現状のPCスペック今使っているのがMac Book Pro 13インチの2019年モデルです。 2020年の初頭ぐらいに買ったので、Intel Macになってます。 メモリは16GB、ストレージは512GBです。 値段は20万を切ってますね!!すごい。 よくここまで持ったなぁ。確実に値段以上

          私用のPCを買い替えてMac mini M2を買った

          2024年4月の収益振り返り

          こんにちは、フロントエンドエンジニアのてりーです。 普段は本業サラリーマン、副業で週10hぐらいの開発を行なっています。 2024年からは上記のコードを書く作業以外にもブログや記事執筆からの収入が増えてきました。 それらの振込先の口座がまばらな事や、そもそも1ヶ月単位で振り込みが自動発生しないプラットフォームなどもある為、収益の管理が難しくなって来ました。 そこで月1で収益が実際にいくらだったのかの振り返りをやろうと思います。 振り返りでやる事本業 額面・手取り・残

          ¥300

          2024年4月の収益振り返り

          ¥300

          React+TypeScriptの学習に役立つ資料まとめ

          本記事はこちらのチュートリアルのまとめに付録と全く同じ内容です! 記事として独立させた方が気軽に確認しやすいとの要望があったので、別の記事にしました! チュートリアルの中で紹介した記事、紹介しきれなかった記事など、今後の学習に役立ちそうな資料をまとめました! React + TypeScript入門 JavaScript フロントエンドを極める

          React+TypeScriptの学習に役立つ資料まとめ

          THE THORにreCHAPCHAを入れて、海外からのスパムメール対策をする方法

          こんにちは、フロントエンドエンジニアのてりーです。 簡単に自己紹介すると、大学中退で、そこから独学でフリーランスになり、現在は都内のメガベンチャーでエンジニアをしている20代後半です。(来年には30歳になります) 詳細はこちら 最近、ブログに海外からのお問い合わせがたくさん来ていたので、どう対処したのか?について書きました。 結論として自分が使っているテーマTHE THORとの兼ね合いから「reCHAPCHA」を入れました。 2週間前から海外からの問い合わせが1日5

          THE THORにreCHAPCHAを入れて、海外からのスパムメール対策をする方法

          24インチの縦置きモニターで画面を上下に分割したらとても良かった

          こんにちは、てりーです。 普段はエンジニアとして活動しています。(詳しいプロフィールはこちら) 先月あたりにモニターを新調して、1枚を縦置きスタイルにしました! その結果、普段表示できる画面が2→3画面になりました!! 今まではモニター3枚だと場所がないし、ウルトラワイドモニターは高くて手が出ないし… そう思ってましたが、縦置きモニターを上下に分割することで3画面表示が出来てとても快適になりました! この記事で伝えたい事 24インチモニターを上下分割して表示したら、

          24インチの縦置きモニターで画面を上下に分割したらとても良かった

          1ヶ月前に妻に「ADHD」なんじゃないと言われたエンジニアの僕がやった事

          こんにちは、フロントエンドエンジニアのてりーです。 普段は都内のメガベンチャーでエンジニアをしてます。(詳細はこちら) きっかけADHDに対して、何かアクションをしないと!!と思ったきっかけは、タイトルにもありますが、1ヶ月ほど前に妻に「ADHDなんじゃないか?」と言われた事です。 もともと多動である、注意が散漫である事は自覚していながらも、小中高での集団生活がこなせたこと、仕事が完全リモートワークで集団をあまり意識せずに働ける事などの影響で、あまり気に留めていませんでし

          1ヶ月前に妻に「ADHD」なんじゃないと言われたエンジニアの僕がやった事

          「クアパレス藤」が綺麗で街の銭湯としては最高級だった

          先週末に板橋区にある「クアパレス藤」に行ってきました。 設備(男湯)の内訳は - 内湯2(1つは高濃度炭酸泉) - 露天風呂1 - 水風呂1(20℃) - サウナ1(100℃) - 外気浴4席 で、街の銭湯としては設備も良く綺麗で大満足でした!! 特にサウナが100℃と高温で外気浴の場所も自然が溢れていて良かったです。 「クアパレス藤」とは板橋区にあり、要町から徒歩10分、大山から徒歩15分ぐらいの立地です。 看板等が道路から見にくい為、近くまで行かないと発見しにく

          「クアパレス藤」が綺麗で街の銭湯としては最高級だった

          サウナ健康アドバイザーの資格を取ったので振り返り

          こんにちは。 フリーランスエンジニアのてりーのです。 最近知った「サウナ健康アドバイザー」という資格に興味があったので、受講して見ました。 サウナ健康アドバイザーとは?公式にはこのように書いてありますね。 「サウナ・スパ 健康アドバイザー」は、温浴施設の従業員や利用者が、サウナやスパに関する正しい知識を身につけ、お客さまへのサービス向上や、ご自身の健康増進に活用されることを目指して、公益社団法人 日本サウナ・スパ協会が2014年に新たに設立した認定資格です。 公式ペー

          サウナ健康アドバイザーの資格を取ったので振り返り

          2020年の振り返り

          この記事は エンジニアと人生 Advent Calendar 2020 12日目の記事です。 昨日の記事は @KawamataRyoさんの「エンジニアに転職して3年目のアウトプットを振り返る」でした。 川俣さんのアウトプット量、本当に凄まじいですね!! 先日のしがないラジオにも出演されていたのですが、「エンジニアになる前は炎上案件(物理建物)の火消しをやってました」って自己紹介がインパクト強すぎて、しがないラジオの中でもお気に入りの回になってます。 この記事は「今年の振り

          2020年の振り返り