呼び出し可能な電話リンク：React での使いやすさとアクセシビリティの向上

はじめに

この実験では、tel: プロトコルを使用して React で呼び出し可能な電話リンクを作成する方法を学びます。このリンクを使うと、ユーザーはデバイスからただ 1 回のクリックで電話番号を直接呼び出すことができます。この実験が終わると、あなたはこの機能を自分の React アプリケーションに実装し、その使いやすさとアクセシビリティを向上させることができるようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 94%です。学習者から 100% の好評価を得ています。

呼び出し可能な電話リンク

VM には既に index.html と script.js が用意されています。一般的には、script.js と style.css にのみコードを追加すればよいです。

電話番号を呼び出すリンクを作成するには、Callto コンポーネントを使用します。このコンポーネントは、適切な href 属性を持つ <a> 要素を作成します。リンクをレンダリングするには、phone プロップを使って電話番号を指定し、children プロップを使ってリンクのテキストを指定します。

const Callto = ({ phone, children }) => {
  return <a href={`tel:${phone}`}>{children}</a>;
};

Callto コンポーネントを使用するには、ReactDOM.render() メソッドを呼び出し、phone と children プロップが設定された Callto 要素を渡します。

ReactDOM.render(
  <Callto phone="+302101234567">Call me!</Callto>,
  document.getElementById("root")
);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！あなたは呼び出し可能な電話リンクの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習することができます。