JavaScript チュートリアル

この実験では、ダイナミックな個人財務トラッカーを作成する任務を負った新進のウェブ開発者である Alex の視点から、ウェブ開発の世界に足を踏み入れます。ユーザーが日々の支出と収入を入力し、追跡できる使いやすいアプリケーションを構築します。目標は明確で、直感的で魅力的なインターフェイスを開発し、ユーザーが何の手間もかけずに簡単に財務を管理できるようにすることです。このプロジェクトは、個人財務管理を簡素化するだけでなく、JavaScript と DOM 操作の基本概念をあなたに紹介することを目指しています。

このプロジェクトでは、HTML、CSS、JavaScript を使って簡単な折りたたみ式のアコーディオンを作成する方法を学びます。折りたたみ式のアコーディオンは、ユーザーがコンテンツのセクションを展開および折りたためる一般的な UI 要素であり、コンパクトかつ整理された形で情報を表示するのに便利な機能です。

このプロジェクトでは、一定の時間間隔後に信号の色を赤から緑に変える信号機システムを作成する方法を学びます。このプロジェクトは、JavaScript の基本と、時間ベースのイベントに基づいて異なる要素を表示するための DOM の操作方法を理解するのに役立ちます。

このプロジェクトでは、ユーザーが投票オプションを作成・管理し、必要に応じてオプションを削除できる投票アプリケーションを構築する方法を学びます。また、アプリケーションには、複数選択のサポートや公開投票結果の機能も備えています。

このプロジェクトでは、HTML、CSS、JavaScript を使って簡単な「Fruit for Fun」ゲームを作成する方法を学びます。このゲームでは、ゲーム盤の四角をクリックすることで果物の画像のペアをマッチングします。

このプロジェクトでは、HTML、CSS、JavaScript を使って簡単な果物積みゲームを作成する方法を学びます。目標は、ページ上部の落下する果物アイテムを下部のボックスに積み上げることです。ボックスに同じ果物が 3 つある場合、それらは自動的に削除されます。

このプロジェクトでは、Flask ウェブアプリケーション内で TensorFlow.js を使って事前学習済みの MobileNetV2 モデルを展開するプロセスを案内します。MobileNetV2 は主に画像分類に使用される軽量のディープニューラルネットワークです。TensorFlow.js を使うことで機械学習モデルをブラウザ内で直接実行し、対話型のウェブアプリケーションを作成できます。Python のウェブフレームワークである Flask が、アプリケーションをホストするバックエンドとして機能します。このプロジェクトが終了すると、MobileNetV2 モデルを使って画像を即座に分類する稼働するウェブアプリケーションを手に入れることができます。

この実験では、「FinTech Valley」の賑やかなスタートアップシーンを舞台に、急速に成長するテック企業の金融追跡システムを強化することが課題となっている若手ソフトウェアエンジニアのアレックスになりきります。同社の財務チームは、組織全体の財務状態を動的に把握する方法を求めています。あなたの目標は、既存のウェブベースの会計アプリケーションに、総収入、総費用、純残高を計算して表示する機能を実装し、リアルタイムでの財務洞察を提供することです。

この実験では、アレックスの個人向けの収支追跡アプリケーションの開発が進み、高度なイベントハンドリング技術を使ってアプリケーションのインタラクティビティを向上させる段階に入ります。シーンは、テックスタートアップのブレインストーミングセッションで設定されており、アレックスは収支記録を並べ替えるためのドラッグアンドドロップ機能の追加を提案しています。この野心的な目標は、ユーザーに記録を整理する直感的な方法を提供し、個人向けの収支管理の流動的な性質を反映しています。これを達成するには、アレックスが高度な DOM イベントを探索し、視覚的に魅力的でユーザーフレンドリーな方法で要素を操作する必要があります。

この実験では、活況のあるテックスタートアップに勤める意欲的なウェブ開発者であるアレックスと一緒になります。彼は今、データの永続化の分野に挑戦しています。個人向けの財務トラッカーで財務記録を追跡し表示するメカニズムを成功裏に作成した後、次の課題は、これらの記録がブラウザセッション間で永続化されることを確認することです。目標は、ユーザーがアプリに戻って、以前に入力したすべてのデータがそのままあることを見つけることができるようにすることで、アプリの使いやすさとユーザー満足度を向上させることです。このタスクは、アレックスにウェブストレージの概念を紹介し、特に localStorage API を利用してアプリケーションの状態を保存および取得することを教えます。

2048 は世界を席巻した、非常に人気のある簡単なゲームです。まだ遊んでいない場合は、携帯電話でダウンロードして試してみることができます。このプロジェクトでは、HTML、CSS、JavaScript、および jQuery を使って 2048 ゲームのウェブ版を作成する方法を案内します。

この実験では、テックスタートアップの Web 開発者としてのアレックスの旅を続けます。シーンは開発チームのワークスペースで展開され、アレックスは複数の財務記録を扱う機能を組み込むことで個人用の財務トラッカーを強化する任務を担っています。この重要な機能により、アレックスは JavaScript の配列とオブジェクトに深く突き込み、各財務記録を配列内のオブジェクトとして保存する必要があります。目標は、ユーザーの財務データを効率的に追跡するだけでなく整理する、動的でインタラクティブなアプリケーションを作成することです。この取り組みを通じて、アレックスはユーザーに自分たちの財務活動の明確な概要を提供し、それによりアプリケーションをより便利で魅力的なものにすることを目指しています。

このプロジェクトでは、Echarts ライブラリを使ってリアルタイム販売ダッシュボードを作成する方法を学びます。ダッシュボードは、視覚的に魅力的で理解しやすい形式で販売と数量データを表示します。

このプロジェクトでは、HTML、CSS、および JavaScript（jQuery）を使用して、インタラクティブな映画コレクションを持つ Web アプリケーションを作成する方法を学びます。このアプリケーションは、ユーザーがお気に入りの映画をマークできるようにし、お気に入りの映画のコレクションが作成されると、成功メッセージが表示されます。

この「jQuery フリップパズルゲーム」プロジェクトは、JavaScript、jQuery、および Bootstrap に焦点を当てたウェブ開発の実践的な経験を提供します。JavaScript におけるオブジェクト指向プログラミングを含み、ウェブ開発のコンテキストにおける「this」バインディングの一般的な問題に対処します。ゲームは、ユーザーインターフェイスに jQuery と Bootstrap 3 を使用して実装されています。Bootstrap に慣れていると役立ちますが、プロジェクトのコアロジックは jQuery と JavaScript で構築されています。

このプロジェクトでは、JavaScript と jQuery を使って簡単な抽選アプリケーションを作成する方法を学びます。このアプリケーションは、賞品のリストを回転させ、回転が止まったときに当選賞品を表示することで抽選をシミュレートします。

このプロジェクトでは、React を使って色フィルタアプリケーションを構築する方法を学びます。このアプリケーションでは、ユーザーが探している色の名前を入力することで、色のリストをフィルタできます。このプロジェクトを通じて、React における状態管理、イベントハンドリング、条件付きレンダリングの仕組みを理解することができます。

このプロジェクトでは、入力しながらリアルタイムの HTML プレビューを提供するシンプルなウェブベースのマークダウンエディタを作成します。Ace Editor、marked、highlight.js などのライブラリを使用して、マークダウンでの記述だけでなく、ブラウザセッション間でデータを保存し、プレビューでコードスニペットをハイライトする直感的なエディタを開発します。