楽しい実験でJavaScript学習を改善します

この記事は、マーク・ブラウンが査読しました。 SetePointのすべてのピアレビューアーズに感謝します。

Web開発の分野での学習は無限です。私たちの業界は絶えず更新され、改善されているので、そうすべきです！残念ながら、この傾向についていくのは疲れる可能性がありますが、そうである必要はありません。この記事では、小さな実験が新しい知識を学び、学習と最新の状態が常に楽しいことを確認するための楽しく効果的な方法であることを示します。

キーポイント

• 小さな実験は、Web開発とJavaScriptの新しい知識を学ぶための興味深く効果的な方法です。学習は、仕事の準備、タスクのスケジュール、締め切りの避け、楽しませる時間を与えるなどのルールを設定することで、より楽しく、疲れを触れません。
• 実験をレビューすると、スキルと知識を向上させることができます。より良い準備で実行中に問題が発生するかどうか、または実行された作業の品質を改善する方法が貴重な洞察を提供する方法を自問してください。
• インスピレーションと学習のための多数のリソースとツールがあります。 Codepen、Dribbble、Behanceなどの視覚的リソースから、Node.js、Electron、Cordova、ReactネイティブなどのJavaScriptランタイム、API、ライブラリ、フレームワーク、さらにはRaspberry PI、Arduino、Lego®MindStorms®などの物理的な世界ツールまでJavaScriptスキルを向上させるのに役立つさまざまなオプションがあります。

実験の楽しさを保ちます

サイドプロジェクトをしましたか？もしそうなら、私はあなたが最初は非常に興味深いプロジェクトを持っていたと思いますが、それはすぐに混乱に変わりました。トラブルに巻き込まれることは楽しいことではなく、サイドプロジェクトや仕事の動機を深刻に傷つける可能性があります。これの主な理由は、通常、射程やストレスの広がりであり、暇なときにリラックスする必要があります。いくつかのルールを実施することにより、不快な驚きに遭遇しないようにすることができます：

1. あなたの仕事を準備してください。実験の大きさとそれに含まれるものを正確に知っていることを確認してください。多すぎる場合は、それを管理しやすいチャンクに分割し、それぞれが開始と終了を伴うか、あきらめます。
2. タスクをスケジュールします。毎晩遅く起きないでください。週に1〜2回、毎回1〜2時間スケジュールするだけです。
3. 締め切りはありません。あなたを含む誰もがリラックスする必要があります。目標を設定しても大丈夫です。見逃しておいてください。
4. 自分にエンターテイメントの時間を与えてください。あなたは先延ばしにするべきではありませんが、人生は単なるTo Doリストに刻まれているだけではありません。労働の成果を楽しむために時間を費やしてください。

小さな実験を行うことは、彼らがより大きなプロジェクトの一部になれないという意味ではありません。たとえば、例としてデータ視覚化プロジェクトを取ります。少し時間がかかるかもしれませんが、小さなタスクに分割するのは簡単です：

• 建設ワークフローをセットアップ
• 興味深いデータを見つけて取得します（これはあなたにインスピレーションを与えることができるクールなAPIリストです）
• node.jsを使用してデータを取得および処理し、ES2015機能を使用します
• テクノロジー（Canvas、WebGL、Dom/SVG）またはライブラリ（D3.JS、P5.JS、Three.JS）を比較して選択して、データを視覚化します。
選択したツールでデータを視覚化します

Trelloボードを使用して、すべての実験を追跡します。そこで、実験を開始する前に、それらをリストして計画し、関連情報を追加します。大規模なプロジェクトでは、プロジェクト専用に新しいボードを作成し、各タスクにカードを追加する傾向があります。代替手段で十分です。物事を録音することで、私の心のノイズを排除できます！

レビュー実験

実用的な操作を通じて学習することに加えて、新しいことを学ぶことに加えて、実験は自分自身を改善する絶好の機会でもあります。実験を確認し、次の質問を自問してください。

実行中に問題が発生する可能性がありますか？もしそうなら、私は何をすべきですか？

実行された作業の品質はどのくらいですか？また、どのように改善できますか？

1. 実験をより効果的に準備できますか？
私たちがしていることをレビューして改善することは、私たちに経験をもたらすことです。それは私たちの業界で非常に貴重です。コミュニケーションと録音にも同じことが言えます。多くの実験的なレビューが素晴らしいブログ投稿を構成しています。
JavaScriptとはほとんど関係ありませんが、特に興味深い実験の1つは、SASSにベクトルグラフィックスを作成することです。そこでは、座標グラフをパスに変換し、それを単一のピクセルボックスシャドウにラスター化します。以前に慣れていなかったSASS機能について学んだだけでなく、いくつかのアルゴリズムを研究する必要がありました。

インスピレーションを探しています

次に何を学ぶべきかわからない場合は、インスピレーションのためにいくつかのリソースに遅れないようにすることが最善です。 視覚効果と芸術が好きなら、Codepenは開始するのに最適な場所です。選択された作品は、多くの場合、それらがどのように機能するかを詳しく見るに値する素晴らしいブラシストロークで満たされています。あなたがもっと冒険心を感じているなら、ドリブルやビーアンスを試してみてください。

SitePointは、さまざまなバックグラウンドの多くの著者によって駆動されています。したがって、JavaScriptチャネルには、あらゆる種類のJavaScriptエッセンスがいっぱいです。

実行時間環境

JavaScriptがブラウザで実行できることをすでに知っているかもしれませんが、JavaScriptもブラウザの外で実行できることをご存知ですか？

• node.jsは、最も人気のない非ブラウザーJavaScriptランタイムです。それを使用して、スクリプト、コマンドラインインターフェイス、デスクトップアプリケーションなどを記述できます。 Windows、OS X、Linuxで実行されます。
• 電子により、従来のHTML、CSS、およびJavaScriptを使用して、クロスプラットフォームのデスクトップアプリケーションを構築できます。
• Cordovaでは、HTML、CSS、およびJavaScriptを使用してモバイルアプリケーションを構築できます。
• React Nativeを使用すると、Reactフレームワークを使用してモバイルアプリケーションを構築できます。

ブラウザapi

過去数年間で、多くの新しいAPIがブラウザに導入され、あらゆる種類の興味深いことを行うことができます。

• サービスワーカーAPIは、オフラインサポートを提供するなど、さまざまな操作を実行できる大きなAPIです。
• webrtcは、別のコンピューターとのリアルタイム接続を確立し、オーディオとビデオのデータを渡すことができるAPIです。

一部のAPIを使用すると、センサーの読み取りやデバイスに特定の操作（振動など）を実行するなど、デバイスハードウェアを使用できます。

• 周囲の光センサーは、ウェブサイトまたはアプリケーションを調整するために使用できる周囲光の明るさに関する情報を提供します。
• バッテリーの状態は非常に自明です。より重いアプリケーションは、それを使用して電力保存モードを有効にすることができます。
• 地理的な場所は、ユーザーの場所に関する情報を提供します。
• ネットワーク情報を使用して、クライアントに小さなファイルを提供できます。
• 通知は、チャットアプリケーションなど、多くのアプリケーションに非常に役立ちます。
• マウスを使用して入力するゲームを構築していますか？ポインターロックはあなたの友達です。
• 近接センサーを使用すると、ユーザーとデバイス間の距離を理解できます。多分これは抱擁を検出するために使用できますか？
• デバイスの方向により、方向の変化を検出できます。
• 振動により、デバイスを振動させることができます。これはゲームに最適です。

ライブラリとフレームワーク

ほとんどのライブラリは、タスクを簡単に達成できるように設計されているため、使用した経験を持つことは常に有益です。 AngularやReactなどのより人気のあるライブラリやフレームワークは、仕事に必要なものでさえあります。 1つまたは2つの実験は、インタビューの準備にも最適な方法です。

ライブラリとフレームワークの寿命が限られていることを知っています。それらは有用ですが、あなたは彼らが解決する問題を理解し、それらなしでそれらを解決できるはずです。

構造

• Angularは、多くのチームがまだ使用しているMVCフレームワークです。
• Reactは、ビューをレンダリングするためのライブラリです。
• ポリマーは、Webコンポーネントを作成するためのライブラリです。
• lodash.js、underscore.js、およびramda.jsはすべて機能的なプログラミングライブラリです。一部のチームはそれらを使用することを好みますが、多くはそうではありません。いずれにせよ、機能的なプログラミングを十分に理解することは非常に人気のあるスキルです。

ビジュアル

• D3.JSは、SVGまたはHTMLを使用してグラフィックをレンダリングする場合に非常にうまく機能するグラフィックスおよびDOM操作ライブラリです。
• P5.JSは、処理にインスパイアされたライブラリ（柔軟なソフトウェアスケッチブックであり、「＆gt;視覚芸術のコンテキストでコーディングする方法を学ぶ」の言語です）。豊富な一連の機能があり、形状を描き、計算を実行します。
• Three.jsは、WebGLの困難な部分を抽象化するための高レベルの3D APIです。

物理的な世界

個人的には、物理​​的な世界で何かをするためにソフトウェアを書くことができるとき、私は本当に興奮していました。その場合は、次のセットの購入を検討してください。

Raspberry Piは、クレジットカードサイズで、教育や学習に最適なシングルボードコンピューターです。

• ArduinoはRaspberry Piに似ていますが、エレクトロニクスの側面に焦点を当てています。
• LEGO®MindStorms®は、LEGOハードウェアを制御できるマイクロコンピューターです。何が嫌いですか？
• Johhny-Fiveは、ロボット工学のJavaScriptフレームワークであり、Arduinoまたは同様のデバイスにインストールできるもののインターネットです。
上記のすべては、JavaScriptでプログラムするか、JavaScriptを実行できます。

結論

小さな実験は、新しいことを学ぶための優れた習慣です。もう1つの利点は、彼らがあなたがあなたの働き方を改善するのを助けることができることです。これは私たちの業界で非常に貴重です。いくつかのルールを実施することにより、実験を興味深い状態に保ち、より多くのことを学び、より良くなるように動機付けます。

困っている人にとっては、この記事が新しい興味深い実験を開始するように促すことを願っています。次に何に対処すべきかわからない人のために、この記事があなたにインスピレーションを与えることを願っています。それとも、実験についていくつかの良いアイデアがありますか？それとも私は何かが足りないのでしょうか？いずれにせよ、私は以下のコメントであなたを聞きたいです。

JavaScript学習実験についてよく尋ねる質問

JavaScriptスキルを向上させるために、どのような実用的なプロジェクトができますか？

JavaScriptスキルを向上させるためにできる多くの実用的なプロジェクトがあります。たとえば、シンプルな電卓、デジタル時計、または気象アプリケーションを作成できます。これらのプロジェクトは、JavaScriptがHTMLおよびCSSとどのように相互作用して機能的なWebアプリケーションを作成するかを理解するのに役立ちます。また、To Doリストアプリケーションを作成してみてください。これにより、JavaScriptを使用してドキュメントオブジェクトモデル（DOMS）を操作する方法を理解するのに役立ちます。

Google実験でJavaScriptを使用するにはどうすればよいですか？

Google実験は、JavaScriptのスキルをテストおよび実証できるプラットフォームです。 JavaScriptを使用してインタラクティブな実験を作成し、世界と共有できます。 Google実験でJavaScriptを使用するには、JavaScriptの仕組みとWeb要素を操作するためにそれを使用する方法を基本的に理解する必要があります。

インタラクティブなWebページを作成する上でのJavaScriptの役割は何ですか？

JavaScriptは、インタラクティブなWebページを作成する上で重要な役割を果たします。ユーザーアクションに基づいて、Webページ上の要素を操作できます。たとえば、JavaScriptを使用して、ユーザーがボタンをクリックしたときにWebページのコンテンツを変更したり、Webページ上の要素をアニメーション化したりできます。

JavaScriptを使用してアニメーションを作成するにはどうすればよいですか？

JavaScriptは、Webページでアニメーションを作成するさまざまな方法を提供します。 RequestAnimationFrameメソッドを使用して、スムーズなアニメーションを作成できます。このメソッドは、ブラウザにアニメーションを実行するように指示し、ブラウザに指定された関数を呼び出して、次の再描画の前にアニメーションを更新するように要求します。

Web開発におけるJavaScriptの重要性は何ですか？

javascriptは、Web開発の基本的なコンポーネントです。これにより、Webページで要素を操作することにより、インタラクティブで動的なWebページを作成できます。 JavaScriptがなければ、Webページは静的であり、ユーザー操作に応答しません。

JavaScriptコーディングスキルを改善するにはどうすればよいですか？

JavaScriptコーディングスキルを向上させる最良の方法は練習です。電卓やTo Doリストアプリケーションの作成など、さまざまなプロジェクトを実行することで、スキルを練習できます。また、Codepenなどのプラットフォームでのコーディングチャレンジに参加して、スキルをテストすることもできます。

JavaScriptを学習するためのリソースは何ですか？

JavaScriptの学習に利用できるリソースはたくさんあります。 Codecademy、FreeCodecamp、Mozilla Developer NetworkなどのWebサイトは、JavaScriptの無料チュートリアルとガイドを提供しています。また、YouTubeで多くのビデオチュートリアルを見つけることができます。

JavaScriptコードをデバッグするにはどうすればよいですか？

ブラウザ開発者ツールでコンソールを使用して、JavaScriptコードをデバッグできます。コンソールを使用すると、メッセージをログに記録したり、エラーを表示したり、JavaScriptコードをリアルタイムで実行できます。

フロントエンド開発におけるJavaScriptの役割は何ですか？

JavaScriptは、フロントエンド開発の重要な部分です。インタラクティブで動的なWebページを作成し、ユーザーの入力を確認し、Webサーバーと通信できます。

JavaScriptを使用してWebサーバーと対話するにはどうすればよいですか？

JavaScriptを使用して、Webサーバーにリクエストを送信して応答を受信できます。これは、Fetch APIまたはXMLHTTPREQUESTオブジェクトを使用して行われます。これにより、ページ全体をリロードせずにページの一部を更新できます。

以上が楽しい実験でJavaScript学習を改善しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。