caliglacyの投稿 - Crieit

【学習ノート】フロントエンド学習

2021-03-21T07:36:40+09:00

概要

フロントエンドの言語学習におけるメモを残す。

言語

HTML
PHP

学習教材

TechAcademy フロントエンドコース

参考になるページ

HTML

最小限の実装

DOCTYPE

HTMLのバージョンを示すための宣言であり、必須の要素である。
は、HTML5で記述されていることを示す。
参考：http://www.htmq.com/html5/doctype.shtml

その後に続くhtml要素の中に、ページの本文を実装する。

コメントを記述するには、の間にコメントの内容を書きます。
Webページで右クリックして［ページのソースを表示］を選択すると、誰でもコメントを読めてしまうことに注意すること。

終了タグのない要素

要素は基本的には開始タグと終了タグで囲まれるが、終了タグのない要素がある。
例えば以下の要素。

他にも、画像を表示するimg要素も終了タグが不要である。

タグ説明

span要素

divなどと同じ、グループ化する役割を持つ。
divやsectionとの違いは、要素の前後に改行が入らないこと。
参考：https://html-coding.co.jp/annex/dictionary/html/span/

下書き保存は使わないこと

2021-03-08T08:20:39+09:00

現象

公開済みの記事の追記をする場合は、下書き保存をすると内容が保存されない（復元できない）場合がある。
下図は、下書き保存したが復元できない状態の様子。

発生日

2021/03/08 8:15頃

原因

不明。
Crieitの仕様？
Crieitの仕様であることが判明。（2021-03-11追記）
→未投稿の記事のみが一覧に表示される。（今回の記事は投稿済み）

対策

投稿の状態についての制約はないので、常に「登録」で記事の編集内容を確定させること。
~~ただし、詳しい調査は行っていないため、これが最適な対策であるかは未検証。~~
（どの記事を更新中であったか埋もれて放置される場合があるため）　2021-03-11追記

追記

記事を再編集すると、エディタに前回の内容が表示された。
本記事の登録時には前回の編集内容が表示されなかったので、時間差があるかもしれない。
「Ctrl + S」を忘れたときの絶望感は味わいたくないので（ちゃんと保存されていたとしても）、「更新」ボタンを押すようにすること。
前向きに考えるなら、一つ一つの事柄がコンパクトにまとまる可能性がある。

下図は復元された様子。
保存前は、学習教材までしか記入していなかった。

さらに追記（2021-03-11）

下書きの一覧に表示されるのは、未投稿の記事のみである。（Crieitの仕様）
したがって、この記事に書いてある動作は仕様どおりであり、不具合ではない。
記事投稿画面を開くと、保存された下書きデータを復元することができるため、作業に支障はない。
現時点では機能説明やマニュアルは多分ないので、自分のように困った人がこの記事を発掘して解決してくれるといいな。

【学習ノート】Python学習

2021-03-07T20:13:36+09:00

概要

Pythonの言語学習におけるメモを残す。
主にC言語との違いが多い。

学習教材

TechAcademy Pythonコース

オブジェクト

メソッドと関数の違い

メソッドと関数の違いは、主に「.」（ドット）の有無。
「.」（ドット）は、助詞の「の」と読み替えることができる。

○○.△△  →  ○○ の △△を実行する

関数

関数名(引数)

・メソッド

データ.メソッド名(引数)

標準のメソッド

Pythonにあらかじめ備わっているメソッドの例。

半角英字の操作

大文字、小文字に変換した文字を出力するメソッド。
メソッドは戻り値として出力するだけなので、コールしただけでは変数のデータは変更されない。（非破壊的メソッド）

>>> a = "Text"
>>> print(a)
Text
>>> a.lower()
'text'
>>> print(a)
Text
>>> a.upper()
'TEXT'
>>> print(a)
Text
>>> a = a.upper()
>>> print(a)
TEXT

制御文

制御構造（分岐やループ）に関する内容。

インデント

Pythonはインデントも制御構造の仕組みの一つとなっている。
C言語がブレースでスコープを区切るのに対し、Pythonではインデントでスコープを区切っている。

正常なコード

以下のコードは、エラーが発生しない正常なコードである。

score = int(input("点数を入力してください："))
if score >= 60:
    print("合格です")
    print("おめでとうございます！")

print("処理を終了します")

インデントを忘れた場合

if文のあとには、条件を満たした場合に実行する字下げされた命令が必要となる。
字下げをしなかった場合のコードを実行してみる。

score = int(input("点数を入力してください："))
if score >= 60:
print("合格です")
print("おめでとうございます！")

print("処理を終了します")

字下げをしなかった場合はエラー（Indentationerror）になる。

  File "", line 3
    print("合格です")
    ^
IndentationError: expected an indented block

インデントが不適切な場合

また、字下げのレベルが不適切な場合もエラーになる。
たとえば、以下のコードのprint("おめでとうございます！")のインデントを、if文でもそれ以外でもないインデントにしてみる。

score = int(input("点数を入力してください："))
if score >= 60:
    print("合格です")
  print("おめでとうございます！")

print("処理を終了します")

すると、どこにも当てはまらないインデントレベルの処理がエラーとなる。

  File "", line 4
    print("おめでとうございます！")
    ^
IndentationError: unindent does not match any outer indentation level

これについては、逐次処理においても同様である。

print("合格です")
    print("おめでとうございます！")
print("ありがとうございます？")

やはり、インデントの必要がないところでインデントした命令がエラーとなる。

  File "", line 2
    print("おめでとうございます！")
    ^
IndentationError: unexpected indent

if文

if文における注意点

elif

C言語ではelse if ～であったが、Pythonはelif ～となる。（プリプロセスみたい）

こんな感じ。

season = input("季節を入力してください：")

if season == "春":
    print("春はあけぼの")
elif season == "夏":
    print("夏は夜")
elif season == "秋":
    print("秋は夕暮れ")
elif season == "冬":
    print("冬はつとめて")
else:
    print("エラー")

print("処理を終了します")

else if ～と書くとエラーになってしまう。

season = input("季節を入力してください：")

if season == "春":
    print("春はあけぼの")
elif season == "夏":
    print("夏は夜")
elif season == "秋":
    print("秋は夕暮れ")
else if season == "冬":
    print("冬はつとめて")
else:
    print("エラー")

print("処理を終了します")

実行結果：

  File "", line 9
    else if season == "冬":
         ^
SyntaxError: invalid syntax

for文

繰り返し構造のうち、for文について説明する。

in

in は、その後ろに続く要素から1件ずつ取り出して変数に格納する。

数字の列挙

例えば、数字が並んでいる場合。

for i in 0, 1, 2:
    print(i)

数字を1つずつ、iに代入して繰り返している。

0
1
2

range()を使った場合（引数が1つ）

また、数字の列挙であればrange()が便利である。
ただし、range()は単体で数字の列挙を出力する関数というわけではないので注意。

for i in range(5):
    print(i)

引数が1つの場合、range()は0から引数で指定された数値までを列挙する。
また、forループはrange()で列挙された数値をすべて使用するまで繰り返される。

range()を使った場合（引数が２つ）

引数が2つの場合、第1引数の数値から、第2引数未満の数値を列挙する。

for i in range(3, 5):
    print(i)

この場合、列挙する範囲は「3以上5未満」である。

3
4

range()を使った場合（引数が３つ）

引数が3つの場合、1つめと2つめは同様で、3つめは増分を示す。

for i in range(1, 5, 2):
    print(i)

この場合、列挙する範囲は「3以上5未満で増分2」である。

1
3

また、増分を負の数（デクリメント方向）にすることも可能（範囲指定に注意）。

for i in range(5, 1, -2):
    print(i)

この場合、列挙する範囲は「5以下1より大きく増分-2」である。

5
3

try文

「例外」が発生した場合に対応するための制御文。

エラーの種別

文法エラー　：ソースコードの記述に問題がある。
実行エラー（例外）　：処理内容に問題がある。（キャストの失敗など）

エラー発生時の対応

実行エラー（例外）が発生すると、プログラムは処理を終了してしまう。
しかし、try文を用いることで、上記エラーが発生しても処理を継続することができる。（try文が終了したあとの処理も）

try文の使い方

ざっくり以下のとおりである。

try:
    エラー有無の条件となる処理
except エラー名:
    指定したエラーが発生に対する処理
except:
    それ以外のエラーに対する処理
else:
    エラー未発生時の処理
finally:
    エラー有無に関わらず必ず実行する処理

エラー有無の条件となる処理の例：

score = int(input("数値を入力してください："))

キーボードから数値以外が入力されると、キャストに失敗し、実行エラー（例外）が発生する。

指定のエラーの例：

except ValueError:
    print("エラー：数値を入力してください")

値に関するエラーであるValueErrorなどがある。
参考：https://www.sejuku.net/blog/72383
except:よりも前に記述しないと、先に左記に当てはまって実行されないので注意すること。

シーケンス

テキストシーケンス型

配列に近いが、それ以上の役割がある。
参考：https://techacademy.jp/magazine/19204

文字列のスライス

文字列のうち、特定の文字や文字列を取り出す操作をスライスという。

文字のスライス

実際に文字列を用意して、スライスしてみる。

s = "abcdefghijklmnopqrstuvwxyz"

print(s[0])
print(s[1])
print(s[2])

C言語でいう配列と同じ要領で扱われる。

a
b
c

ただし、文字列の持つ領域を超えるとIndexError（インデックスエラー）となる。

print(s[25])
print(s[26])

文字数は26字であったため、27番目（s[27]）をスライスするとエラーとなる。

z
---------------------------------------------------------------------------
IndexError                                Traceback (most recent call last)
 in 
      1 print(s[25])
----> 2 print(s[26])

IndexError: string index out of range

C言語は配列の変数にインデックスを付けたものは単なる簡便法であり、変数の持つ領域を超えてもアクセスは可能である。
これに対してPythonのように領域を超えた場合にエラーとなるのはバグを防ぐのに有効である。つまり優秀。

マイナスにすると末端から順にアクセスできる。
この辺はスーパーマリオの感覚。（左端は右端とつながっている）
ただし、負方向も存在しない領域にアクセスするとインデックスエラーとなるので注意。

print(s[0])
print(s[-1])
print(s[-2])
print(s[-26])
print(s[-27])
print(s[-28])

a
z
y
a
---------------------------------------------------------------------------
IndexError                                Traceback (most recent call last)
 in 
      3 print(s[-2])
      4 print(s[-26])
----> 5 print(s[-27])
      6 print(s[-28])

IndexError: string index out of range

文字列のスライス（連続）

一部の文字列をスライスする場合は、以下のように記述する。

文字列変数名[開始位置:終了位置]

このとき、取り出される文字列の位置は　開始位置 から 終了位置 - 1 である。（終了位置が紛らわしいけど）
このあたりは range() と同じ要領。

print(s[0:7])
print(s[7:14])
print(s[14:7])
print(s[-5:-1])
print(s[-1:-5])

ただし、開始位置と終了位置の大小関係を間違えると、文字列はスライスされないため注意。
正の数、負の数のいずれも、取り出せる方向は同じ（左から右）であると考えれば良い。

abcdefg
hijklmn

vwxy

また、開始位置や終了位置は省略が可能。
このときも、文字列を取り出す方向は同じであることをイメージすること。

print(s[:10])
print(s[10:])
print(s[-5:])
print(s[:-20])

abcdefghij
klmnopqrstuvwxyz
vwxyz
abcdef

開始位置と終了位置の両方を省略すると、すべての文字列が出力される。

print(s[:])

abcdefghijklmnopqrstuvwxyz

文字列のスライス（増分指定）

増分を指定することで、「何個おきに」取り出すといった操作ができるようになる。

print(s[0:10:2])
print(s[1:20:3])

acegi
behknqt

なんと、増分を負方向に指定することで、逆方向の取り出しが可能。

print(s[-1:-6:-1])
print(s[-1:-10:-2])

zyxwv
zxvtr

増分を指定する記法の場合も、開始位置・終了位置・増分量の省略が可能である。

print(s[::-1])
print(s[::])

zyxwvutsrqponmlkjihgfedcba
abcdefghijklmnopqrstuvwxyz

リストを結合する場合は、+や+=を使う。
繰り返しの場合は、*や*=を使う。
このあたりは、文字列の結合や繰り返しと同じイメージ。
参考：https://techacademy.jp/magazine/29364
参考：https://www.javadrive.jp/python/list/index6.html#section5

Read：参照

要素を参照する方法として、以下の2つがある。

スライス：省略
アンパック
アンパックは以下のページを参考。
要素数と変数の数が一致していない場合、エラー（ValueError）が発生するので注意。
参考：https://techacademy.jp/magazine/30050

Update：更新

スライスを使用して、要素を上書きします。（専用のメソッドはない）
詳細な手順は省略。

Delete：削除

リストの要素は以下の方法で削除できる。（いずれも破壊的メソッド）

pop()メソッドを使用
引数なし：一番最後の要素を削除し、メソッドの戻り値として出力する。
引数あり：指定した要素の削除と出力を行う。（もちろん0から開始）
clear()メソッドを使用
すべての要素を削除します。メソッドの戻り値はなし。

リストの探索

リストの中に指定の文字があるかどうかなどを調べる。
探索の仕方として、count()メソッド、index()メソッド、inがある。
参考：https://techacademy.jp/magazine/18930

リストの並び替え

並び替えはsort()メソッド、reverse()メソッドが簡単。（破壊的メソッド）
非破壊的にリストを扱うにはsorted()関数を使用すること。

2次元リスト

C言語の2次元配列と同じように考えてよい。
C言語でいう{ }は、Pythonでは[ ]で表現される。
行、列といったスコープ概念も、C言語とPythonで同じである。
★「行、列」と覚えるよりも、シンタックスのスコープ順で参照する認識にしておいたほうが、多次元配列において理解がしやすい。

append()メソッドの引数をリスト型のデータにすれば、二次元配列としてリスト要素が追加されていく。
また、C言語と違って要素数の異なるリストを扱うことができる。

タプル

型を変更できないリストのようなもの。
スライスしてアクセスする場合にその効果が発揮されるのかも。

宣言

リスト：[ ]で囲む
タプル：( )で囲む

ただし、要素数が1つの場合は注意が必要。

a = (1)     # int型
a = (1,)    # tuple型

tuple()

リストではlist()を使っていたが、タプルではtuple()を使う。
引数はシーケンス（同じ）。

タプル変数のアクセス

参照

リストと同様、スライスを使う。

変更

要素の追加・消去などはできないが、値を代入して変数の値を変更することは可能。
値の代入については、タプル型の値を代入するとその値で上書きが可能であるが、スライスによる代入はエラーとなる。

a = (0, 1, 2, 3, 4)
print(a)
a = (0, 3, 5)
print(a)

a[0] = 10

(0, 1, 2, 3, 4)
(0, 3, 5)
---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
 in 
      4 print(a)
      5 
----> 6 a[0] = 10

TypeError: 'tuple' object does not support item assignment

探索

リストと同様にcount()、index()、inが使用可能。

zip()

複数のリストから1つのタプルを作成する。
戻り値はタプル型。
行と列の関係が特殊なので注意。（単なる連結ではない）

list()の引数にすると

そのリストがタプル型になるみたい。（タプルを格納したリスト）
構造的には以下のような感じ。

[ ( ), ( ), ( )]

enumerate()

リストを引数に、タプルを格納したリストを生成することができるみたい。

Pythonのオブジェクト認識

オブジェクトのID

変数等のオブジェクトにはIDが割り振られている。
これはC言語のような変数自体を識別するものではなく、値の識別と考えたほうが良い。
値が同じ変数は、異なる変数でもあっても同じIDとなる。
ただし、タプルは同じ要素であったとしても異なるIDを持つ。
調べ方：

id(オブジェクト名)

オブジェクトのハッシュ値

オブジェクトの値の重複は、オブジェクトのハッシュ値で判断される。
オブジェクトが異なるものでも、中身のデータが完全に一致していれば同じハッシュ値になる。
調べ方：

hash(オブジェクト名)

セット変数を作成する際に、set()に同じ値のタプルを引数にした場合には、作成される要素は一つとなる。
このときになぜ異なるIDであるのに同じ値であるかを判断できるかというと、ハッシュ値で判断されていたから。
ハッシュ値はデータの値に応じて決まるもので、タプルであっても同じ値であれば、同じハッシュ値を持つ。

==とis

2つの変数を比較する場合、==とisで比較結果が異なる場合がある。

演算子	比較する値	比較の内容
==	ハッシュ値	データが同じかどうか
is	ID	同じオブジェクトかどうか

オブジェクトと値は異なる存在であると認識したほうが良いのかも。（確認すること）

辞書

値の参照

インデックス（数字）ではなく、キー名（要素につける名前）を指定してアクセスする。

辞書の作成

要素はキー:値で記述し、{ }で囲む。
キー名は文字列以外にも、数字で定義しても良い。

d = {"foo": 1, "foo": 3, "bar": 5, "hoge": 7}
print(d)

キーが重複する場合、そのキーの値は上書きされてしまうことに注意すること。

{'foo': 3, 'bar': 5, 'hoge': 7}

タプルも要素として定義できるみたい。
タプルは、要素の値が変化しないからである。
一方、値が変化するリストはキーにすることができない。

キーの追加

以下の形式で記述することで、要素を追加することができる。

変数[キー] = 値

例えばこんなかんじ。

dic={}
print(type(dic))
print(dic)

dic["test"] = 1
dic["hoge"] = "hogege"
dic[5] = "日本語"
print(type(dic))
print(dic)

dic["test"] = "OK"
print(dic)

定義済みのキーがある場合は、上書きされる。


{}

{'test': 1, 'hoge': 'hogege', 5: '日本語'}
{'test': 'OK', 'hoge': 'hogege', 5: '日本語'}

キーの参照

2つの方法がある。
どちらにするかは、例外処理の要否で決めれば良い。
キーがタプルの場合も、タプルを渡せばよい。

①スライス

print(dic["hoge"])
print(dic["super"])

キーが存在しない場合は「KeyError」となる。

hogege
---------------------------------------------------------------------------
KeyError                                  Traceback (most recent call last)
 in 
      1 print(dic["hoge"])
----> 2 print(dic["super"])

KeyError: 'super'

②`get()`メソッド

print(dic.get("hoge"))
print(dic.get("fuga"))

キーが存在しない場合には何も起こらず、エラーにもならない。（print()ではNoneと出力される）

hogege
None

キーの削除

2つの方法がある。

`pop()`メソッド

引数にキーを渡すこと。

dic={}
dic["test"] = 1
dic["hoge"] = "hogege"
dic[5] = "日本語"
print(dic)

dic_p = dic.pop("hoge")
print(dic_p)
print(dic)

{'test': 1, 'hoge': 'hogege', 5: '日本語'}
hogege
{'test': 1, 5: '日本語'}

引数を渡さなかった場合は、TypeErrorとなる。

dic_p = dic.pop()

---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
 in 
----> 1 dic_p = dic.pop()

TypeError: pop expected at least 1 argument, got 0

`clear()`メソッド

他の型と同じで、すべての要素をクリアする。

dic={}
dic["test"] = 1
dic["hoge"] = "hogege"
dic[5] = "日本語"
print(dic)

dic.clear()
print(dic)

{'test': 1, 'hoge': 'hogege', 5: '日本語'}
{}

キーの検索

inを使用する。（省略）

繰り返し処理への利用

辞書型には以下のメソッドがある。（詳細は省略）

keys()
values()
items()

これらのメソッドは、返し値をシーケンスとして扱うことができる。

dic = {'Hokkaido': 1, 'Aomori': 2, 'Tokyo': 13, 'Osaka': 27}
print(dic.items())

for key, value in dic.items():
    print(f"{key} : {value}")

dic.items()では、各要素をタプルとして出力している。
そのため、forで使用する場合は、タプルの形式と合うように2つの変数を用いていることに注意する。

dict_items([('Hokkaido', 1), ('Aomori', 2), ('Tokyo', 13), ('Osaka', 27)])
Hokkaido : 1
Aomori : 2
Tokyo : 13
Osaka : 27

関数

他のファイルの関数を使う

ファイルの先頭でインポートする。
ただし、拡張子までは必要なく、ファイル名.pyをインクルードする場合は、以下のとおりでよい。

import ファイル名

C言語はソース（.c）とヘッダ（.h）が存在するが、この時点でPythonは「*.pyのみ」と考えてよい。

ファイルをインポートした場合、インポートしたファイルはオブジェクトとして扱われる。
つまり、以下のように扱われる。
* ファイル　→　オブジェクト
* 関数　→　メソッド

C言語とは勝手が異なるので、このあたりは気をつけること。

一部の関数だけインポートする

他のファイルの関数をメソッドではなく、関数として扱う場合は、以下の記述でインポートする。

from ファイル名 import 関数名

メソッドではなくなるため、関数コールを直接記述することができる。

モジュール名や関数名に別名をつける

インポートしたオブジェクトやメソッド、関数の名称が長い場合や、可読性が低い場合に有効。
インポート文のあとに、as 別名を加えることで、インポートしたものを別名で扱うことができる。

import ファイル名 as 別名        # オブジェクトを別名で読み替え（メソッド名はそのまま）
from ファイル名 import 関数名    #  関数を別名で読み替え

記事の管理方法

2021-03-07T20:11:14+09:00

概要

このアカウントにおいて、Crieitの記事をどのように管理するかをある程度考えておく。

学習記録

学習内容の要約や気付きを記録する場合のまとめ方について。

プログラミング言語

分散させず、コンパクトに纏めることを意識すること。

基本的に、言語ごとに1つの記事を作成する。
学習するたびに内容を書き足して、1つの記事を更新していく。
目的が言語の習得とは別である場合は、目的毎に記事を追加していくこと。

忘備録

自分用のメモを残す場合のまとめ方について。

読みやすさを重視

内容毎に記事を作成し、振り返る際のボリュームを最小にする。
同じ事柄に関することであれば、既存の記事に追記してよい。
「面倒くさい」が発生しない範囲で、読みやすくまとめること。

記録しやすさを追求

記録するのがめんどくさくなると、忘備録を残すことすらなくなってしまう。
「面倒だったこと」や「時間がかかったこと」は貴重な情報。
必要に応じてテンプレを作成したりして、手軽に忘備録をかけるようにすること。

役に立つ補足

目的や背景なども書き、ストーリーがわかるように。
問題解決のために行ったことは、解決策でなかったとしても残しておき、二度手間を減らす。