初めに

本記事はZEN Studyという学習サービスで、プログラミングコースの中でもWebアプリケーション開発コース1~4を完走した人向けになっています。

ですが、完走してない人や↑のコースを未受講な方でも読めるように書いていますので、その辺はご安心ください。
この記事が何かの役に立てば幸いです。

今年もアドベントカレンダーの季節がやってきました。
皆さんはどうお過ごしでしょうか。プログラミング、やってますか？

12月にもなれば、Webアプリ開発コースをみごと完走した方も出てくる頃でしょう。
あるいは生授業を追うのに精一杯で、完走なんてあと何年先になるかわからない...という方もいると思います。
もしかしたら、完走したはいいものの次にやることが見つからない...と思っている方もいるかもしれません。

本記事では、Webアプリ開発コースを完走した方のために、もしくはWebアプリ開発コース以外のこともやってみたいという方のために、今からどんなことができるのか紹介していきます。

フロントエンド

フロントエンドとは、ものすごく簡単に言うとブラウザ側で行う処理のことです。
Reactなどのライブラリ/フレームワークを使って開発することが多く、本格的にやろうとすると今までとは別の知識が必要になります。

Webアプリ開発コースでは、フロントエンドの内容はほぼ扱わなかったと思います。
しかしベースになるのはJavaScriptなので、それだけ始めやすいはずです。

フレームワークを使わずにフロントエンドの開発をすることも可能です。
これは一般にVanilla JSと呼ばれています。

React

Reactはフロントエンドに関するライブラリです。
JSXと呼ばれる記法を用いて、コンポーネントと呼ばれる部品でWebアプリケーションを構築します。

以下はよくReactの例に使われる、カウンターアプリの例です。

import { useState } from 'react'

// Counterコンポーネント
function Counter {
  // useStateフックを使ってカウントの値を保管
  const [count, setCount] = useState(0)

  // JSXを返す
  return (
    <div>
      <p>count: {count}</p>
      {/* ボタンをクリックしたらcountを1増やす */}
      <button onClick={() => setCount(count + 1)}>
        add
      </button>
    </div>
  )
}

ReactとNext.jsはWebアプリ開発コースの付録で少し触れられていますが、あまり深くは扱われていません。
この機会に一度触ってみるのもいいでしょう。

個人的には、Reactを始めるならViteを使うのがおすすめです。
難しいことを考えなくてもViteを使えばすぐにReactが始められます。

Next.js

Next.jsはReactベースのフレームワークです。
Reactベースなので基本となるのはReactのコンポーネントですが、Next.jsではそれ以外にも多数の機能がついています。

なお、Next.jsはフルスタックフレームワークです。
そのためこれ一つでクライアントとサーバー両方の処理を書くこともできます。

以下のコースを頼りに、いろいろ試してみるのもいいかもしれません。

Vue.js

Vue.jsはフロントエンドフレームワークです。
以下のような特徴があると言われています。

学習コストが低い
有名なのでライブラリやツール、情報が豊富

また、Vue.jsもWebページの部品をコンポーネントとして分け、それを使ってWebアプリを構築していきます。

ドキュメントはこちらです。

また、入門する際にはこの記事が参考になるかもしれません。

上に挙げた以外にもフロントエンド（orフルスタック）フレームワークはたくさんあります。
全てを紹介することはできないので、以下にそこそこ知名度がありそうなものを載せておきます。

Angular
Svelte
Remix
etc...

バックエンド

バックエンドはフロントエンドの逆で、サーバー側でする処理のことです。
Webアプリ開発コース3以降では、主にバックエンドの話が多かったと思います。

Hono

Webアプリ開発コース4では、Honoを使ってWebアプリ開発をしたと思います。

教材にも書いてある通り、Honoは軽量で高速なバックエンドフレームワーク¹です。
Honoを使うと、何も使わないより簡単にWebアプリを作ることができます。
そんなHonoについてもっと学んでみるのも一つの手でしょう。

深掘り

Honoを使ってオリジナルのアプリを1つ作るだけでも大変勉強になります。
そして何個も作っていけば、もっとHonoの使いこなし方がわかる上、自然とバックエンドそのものの知識もつくと思います。

もしくは、Webアプリコースで作ったアプリを1から作り直してみるのもいいかもしれません。
自分の理解度を把握する助けになると思います。

いずれにせよ、やって損はないでしょう。
やる場合はHonoのドキュメントが参考になると思います。

貢献

ある程度Honoの理解が深められたら、Honoそのもののソースコードを読むこともできます。
Honoはオープンソースで開発されているので、誰でも自由にソースコードを見ることができます。

また、読んでいるうちに改良できそうな場所を見つけたら、それをIssueやプルリクにしてHonoに貢献することだってできます。

設計

Webアプリコースでは、あまり設計論に関する話はなかったと思います。

プログラミングにおいて、どんなコードを書くべきか、どんな単位でモジュールを分割すべきか、といった理論はたくさんあります。
それは到底1日で終わる量ではなく、自分で探求しようと思ったら一生かかるくらい奥が深い分野です。

もちろん、バックエンドに関する手法やアーキテクチャもたくさんあります。
これらを学ぶとより良いコードが書けるようになるはずなので、ぜひやってみてください。

原則

プログラミングにおいて、どんなコードを書くのがいいかという原則はたくさんあります。
私も全てを知っているわけではないので詳しくは書きませんが、以下に有名なものを挙げておきます。

DRY（Don't Repeat Yourself）: 同じ知識を複数回書かない
SOLID: オブジェクト指向における5つの原則

また、法則や原則をまとめた記事もあります。

デザインパターン

デザインパターンとは、先人たちが良い設計パターンをまとめたものです。
これを学んで自分の設計に適用することで、より良いコードが書けるようになると思います。

個人的には以下を併用して学ぶのがおすすめです。

古い、現在では使えないパターンがいくつかあるという意見もありますが、それでも設計を学ぶための入門として適していると思います。

理由はだいたいこんな感じです。

情報が多く、わかりやすい解説がある
割と具体的なので、結局どうするの？となりにくい

TypeScript

TypeScriptは、JavaScriptに静的型付けを導入したプログラミング言語です。

Webアプリコースの付録にも書いてある通り、静的型付けな言語ではコードの実行前にコードの整合性を確かめられます。
JavaScriptは動的型付けな言語ですが、TypeScriptを使うことでより安全なコードを書くことができます。

例えば、引数の数値を足し算して返すadd関数があります。
これをJavaScriptで書いて呼び出すと、引数が数値でなくても呼び出せてしまい、本来の使い方以外で使用される可能性があります。
これは大変危険です。

function add(x, y) {
  return x + y
}

add(1, 2) // 3
add('ABC', true) // ABCtrue, エラーにならない...

一方、TypeScriptでは引数に型を書くことができます。
型を書くことで引数に入れられる値を絞ることができ、コードが安全になります。

function add(x: number, y: number) {
  return x + y
}

add(1, 2) // 3
add('ABC', true) // Error!

これが静的型付けの主なメリットです。
ほかにもエディタやIDEで補完が出るなどのメリットもあります。

ツール

TypeScriptを使う以外にも、開発が便利になるツールはたくさんあります。
全ては挙げきれないのでここでは一例を紹介します。

ESLint: コードの書き方（セミコロンの有無など）を縛る
- ルールが豊富な上、プラグインもある
- コードに一貫性が出る
Node.js以外のランタイム（Bun / Deno）
- デフォルトでTypeScriptに対応している
- 速いらしい
Jest以外のテストフレームワーク（Vitestなど）
- 速いらしい
VSCodeの拡張機能
- Docker & Dev Containers: Dockerを使った開発を補助
- Git GraphやGitLens: Gitに関する機能を提供
- Markdown All in One & Markdown Preview Enhanced: Markdownの執筆を補助

ここに載っている以外のツールを探したり、自分でツールを自作したりするのもいいと思います。

その他制作

Web開発以外にもJavaScript(Webサイト)でできることはたくさんあります。
それには例えば、以下のような特定分野に特化したライブラリが使えます。

p5.jsを使った映像制作
Tone.jsを使った楽曲制作

ちなみに私もTone.jsの入門記事を書いているので、こちらも参考にしてみてください。

ZEN Study

何も必ずZEN Studyから離れないといけないわけではありません。
むしろ留まる人のほうが多いのではないでしょうか。

ほかのコース

素直に他のコースをやってみるのも一つの手です。
なにせZEN StudyにはWebアプリ以外にも豊富なコースが揃っています。

大規模Webアプリ開発（Scala）
スマホアプリ開発（Android, iOS）
ニコニコ動画再現
Webデザイン

ここを見てよさそうなコースを見つけるのもいいでしょう。

2週目

Webアプリ開発コースは量が多く、1週だけでは意外と内容を忘れてしまいます。
そのため、このまま2週目をやって復習することもできます。

もし1週目で理解できなかった場所があるなら、そこを見返すだけでもOKです。
軽く眺めるだけでもだいぶ違います。

終わりに

Webアプリ開発コースが終わったからといって、プログラミングの学習を終わらせるのは非常にもったいないと思います。
なぜならプログラミングに終わりはないからです。
ここで手を止めず、学び続けた人のみが見える景色が必ずあります。

応援してます！²

正確にはフルスタックフレームワークだという話もあったような...あれ、それはHonoXだっけ...（忘れた） ↩
とは言ったものの、無理はしないようにしましょう。適度に休憩を取るのは大事です。
ようやく記事書き終わったし、私もやっと休憩できる... ↩