はじめに

開発を進めていると、過去のコードと現在のコードの差分を確認したい場面は頻繁に訪れます。特に、チーム開発においては、他のメンバーが変更したコードや、バージョン管理システムで管理されている変更履歴を素早く把握することが重要になります。しかし、専用のツールを立ち上げたり、コマンドを叩いたりするのが手間だと感じることはないでしょうか？

そこで今回は、PythonのWebアプリケーションフレームワークであるStreamlitを活用し、ブラウザ上で手軽にソースコードの差分を確認できるWebアプリケーションを作成しました。これにより、開発効率の向上に貢献できると考えています。

使用したツール

本アプリケーションの作成にあたり、以下のツールを使用しました。

Python: プログラミング言語。主にアプリケーションのロジック部分を記述しました。
Streamlit: Python製のWebアプリケーションフレームワーク。少ないコード量でインタラクティブなWebアプリケーションを開発できます。
difflib: Python標準ライブラリ。文字列の差分を比較する機能を提供します。
streamlit_ace: Streamlitアプリケーション内でAce Editorを埋め込むためのコンポーネント。コードの入力と表示に利用しました。

実際に出来上がったもの

今回作成したWebアプリケーションは、以下のリンクから実際に触ることができます。

また、ソースコードは以下のGitHubリポジトリで公開しています。

アプリケーションの画面構成は非常にシンプルです。左右に2つのテキストエリアがあり、それぞれに比較したいソースコードを入力します。「差分を比較」ボタンをクリックすると、下部に差分が表示されます。追加された行は緑色、削除された行は赤色でハイライトされるため、一目で変更箇所を把握できます。

コード解説

それでは、主要なコード部分について解説していきます。

import streamlit as st
from streamlit_ace import st_ace
import difflib

st.set_page_config(layout="wide")

st.title("ソースコード差分チェッカー")

col1, col2 = st.columns(2)

with col1:
    st.header("元のコード")
    text1 = st_ace(language="python", theme="monokai", key="code1")

with col2:
    st.header("比較するコード")
    text2 = st_ace(language="python", theme="monokai", key="code2")

if st.button("差分を比較"):
    if text1 and text2:
        diff = difflib.unified_diff(
            text1.splitlines(keepends=True),
            text2.splitlines(keepends=True),
            lineterm="", # 改行コードを削除して差分を綺麗に表示
        )
        diff_output = "".join(diff)

        st.subheader("差分")
        st.code(diff_output, language="diff")
    else:
        st.warning("両方のテキストエリアにコードを入力してください。")

`st.set_page_config(layout="wide")`

ページのレイアウトをwideに設定することで、画面を広く使い、コードの表示領域を確保しています。

`st_ace`によるコード入力エリアの作成

text1 = st_ace(language="python", theme="monokai", key="code1")

streamlit_aceのst_ace関数を使って、Ace Editorを埋め込んでいます。

language="python": 入力するコードの言語をPythonに設定することで、シンタックスハイライトが適用されます。
theme="monokai": エディタのテーマをMonokaiに設定しています。
key="code1": Streamlitのウィジェットに一意のキーを設定することで、状態を管理できます。

`difflib.unified_diff`による差分比較

diff = difflib.unified_diff(
    text1.splitlines(keepends=True),
    text2.splitlines(keepends=True),
    lineterm="",
)
diff_output = "".join(diff)

difflib.unified_diffは、2つのシーケンスの差分をUnified形式で生成します。

text1.splitlines(keepends=True): 入力されたコードを行ごとに分割し、改行コードを含んだリストとして渡しています。keepends=Trueが重要で、これにより改行コードを保持したまま差分を生成できます。
lineterm="": 出力される差分から余分な改行コードを取り除くことで、表示を綺麗にしています。

生成された差分はジェネレータオブジェクトとして返されるため、"".join(diff)で結合して文字列として取得しています。

`st.code`による差分表示

st.code(diff_output, language="diff")

st.codeを使って、差分の結果をコードブロックとして表示しています。language="diff"を指定することで、追加行（緑色）と削除行（赤色）が適切にハイライトされます。

まとめ

今回はStreamlitとPythonのdifflibライブラリ、そしてstreamlit_aceを活用して、手軽に利用できるソースコード差分チェッカーのWebアプリケーションを開発しました。

Streamlitを使うことで、フロントエンドの知識が少なくても、非常に短期間で実用的なWebアプリケーションを構築できることを実感していただけたのではないでしょうか。difflibによって強力な差分比較機能が提供されており、streamlit_aceを用いることで、ユーザーフレンドリーなコード入力環境を実現できました。

このアプリケーションが、皆さんの開発効率向上の一助となれば幸いです。ぜひご自身のプロジェクトでも、Streamlitを使った開発を検討してみてください。