CS-Playground-Reactインターフェイス
私は独学のプログラマーです。 これは私が偽者症候群に常に対処していることを意味します。 自分が劣っていると感じることは珍しくなく、コンピューターサイエンスの複雑な概念を理解するには不利です。
私は数学を知らなかった。 そして、私は常に強力な数学的スキルを、プログラミングに秀でる私の自然な能力に結び付けてきました。 同じ概念を学ぶには、他の人（生まれつきの数学スキルを持っている人）よりも一生懸命に働かなければならないと感じています。 この考えが私の脳に深く根付いているため、バイナリ検索ツリーをたどる、マージソートなどの再帰的な悪夢を精神的に分析する方法など、何も学べないことが確実でした。
CS-Playground-Reactを確認してください。CS-Playground-Reactは、アルゴリズムとデータ構造を学習および実践するための単純なブラウザーベースのJavaScriptサンドボックスです。
このアプリケーションは登録を必要とせず、成果を自動的に保存し、立ち往生している場合にソリューションを提供し、トレーニングが非常に苦痛を感じないようにするのに役立つ便利な記事、チュートリアル、およびその他のリソースへのリンクがあります 。
この翻訳は、 ビデオ監視サービス 、 仮想携帯電話事業者向けのアプリケーションを専門的に開発し、 CおよびC ++プログラム（IPTVプレーヤー）を開発するEDISON Softwareによってサポートされました。
このアプリケーションが革新的ではないことをすぐに認めさせてください。 （私はあなたがそう思っていたことを知っています！）そのようなスキルを教え、ブラウザで直接コードを書いて実行することを可能にする多くのアプリケーションがあります。
CS Playground Reactは、特定のテーマセットを学習するための最小限のツールです。 このアプリケーションを作成することは、私が興味を持って欲しいものを学ぶための私の方法です。 それが途中で他の人にとって貴重なリソースであることが判明した場合、それははるかに良いです。
このアプリはまだ進化しており、テーマや潜在的な機会に関しては十分に検討する余地があります。 したがって、私が考慮しなかったクールなタスクまたはデータ構造を知っている場合、または改善できるものに気づいた場合は、問題を開いたりプル要求を送信することをheしないでください。
アプリケーションを表示するだけの場合は、これ以上読む必要はありません- ここにあります （httpsからも利用できます。オフラインキャッシングのサービスワーカーを登録します）。
コードに興味がある場合は、さらにスクロールしないでください- ここにあります 。
次は、理由と方法について退屈なことです。
これを作成した理由
このアプリケーションを作成する動機は単純でした。勉強したいと思ったので、学習をより簡単に、より面白くしたかったです。 さらに重要なのは、なぜこれらの特定のスキルを習得したかったのですか。
過去18か月ほどで、コードの書き方を学んだと言っても過言ではありません。 私はまだ自分をプログラマーと呼ぶことをheしていますが。 そして、これは私が人生のためにコードを書いているわけではない（そして書いていない）からではなく、先ほど述べた偽者症候群の現象のためです。 もちろん、私は物事を行う方法を知っています。 しかし、最近まで、私は実際のコンピューターサイエンスについてほとんど知りませんでした。
コンピューターサイエンスの基礎を学んだ後、私は自分をプログラマーだと思うことに自信を持つだけでなく、他の人が同じように私を見るのを助けたいと思っていました。
独学のプログラマーは、近年、テクノロジー業界が飲み込みやすくなっている錠剤です。 特に、シリコンバレーのような場所では、すべての街角でブートキャンプのコーディングが行われています。
それでも、コンピューターサイエンスの正式な教育を受けずに業界に参入しようとするほとんどのプログラマーにとって、深刻な障害が残っています。
そのため、人文科学の学士号と技術科学の学士号の違いを減らすために、コンピューターサイエンスの1年生または2年生の学生が勉強できる概念のいくつかを自分で教えることにしました。 これは私の実用的な開発スキルの一部を補完し、他の人がプログラマーとして私をより真剣に考えるのに役立つと思いました。
私がカバーしたい基礎として、プログラミングに共通していることが知られている一連のトピックを使用しました。
バブルソート、選択ソート、挿入ソート、マージソート、クイックソート、ヒープソート、スタック、キュー、リンクリスト、ハッシュテーブル、バイナリ検索ツリー...
私はこの一連のタスクに非常に恐れており、かなり長い間それらを延期しました。
敗北を受け入れたくないので、私はついに掘り下げました。 教科書を検索し、毎日見つけられるすべての記事を読んでいます。
時間が経つにつれて、いくつかの概念が明らかになり始めました。 しかし、いくつかの問題がありました。
- 私は退屈しました 。 私は問題解決が好きですが、それに直面しましょう、バイナリ検索ツリーをトラバースするための
reverseLevelOrder
ソリューションは、最後のアプリケーションの実際の問題を解決するよりもはるかに面白くないです。 - 長い時間がかかりました 。 私はフルタイムで働いています（終日コードを書いてはいけません）、そしてコーディングのための私の自由時間は非常に貴重です。 私はそれに何ヶ月も費やすことを知っていたので、既存のスキルとの接触を失うのではないかと心配になりました。
コンピューターサイエンスに関するこのすべての資料は、武装するのに適していますが、実際に直面してみましょう。ほとんどの場合、Web開発者は雇用されています。 また、日常のWeb開発では、これらの概念のほとんどを実際に使用することはあまりありません。
私にとって、これらの概念を学ぶことは誇りの問題であり、私はあきらめませんでした。 しかし、Web開発の経験を積むことは私にとって依然として優先事項でした。
そこで、2つのアイデアを組み合わせることにしました。 アイデアは、目標を達成し、基本的なスキルを維持するのに役立つ簡単なアプリケーションを作成することでした。
私にとって、何か（特に複雑なもの）を学ぶ最良の方法は、それをあなたが愛するものと関連付けることです。 このアプリケーションを作成してタスクを完了すると、そのためのコンテンツも開発しました。
アルゴリズムとデータ構造を学習することは、私の最後のプロジェクトの必要な部分になりました。 面接の準備をするためのアプリケーションを作成するポイントは何なのか、それがタスクで満たそうとしないなら！
数日ごとに、新しいアルゴリズムまたはデータ構造を研究しました。 gaveめそうになり次第、トレーニングリソースを収集してアプリケーションに追加しました。 これで、作成した超シンプルなワークスペースで何度も練習することができました。 なんてかっこいい！？
ソートアルゴリズムとデータ構造がどのように機能するかを視覚化する非常にクールなサイトです。 このクイックソートは、100個の要素の配列で機能します。 ここでは、視覚化の完全なリストを見つけることができます。 USFのおかげで、これは素晴らしいです！
最も重要なこととして、私は長い間延期したものを引き受け、それを面白くする方法を見つけました。 そして、もちろん、このために目標を達成する上で大きなブレークスルーがありました。
私は自分でこのアプリケーションを作成しましたが、何らかの理由で皆さんと共有したいと思いました。 他の人がCS-Playground-Reactで利益を見つけた場合、自分の仕事（または少なくともその一部）を行ってコミュニティに提供したように感じます。
知識と経験を自由に共有し、見返りにほとんどまたは何も要求しないプログラマーが非常に多くいます。 そのようなオープンなコミュニティがなければ、独立してプログラムすることを学ぶことはほとんどできませんでした。
10年前は、独習に関しては選択肢がはるかに少なかった。 したがって、私は情報の時代に生きることに毎日感謝しています。そこでは非常に簡単にアクセスできる知識がたくさんあります。
これにより私は旅が可能になりました。そして、他の誰かがこの記事に出くわし、彼ら自身の旅が少し楽になったことを発見したいと思います。
技術スタックとチップ
興味がある場合は、React＆React-Reduxを使用してこのアプリケーションを作成しました（ 最初のバージョンはバニラJS、CSS、およびHTMLでしたが）。 また、 CodeMirrorとReact-Codemirror2を使用してエディターをブラウザーに埋め込みます（注：元のReact-CodeMirrorはサポートされなくなり、Reactの新しいバージョンではあまり機能しません）。
ダミーコンソール
小さな機能により、ユーザーがコードでconsole.logを呼び出すたびにreduxアクションを実行できます。 したがって、メッセージログを取得し、ブラウザでコンソールを表示してコード実行の結果を表示できます。 ダミーコンソールメッセージを消去する場合はいつでもclearConsole（）を使用できます。
import { store } from './index'; export const hijackConsole = () => { const OG_LOG = console.log; console.log = function(...args) { // map over arguments and convert // objects in to readable strings const messages = [...args].map(msg => { return typeof msg !== 'string' ? JSON.stringify(msg) : msg; }).join(' '); store.dispatch({ type: CONSOLE_LOG, messages }); // retain original functionality OG_LOG.apply(console, [...args]); }; };
console.logをオーバーライドして、記録されたコードをキャプチャして保存します
永続的なコード
このアプリケーションを非常に使いやすくしたかったのです。 したがって、データベースを導入してユーザーにログインを要求する代わりに、進捗を保存するためのより単純なアプローチを選択しました。 Reduxは各セッション中にアプリケーションの状態を制御し、
localStorage
を使用してセッションにコードを保存します。 アプリケーションは、次回のアクセス時にこの保存された状態を取得し、それでReduxリポジトリーを再ハイドレートします。 これにより、中断した場所に戻ることができます。
何らかの理由ですべての実績を削除する場合は、エディターでいつでも
resetState()
を使用できます。 コードを保存したくない場合は、コメントを残してください//実行する前に保存しないでください。 これにより、このファイルだけでなくコードの保存も防止されます。
import { store } from './fileWhereStoreLives'; // add this code in your app's entry point file to // set localStorage when navigating away from app window.onbeforeunload = function(e) { const state = store.getState(); localStorage.setItem( 'local-storage-key', JSON.stringify(state.stateYouWantToPersist) ); };
import { importedState } from './fileWhereStateLives'; // define your reducer's initial state: const initialState = { ...importedState; }; // define default state for each subsequent visit. // if localStorage with this key exists, assign it // to this variable, otherwise, use initialState. const defaultState = JSON.parse( localStorage.getItem('local-storage-key') ) || initialState; // set defaultState of reducer to result of above operation const reducer = (state = defaultState, action) => { switch (action.type) { case 'DO_SOMETHING_COOL': return { ...state, ...action.newState }; default: return state; } } export default reducer;
一方、Redux-Persistと呼ばれる、これを行うためのパッケージがあります（このことは後で発見しました）。 しかし、簡単な使用のために、数行のコードで何かをすることができますか、それともNPMパッケージをインストールして同じことをすることができますか？ とにかく最初のものを選択します。 ほとんどの場合、数百行のコードと新しい依存関係全体を節約できます。 これは永遠の妥協であり、最適化されたソリューションが単純化された方法よりも優れている場合を決定する必要があります。
パネルのサイズ変更
私が袖に入れた最後のトリックは、ワークスペースを柔軟で使いやすいものにすることでした。 ユーザーにエディターとコンソールの両方のサイズを変更できるようにしたかったので、見つけた小さなスクリプト
simpleDrag.js
、
React refs
、およびflexboxの魔法を使用してこれを可能にしました。
続きを読む
5分でCSSグリッドを学ぶ