Go to Qiita Advent Calendar 2024 Top
LoginSignup
8
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?

More than 5 years have passed since last update.

@j5c8k6m8

Quine投稿のすゝめ

Posted at

はじめに

**Quine(クワイン)**は、自身のソースコードと完全に同じ文字列を出力するプログラムです。

Quine投稿とは、**記事作成をQiita APIを使用して行い、その実行に使用したソースコード自体を、記事に記載する投稿1**のことです。

Qiita APIでQuine投稿(Node.js) - Qiia

Quine投稿には娯楽2以上のメリットがあると感じましたので、そのメリットをまとめました。

なお、本記事もQuine投稿であり、Quine投稿のタグ説明記事です。

APIを利用した投稿の3つのメリット

Quine投稿は、Qiita APIを使用して投稿することが前提となるため、まずはAPIを利用して投稿することのメリットを説明します。

1. 自動投稿

自動投稿する場合は、APIを利用することになります。

定期的な更新を行う場合はもちろんのこと、トレンド入り等を狙って戦略的に投稿のタイミングにタイマーをかけたい場合などもAPIを利用することで実現できます。

2. コードの実行による記事の加工

前述の自動投稿と合わせて使われることが多いと思います。

事前にデータの加工等を行い、そのデータを用いて記事を作成したい場合に、APIを用いることで加工と投稿を同時に実現できます。

3. 記事の移植性

APIを利用して、コードやファイルに記事を記載することで、Qiita以外のサービスに記事を投稿する場合はIFを変えることで実現できます。

また、コードやファイルを経由することで必然的に記事のバックアップが作成され、Qiitaが利用できなくなった場合も記事の内容が残ります。

Quine投稿による更に3つのメリット

Quine投稿を利用することにより、上記3つのメリットに加えて、更に3つのメリットを得ることができます。

以下で具体例を交えて説明します。

1. 記事の信頼性を増やすことができる。

Qiitaの記事の一例を見てみましょう。

+[]は0ですが、ここから任意の非負整数値を得ることができます。

++[+[]][+[]]を実行すると1になります。

引用元の記事3には、非常に丁寧な解説も付けられていますが、解説されても「本当に0や1と出力されるのだろうか？」と疑問を持ってしまう疑い深い人もいるでしょう。

Quine投稿であれば、記事内でコードを実行し実行結果を記事に埋め込むことができます。

本記事では、上記のコード部分は以下のように記載されています。

const symbol_str_0 = '+[]'
const symbol_str_1 = '++[+[]][+[]]'

${symbol_str_0}は${eval(symbol_str_0)}ですが、ここから任意の非負整数値を得ることができます。

${symbol_str_1}を実行すると${eval(symbol_str_1)}になります。

Quine投稿としてソースコードを記事に含めれば、実際に実行されたコードとその結果を比較することが可能なため、記事の信頼性が向上します。

また、ランキング作成などの投稿記事の場合は、投稿ソース自体を公開することして挙動を示し、必要に応じて指摘をもらうことも可能になります。

自動更新記事をQuine投稿した筆者の記事

2. 検証コードや結果を記事に転記する手間が省ける

実際のソースコードをQiitaの記事に記載する場合、ソースコードから記事本文に転記が必要になります。

GitHubやCodePenでソースコードを参照させることもできますが、記事の読みやすさを重視して転記することが多いと思います。

Quine投稿では、記事本文とソースコードを同一の参照とすることができるため、記事の転記が不要です。

加えて、同一記事内で複数個所への記述について、同一文字列を参照させることができます。

たとえば、本記事に以下のような説明を記載します。

// 以下のコードは、「この記事の投稿に用いたコード」の1行目のアクセストークンを設定している部分です。
// 実際は、このアクセストークンはダミーであり、本記事に掲載しているコードと実際のコードではこの1行目のみが異なります。
const authorization_token = 'Bearer 1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcd';

const authorization_token = 'Bearer 1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcd';は、本記事中に4か所記載されていますが、本記事のコード中では${authorization_token_str}と記載して同一文字列を参照させています。そのため、記事中の4か所の変更を、1か所のみの変更で実現できます。

つまり、Quine投稿では、Qiitaの記事作成においてDRY4を実現できます。

3. 記事自体の移植性を更に高めることができる

Qiitaの良い記事を書くためのガイドラインには、下記の記載があります。

環境や前提条件を説明する

記事で取り上げたソフトウェアのバージョンは何か、記事中のコードを実行するためにはどんな手順が必要かを書いておくと、自分の環境に当てはまるかどうかを後から読む人が判断しやすくなります。

また、適切なタグをつけることで記事を見つけやすくなります。ある言語やライブラリの特定のバージョンについて話をするときは、タグにバージョンをつけてみましょう。例： Ruby:2.2

しかし、最近のプログラミング環境では昔ほどバージョンの依存が減っていること、Qiitaのタグにバージョンを付けても投稿ページから確認できない5ことから、記事中にわざわざ環境情報を記載しないことが多い思います。

Quine投稿では、投稿時の実行環境をプログラムから取得することで、環境情報を出力することができます。

たとえば、本記事では下記のコードを記載することで、投稿時に環境情報を出力して記事に埋め込んでいます。

process.versions.node: ${process.versions.node} // => process.versions.node: 10.15.3

これは、例えば記事の内容が古くなって更新する際にも役立ちます。APIを実行するだけで、コードの実行/環境情報の更新/記事の更新が可能です。

さいごに

上記に挙げたメリットに加えて、Quine投稿は他のQuine投稿記事を参考にすぐに実行できる6ので、プログラミング初学者がAPIや文字列処理等を学ぶときの題材としても活用できるのではないかと思います7。

  1. node.jsの実行環境を用意する。(参考) https://nodejs.org/ja/download/
  2. requestモジュールをインストールする。(参考) https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea
  3. Qiita-APIのアクセストークン(スコープ: write_qiita)を取得する。(参考) https://qiita.com/api/v2/docs#%E8%AA%8D%E8%A8%BC%E8%AA%8D%E5%8F%AF
  4. 本記事の「この記事の投稿に用いたコード」のコード部分をコピー&ペーストし、1行目のtokenを「3.」で取得したtokenに変更し、3行目のconst item_private = true;をconst item_private = false;に変更してquine.jsとして保存する。
  5. 作成したquine.jsを「node quine.js」などで実行する。

Quine投稿はもちろんデメリットもあります。そもそも、APIを利用しなければいけないことに加え、下記のようなものがあげられます。

  • マークダウンプレビューが使えない
  • エスケープ処理が必要(本記事の場合は`と$)
  • 登録と更新でAPIが異なる
  • 画像が埋め込みにくい

Quine投稿に他のメリットや活用方法がありましたら、コメントいただけると嬉しいです:pray:

この記事によって、Quine投稿タグがついたQuine投稿が増えることを期待しています。

補足

本記事の「この記事の投稿に用いたコード」のコードは[^1]:等で始まる注釈内容部分について削除されてしまっています。

本ページを「Markdownで本文を見る」で表示すると、注釈内容部分についてもしっかり残っているため、削除されてしまうのはQiitaのマークダウンパーサーの不具合8と想定していますので、記事投稿後、Qiitaにお問い合わせさせていただく予定です。

この記事の投稿に用いたコード

process.versions.node: 10.15.3

quine.js
const authorization_token = 'Bearer 1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcd';
const thisCode = (authorization_token) => {
  const item_private = false;
  const request = require('request');
  const item_title = 'Quine投稿のすゝめ';
  const item_tags = [
    { name: 'quine投稿' },
    { name: 'Qiita' },
    { name: 'QiitaAPI' },
    { name: 'タグ説明' },
    { name: '初心者向け' },
  ];
  const symbol_str_0 = '+[]';
  const symbol_str_1 = '++[+[]][+[]]';
  const authorization_token_str = `const authorization_token = 'Bearer 1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcd';`
  const version_str = 'process.versions.node: ${process.versions.node}';
  const item_body = `

# はじめに

**Quine(クワイン)**は、自身のソースコードと完全に同じ文字列を出力するプログラムです。

**Quine投稿**とは、**記事作成をQiita APIを使用して行い、その実行に使用したソースコード自体を、記事に記載する投稿[^0]**のことです。

[Qiita APIでQuine投稿(Node.js) - Qiia](https://qiita.com/j5c8k6m8/items/37dc0db871d6d766943c)

Quine投稿には**娯楽[^1]以上のメリットがある**と感じましたので、そのメリットをまとめました。


[^0]: 一般的な用語やQiita公式の用語ではありません。

[^1]: **[クワイン(プログラミング) - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AF%E3%82%A4%E3%83%B3_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0))**では娯楽として書くことがあると記載されています。

なお、本記事も**Quine投稿**であり、Quine投稿の[**タグ説明**](https://qiita.com/j5c8k6m8/items/2359627ff8c3778d95f6)記事です。


# APIを利用した投稿の3つのメリット

Quine投稿は、**[Qiita API](https://qiita.com/api/v2/docs)を使用して投稿することが前提**となるため、まずはAPIを利用して投稿することのメリットを説明します。


### 1. 自動投稿

自動投稿する場合は、APIを利用することになります。

**定期的な更新**を行う場合はもちろんのこと、トレンド入り等を狙って戦略的に**投稿のタイミングにタイマー**をかけたい場合などもAPIを利用することで実現できます。


### 2. コードの実行による記事の加工

前述の自動投稿と合わせて使われることが多いと思います。

事前に**データの加工**等を行い、そのデータを用いて記事を作成したい場合に、APIを用いることで**加工と投稿を同時に実現**できます。


### 3. 記事の移植性

APIを利用して、コードやファイルに記事を記載することで、**Qiita以外のサービスに記事を投稿する場合はIFを変えることで実現**できます。

また、コードやファイルを経由することで必然的に記事のバックアップが作成され、Qiitaが利用できなくなった場合も記事の内容が残ります。


# Quine投稿による更に3つのメリット

Quine投稿を利用することにより、上記3つのメリットに加えて、**更に3つのメリット**を得ることができます。

以下で具体例を交えて説明します。


### 1. 記事の信頼性を増やすことができる。

Qiitaの記事の一例を見てみましょう。

> \`${symbol_str_0}\`は\`${eval(symbol_str_0)}\`ですが、ここから任意の非負整数値を得ることができます。
>
> \`${symbol_str_1}\`を実行すると\`${eval(symbol_str_1)}\`になります。

引用元の記事[^2]には、非常に丁寧な解説も付けられていますが、解説されても「本当に0や1と出力されるのだろうか？」と疑問を持ってしまう疑い深い人もいるでしょう。

Quine投稿であれば、記事内でコードを実行し実行結果を記事に埋め込むことができます。

本記事では、上記のコード部分は以下のように記載されています。

\`const symbol_str_0 = '+[]'\`
\`const symbol_str_1 = '++[+[]][+[]]'\`

> \`\${symbol_str_0}\`は\`\${eval(symbol_str_0)}\`ですが、ここから任意の非負整数値を得ることができます。
>
> \`\${symbol_str_1}\`を実行すると\`\${eval(symbol_str_1)}\`になります。

Quine投稿としてソースコードを記事に含めれば、**実際に実行されたコードとその結果を比較することが可能**なため、記事の信頼性が向上します。

[^2]: [本格JavaScript記号プログラミング(1) 6種類の記号だけでJavaScriptを書こう - Qiita](https://qiita.com/Tatamo/items/24099958b90cbed61d67)から一部表記のみ変えて拝借させていただきました。

また、ランキング作成などの投稿記事の場合は、**投稿ソース自体を公開することして挙動を示し**、必要に応じて指摘をもらうことも可能になります。

[自動更新記事をQuine投稿した筆者の記事](https://qiita.com/j5c8k6m8/items/1f23349c2521d916ed1a)



### 2. 検証コードや結果を記事に転記する手間が省ける

実際のソースコードをQiitaの記事に記載する場合、**ソースコードから記事本文に転記が必要**になります。

GitHubやCodePenでソースコードを参照させることもできますが、**記事の読みやすさを重視して転記**することが多いと思います。

**Quine投稿では、記事本文とソースコードを同一の参照とすることができるため、記事の転記が不要**です。

加えて、**同一記事内で複数個所への記述について、同一文字列を参照させる**ことができます。

たとえば、本記事に以下のような説明を記載します。

\`\`\` javascript
// 以下のコードは、「この記事の投稿に用いたコード」の1行目のアクセストークンを設定している部分です。
// 実際は、このアクセストークンはダミーであり、本記事に掲載しているコードと実際のコードではこの1行目のみが異なります。
${authorization_token_str}
\`\`\`

\`${authorization_token_str}\`は、本記事中に4か所記載されていますが、本記事のコード中では\`\${authorization_token_str}\`と記載して同一文字列を参照させています。そのため、**記事中の4か所の変更を、1か所のみの変更**で実現できます。

つまり、Quine投稿では、**Qiitaの記事作成においてDRY[^3]を実現**できます。

[^3]: [Don't repeat yourself - Wikipedia](https://ja.wikipedia.org/wiki/Don%27t_repeat_yourself)


### 3. 記事自体の移植性を更に高めることができる

Qiitaの[良い記事を書くためのガイドライン](https://help.qiita.com/ja/articles/qiita-article-guideline)には、下記の記載があります。

> 環境や前提条件を説明する
>
> 記事で取り上げたソフトウェアのバージョンは何か、記事中のコードを実行するためにはどんな手順が必要かを書いておくと、自分の環境に当てはまるかどうかを後から読む人が判断しやすくなります。
>
> また、適切なタグをつけることで記事を見つけやすくなります。ある言語やライブラリの特定のバージョンについて話をするときは、タグにバージョンをつけてみましょう。例： Ruby:2.2

しかし、最近のプログラミング環境では昔ほどバージョンの依存が減っていること、**Qiitaのタグにバージョンを付けても投稿ページから確認できない[^5]**ことから、記事中に**わざわざ環境情報を記載しない**ことが多い思います。

[^5]: https://qiita.com/j5c8k6m8/items/c7f2244800b7ed4bd700#comment-b618863baad499ccf83c

Quine投稿では、**投稿時の実行環境をプログラムから取得することで、環境情報を出力**することができます。

たとえば、本記事では下記のコードを記載することで、投稿時に環境情報を出力して記事に埋め込んでいます。

\`\`\` javascript
${version_str} // => ${eval(`\`${version_str}\``)}
\`\`\`

これは、例えば記事の内容が古くなって更新する際にも役立ちます。APIを実行するだけで、**コードの実行**/**環境情報の更新**/**記事の更新**が可能です。


# さいごに

上記に挙げたメリットに加えて、**Quine投稿は他のQuine投稿記事を参考にすぐに実行**できる[^6]ので、プログラミング初学者が**API**や**文字列処理**等を学ぶときの題材としても活用できるのではないかと思います[^7]。

[^6]: 本記事のQuine投稿を(自身の限定共有記事として)試す際は、下記の5ステップで実行できます。
 1. node.jsの実行環境を用意する。(参考) https://nodejs.org/ja/download/
 2. requestモジュールをインストールする。(参考) https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea
 3. Qiita-APIのアクセストークン(スコープ: write_qiita)を取得する。(参考) https://qiita.com/api/v2/docs#%E8%AA%8D%E8%A8%BC%E8%AA%8D%E5%8F%AF
 4. 本記事の「この記事の投稿に用いたコード」のコード部分をコピー&ペーストし、**1行目のtokenを「3.」で取得したtokenに変更**し、3行目の\`const item_private = true;\`を\`const item_private = false;\`に変更してquine.jsとして保存する。
 5. 作成したquine.jsを「node quine.js」などで実行する。

[^7]: 最初にQuine投稿を試す際は、APIのprivate引数をtrueで実行することをお勧めします。

~~Quine投稿はもちろんデメリットもあります。そもそも、APIを利用しなければいけないことに加え、下記のようなものがあげられます。~~
 - ~~マークダウンプレビューが使えない~~
 - ~~エスケープ処理が必要(本記事の場合は\`と\$~~)
 - ~~登録と更新でAPIが異なる~~
 - ~~画像が埋め込みにくい~~

Quine投稿に**他のメリットや活用方法がありましたら、コメントいただけると嬉しいです:pray:**

この記事によって、**[Quine投稿タグ](https://qiita.com/search?utf8=%E2%9C%93&sort=&q=tag%3AQuine%E6%8A%95%E7%A8%BF)がついたQuine投稿が増えることを期待**しています。

# 補足

本記事の「この記事の投稿に用いたコード」のコードは\`[^1]:\`等で始まる注釈内容部分について削除されてしまっています。

本ページを「Markdownで本文を見る」で表示すると、注釈内容部分についてもしっかり残っているため、削除されてしまうのはQiitaのマークダウンパーサーの不具合[^8]と想定していますので、記事投稿後、Qiitaにお問い合わせさせていただく予定です。

[^8]: たとえばプログラム中にヒアドキュメントで\`[^1]:\`などで始まるコードを書くと、そこが非表示になるため

# この記事の投稿に用いたコード

${eval(`\`${version_str}\``)}

\`\`\`  javascript:quine.js
${authorization_token_str}
const thisCode = ${thisCode.toString()}
thisCode(authorization_token);
\`\`\`

`;

  request(
    {
      url: 'https://qiita.com/api/v2/items',
      method: 'POST',
      headers: { Authorization: authorization_token, 'Content-Type': 'application/json' },
      json: {
        private: item_private,
        title: item_title,
        tags: item_tags,
        body: item_body,
      },
    },
    (error, response, body) => console.log(error ? 'request fail. ' : `request success. ${body.message || '' }`)
  );
}
thisCode(authorization_token);

  1. 一般的な用語やQiita公式の用語ではありません。 ↩

  2. **クワイン(プログラミング) - Wikipedia**では娯楽として書くことがあると記載されています。 ↩

  3. 本格JavaScript記号プログラミング(1) 6種類の記号だけでJavaScriptを書こう - Qiitaから一部表記のみ変えて拝借させていただきました。 ↩

  4. Don't repeat yourself - Wikipedia ↩

  5. https://qiita.com/j5c8k6m8/items/c7f2244800b7ed4bd700#comment-b618863baad499ccf83c ↩

  6. 本記事のQuine投稿を(自身の限定共有記事として)試す際は、下記の5ステップで実行できます。 ↩

  7. 最初にQuine投稿を試す際は、APIのprivate引数をtrueで実行することをお勧めします。 ↩

  8. たとえばプログラム中にヒアドキュメントで[^1]:などで始まるコードを書くと、そこが非表示になるため ↩

8
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
Sign upLogin
8
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?