ITproなどのWebサイトで公開する記事で，プログラムなどのソースコードをどう見せるかは，なかなか悩ましい。開発ツールなどで実際にプログラムを入力するときの見た目とは，どうしても違ってしまうからだ。

　一番の問題点は，Webページで見せる場合，たいてい横幅が限られてしまうことだ。例えば，ITproの場合は，記事部分で使えるスペースの最大幅は540px（ピクセル）である。この場合，1行の文字数は，10ポイントのMS Pゴシック・フォントであれば，おおよそ37～38文字（全角）である（ブラウザの表示文字サイズが「標準」とする）。

　普通の文章であれば，540pxでも問題はない。雑誌などでも，たいてい段組をしているので，1行の文字数が40字以下であることは珍しくない。商業誌で，1行の文字数が40を超えるようなレイアウト・スタイルは，あまり見たことがないだろう。しかし，ソースコードを掲載する場合，幅540pxでは狭い。

　例えば，次のリストは，サーバーサイドJavaのサンプルとしてよく見られるサーブレットのコードだ。ITpro Developmentでは，コードを掲載する場合，背景に色を付けて，コードの周囲に余白を取るために，幅530pxのテーブル内に記述している。つまり，コード部分は，本文より表示幅が狭い。

public class ShowMessage extends HttpServlet{
  public void doPost(HttpServletRequest request,
    HttpServletResponse response)
    throws IOException, ServletException {
  ～ 略 ～
  }
}

　このプログラムの書き方（特に改行位置）に，違和感を覚える人は少なくないだろう。本来，プログラムの意味的には，2行目の「public void」から4行目終わりの「ServletException {」までは1行と言える。doPost(…)までで改行し，「throws」から次行に書くという人もいるかもしれない。しかし，少なくとも，doPost()の二つの引数の間に改行を入れるといった無意味なことはしないはずだ。

　とはいえ，本来的な書き方にあわせて，改行を入れずに見せるとすると，

public class ShowMessage extends HttpServlet{
  public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
  ～ 略 ～
  }
}

　このように意図しないところで勝手に折り返されて表示される。この程度ならまだ見やすいが，こうした行がリスト内のあちこちにあると，とても見にくくなる。ブラウザによって折り返しの位置も異なる。

　どうせ改行を入れるなら，引数を1個ずつ縦に並べた方がよい，という意見もあるだろう。その場合，引数の数が多くなると，リストが縦方向に無駄に長くなってしまう。

　最初のリストの書き方は，横幅の制限内で，コードを見やすくするための苦肉の策である。インデントの幅を半角2文字ぶんにしているのも，なるべく横に広がらないようにするためだ。開発ツールなどのコード・エディタでは，たいていインデントは4文字ぶんに設定してあるので，それに慣れた目で見ると，かなりコードが詰まった感があるだろう。

　プログラムをよく知っている方や，こうした事情をよくおわかりの方であれば，問題はない。しかし，プログラムの初心者や入門者の方々は注意してほしい。サンプルのリストをコピー＆ペーストして，自分のプログラム内に利用されるのはいっこうに構わない。ただし，掲載されているリストの書き方が，必ずしも一般的な記述法ではないことは知っておいてほしい。

　ところで，ITpro内では，リストの見せ方はほかにもいくつかパターンがある。PythonやHaskellのようにインデント自体に意味があって，勝手に改行ができない場合は，リストを横スクロールバーのあるテキストボックスで表示する。横スクロールするテキストボックスは便利な半面，全体を一目で見られないという難点もある。

　また，長いリストの場合は，本文で見せるコードは一部だけにして，リンクをクリックすると，別ウィンドウでコード全体を表示するというパターンもある。この場合は，横幅の制限がゆるやかになるので，かなり一般的な表記が可能になる。ただ，ウィンドウをまたいで記事を読むのはイヤだという人もいるだろう。

　リストに説明用の吹き出しや番号を入れる必要があるときは，テキストで表現するのは難しいので，リスト自体を画像にしている。この場合は，コピー＆ペーストはできない。説明をわかりやすくするためのトレードオフだと思っていただきたい。

　どの方法も一長一短があって，どれがベストとは言えない状態だ。ITproでは，これらを本文の内容やレベルを考慮して，ケースバイケースで使い分けている。読者の嗜好に必ずしもマッチしていないかもしれないが，その点はご容赦願いたい。