Javascriptフロントエンドゲームをしよう

背景

先週、フルタイムのポジションに応募するための技術課題がありました。これは面接過程の一部です。

ここに全ての課題を書きませんが、問題の発端は実際のワールドケースシナリオです。そして今日は、その問題で遊びます。

質問

世界の任意のディレクトリのファイルシステムを表現するJSONファイルがあります。

今、問題はこの1つのJSONファイルに関するものです。

各質問はゲームの段階を表します。

1つの段階をクリアすることで次の段階に進むことができ、そしてゲームを完了します。

ステージ１

JSONから画面上にツリー構造を表示します。

JSONをイテレートして、JavascriptのDOMや二分木のようにウェブサイト上にどのようにレンダリングしますか？
ツリーにはファイル構造に記載されている全てのディレクトリとフォルダを含むべきです。
ツリーはブラウザ上で見るようなファイルフォルダと同じアコーディオン機能を持つべきです。

ステージ２

ディレクトリの開閉

全てのディレクトリを開閉するためのメソッドを定義してください。

ステージ３

ファイル/フォルダの削除機能を追加

上記のJSONからファイル/フォルダを削除するJavascript関数を書いてください。

ステージ４

任意のファイル/フォルダの名前を編集

どのようにファイル/フォルダの名前を更新しますか？

ステージ５

任意の位置に新しいファイル/フォルダを作成

例えばcomponentsというディレクトリ内やルートディレクトリ内に、新しいファイル/フォルダをどのように追加しますか？

最後の段階 — ステージ６

ファイル構造にドラッグアンドドロップ機能を追加

ファイル構造にはchildrenというキーがあり、これは配列です。入力パラメータとして与えられた位置にこの配列の要素を移動する方法を定義してください。

まだ終わりではない

これでゲームを成功裏に完了したということになります。

しかし、それがこのゲームを開発した理由ではありません。

これらの各メソッドを書いた今、それらのメソッドをReactコードに変換してください。

つまりあなたが快適に作業できるフロントエンド言語やフレームワークで各メソッドを書き、自分だけのコードエディタがcodesandboxのように準備されます。

これが可能であるかどうか疑問に思っているなら、自分で試してみてください。

上級

より高度なバージョンでは、確実にさらに多くの段階が可能になるでしょう。

ステージ7では、各ファイルの内容を含めることができ、その内容を画面上のエディタで表示しなければなりません。

エディタは開発者が内容を編集し、全体のJSONを保存し、それをサーバーに送り返すことを可能にします。

サーバーはこのJSONをデータベースに保存します。あなたが望むまでゲームを続けてください。つまり、あなたがそれをどのレベルまで進めたいかに関わりなく、それができます。

しかし、ここで終わりにしなければなりません。

乾杯
Shrey
iHateReading

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/shreyvijayvargiya/lets-play-a-javascript-frontend-game-3i7o