各パートについて

1. 1カリキュラムへようこそ（イントロダクション）

   このレッスンで学ぶことができるカリキュラムの内容について説明します。 本カリキュラムはHTML/CSS、JavaScript、そしてVue.jsの学習を通して、最終的に簡単なアプリケーションを作成できるようになることを目標としています。 プログラミングは数学の知識は不要で、だれでも学べるものです。学習においては粘り強さとウェブ検索による情報収集の習慣化を推奨し、ポートフォリオ作成の重要性と具体的なアピールポイントも示唆しています。 さらに、学習効率化のためのAI活用を提案しつつも、AIの情報の正確性とプライバシーへの配慮を注意喚起しています。 全体を通して、初心者でも安心して学習…

2. 2カリキュラムの進め方

   カリキュラムの内容・特徴 フロントエンドエンジニアの入り口に立つカリキュラムです。 プログラム未経験者も対象で、プログラムとは何か？という点から解き明かしています。 理系・文系問わず受講可能です。 1日５時間以上の学習で、習得に約5ヶ月かかるボリューム（A4版換算で600ページ強）です。 Vue.js（Vue3、Composition API）の公式ドキュメントから逆算し、JavaScript学習の範囲を厳選してあります。これにより、 短期間でスキルを身につけることができます。 具体的なアプリケーションを用意しています。小さなアプリケーションから中規模のアプリケーションまで、さまざ…

3. 3受講準備をする

   レッスン（カリキュラム）を受ける準備をしましょう。 ウェブサーバーの用意とFTPクライアント(FileZilla)を用いたファイルアップロード、ブラウザ(Google Chrome)の設定、テキストエディタ(Visual Studio Code)のインストールと日本語化、オンライン会議ツール(Zoom)の使い方、そして学習進捗管理のための理解度チェックシートの使い方を、図解を交えながら詳細に説明しています。 ポートフォリオ作成と昇段試験提出のためにウェブサーバーが必要である点を強調しており、具体的なサーバーとしてさくらのレンタルサーバーを紹介しつつ、他のサーバーでも問題ないことを明記…

4. 41. HTML/CSS

   この章ではウェブブラウザーを構成する３つの技術（HTML/CSS/JavaScript）のうち、最初の２つを学びます。 HTMLとCSSの概要を簡潔に説明し、本格的な学習は外部リソースに委ねることを推奨しています。 ウェブ、ウェブページ、ウェブサイトといった基本概念を解説した後、 HTMLの基本文法（タグ、要素、入れ子構造）、主要な要素（見出し、段落、画像、リスト、リンク、フォーム要素など）、そしてCSSの基本概念（セレクタ、プロパティ、ボックスモデル、レイアウト、レスポンシブデザイン）を簡潔に説明しています。 最終的には、サンプルページのHTML/CSSコードを調べ、デ…

5. 5昇段試験【1. HTML/CSS】

6. 62. ブラウザのデベロッパーツール

   Google Chromeを始めとするウェブブラウザには、開発者向けの「デベロッパーツール」が内蔵されています。 デベロッパーツールは既存のコードを研究したり、取り組んでいる不具合を調査することができ、開発作業をスムーズにします。 この章ではHTMLとCSSのコードを調査・編集し、ウェブサイトの動作を理解することに焦点を当てています。 具体的な手順として、デベロッパーツールの開き方、要素の選択方法、CSSプロパティのオンオフや編集方法が図解付きで説明されており、実践的なスキル習得を目的としています。 最終的には、デベロッパーツールを用いた既存コードの調査や、自身のコーディングにおけるデ…

7. 7昇段試験【2. ブラウザのデベロッパーツール】

8. 83. JavaScript の概要を学ぶ

   いよいよプログラミングの世界に入っていきます。 本章ではJavaScriptはどんなものか？という概要を学びます。 JavaScript がブラウザに内蔵されたプログラミング言語であり、フロントエンド開発において必須であること を強調し、Java との混同を避けるよう注意喚起しています。 さらに、ES2015(ES6)以降のバージョンを学ぶ重要性 を指摘し、JavaScript が 文法と語彙を持つ「言語」であり、プログラムはコンピュータへの手順書である ことを、料理のレシピになぞらえて分かりやすく解説しています。 後半では、変数や関数といった用語の理解を促し、それらが数学用…

9. 9昇段試験【3. JavaScript の概要を学ぶ】

10. 104. JavaScriptを動作させる

    この章では 自分でプログラムを書いて動作確認する方法を学びます。 ここから先、実際にJavaScriptのプログラムを書きはじめるにあたってJavaScriptの動作確認の方法を知っておきましょう。 ブラウザのコンソールを使った手軽な方法と、HTMLファイル内にJavaScriptコードを埋め込む本格的な方法の2つを説明しています。 コンソールでは console.log()関数を使って値を出力し、プログラムの動作を確認する方法や、 エラーへの対処法、ショートカットキーなどを具体的に示しています。 HTMLファイルへの埋め込みでは、scriptタグの使い方、エラー時の行番号の確…

11. 11昇段試験【4. JavaScriptを動作させる】

12. 125. JavaScript基礎 I

    JavaScript基礎として、初心者が最初に学ぶべきことを学びます。これは本格的なJavaScript入門の前段階にあたる内容です。 JavaScript言語の機能を一つずつ取り上げて学んでいくことにしましょう。また、前章で学んだ方法で実際に動作確認も行ってみましょう。 JavaScript言語の基礎的な構文と概念を、具体的なコード例と丁寧な解説を通して説明しています。特に、 変数、データ型、演算子、制御構文（if文、for文）、関数、そしてそれらの組み合わせによるプログラムの構築方法に焦点を当てています。 受講者は、コードを実際に実行し動作を確認しながら理解を深めることを…

13. 13【補足】5.1.2.1 for文の解説

    特に分かりにくいfor文について、その書式に含まれる意味について詳しく解説します。 テキストの該当箇所は5.1.2.1 for文の解説です。

14. 14【補足】5.1.4.2 関数の「戻り値」

    関数の「戻り値」について解説します。何をどこに戻すのかを理解できるようになります。 テキストの該当箇所は5.1.4.2 関数の「戻り値」です。

15. 15【補足】5.1.5.2. 入れ子にした手順の例 ... forの入れ子

    大変ややこしいforの入れ子について解説します。 実際にはそれほど難しいものではありません。ただ見た目がややこしいだけです。 テキストの該当する箇所は5.1.5.2 for 文の入れ子についてです。

16. 16昇段試験【5. JavaScript基礎 I】

17. 176. JavaScript実例集

    本章ではここまでの理解をさらに定着させるために実例集に取り組みましょう。 面白いプログラムの例がたくさん出てきます。 プログラムは自作できると理解度の確認にもなりますので、必要なだけ立ち止まって、自分自身の手でお手本と同じプログラムが書けるようになりましょう。 このテキストはVue.js養成コースのJavaScript実例集で、初心者向けにJavaScriptプログラミングの基礎を、FizzBuzzゲーム、占いプログラム、シュールな話ジェネレーター、江戸っ子シミュレーター、10秒タイマー、セリフ演出、ぶるぶるみかん、マウスオーバーメッセージなどの具体的なプログラム例を通して解説しています…

18. 18【補足】6.2.1. 乱数を扱う方法

    乱数を扱うには Math.floor( Math.random() * 3); のような表現を使います。この表現の解説を行います。 テキストの該当箇所は6.2.1. 乱数を扱う方法です。

19. 19昇段試験【6. JavaScript実例集】

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

20. 207. JavaScript基礎 II

    この章では「6. JavaScript基礎 I」で学んだことに追加する細かなアップデート情報を学びます。 このテキストは、JavaScriptの基礎的な配列操作と文字列操作、そして 非同期処理について解説したチュートリアルの一部です。 配列に関しては、for...ofループ、forEach()メソッド、map()メソッド、indexOf()メソッド、splice()メソッド、filter()メソッド、reduce()メソッド、reverse()メソッド、join()メソッドといった様々なメソッドを使いこなす方法を、コード例を豊富に用いて詳細に説明しています。特に、 map()…

21. 21【補足】7.11. Web APIウェブエーピーアイを利用する

    Web API を利用するとWeb 上にある情報源を利用することができるようになりますが、使用方法に至るまでの道のりが大変長く、途中で今何を学習しているのかを忘れがちになります。 そこでWeb APIを利用するとはどういうことか、結論部分をまとめて解説します。 テキストの該当箇所は7.11. Web APIウェブエーピーアイを利用する ... FetchAPI()フェッチエーピーアイ,JSONジェイソン,Promiseプロミス,Async/Awaitエイシンク/アウェイトです。

22. 22【補足】7.12. 正規表現

    正規表現の概要を解説しています。 テキストの該当箇所は7.12. 正規表現です。

23. 23昇段試験【7. JavaScript基礎 II】

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

24. 248. Node.js とターミナル

    このカリキュラムの目的は最終的にVue.jsビュー・ジェイエスを学ぶことですが、Vue.jsを動作させるにはNode.jsノード・ジェイエスというアプリケーションが必要になります。この章ではそのための準備を行います。 また、Node.jsを利用してVue.jsを動かすには「ターミナル」という画面から操作を行う必要があります。 この章では Node.jsのインストール ターミナルの使い方 を学びます。 このテキストは、Vue.js を実行するために必要な Node.js のインストール と ターミナルの使用方法 を解説しています。 まず、JavaScriptの学習を終…

25. 25昇段試験【8. Node.js とターミナル】

26. 269. モジュール

    次章のVue.jsのカリキュラムに移る前に、Vue.jsのコードに出てくるexport、import文の使い方を学んでおきましょう。 これらは「モジュール」機能です。 この章ではモジュールに焦点を当て、モジュールが何のためにあるのか、またimport、export文の実際の使い方を学ぶことにしましょう。 モジュールとは、プログラムを複数のファイルに分割し、管理しやすくする仕組みで、 export文とimport文を使って、モジュール間で変数や関数を共有できる点が重要です。 前半では、単一ファイル化、複数のファイルへの分割とその問題点（変数名の衝突）を説明し、後半でモジュールを用…

27. 27昇段試験【9. モジュール】

28. 2810. Vue.js

    これまでに、JavaScript言語やターミナルの使い方、モジュールについて学んできました。 ここからいよいよこのカリキュラムの最大の目的である、 Vue.jsビュー・ジェイエスの学習に入りましょう。 Vue.jsは何でしょうか？また、どんな事ができるのでしょうか？ Vue.jsをJavaScriptのフレームワークとして紹介し、ケーキ作りの土台に例えて学習の容易さを強調しています。 中心となる概念はリアクティブ値とコンポーネントの2つで、チュートリアルを通して、 宣言的レンダリング、属性・イベントバインディング、フォーム処理、リストレンダリング、算出プロパティ、ウ…

29. 29昇段試験【10. Vue.js】

30. 3011. Vue.jsの実装例

    公式のチュートリアルを通してVue.jsが比較的シンプルなフレームワークであることを見てきました。 しかし、このシンプルなVue.jsが具体的にどのように活躍するのでしょうか？Vue.jsを使用したプログラミングの実際はどういったものでしょうか？ Vue.jsの公式ドキュメントには「実装例」が含まれています。それら実例から実用的なプログラミングを学ぶことにしましょう。 Vue.jsの簡単な例から高度な例まで、難易度別に分類し、各実装例のコードと解説、関連する公式ドキュメントへのリンクを提供しています。 初級レベルの実装例を学習することを推奨し、中級・上級レベルの実装例は後回しに…

31. 31昇段試験【11. Vue.jsの実装例】

32. 3212. Vue.jsのプロジェクトの初期化からデプロイまで

    自分でVue.jsアプリケーションを書くためのVue.jsの開発環境の作り方を学んでいきます。 また、Vue.jsで作成したアプリケーションは、そのままではウェブサーバー上で公開することができません。 公開するには、「ビルド」という工程を経て完成版を生成する必要があります。 この章ではVue.jsのプロジェクトを新規に開始する方法から、ビルドしてウェブサーバーにアップロードする「デプロイ」と呼ばれる工程までを一通り説明します。 初期化では、フォルダ作成とnpm init vue@latest .コマンドを用いたVue.jsプロジェクトのセットアップ、インストールでは npm inst…

33. 33昇段試験【12. Vue.jsのプロジェクトの初期化からデプロイまで】

34. 3413. 実践Vue.js - ToDoアプリ

    この章ではVue.js実装例にあるtodomvc（「ToDo（やることメモ）アプリ」）を細かなステップに分けて実装を学びます。 段階的に機能を追加していくステップバイステップ形式で、各ステップの目的、準備、実装コード、解説が丁寧に記述されています。 重要なテーマはVue.jsの基礎的な機能（v-for,v-model, computedプロパティ、watchEffect、イベントハンドリングなど）の実践的な学習であり、 データ構造の設計（ToDoタスクをオブジェクト、タスクリストを配列で表現）や、デバッグのためのconsole.log()の有効活用も強調されています。 最終的には…

35. 35昇段試験【13. 実践Vue.js - ToDoアプリ】

    昇段試験を受け、指示に従ってファイルを提出して下さい。合格した際に発行されるパスワードを以下の選択肢から選択して下さい。

36. 3614. 実践Vue.js - 草むしりゲームアプリ

    この章ではVue.js実装例にある「実装例21 - "Cells"（スプレッドシート） （難易度★★★）」のソースコードをヒントに実装した「草むしりゲーム」を実装します。 草むしりゲームの実装にはVue.jsの理解を深めることができる以下の特徴があります。 庭の盤面の直前の状態と直後の状態の両方を管理し、リアルタイムに変化する状況を扱う 上下左右のマス目の情報と連携する ゲームクリアー後にこれ以上のゲームを進めないように、ゲーム中であるかどうかの状態を管理する 難易度を下げた「実装例21 - "Cells"（スプレッドシート）」を参考に、段階的にゲーム機能を実装…

37. 37昇段試験【14. 実践Vue.js - 草むしりゲームアプリ】

    昇段試験を受け、指示に従ってファイルを提出してください。合格した際に発行されるパスワードを以下の選択肢から選択してください。

38. 3815. カリキュラムの卒業に向けて

    この章では就職活動に向けたポートフォリオ作り、及びより多くのVue.jsアプリを作ることについてのガイドが示されます。 ポートフォリオ作成の重要性と具体的な作成方法、そして卒業後のスキルアップのための学習内容が中心テーマです。 具体的には、自身の課題を通して制作したポートフォリオに自己アピール要素（問題解決能力、業界理解など）を盛り込む方法や、Vue.jsアプリ開発経験の更なる積重ね、関連技術（TypeScript、Nuxt.jsなど）やHTML/CSS、セキュリティの学習、更には追加課題（ブラックジャックゲーム、日付情報取得アプリ）への挑戦を通して、実践的なスキルとポートフォリオを完成…

39. 39ポートフォリオ提出

    ポートフォリオを提出し、OKをもらった際に配布されるパスワードを入力してください。修了証書を発行します。