10/10
10/10 記録
note模写プロジェクトのAtoms作成
note模写プロジェクトの続きを行った。
Atomsを少し追加しただけなので進捗はあまりない
note模写プロジェクト Storybook追加
note模写プロジェクトにStorybookを導入した。
画像を動的に変更するためにpropsを用いて画像のパスを変更しようと試みたが、エラーを吐いていてそこで停止中。
windowsの環境構築
Windowsを入れなおしたので環境を再構築した。
docker上でnote模写プロジェクトの環境を構築したが、yarnした際にbabelでエラーを吐いた
上のエラーは下のコマンドでどうにかなる
yarn --no-bin-links
今度はコマンドが見つからないというエラーがでた。 原因は不明
Javascriptの練習
今回はイベントについて勉強した。
- once オプション
- DOMContentLoadedイベント
- loadイベント
- mousedownイベント
- mouseupイベント
- mousemoveイベント
- mouseenterイベント
- mouseleaveイベント
- mousemoveイベント
- mouseoutイベント
mouseoverとmouseoutはパブリングが発生するイベント
パブリングはある要素で発生したイベントが親要素や先祖要素に伝わること
DOMContentLoadedはscriptにdefer属性がついているときはHTML解析後に実行されるので指定しなくていい
マウス操作時の座標を取得したいとき
event.clientXとかevnet.offsetXとか使う
左上が基準でX座標とY座標を指定できる
- clientX,Y: ブラウザ基準
- offsetX,Y: 要素基準
- pageX,Y : ページ基準
- screenX,Y: デバイス基準
関数の巻き上げについて
関数についてMDNを少し見た際に知ったこと
関数宣言した関数は巻き上げられるが、無名関数は巻き上げられない
例
test(); // console.log('test')
function test() {
console.log('test');
}
test(); // エラー
const test = () => {
console.log('test');
}
参考文献
Javascriptコードレシピ集
10/9
10/9 記録
getBoundingClientRect()
ビューポート領域の一番上から見た要素の位置を取得できる
cloneNode
要素を復元するメソッド
// Nodeを複製する Node.cloneNode(boolean)
devicePixelRatio
// デバイスのピクセル比の値を調べる window.devicePixelRatio; // 通常のディスプレイ：１ // iPhoneやAndroid：２ // iPhone PlusやハイスペックAndroid：３
オブジェクトのインスタンスかどうか調べるとき
値 instanceof オブジェクト
戻り値：boolean
データの種類によって処理を分岐させたいときに使える
タブがバックグラウンドになったときの処理
document.addEventListener('visibilitychange', 関数);
document.visibilityState === 'visible' // 表示
document.visibilityState === 'hidden' // バックグラウンド
ページ遷移
location.href = "url';
focusとblur
focusイベント
要素がフォーカスを受け取ったときに発生
focusinとの違いはバブリングを行わないこと
element.addEventListener('focus', 関数);
blurイベント
要素がフォーカスを失ったときに発生
focusoutとの違いはバブリングを行わないこと
element.addEventListener('blur', 関数);
jsメモ 10/11
Memo
// index.html
<script type="module" src="main.js"></script>
// main.js
import renderHTML from './render.js';
(function() {
var inputText = document.getElementById('input');
renderHTML(inputText);
})();
これでhtmlでつかうようのJSでもimportを使用することができるようになる
fetch API
function postAPI() {
var csrfToken = document.getElementsByName(csrftokenが指定されているnameの値);
var url = '';
var headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken,
}
fetch(url, {
method: 'POST',
mode: 'cors', // corsモード
credentials: 'include',
headers,
body
})
.then(function(res) {
console.log(res);
})
}
credentials
クロスオリジンリクエストの場合に、ユーザーエージェントがほかのドメインからクッキーを送信すべきかどうかを示す
`omit:‘クッキーを送信しないsame-origin:同一のオリジンの場合のみクッキーを送信`include:‘クロスオリジンの場合でもクッキーを送信
Djangoメモ 8/23
8/23のDjangoメモ
readonly オプション
admin.pyで表示する際,デフォルトではstr()を表示する 他のフィールドも表示させたいときにreadonlyオプションを使用する
from django.contrib import admin
from .models import Book
class BookModelAdmin(admin.ModelAdmin):
#list_display = ('title', 'price', 'id', 'created_at')
ordering = ('-created_at',)
readonly_fields = ('id', 'created_at')
admin.site.register(Book, BookModelAdmin)
readonlyなし
readonlyあり
Django 小メモ
Djangoで学んだことをメモする
reverse
urls.pyでname指定したパスを取得する
例
# accounts/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('signup/', views.signup_view, name="signup_template"),
]
# accounts/tests.py
from django.test import TestCase
from .views import signup_view
from django.urls import reverse, resolve
class SignUpTests(TestCase):
def test_signup_status_code(self):
# urls.pyでnameで指定したものを書く
url = reverse('signup_template')
response = self.client.get(url)
self.assertEquals(response.status_code, 200)
def test_signup_url_resolves_signup_view(self):
view = resolve('/signup/')
self.assertEquals(view.func, signup_view)
# Create your tests here.
特殊文字の向こうの仕方
Djangoではデフォルトで特殊文字をエスケープしている テキストノードでもエスケープされて表示されるときがあるため、一応その対策を書いておく
無効化方法
safeフィルタを使用してエスケープしないようにする
{% if field.help_text %}
<small class="form-text text-muted">
{{ field.help_text|safe }}
</small>
{% endif %}
