WebWebロントエンドはどう違いますか？ -1

こんにちは！ @jio_jakeです。
この投稿は、私がparagraph.xyzに書いたものをハングルに翻訳したものです。 publicationを購読しておけば、一番早くアップデートのお知らせに会うことができます

---

[Dall-E-3]で作成した画像

こんにちは！私は@jio_jakeです。現在、ブロックチェーンゲームプラットフォーム@Yooldo_Gamesでフロントエンド開発者を務めています。

私は昨年、Web3に関する非常に小さな知識を持ってチームに参加したので、生態系やWeb3の開発に慣れていないチェロチームに参加しました。その後1年半余りが経ち、私が得たインサイトや開発のヒントを共有し、生態系に貢献しようとテクブログを始めることになりました。 今から私が昨年私のような暗号開発新入社員に申し上げることができるのは、市場状況の不明確さと方向性に比べて意外にブロックチェーン開発では明瞭で素敵だという点です。今後定期的に私が得たインサイトやヒントをブログを通じて共有するから購読していただきありがとうございます。
フロントエンド開発者は通常何をしますか？

入る前に、個人的に経験したところによると、Web3フロントエンド開発者やWeb2フロント開発者や大きな違いがないということです。若干技術スタックの違いはあるかもしれませんが、開発環境が大きく変わりません。区分される技術というより事業分野セクターの違いがより正確ですね。

---

私の過去の経験から、Frontend開発者の必須の素養は以下の通りです：

UX（User Experience）。

私たちのサービスでユーザーの活動を追跡することは、フロントエンド開発者にとって本当に重要な手がかりです。
• Javascript.最近のJavascriptエコシステムの成長は本当に目立っています。ほとんどのものをJavascriptで行うことができます。
• Reactなどのフレームワーク。
コラボレーションとソフトスキル。
• フロントエンド開発者は文字通り終わりにある職務です。時々、私たちはすべてのチームメンバーのプロダクト課題の理解度を一致させる必要があります。 問題解決。
チームのビジネスに精通しており、内部の技術アーキテクチャに精通している場合は、アプリケーションが必要です。
• フロントエンドエンジニアは、常にユーザーの経験を向上させることに夢中です。一度に理解できないビジネス用語をユーザーフレンドリーに解決したり、ユーザージャーニー（User journey map）を描いたときに離脱率が高い、またはプロセスが複雑であれば改善に集中します。しかし、Web3の環境では、フロントエンド開発者がユーザーフレンドリーに近づくときに気にする必要がある部分が少し異なります。
Web3 dapp での UX
• 私が現在チームに入ってきた初めて、現在のプロジェクトについてオンボーディングを受ける時間がありました。少し面白かったのはプロダクトのところで、Web3の専門用語や、私たちが定義した固有名詞（ビジネス固有語）に該当する言葉が本当に多かったです。
それにもかかわらず、3万人を超えるユーザー（ファンという方が良いと思います。）が私たちのコミュニティに集まって話していました。一体どのようにユーザーを集めたのか気になりました。意外と正解は簡単です。

まさにWeb3ユーザーの

閉じたグループ文化

でしたね。

---

もう少し詳しく話してみましょう。以下は簡単なバージョンのWeb2ユーザーのジャーニーマップです。

ユーザーは偶然のきっかけで私たちのサービスを発見します。 ソーシャルメディア広告、バイラルマーケティング、口コミなど、さまざまなルートに入ります。 新しいユーザーがサービスに入ります。

サービスはユーザーを丁寧に配慮します。

好みに合ったユーザーはサービスに忠誠心が生じます。一つの忠誠顧客が増えましたね。

これは本当に率直な一般的なWeb3サービスのジャーニーマップです。

2. まず、すでに大きなレベルのコミュニティとその中にコミュニティビルダーを含んでいるという事前前提の流れです。

   1. 閉じたグループで、ユーザーは私たちのサービスを初めて聞きました。とても有名な大きなブロックチェーン（チェーン、財布）などとパートナーを結んだそうです。 KOL（Key Opinion Leader）がプロジェクトを強く推薦してくれました。 ユーザーは私たちのサービスを信じることにしました。なぜなら、このプロジェクトの隣には信頼できる大きな会社があるからです。
   2. ユーザーは若干のETHをイベントなどで消費することにします。もちろん、私たちのサービスに財布もつながります。
   3. サイクルが繰り返されます。
   と！私たちはhypeのあるプロジェクトになりました！
   ユーザーは少しお金を使うことを全く躊躇しない特徴を持っています。フロントエンドの開発者として興味深い部分は、ユーザーが自分でサービスを利用するために勉強するということです。 Web2ではこのようなことがうまく起こらないんですよ。あまりにも多くの競争製品があるので、ただ去るとやめましょう。
   したがって、私たちはユーザーに非常に簡単な財布連動などのチュートリアルを提供する必要はありません。これくらい知ってる？という考えで進むことができる部分がありますね。 それでは、どんなことにもっと集中すべきでしょうか？

   個人的な結論：Squeezingとプロダクト間の相関関係

   上記の質問に対する答えはチームによって異なります。私は今ブロックチェーンゲームの分野にいます。私たちは本当に素晴らしいゲームをインハウスにして、外部から受け取ります。私が通っている会社だからではなく、ブロックチェーンゲーミング会社の中で私たちと同じくゲームに本気な会社はよくないと思います。
   

   ---

   Troublepunk、PCで楽しめるバトルロイヤルゲーム

   
   

   
   

   
   
   
   
   RPD、Androidで楽しめるモバイルディフェンスゲーム

   
   

   
   

   私たちは今ドーパミンの時代に住んでいます。だからロングフォームコンテンツに対して簡単に疲れてしまう傾向があります。ゲームはロングフォームに該当すると思います。

   ディーゼンとスペアディーゼンは時間を効率的に書きたいです。そのため、ユーザー分析を通じてゲームとは別に非常に高速で短い相互作用を準備します。例えば、デイリーチェックインとか、限定版NFT販売のような作業ですね。これらの作業は相互作用にとって非常に快適で簡単です。単に財布だけを接続し、ボタンを1回押すだけです。
   
   例をもう一度聞いてみましょう：もし私がパラグラフのFEだったら？
   
   
   より明確な例を挙げましょう。もし私がparagraphの開発者ならどうやってUXを改善できたのでしょうか？

   
   

   ---

   私が初めてパラグラフに参加する時です。

   
   

   
   

   うーん..私は財布だけをつなげただけなのに、不明なエラーが発生したと出ますね。

   
   このエラーは、プロジェクトでサポートされていないチェーンで接続したときに発生するエラーのようです。私のメタマスクチェーン設定がLineaだったので発生しました。それでEthereumメインネットに変えてくれました。
   
   
   

   戻るに進み、Ethereumメインネットに変更したら..

   
   

   
   

   
   
   
   
   いよいよ参加できるようになりましたね！

   
   

   
   

   ユーザージャーニー上左上のボタンを押して、ネットワークを選ばなければならないという点がかなり不便ですね。ほとんどのWeb3ユーザーは、これらのことが非日常的であるため、よくわかりますが、明らかに改善の余地が見えます。

   私はこのような見えない作業をユーザーの相互作用なしに後ろに配置しています。簡単な例ですが、このような悩みを持続させることが、Web3フロントエンドエンジニアとしてUXを改善する方法の一つです。迅速で簡単な相互作用のためのヒントです。

   paragraphチームはウォレット連動にweb3-modalを使用しているようです。以下のコードは、この家で私が書いたものです：
   

   const SignInButton = () => {
     const { open: openWeb3Modal } = useWeb3Modal();
     const { address, isConnecting } = useAccount();
     const chainId = useChainId();
     const { switchChainAsync } = useSwitchChain();
   
     const handleOnclick = async () => {
       // check current user wallet chain is supportive or not
        if (!supportedChains.has(chainId)) {
          await switchChainAsync({ chainId: mainnet.id });
        }
        openWeb3Modal();
     }
     return (
       <button onClick={handleOnclick}>
        {isConnecting ? 'Awaiting Confirmation' : 'Signin'}
       </button>
     )
   }
   

   Web3-modalはWalletconnect、Viem、Wagmiを使って構築されるサービスです。それで、強力なフックやユーティリティ関数をサポートすることができます。これらの要素を積載適所に活用すれば、ユーザー体験を大幅に向上させることができます。 最後にディテールが一つあります。たまに一部吠えたユーザーたちは財布相互作用が起きる時にいろいろな行動をします。そのうちの1つは、トランザクション転送の直前にチェーンを変更することです。そして誇らしげにバグを見つけました！と言って、ディスコッドコミュニティやTwitterなどに掲載します。だから、常に財布の相互作用では現在の環境をチェックすることが重要です。以下のように：
   

   ユーザーのウォレットアドレスがオフチェーンに登録されているのと同じですか？
   ユーザーが私たちがサポートするチェーンにつながっていますか？ などチェックするべき事実は多いほど良いです。 スマートコントラクトインタラクションでUX改善の面でより多くのヒントがあります。
   仕上げ

   私の記事の冒頭で述べたように、私はWeb3フロントエンド開発者が基本的にWeb2フロントエンドタスクとは大きく異なるとは思わない。実際、技術的な面でのWeb3は、曖昧で常に変化する市場状況よりもはるかに鋭くて明確です。 Web3サービスが時々ユーザーフレンドリーが悪いことは否定するのが難しいです。財布とオンチェーンインタラクションという機能を必須に持っていかなければなりませんから。しかし、Frontendの開発者なら、この中でも悩む距離があります。私たちのサービスのターゲットユーザーを分析し、コアユーザーのニーズを特定しようとする必要があります。ユーザージャーニーマップを描いて、不便な点を減らしながらUXを最適化できます。

   ---

   今日はウォレット接続に関するUXを簡単に共有してみました。まだWeb3にはUXを改善できる点が多く、共有したいものも多いです。

   
   投稿が良かったら、購読と共有してください。長い記事を読んでくれてありがとう。次の記事で探してみましょう。

以上がWebWebロントエンドはどう違いますか？ -1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。