インタラクティブなRegexLearnトレーナーで、苦しまずにRegexをマスター

正規表現は開発者の間で賛否両論を巻き起こします。通常は、Stack Overflowから готовыеパターン（完成済みパターン）をコピーしたり、AIにメール検証パターンを書かせたりします。正規表現がエッジケースで突然壊れると、デバッガーを開いて、括弧とスラッシュの読みにくい嵐を長時間見つめることになります。

最近、RegexLearnというオープンソースのインタラクティブなステップバイステップトレーナーを発見しました。これは正規表現の複雑な構文をシンプルなハンズオン演習に分解します。

プロジェクトの中身

著者のAykut Kardashは、学習を短いインタラクティブなステップに分けたWebプラットフォームを構築しました。単に理論を読むだけでなく、回答フィールドにすぐに文字を入力し、テキスト内でマッチがハイライトされるのを見ることができます。

乾燥したリファレンスガイドとは異なり、ゲーミフィケーションされた学習アプローチを使用しています。各画面では、1つの構文要素の簡単な説明、テキストブロック、特定のタスク（特定の単語、数字、記号をハイライトする）が提供されます。次のステップは、機能するパターンを書くまでロック解除されません。

プロジェクトは21の言語に翻訳されており、ロシア語も含みます。ローカライゼーションは的良好で、用語が明確に翻訳されており、機械翻訳の癖がありません。

トレーナーの主な機能

リポジトリにはいくつか独立したセクションが含まれています。初期紹介から日常的な文字列作業まで、異なるニーズに対応しています。

ステップバイステップコース

サイトでは2つの別々のトラックが提供されています：

• Regex 101 Basics。単一の文字の一致から量子、子欲張り/怠惰な一致、キャプチャグループ、先読み/後読みアサーションまで導きます。
• Regex for SEO Practice。SEOスペシャリストとウェブマスター向け。URLフィルタリング、リダイレクト設定、Webサーバーログの解析をカバーしています。

組み込みプレイグラウンドとチートシート

式を実際のデータに対してすばやくテストする必要がある場合は、Playgroundタブが便利です。完全にブラウザ内で実行され、テスト文字列をサーバーに送信しないクリーンなサンドボックスです。

Nearbyにはインタラクティブなチートシートがあります。すべての主要な構成要素を簡単なヒント、検索フラグ、動作例とともにリストしています。

キーボードナビゲーション

インターフェースは、マウスを完全に脇に置くことができるように設計されています。レッスン間の移動、フィールドのクリア、ソリューションの確認、ヒントの表示はすべて、おなじみのホットキーで動作します。

技術スタックとプロジェクトのローカル実行

コードベースはクリーンで追いやすいです。プロジェクトはTypeScriptを使用したNext.jsで構築され、Tailwind CSSでスタイリングされています。

プラットフォームをマシンで実行したり、ソースコードを探索したい場合は、数分で完了します：

# Клонируем репозиторий и ставим зависимости
git clone https://github.com/aykutkardas/regexlearn.com.git
cd regexlearn.com
npm install

# Запускаем локальный сервер разработки
npm run dev

ローカルバージョンはhttp://localhost:3003で開きます。

ローカライゼーションアーキテクチャは簡単です。すべての翻訳は、 отдельныеJSONファイルとしてsrc/localization/フォルダーに存在します。新しい言語を追加したり、既存のロシア語翻訳の不正確さを修正するには、関連するJSON構造を編集して、developブランチにプルリクエストを送信するだけです。

プロジェクトスポンサー：

このリポジトリが役立つ人

RegexLearnは3つの典型的な状況でチェックする価値があります：

1. コーディングを始めたばかり人で、正規表現の構文に圧倒されている場合。
2. コーディングの経験はあるが、後読みと先読みの構文を常に混同している場合。
3. ジュニアのオンボーディング中で、明確なインタラクティブな練習資料を探している 경우。
4. Nginx、Apacheの設定や分析レポートの解析を頻繁に行う必要がある場合。

プラットフォームは無料で、MITライセンスの下でオープンソースであり、不必要な理論で溢れていません。基礎トラックを完了するには最大1〜2時間ですが、正規表現構造の理解は長い間身につきます。このトピックを学ぶことを先延ばしにしていたなら、プロジェクトページををチェックしてください。