ソフトウェア技術ブログ

ソフトウェア技術ブログへようこそ!React、JavaScript、技術スキルのナレッジ記事ページです。monorepoの技術的な情報をお探しの方も、zustandの状態管理のヒントをお探しの方も、フロントエンド開発の理解を深めたい方も、ここには豊富なリソースがあります。各記事は、必要な情報を素早く見つけることができるよう、わかりやすく、アクセスしやすいコンテンツを提供するよう注意深く書かれています。基本的なコンセプトから高度なヒントまで、あなたが初心者であろうと上級者であろうと、誰にとっても役立つ情報があります。グラフィックコンテンツにご興味のある方は、以下のサイトもご参照ください Instagram

notion startup insight
技術革新コラム
ロクサーヌ

Notion の起業家ストーリーを解読する: 小さなノーコードのアイデアが、どのようにして世界の 600 億の生産性市場を覆すことができるのでしょうか?

身為規劃狂 J 人,用過各種生產力軟體,如 Evernote, Obsidian 等,但最後還是回歸 Notion 的懷抱,畢竟 Notion 的操作真的最直觀、介面最美觀。把生活搬上 Notion 後,因為可以根據自己的習慣全然客製化,真的有長出第二個大腦的感受。

使用的過程我也不禁好奇,Notion 這個「生活黑客」的點子到底是什麼被想出來的?Notion 這間公司背後有什麼有趣的創業故事?

於是我深入了解創辦人的背景、Notion 獨特的競爭優勢,今天就來分享這間傳奇公司的創辦故事、產品特色、和 Notion 如何在生產力市場站穩腳跟吧!

続きを読む »
システム設計-システム設計 07-システム設計コンポーネント-ロードバランサーとは-ホーガンテック-ホーガンブラブ
テクニカル記事
Hogan

ロードバランサの解説 – システム設計 07

ロードバランサーとは何ですか?ロード バランサーは主に、現在のサーバー負荷に基づいて、すべてのユーザー リクエストを対応するサーバーに分散します。この利点は、サーバーの過負荷やクラッシュを回避できることです。ただし、現在のシステムのトラフィックが高くなく、1 秒あたり数千リクエスト程度であれば、結局のところ、システムが複雑になるにつれてロード バランサーは必要なくなる可能性もあります。もっと考慮する必要があること。

続きを読む »
ホーガンテック-ゼアバー
レビュー
ロクサーヌ

Zeabur の IaaS、PaaS、SaaS について説明してください。クラウドサービスモデルのご紹介!

ゼアブルとは何ですか? Zeabur は、最新の開発者向けに設計された PaaS で、使用するプログラミング言語や開発フレームワークに関係なく、ワンクリックで展開するのに数分しかかかりません。フロントエンド、データベース、オブジェクト ストレージ、その他のサービスを 1 つで簡単に Zeabur に統合できます。停止。

続きを読む »
システム設計-システム設計 06-システム設計コンポーネント-DNS とは-hogantech-hoganblab
テクニカル記事
Hogan

DNSとは何ですか?ドメインネームシステム入門 – システム設計 06

DNSとは何ですか?ドメイン ネーム システム (DNS) は、人間が読めるドメイン名を機械が読める IP アドレスにマッピングします。たとえば、google.com に対応する IP は 142.250.191.78 です。ユーザーがブラウザにドメイン名を入力すると、ブラウザは DNS を通じてドメイン名を IP アドレスに変換する必要があります。必要な IP アドレスが取得されると、ユーザーのリクエストがターゲット サーバーに転送されます。

続きを読む »
システム設計-システム設計05-システム設計コンポーネント-ビルディングブロック-ホーガンテック
テクニカル記事
Hogan

システム設計コンポーネントの構成要素の概要 – システム設計 05

システム コンポーネントはシステム設計の基本的な構成要素であり、それらを組み合わせて複雑なソフトウェア システムを構築できます。ここでは、システム設計の基本概念についても説明します。システム設計はソフトウェア エンジニアリングにおける重要な要素であり、ソフトウェア システムの全体的なアーキテクチャと設計が関係します。優れたシステム設計により、ソフトウェア システムの信頼性、拡張性が向上し、保守が容易になります。

もちろん、これらのコンポーネントを使用してシステムを設計したい場合は、まずどのような設計コンポーネントがあるのかを理解する必要があります。それぞれのデザイン要素は何を表しているのでしょうか?この記事では、各システム コンポーネントを紹介し、次の章で各コンポーネントの詳細と用途について詳しく説明します。

続きを読む »
システムデザイン-システムデザイン04-裏表紙計算-封筒の裏-ホーガンテック-ホーガンブラブ
テクニカル記事
Hogan

封筒の裏の計算 – システム設計 04

バック・オブ・ザ・エンベロープは、バック・オブ・ザ・エンベロープ計算とも呼ばれ、単純な推定値を使用して複雑な問題の近似値を計算する方法です。

ここでも分散システムを復習しましょう。ネットワークを介して接続されたコンピューティング ノードで構成されます。これらのノードには、Web サーバー、アプリケーション サーバー、ストレージ サーバーなど、さまざまなタイプのサーバーを使用できます。

分散システムを設計するときは、各ノードが処理できるリクエストの数を理解することが重要です。同時に、必要なノード数やトラフィック数も把握できるので、Back-of-the-envelope を使用して概算を計算し、最終的に必要なシステムを設計します。

続きを読む »
システム設計-システム設計 03-ソフトウェア設計の非機能機能-hogantech-hoganblab
テクニカル記事
Hogan

ソフトウェア設計の非機能的特徴 – システム設計 03

現代の情報技術では、システムの可用性 (Availability)、信頼性 (Reliability)、拡張性 (Scalability)、保守性 (Maintainability)、耐障害性 (Fault Tolerance) は非常に重要な非機能特性であり、これらの特性はパフォーマンスと効率に影響を与えるだけではありません。ソフトウェア システムの影響だけでなく、ユーザー エクスペリエンスにも直接影響します。この記事では、上記5つの特徴についても詳しく解説していきます。

続きを読む »
システム設計-システム設計-システム設計における抽象化の適用-hogantech-hoganblab
テクニカル記事
Hogan

システム設計における抽象化の適用 – システム設計 02

抽象的とは何ですか?抽象的な概念は、システム設計中に無関係な詳細を隠すのに役立ち、アーキテクチャ全体に集中できるようになります。抽象化によってシステム設計内の複雑さが隠蔽され、システム設計の結果により集中できるようになるため、詳細から脱却することが重要です。

続きを読む »
React11-React-Hook-useState
Javascript
Hogan

React Hook useState - React 白話文運動 11

useStateは、関数に状態を追加するためのReactフックです。useStateを使うと、関数内で状態データを定義して管理できます。useStateは、次の2つの値の配列を返します。現在の状態:関数が最初にレンダリングされたとき、その値はuseStateに渡した初期値と同じになります。現在の状態:コンポーネントが最初にレンダリングされるとき、その値はuseStateに渡した初期値と同じになります。

続きを読む »
システムデザイン-システムデザイン-システムデザイン入門-ホーガンテック-ホーガンブラボ
テクニカル記事
Hogan

最新システム設計入門 - システム設計 01

システム設計とは、様々なシステムコンポーネント、API、データモデルを定義し、一定の機能要件を持つ大規模システムを完成させるためにシステムを統合するプロセスである。Youtubeのような動画放送プラットフォームを例にとると、大量の動画データをいかに効率的に保存・転送するかだけでなく、並行性の高いユーザー要件をいかにサポートするか、システムの安定性とスケーラビリティをいかに確保するかも考慮する必要がある。

続きを読む »
ウェブ・ビーコン-ウェブ・ビーコン
テクニカル記事
Hogan

Webビーコンとは?クッキー以外のツールについて知っておきたいこと

ウェブ・ビーコンは、20世紀後半とインターネットの台頭の産物であり、1990年代後半に登場した。より多くの人々がインターネットを利用するようになり、企業は大規模にユーザーデータを収集、理解、適用する仕組みを必要とした。ウェブビーコンは、クッキーと連携してユーザーの行動を把握し、複数のサイトを追跡することができる。

続きを読む »
React10-React-Life-Cycle
React ホワイトペーパーキャンペーン
Hogan

Reactライフサイクル - React用語キャンペーン10

Reactのライフサイクル - 前回の投稿では、Reactの構文を一歩進めて、React JSX - React Vernacular Campaign 06でReactコンポーネントの作り方を学び、コンポーネント間の親子関係について学びました。今回は、コンポーネントのライフサイクルについて、ライフサイクルの3つの段階、クラスオブジェクトのライフサイクル、関数オブジェクトのライフサイクルについて説明します。

続きを読む »
logo00-Dcard-hogantech
レビュー
Hogan

Dカード12周年記念サプライズ 生産国

今年、Dcardはすべての卒業パートナーにDcard12周年記念-サプライズ・オリジナル・イベントへの参加を呼びかけています。Dcardをプラットフォームとして、オフィスの様子やイベントの写真、料理など、このイベントを皆様と共有したいと思います!

続きを読む »
リアクト・プロップス - リアクト・バーナキュラー・キャンペーン 09
React ホワイトペーパーキャンペーン
Hogan

リアクト・プロップス - リアクト・バーナキュラー・キャンペーン 09

React Props - Reactの方言運動。前回の投稿でReactコンポーネントの構築方法とコンポーネント間の親子関係を学んだので、この投稿ではReactの構文を詳しく見ていきます。この投稿では、React Propsの概念を紹介します: Reactコンポーネント宣言、React Props。

続きを読む »
React08-Reactプロジェクトの構築
React ホワイトペーパーキャンペーン
Hogan

Reactプロジェクトの構築 - React Vernacularキャンペーン08

Reactプロジェクトのビルド - React Vernacularキャンペーン: 前回の記事では、Babelとは何か、Webpackとは何か、Npmとは何かという3つの用語を紹介した。本記事では、Reactプロジェクトを手作業でビルドする方法について、ビルド環境、Reactプロジェクトのビルド、プロジェクトの開始、Reactエクステンションの使い方を紹介する。また、CRAの公式ビルド環境と自作環境も紹介します。

続きを読む »
Babel & Webpack & NPM - Reactホワイトペーパーキャンペーン 07
React ホワイトペーパーキャンペーン
Hogan

Babel & Webpack & NPM - Reactホワイトペーパーキャンペーン 07

この記事では、Reactプロジェクトを構築するために必要な3つの用語、Babelとは何か、Webpackとは何か、Npmとは何かについて説明する。もちろん、これらのツールを使うというコンセプトに主眼を置いていますが、他にもNpmやYarnといったツールがあります。

続きを読む »
React06-React-JSX
React ホワイトペーパーキャンペーン
Hogan

React JSX - Reactホワイトペーパーキャンペーン06

Reactは、Webやモバイルのフロントエンド開発で最も人気のあるJavaScriptパッケージの1つで、開発者がフロントエンドページを完成させるための再利用可能なコンポーネントを作成できるようにするためにMetaによって開発されました。コンポーネントについて説明します。

続きを読む »
Reactの仕組み
React ホワイトペーパーキャンペーン
Hogan

Reactの仕組み - リアクト用語キャンペーン 05

Reactは、ウェブやモバイルのフロントエンドを開発するための最も人気のあるJavaScriptパッケージの1つで、Meta(旧Facebook)によって開発され、開発者はフロントエンドページを完成させるための再利用可能なコンポーネントを作成することができる。

しかし、Reactは厳密にはフレームワークではないことに注意する必要がある。ReactはUIコンポーネントのレンダリングだけを担当するからだ。しかし、ReactはAngularやVueといったフレームワークの代替ソリューションを提供し、複雑なフロントエンド・ページの機能に取り組むことを可能にしてくれる。

続きを読む »
2023 Yahoo! ソフトウェア・エンジニア・インタビュー
レビュー
Hogan

2023 Yahoo! ソフトウェア・エンジニア・インタビュー

ヤフーのソフトウェアエンジニアの面接では、フロントエンドのソフトウェアエンジニアを優遇し、フロントエンドの開発に加えて、バックエンドの開発やプロジェクト管理にも触れる必要がある。その時、LinkedInの募集情報を見て、友人に背中を押してもらい、友人を通じて、このポジションが多国籍チームであること、日々のミーティングも英語を使う必要があること、時差があるかもしれないことを概ね理解しました。

続きを読む »
成功大学電気系編入試験
レビュー
Hogan

107 成功大学電気|成功大学機械|応用数学編入試験

この記事は実は2018年に書いたもので、2023年の今、ブログに記事を移し、成功大学電気機械工程学院を無事卒業した。歯を食いしばって編入試験に立ち向かえるほど若かったことに感謝している。編入試験は、今の私の人生でマジで一番厳しい時期だ。最後に、この記事が編入試験を控えている人の参考になれば幸いです!

続きを読む »
Javascript 高階函式 -HigherOrderFunction
Javascript
Hogan

JavaScriptの高度な関数 - React Vernacular キャンペーン 04

この記事では、JavaScript 関数の非常に重要な概念である高階関数を紹介します。高階関数とは、1 つ以上の関数をパラメータとして受け取り、結果として関数を返す関数のことです。この記事では、高階関数とは何か、高階関数を使用する利点、実際のアプリケーションで高階関数を使用する方法、関数の方向性とは何か、高階関数を使用する方法について深く掘り下げていきます。純粋関数、高階関数、相関関係。

続きを読む »
React03-Javascript-Async-Await
Javascript
Hogan

JavaScriptの非同期と待機 - React Whitepaper キャンペーン 03

React Vernacular Campaignシリーズの第3回目へようこそ!今回は、JavaScriptの非同期操作について深く掘り下げ、AsyncとAwaitという2つの重要なキーワードを紹介します。 この記事では、実際の例を通して非同期操作の概念を示すとともに、Promise、Fetch、Async、Awaitを使って非同期コードをより効果的に処理する方法を紹介します。この記事では、非同期操作の概念と、Promise、Fetch、Async、Awaitを使って非同期コードをより効果的に処理する方法を紹介します。

続きを読む »
react-vernacular-campaign-02 JavaScript ES6 Object
Javascript
Hogan

JavaScriptのES6オブジェクト - Reactホワイトペーパーキャンペーン02

前回の記事では、let、const、var差分、テンプレートリテラル、アロー関数について紹介しました。本記事では、JavaScript ES6のその他の新しい構文である、オブジェクトの分解、オブジェクト構文の強化、配列の分解、拡張演算子について紹介します。 以上の内容を通して、Reactフロントエンドフレームワークをより簡単に習得する一助となれば幸いです。

続きを読む »
react-vernacular-campaign-01 JavaScript ES6
Javascript
Hogan

JavaScript ES6 - Reactホワイトペーパーキャンペーン01

Reactフロントエンド・フレームワークに入る前に、読者のJavaScriptの知識を新たにしよう。この記事では、JavaScriptの歴史、letとconstとvarの違い、テンプレート・リテラル、そしてJavaScript ES6の非常に重要な先駆けであるアロー関数に焦点を当てる。

続きを読む »
zustand
テクニカル記事
Hogan

Zustandとは? Reactフロントエンドの状態管理

Reduxを使うにせよ、Contextを使って状態管理を行うにせよ、Zustandの方が複雑で、後からプロジェクトに参加したエンジニアにとっては理解に時間がかかる。 Zustandの主な目的は、フロントエンドの状態管理を比較的シンプルでわかりやすくすることであり、そのためZustandが選ばれる企業もある。

続きを読む »
nx-monorepo
テクニカル記事
Hogan

なぜ大企業はNxを使うのか? モノレポツール 5分のクイックセットアップ

Nxは、よく知られたプログラムエディターVS Codeと同じ設計思想を共有しており、拡張機能をダウンロードしなくても、VSCodeでかなりうまく作成できる。
Nxも同じで、Nxのコアはシンプルで、すっきりしている。そしてNxプラグインを使えば、プロジェクトごとに異なる選択ができる。

続きを読む »
monorepo
テクニカル記事
Hogan

モノレポを本当に知っていますか? 5分で学ぶフロントエンド・メガアーキテクチャー

Monorepoは大量のコードを一元管理するためのフレームワークで、従来の個別プロジェクトとは異なります。核となる考え方は、フロントエンドに関連する全てのコードを単一のリポジトリで管理することです。このアーキテクチャの利点は、コードの再利用性の向上、コードの透明性の向上、すべてのパッケージが同じバージョンを使用することの保証、統一されたコードスタイルです。

続きを読む »
ja日本語