5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Rails Girlsに潜むネコ🐈‍⬛から学ぶ、webサイトの仕組みとオープンソースの話

Last updated at Posted at 2025-12-24

はじめに

これは「Rails Girls Japan Advent Calendar Advent Calendar 2025」最終日の記事です。
昨日は @Hitoshi-Noborikawa さんの「「プログラミング」を始める一歩の踏みかた」でした。

この記事ではRails Girlsのワークショップに初めて参加する、プログラミング未経験の女性向けに、Rails Girlsのwebサイトの仕組みと、誰でも開発に参加できるオープンソースという考え方について、易しく説明してみたいと思います。

プログラミングの知識は必要ないので、ぜひ、記事を読みながら、実際にリンクを開いてみてください!
(リンクを開く場合はスマホよりもパソコン推奨です)

Rails Girlsのwebサイトにネコがいる……?

こちらはRails Girlsのwebサイトです。

https://railsgirls.jp/
image.png

何の変哲もないwebサイトに見えますが、よく見ると画面の右上にネコの影のようなアイコン(?)があります。

image.png

しかも、マウスカーソルを当てると、しっぽを振ってきます!

Dec-24-2025 09-31-08.gif

うーん、怪しいですね……ちょっとクリックしてみましょう。
すると、こんなページが表示されました!

image.png

いったい、このページは何なのでしょうか!?

Rails GirlsのwebサイトのソースコードはGitHubで管理されている

はい、このページはGitHub(ギットハブ)といって、いろんなwebサイト(もしくはアプリなど)のソースコード(プログラム)を保存しているwebサイトです。
また、ソースコードをまとめて管理するためのひとかたまりを「リポジトリ」と呼びます。

今表示されている https://github.com/railsgirls-jp/railsgirls.jp はRails Girlsのwebサイトのソースコードをまとめているものなので「Rails Girlsのwebサイトのリポジトリ」となります。

トップページのソースコードを見てみよう

たとえば、このページを下にスクロールするとindex.htmlというリンクがあります。
これをクリックしてみましょう。

Screenshot 2025-12-24 at 10.16.37.png

すると、次のように日本語と英語が入り混じったようなページが表示されます。

image.png

これは何かというと、Rails Girlsのwebサイトのトップページのソースコード(HTMLファイル)です。
実際、Rails Girlsのwebサイトのトップページを見てみると、ソースコードの文章とブラウザ上に表示されている文章がまったく同じなのがわかります。

image.png

このように、GitHub上のソースコードと、ブラウザ上で見えているwebサイトは、特定のルールで対応しています。
そして、ふだん私たちが目にしているwebサイトの多くは、このように何らかのプログラムを通じて組み立てられています。

ちなみに: このHTMLはちょっと特殊なHTMLです

「あ、HTMLなら知ってます!」という方も中にはおられるかもしれませんが、Rails Girlsのwebサイトで使われているHTMLはちょっと特殊なHTMLです。
その証拠に、先ほどのHTMLファイルを見てみると、ファイルの冒頭に謎の呪文が書かれています。

---
layout: default
title: 日本語版ガイド
---

Rails GirlsのwebサイトにはJekyll(ジキル)というツールが使われています。
Jekyllは複数のHTMLファイルをまとめて、1つのwebサイトとしてきれいに整形してくれるツールです(こうしたツールを「静的サイトジェネレーター」といいます)。

冒頭に書かれたlayout:title:は、使用するレイアウトファイルやページタイトルを指定するための「フロントマター」と呼ばれるJekyll用の構文です。

ただし、Jekyllについて説明し始めると長くなってしまうので、今回は詳しい説明を割愛します。
今の時点では、Rails GirlsのwebサイトのHTMLファイルを眺めていてHTMLらしくない不思議な構文を見つけたら、それはJekyll用の構文である可能性が高い、ということだけ、頭の片隅においておけばOKです。

その気になれば開発に参加することだってできる!

さらに、やる気(と、ちょっとした知識)さえあれば、Rails Girlsのwebサイトの開発に参加することだってできます。
なぜならRails Girlsのwebサイトはオープンソースになっているからです。

オープンソースというのは、誰でもソースコード(プログラム)を見ることができて、さらに誰でも開発できるソフトウェアのことです。

ただし、開発する場合は、いきなりwebサイトを好き勝手に変更することはできません。
リポジトリには管理者がいるので、開発に参加したい場合は、

プログラムの修正案を提出する
 ↓
管理者がチェック(レビュー)して、OKならその修正案を取り込む

というルールになっています。

プログラムの修正案を提出することを、「プルリクエストを送る」と言います。
IT業界の人々は少し略して「プルリクを送る」なんて言い方もよくします。

実際のプルリクエストはこんな感じです

たとえば、以下は「"グリーン"が"グレーン"になっていたので修正しましたよ」というプルリクエストの例です。
(詳細はこちらで確認できます)

Screenshot 2025-12-24 at 10.55.37.png

このプルリクのおかげで、Rails Girlsのwebサイトの表示がきちんと修正されました!👏

URL https://railsgirls.jp/ruby-atm
Screenshot 2025-12-24 at 10.57.32.png

こんな感じで、ちょっとした知識と「このサイトをよくしたい」という気持ちがあれば、誰でもRails Girlsのwebサイトの改善に貢献できるんです!

なお、先ほど述べた通り、Rails GirlsのwebサイトではJekyllが使われています。
そのため、一部に特殊な構文が使われていますが、その大部分は一般的なHTMLと変わりません。
ですので、HTMLの知識がある人なら、Rails Girlsのwebサイトも開発しやすいと思います。

ところで、最初に出てきたネコは何なの?🐈‍⬛

あのネコの正体は、実はネコではなく、Octocat(オクトキャット)というネコとタコの雑種(?)で、GitHubのマスコットキャラクターです。

そして、しっぽのように見えた物はOctocatの腕なのでした!(僕もしっぽだと思ってた……)

original.png
Image: https://octodex.github.com/original/

まとめ:Rails Girlsのワークショップでお会いしましょう👋

というわけで、この記事ではRails Girlsのwebサイトの仕組みと、誰でも開発に参加できるオープンソースの考え方について説明してみました。

ですが、これからRails Girlsに参加する方は、この記事の内容を全部理解する必要はありません。

Rails Girls は、

  • プログラミング未経験でも
  • 専門用語がわからなくても
  • パソコンに詳しくなくても

「大丈夫」なように作られたイベントです。

最初は、

「へえ、こんなふうにできているんだ」
「ちょっと面白いかも」

と思えれば、それで十分です。

なお、Rails Girlsのワークショップでは、今回眺めたRails Girlsのwebサイトを題材にするのではなく、小さなwebアプリケーションをゼロから開発していきます。

わからないことがあっても当日はプログラミングに詳しいコーチが助けてくれるので、心配はいりません。
ぜひ、私たちと一緒に、楽しくプログラミングを学びましょう!

近日開催予定のワークショップについて

本記事の執筆時点では、東京と名古屋でワークショップの開催が予定されています。

image.png

なお、3月の名古屋のワークショップでは、僕(伊藤淳一)もコーチとして参加する予定です。
みなさんとお会いできるのを楽しみにしています!😄

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?