Webアプリ系フロント開発教育用シラバス（DIYおじさん向け）

概要

ここで記述することは、個人的な指向によるものなので、世の中的な流行りとかとギャップがあることを留意してください。また、具体的な学習方法については記述しません。
自分は以下のことを考慮しています。

• CSS などで悩みたくない
• フォームの位置に悩みたくない
• なんとなく画面を作りたい

これは「フロントエンド開発のプロ」のためのシラバスではなく、「アプリ開発（フロントエンド）の DIY おじさん」のためのシラバスです。比較的アプリの耐用年数が少なく、特定少数の人が使うツールは早く作れるようになると思います。テーマは「工学的にアプリを作る」です。

項目

• プログラミング言語
  • ツールの使い方
  • データ型
  • 制御構文
  • クラス
  • コンポーネント指向
• フレームワーク
  • 基本フレームワーク
  • UI フレームワーク
• サードパーティライブラリ
• 課題
  • Todo アプリ
  • 公開されている WebAPI のフロントエンド作成
• もう少し踏み込んだ課題
  • Firebase を利用したアプリ

プログラミング言語

まずは言語学習についてです。基本的に押さえておきたいことは以下の項目になります。

• ツールの使い方
• データ型
• 制御構文
• クラス
• コンポーネント指向

こちらについては「覚える」というより「聞いたことがある」程度の時間のかけ方で良いです。期間としては 5 日（1 日 3h 程度）を目途に行うことを推奨します。学習時、クラスやコンポーネント指向は使いどころの分からない所だと思いますが、「そういった機能がある」というくらいで思っていると良いです。時間を割くのであれば、しっかりその言語で一般的に使われるツール類の使用方法を勉強すると良いと思います（少なくとも VScode の使い方は覚えた方が良いと思います）。

クラスやコンポーネント指向については、聞ける相手がいるのならば理解が速いです。結局「概念」的な話しも含むので、「良い先生」を探すのが肝要です。フロントエンドの場合は、クラスはあまり意識する必要がないかもしれませんが。

現状、GUI 作成であれば、以下の言語を選ぶと良いと考えます。

• JavaScript
• Dart

JavaScript を選択すると、ネット上の情報も多い上、選択できるフレームワークも増えます。ただ「Web 製作」の情報も混同しているため、情報収集は気を付ける必要があります。開発環境は「Node.js」が前提になると思うので、「nvm」を使用して環境構築できるようになると良いと思います。

Dart を選択すると後述するフレームワークは「Flutter」になります。こちらは基本的にはモバイルアプリ向けの UI フレームワーク（厳密には画面を作成するフレームワークのため、web アプリの作成も可能です。ただ、こちらはまだ癖が強い様子であることと、他言語のフレームワークが強いので、無理する必要はなさそう）になります。個人的に、まだエコシステムが貧弱なように思いますが、投資する言語してはある一定のリターンがあるものと思います。

フレームワーク

ここで、フレームワークを以下の 2 つに分けることとします。

• 基本フレームワーク
• UI フレームワーク

基本フレームワーク

ここでいう基本フレームワークとは、「React」、「Anguler」や「Vue.js」などのようなフレームワークのことを指します。これらのフレームワークでは、以下のような機能を最低限有していることとします。

• DOM 操作
• ルーティング
• ストア
• コンポーネント機能（テンプレート機能）

少なくとも以上の機能を使えるようになれば、機能部分は実装できるようになると思います。個人的にフロントエンドのコードは冗長化しやすい気がするので、少なくとも以上の機能を使えればソースコードの整理がしやすくなると思います。この機能を利用したファイルを記述した方が良いと思います。試すだけですので、正直 1 日もいりませんが、2 日（一日 3h 程度）くらいの期間くらい複数パタ－ンで試すと良いと思います。

UI フレームワーク

UI フレームワークは、実際に見た目の所を表現するフレームワークを指します（「Bootstrap」など）。それぞれの基本フレームワークごとに使いやすいもの・好みのものがあると思うので、好きなように選ぶと良いと思います。自分の場合は、少なくとも以下のような見た目が使いやすければ良いと思います。他にも色々ありますが（テキストフィールドなど）、特殊な部分としてはという意味で。以上の基本フレームワークで作成したファイルを UI フレームワークを使用した形に書き直す程度で良いと思います。

• グリッドシステム
• テーブル
• カード
• ダイアログ
• アラート
• カレンダー

サードパーティライブラリ

以上までのものだと、機能がいくつか不足するものがあります。たとえば、以下の 2 つです。

• マップ
• データの永続化

選択したフレームワークでは、基本的に以上のような機能を補うライブラリが用視されているため、必要であれば追加で学習します。それぞれでデファクトスタンダードがあるので、調査の練習としても挑戦すると良いと思います。

課題

課題として、以下の 2 つに挑戦するとひとまず良いと思います。

• Todo アプリ
• 公開されている WebAPI のフロントエンド作成

Todo アプリにて、可能であればデータの永続化に挑戦出来れば良いと思います。参考書程度の内容だと F5 が押された段階でデータが消去されている場合があるので。

WebAPI のフロントエンド作成は、通信プログラムに慣れることができます。通信は非同期である場合の方が多い上、Json ファイルに慣れるためにも挑戦できると良いと思います。個人的にDog API辺りで練習するのが良いと思います。

もう少し踏み込んだ課題

もう少し踏み込んで開発する場合は Firebase を利用したアプリだと良いと思います。

Firebase は Google が提供するモバイル・Web アプリケーション開発プラットフォームです。サーバーサイドレンダリングに拘らなければ、フロントエンドの知識だけでアプリが作成できます。ただ機能に拘るとキリがない上、モチベーションが持続しないと思うので、作業環境の方を考える必要がありますが。

おわりに

最初にも書きましたが、これは「フロントエンド開発のプロ」のためのシラバスではなく、「アプリ開発（フロントエンド）の DIY おじさん」のためのシラバスです。「チャンピオン」になるためのトレーニングメニューというより、「アプリ開発の初学者」を名乗れるようにするためのものです。

あとは、基本的にデータ（and 相関関係）を強く意識してアプリを開発することを念頭に置けば、そこそこアプリの体は成すと思います。ストアに出す場合はこれじゃ足りないですが、まぁ、個人のツールならこんなもので十分だと思います。