jsys Web 研修 2026

このサイトについて

このサイトは 2026/6/6, 7, 13, 14 の4日間に開催される jsys 26 ネットワーク部門研修の資料です。

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

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

フロントエンド

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

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

Day 1 — Web の基礎

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

Day 2 — 開発環境を整える

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

Day 3 — React

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

著者

主著：ちゅるり / いなにわうどん

バックエンド

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

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

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

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

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

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

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

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

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

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

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

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

著者

主著：ゃー