カタバミさんのプログラミングノート

日曜プログラマーがプログラミング関係のメモを記録するブログです。

Python 3のリスト・セット・タプル・辞書の初期化と内包記法、ジェネレーター式

Python 
[1,2,3,1,2,3] #リスト
{1,2,3,1,2,3} #セット
(1,2,3,1,2,3) #タプル
{1: 1, "name": "name"} #辞書
[i for i in [1,2,3,1,2,3] if i % 2 == 0] #リスト内包記法
{i for i in [1,2,3,1,2,3] if i % 2 == 0} #セット内包記法
{i*5: i for i in [1,2,3,1,2,3] if i % 2 == 0} #辞書内包記法
(i for i in [1,2,3,1,2,3]) #ジェネレータ式

リスト

[1,2,3,1,2,3], type([1,2,3,1,2,3])
#>>> ([1, 2, 3, 1, 2, 3], <class 'list'>)

セット

{1,2,3,1,2,3}, type({1,2,3,1,2,3})
#>>> ({1, 2, 3}, <class 'set'>)

タプル

1,2,3,1,2,3, type((1,2,3,1,2,3))
#>>> (1, 2, 3, 1, 2, 3, <class 'tuple'>)
(1,2,3,1,2,3), type((1,2,3,1,2,3))
#>>> ((1, 2, 3, 1, 2, 3), <class 'tuple'>)

辞書

{1: 1, "name": "name"}, type({1: 1, "name": "name"})
#>>> ({1: 1, 'name': 'name'}, <class 'dict'>)

リスト内包記法

[i for i in [1,2,3,1,2,3]]
#>>> [1, 2, 3, 1, 2, 3]
[i for i in [1,2,3,1,2,3] if i % 2 == 0]
#>>> [2, 2]

セット内包記法

{i for i in [1,2,3,1,2,3]}
#>>> {1, 2, 3}
{i for i in [1,2,3,1,2,3] if i % 2 == 0}
#>>> {2}

辞書内包記法

{i*5: i for i in [1,2,3,1,2,3]}
{i*5: i for i in [1,2,3,1,2,3] if i % 2 == 0}
#>>> {5: 1, 10: 2, 15: 3}
#>>> {10: 2}

ジェネレータ式

(i for i in [1,2,3,1,2,3])
#>>> <generator object <genexpr> at 0x0330F878>
list((i for i in [1,2,3,1,2,3]))
#>>> [1, 2, 3, 1, 2, 3]
list((i for i in [1,2,3,1,2,3] if i % 2 == 0))
#>>> [2, 2]

他の書き方

内包記法で書かれるものは他の方法でも記述することができます。例えば、リストはmap関数とlambdaの組み合わせで次のように書けます。

list(map(lambda i: i, range(5)))
#>>> [0, 1, 2, 3, 4]

参考

Python 3でURLからHTMLを読み込んで要素一覧を取得する

Python スクレイピング

Python 3でurllib.requestを使用してURLからHTMLを読み込み、Beautiful Soup 4とlxmlを使用して要素一覧を取得するサンプルコードです。読み込むURLはYahoo! JAPANのURLをお借りしています。

サンプルコード

import urllib.request
from bs4 import BeautifulSoup

#URLからウェブページを読み込みます。
url = "https://www.yahoo.co.jp/"
with urllib.request.urlopen(url) as response:
    doc = BeautifulSoup(response.read(), "lxml")

#TODO: ここで読み込んだウェブページを処理します。
all_elements = doc.select("*")
#print(set((element.name for element in all_elements)))
print({element.name for element in all_elements}) #セット内包記法

出力例（2020年1月22日時点）

{'font', 'input', 'img', 'nobr', 'strong', 'tr', 'head', 'center', 'br', 'link', 'body', 'html', 'style', 'td', 'area', 'a', 'tbody', 'meta', 'table', 'title', 'hr', 'map', 'form'}

参考

urllib.request --- URL を開くための拡張可能なライブラリ — Python 3.8.2 ドキュメント urllib.requestのドキュメント

http.client --- HTTP プロトコルクライアント — Python 3.8.2 ドキュメント urllib.requestの戻り値HTTPResponseオブジェクトのドキュメント

Beautiful Soup Documentation — Beautiful Soup 4.9.0 documentation Beautiful Soup 4のドキュメント

HTML5 SVG要素とPATH要素の有名サイトによる実例

HTML5

CSSデザインを勉強をしようとGoogle検索のトップページを眺めていたら、検索ボックス左側の虫眼鏡アイコンがSVG要素とPATH要素であると気が付きました。この投稿では、地味だけど良い仕事をする彼らを紹介したいと思います。なお、SVG要素のコードの権利は各参考ページの権利者に帰属すると理解しています。

実例

Google検索

SVG要素にwidth、height属性がないので外部をブロック要素で囲むなどしなければ大きなサイズで表示されます。

虫眼鏡

<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>

Google検索のトップページ（https://www.google.com/）より。

3×3ドット

<svg class="gb_Te" focusable="false" viewBox="0 0 24 24"><path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg>

Google検索の検索結果ページ（https://www.google.com/search?q=HTML5）より。

ニュースアイコン

<svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 11h6v2h-6v-2zm-6 6h12v-2H6v2zm0-4h4V7H6v6zm16-7.22v12.44c0 1.54-1.34 2.78-3 2.78H5c-1.64 0-3-1.25-3-2.78V5.78C2 4.26 3.36 3 5 3h14c1.64 0 3 1.25 3 2.78zM19.99 12V5.78c0-.42-.46-.78-1-.78H5c-.54 0-1 .36-1 .78v12.44c0 .42.46.78 1 .78h14c.54 0 1-.36 1-.78V12zM12 9h6V7h-6v2z"></path></svg>

Google検索の検索結果ページ（https://www.google.com/search?q=HTML5）より。

画像アイコン

<svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M14 13l4 5H6l4-4 1.79 1.78L14 13zm-6.01-2.99A2 2 0 0 0 8 6a2 2 0 0 0-.01 4.01zM22 5v14a3 3 0 0 1-3 2.99H5c-1.64 0-3-1.36-3-3V5c0-1.64 1.36-3 3-3h14c1.65 0 3 1.36 3 3zm-2.01 0a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h7v-.01h7a1 1 0 0 0 1-1V5z"></path></svg>

Google検索の検索結果ページ（https://www.google.com/search?q=HTML5）より。

動画アイコン

<svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M0 0h24v24H0z" fill="none"></path><path clip-rule="evenodd" d="M10 16.5l6-4.5-6-4.5v9zM5 20h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1zm14.5 2H5a3 3 0 0 1-3-3V4.4A2.4 2.4 0 0 1 4.4 2h15.2A2.4 2.4 0 0 1 22 4.4v15.1a2.5 2.5 0 0 1-2.5 2.5z" fill-rule="evenodd"></path></svg>

Google検索の検索結果ページ（https://www.google.com/search?q=HTML5）より。

書籍アイコン

<svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M18 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm0 18H6V4h2v8l2.5-1.5L13 12V4h5v16z"></path></svg>

Google検索の検索結果ページ（https://www.google.com/search?q=HTML5）より。

縦3点アイコン

<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>

Google検索の検索結果ページ（https://www.google.com/search?q=HTML5）より。

共有アイコン

<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"></path></svg>

Google検索の検索結果ページ（https://www.google.com/search?q=HTML5）より。

MSN

トップページのBingアイコン

<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" class="bingicon" role="img">
<path fill="#666" d="M 14 30.94 v -28.14 l -8 -2.8 v 35.54 l 8 4.46 l 20 -11.5 v -9.1 Z"></path>
<path opacity=".75" fill="#666" d="M 25.28 24.43 l 8.72 -5.03 l -17.74 -6.2 l 3.47 8.65 l 5.55 2.58 Z"></path>
</svg>

MSNのトップページ（https://www.msn.com/ja-jp）より。

Yahoo!

トップページのホームアイコン

<svg viewBox="0 0 13 13" width="12" height="12"><path d="M11.594 4.963L6.99.406a1.406 1.406 0 00-1.977 0L.41 4.961A1.38 1.38 0 000 5.942v5.394c0 .368.298.667.667.667h4V8.169c0-.092.075-.167.167-.167h2.334c.092 0 .166.075.166.167v3.834h4.001a.667.667 0 00.667-.667V5.939c0-.367-.147-.718-.408-.976" fill="#7587A1" fill-rule="evenodd"></path></svg>

Yahoo!のトップページ（https://www.yahoo.co.jp/）より。

HTMLの確認方法（Google Chrome）

開発者ツールの表示（F12）→HTMLからSVGを検索または検索ボックスで「SVG 」を検索

文字列→UTF-8文字コード変換ツール

JavaScriptを使用して文字列からUTF-8エンコーディングにおける文字コードを取得するツールです。TextEncoderの仕様によりUTF-8以外はサポートしていません。

文字列 -> 文字コード

プレーンテキストの概要・「文字」・その他の形式

その他

身近な存在であるプレーンテキスト（plain text）について考えてみました。なお、ここで扱うプレーンテキストは平文（plaintext）ではなく拡張子.txtのファイルの内容（plain text）です。

プレーンテキストの概要

文字エンコーディングと制御文字程度の規則で人間の読める文書として表示するデータ形式をプレーンテキストと呼ぶようです。文字エンコーディングにはUS-ASCII、UTF-8などがあり、それぞれで改行（CR、LF）、水平タブ（HT）、空白（NUL）といった制御文字が定義されています。プレーンテキストを表示するソフトウェアはファイルデータを読み込み、文字を表示したり、改行やタブを行います。

ファイルデータからプレーンテキストであるかどうか（例えばバイナリファイルであるか）はソフトウェアには区別できず、Windows 10であれば拡張子やファイルを開く際の形式指定で人間がソフトウェアに教えます。例えば内容が31 32 33 34（16進数、4バイト）のファイルはASCIIやUTF-8のプレーンテキストとしては「abcd」という文字列を指しますが、バイナリファイルとしてバイト配列{0x31, 0x32, 0x33, 0x34}やWORD配列、DWORDなどの値を指すこともできます。<html>や<!DOCTYPE html>からはじまるファイルはHTMLかもしれませんがプレーンテキストに書かれたメモかもしれませんし、逆に<body>からはじまるファイルがHTMLかもしれません。

プレーンテキストの「文字」

プレーンテキストの文字とバイナリファイルのデータは表示が同じでも値が異なります。例えば、UTF-8プレーンテキストの0は文字コード0x30（16進数）（U+0030）ですが、バイナリエディタで表示される0は文字コード0（16進数）（U+0000）です。メモ帳などで「0」と書いたプレーンテキストをバイナリエディタに読み込ませたとき、バイナリエディタはそれを0でなく0x30として処理します。

プレーンテキスト："01234"

バイナリファイル：[0x30, 0x31, 0x32, 0x33, 0x34] (JavaScriptの配列形式)

プレーンテキスト以外のファイル形式

Wikipedia英語版によるとプレーンテキストではないデータ形式にはFormatted text、Structured text、Binary Fileが挙げられるそうです。

Plain text - Wikipedia