コンテンツにスキップ
Twin:te 勉強会 2026

Twin:te 勉強会 2026

3 日間で学ぶ、モダンな Web フロントエンド開発の入門
フロントエンドをやってみる バックエンドをやってみる インフラをやってみる Gitをやってみる GitHub

このサイトについて

このサイトは Twin:te 勉強会　2026 の資料です。

  • Web フロントエンド
  • Web バックエンド の両方に対応しており、 Web開発やプログラミングやコンピュータの経験、それぞれの興味に応じて、 どちらかのコースを選択して進めてもらうことを想定しています。

各コースの各日程の内容は、より小さいフェーズに分割されています。 特に経験がない人は上から順に読み進めることを想定していますが、 最初の方の内容は経験者にとってはすでに知っていて退屈かもしれません。 自分が分かるところまで適宜飛ばして進めてもらって構いません。 とにかく、おもしろそうなところを手を動かしながら読むことを強く推奨します。 左サイドバーから直接フェーズ単位の章へ飛ぶこともできます。

フロントエンド

Web 開発をしたことがない 1 年生も取り組めるように、 3 日間で HTML / CSS / JavaScript の入門から、Vue + TypeScript によるモダンな Web 開発までを体験することを目標として書かれています。

2024, 2025年度に行われた IPC / jsys 合同 Web 研修 の研修資料を、 Astro Starlight で再構成しました。

Day 1 — Web の基礎

HTML でドキュメントの構造を記述し、CSS で装飾し、JavaScript でインタラクションを与える、Web の三本柱を体験します。

Day 2 — 開発環境を整える

シェル操作 を学んで CUI に親しみ、TypeScript で堅牢な静的型付きプログラミングへ踏み出します。

Day 3 — Vue

Vue の基本を学び、コンポーネント・状態管理・副作用を理解した上で、実用的な SPA を作成します。

バックエンド

Web開発と言ったときに、ブラウザに表示されるインタラクティブできれいなUIを作ることを想像する人が多いかも知れません。

しかし、SNSやオンラインショッピングサイト、メッセージングツールのWeb版…というようなWebサービスは、 ブラウザで動くフロントエンドだけで実現されているのではありません。

ユーザからは見えないどこかにあるサーバで動いている、バックエンドとよばれるソフトウェアの部品が、 ユーザや様々なモノのデータを管理し、ユーザの必要に応じて提供することで、Webサービスは動いているのです。

一見地味に思えますが、縁の下の力持ち的な重要な役割を占めているのです。

そんな「Webバックエンド」の開発に、興味は湧きませんか?

バックエンドコースでは、 Web開発の経験がない人でも取り組めるように、「バックエンドって何をしているの?」から始めて、匿名掲示板のようなWebアプリを作ることを目指します。 ただ、なんらかのプログラミング言語は触ったことがあるくらいの経験値を期待しているのでちょっぴり難しいかもしれません。 フロントエンドコースでTypeScriptまでやったのでこっちを見てみるというのもありでしょう。

1章: 知っておきたい! 知識編

Webバックエンドのための基礎知識を学びます。

2章: 楽しい、楽しい 実践編

「匿名掲示板」を題材にWebバックエンドの実装をやってみましょう!

3章: 高度な話題! 発展編

Webバックエンドに関連する高度な話題を触れておきます。

インフラ

フロントエンドもバックエンドも、コードを書いて終わりではありません。 どこかのサーバの上で動かし続けて、初めてサービスになります。

インフラコースでは、手元の PC で動かした Twin:te を、クラウド上のサーバに引っ越して動かします。 SSH・ファイアウォール・コンテナのデプロイといったサーバ運用の基本を、 本番の Twin:te と同じクラウド・同じ「ビルド済みイメージを pull する」方式で体験します。

1. 自分の PC で動かす

まずは Docker Compose で手元に Twin:te を丸ごと立ち上げて、登場人物を把握します。