こんにちは、今年に入りReactを習得しようとがんばっています。
１ヶ月程度ちょくちょくと学習を続け、Reactを使ってこんなものができそうだな〜というイメージが湧いてきたので３、４時間ほどかけて作ってみました。
それは、「ワードプレスのサイト内検索で記事をリアルタイムで取得し表示する」プログラムです。
実際の成果物がこちら↓
ワードプレスのサイト内検索機能がページ遷移してイケてなかったので、ブログ内の記事をリアルタイムで検索するプログラムを作ってみました🔎
— たろ＠エンジニア✖︎ブロガー✖︎米国株投資 (@tarovlog) March 4, 2021
そうえばあの記事どこだっけな〜という悩みを解決します！
詳しくは動画に。React最高😏#ブログ書け#ブログ楽しい#ブログ仲間募集中#React#WordPress pic.twitter.com/trAPq7onrS
リアルタイムサイト内検索体験ルーム
実際に体験をする場合は下記リンクへ↓
ここから下は個人的な今回作ったプログラムのプロジェクト進行手順についてのまとめや感想。
プログラムの着手手順
ぼくの場合、作りたものができたらコードを書き始める前に作成完了までの工程を書き出します。
今回メモしたのがこちらです。
- HTMLの検索フォームの作成
- フォームに変化が生じたらイベントを発火するReactの作成
- ReactからRestAPIを送信する
- APIサーバーから記事を取得し、JsonデータをReactに返す
- 受け取ったJsonデータを表示する
ざっくりとした手順ですがこれがあるだけで作業手順や工程が明確になります。
基本的にはこの手順にしたがって作業を進めるのですが、特に注意する点として、その問題をクリアにしなけらば作りたいことが実現できないという場所を先に潰してから作業することを意識しています。
途中まで作業してやっぱり無理そう、、ってなると悲しいですからね。
リアルタイム検索機能を作ってみて
実際に使ってみると本当に便利。
未来のGoogle検索を作ってしまったと感じるくらいでした。笑
ブログは辞書のようにこれまで学習したことをメモしているのですが、昔の記事を探すのが地味に大変なんですよね。
それがサイト内記事リアルタイム検索機能があるだけでサクサクっと入力フォームに文字を入れて記事が表示されるのでまじで便利！！
ブログにはどんどん学んだことをアップしていこう！というモチベーションがグッと高まりました。
おわりに
まだ不慣れな言語で開発を行ったため不備があるかもしれませんが、これからさらに学習して効率的に安定性が高いシステム構築実現に向けて頑張っていこうと思います！！
コメント
[…] サイト（ブログ）内検索で記事をリアルタイムで取得し表示する […]