tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

カノニカルタグとは

ampのドキュメントを読んでいた際に カノニカルというワードが出てきてチンプンカンプンでした。 その周辺知識をおさらいしようと思います。 カノニカルタグ 検索エンジンが重複しているページだと認識しないように正規化するためのタグのこと。 重複コンテ…

【jQuary】フォーム作成で学んだメソッドや記法について

先週フロントでのバリデーションを作り直しました。 その時に使ったメソッドなどをメモしていきます。 フォームの内容についてはこっち↓ フロント側でフォームのバリデーションを追加したのでその忘備録 - Qiita フォーム関連で役立つjQuery 誰の役に立つの…

【ターミナル】 コマンドの過去検索

あけましておめでとうございます。 今年も一年張り切っていきたいと思います!! ctr + r ターミナルで過去のコマンド履歴を調べたい時は ctr + r が使えます。 実行すると、 ❯ bck-i-search: _ このような形になり、単語を入力すると過去履歴の一番直近のコマ…

【javascript】FileReaderを使って画像をプレビューする

FileReader 画像をプレビューする時には、web APIの一つである FileReader というものを扱います。 こちらを用いることで input で選択したファイルを非同期で読み取ることが可能です。 <input type="file" accept='image/*' multiple="multiple" onchange="preview(this);"> <div id="preview"></div> <script> function preview(obj){ for (i = 0; i < obj.files.length; i++) {…

【javascript】JavaScriptでFileReaderを使った画像プレビュー

inputで画像選択した後、 その画像をプレビューとして表示する方法についてまとめていきたいと思います。 FileReader を使ってプレビュー表示する 下記がプレビューを表示するコード <input type="file" accept='image/*' multiple="multiple" onchange="preview(this);"> <div id="preview"></div> <script> function preview(obj){ for (i = 0; i < obj.files.length; i++) { va…

一年間書き続けてきた技術ブログを振り返ってみる

こんにちはKOです。 今回は今まで続けてきたこの技術ブログを経て気づいたことを赤裸々に綴っていこうと思います。 2020年の1月からスタートして現在で約130記事、 3日に一回のペースで書き殴っているという風になります。 PV数は年間で4500PV、一記事あたり…

【javascript】論理否定を代入することでture → false → true → false 繰り返す

これはすごい小ネタになるのですが ボタンでオンオフを切り替えたい時、皆さんどの様にされていますでしょうか。 論理否定である!を使えば a = !a だけで ture → false → ture を繰り返すことが可能です。 <div onclick="init()"> スイッチ </div> <script> flag = "true"; function init(){ fla</script>…

【canvas】ctx.arc()を使って円を描画する

こんにちは。 今日はcanvasについて、 arcという関数を使って円を描画する仕組みを説明していきます。 手順 ・html <body onload="init()"> <canvas id="canvas" width="600" height="400"></canvas> </body> ・js function init() { var canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); ctx.strokeStyle = "skyblue…

【react】onChangeの度にstyled-componentsが呼び出されて、textareaが入力できない

昨日どハマりした例です。 reactのフォーム用モジュール formikを使用しています。 textareaタグをスタイルコンポーネントで囲い その中でonchangeを読んでいます。 <TextareaWrapper> <textarea style={{ width: '100%', color: 'black' }} name="todo" onChange={formik.handleChange} rows="5" defaultValue={defaultTodo} > </textarea> </TextareaWrapper> 下記がtextareaWrapperのコンポーネン…

【javascript】バブリングについて イベントは子要素から親要素に向かって伝播していく stopPropagation()でバブリングを止める

画面をクリックすると 「クリックしたよ!」という情報が 子要素から親要素に向かって順番に発生していくらしい。 See the Pen イベントの伝播 by たまき こう (@ulqvhvox) on CodePen. イベントの伝播を止めるには?? stopPropagationでバブリングを防ぐこと…

addEventListenerなどの時の es6での記述

es6で利用されるアロー関数 function func() { } この書き方から const func = () => { } この書き方に変更されました。 addEventListerner時の書き方だと btn.addEventListener('mousedown', function() { this.classList.add('class'); }); ↓ btn.addEvent…

ディベロッパーツールの検索系 「cmd + F」で文字検索 「cmd + P」でファイル内検索

最近知ったchromeのディベロッパーツールの検索機能 ファイル内検索 「cmd + F 」 Elementでの「検索」コマンド ・cmd + F 画面の赤枠の位置に入力スペースが出現します。 さらに文字列を検索するだけでなく、 div.class#id のようなXPathと呼ばれる書き方で…

gitでリモートブランチをローカルにcheckoutする

新しくmasterブランチをクローンしてきて、 別のブランチもcheckoutしてpullしたい時がありますよね そういう時は、このコード git checkout -b local_branch_name origin/remote_branch_name 通常のチェックアウトのコマンドに、 続けてリモートのブランチ…

【javascript】targetプロパティーでクリックした要素の情報を取得する

クリック先の情報を取得する target プロパティーの使い方です。 同じイベントを呼び出すコードが複数あったときに、 一つの関数で条件に応じた処理ができるの便利です。 <body> <h1 id="title">イベントのtargetプロパティを使う</h1> <button id="button" type="button" data-new-Word="こんにちは">昼</button><br> <button id="button2" type="button" data-new-Word="こんばんは">夜</button> <script> var button = documen…</body>

【css】scroll-snapプロパティー で気持ちいスクロールを

スクロールで特定の要素にピタッと止まるスクロールありますよね 実はjsではなくcssで実現できるそうです。 scroll-snapというプロパティーを使って表現します。 100vhの要素が二つ重なっている状態を作って <div class="container"> <section class="area">1</section> <section class="area">2</section> </div> それぞれにcssscroll-snap-align: start;を…

【css】repeating-radial-gradient()関数を重ねることでユニークな模様も1行で完結

background-image: repeating-radial-gradient()を使うことで 上記のような複雑な模様も作ることができる、、、とのこと。 (笑) ポイントはrepeation-radial-gradientを重ねること background-image: radial-gradient(A), radial-gradient(B), radial-gradie…

【git】ブランチ名を変更する

ブランチ名を変更する ブランチ名を変更したいときは git branch -m <古いブランチ名> <新しいブランチ名> 今開いているブランチを変更する場合は git branch -m <新しいブランチ名> で変更可能です。 ps 最近鎌倉も寒くなってきました。 沖縄はまだ 28度く…

【css】 conic-gradient() 円グラフや市松模様がすぐに実現する最強のプロパティー

今回は新しいグラデーション手法 conic-gradient()関数について紹介しようと思います。 2018年9月にリリースされた関数なのですが、conicというのが円錐という意味らしく 円錐グラデーションと呼ばれるそうです。 なので、 linear-gradient()関数: 直線状の…

【css】 フレックスボックスでそれぞれの幅を調整してくれる flex-shrink

titleの通りなのですが、 flexboxにも幅の調整を自動的に行ってくれるプロパティーがありました。 flex-shrink フレックスアイテムの縮小係数を設定します。 つまりそれぞれのアイテムの幅を自動で調整してくれます。 a b c d というコンテナーがあるとする…

【css】カスタムプロパティー cssにも変数があるのよ

久々にブログ更新します。 今回は、cssのカスタムプロパティーについて 僕今日の今日までcssの変数的なやつってsassにしかないと思っていました。 結論、cssにもありました。笑 カスタムプロパティーとは タイトルの通り、cssのプロパティーを変数に入れて使…

【gatsby.js】Gatsby.js Netlify を使ってブログを作ってみる

そろそろ自分のサイト作りたいと思っていたいので 気になっていたGatsbyを使ってみました! gatsbyをインストールしてブラウザに表示する まずgatsbyをインストールします。 $ npm install -g gatsby-cli インストールできたかを確認 $ gatsby --help zsh: c…

【wordpress】ページ分割のリンクに「数字」と「次ページ・前ページ」の両方を表示する

https://okinawanpizza.hatenablog.com/entry/2020/09/04/085447 next_link_pagesのパラメータには、リンクの表示方法を 「前のページ」「次のページ」と表示するかページ番号で表示するかを選択する 'next_or_number'というパラメーターが存在します。 'nex…

【wordpress】長い投稿を分割する、投稿内にページ番号を出力する

投稿された記事にと入力すると記事が分割されます。 そして分割されたページのリンクを出力するためには、 wp_link_pages()を使います。 投稿を任意のタイミングで分割する 記事のテキストエディタを開きます。 そしてタグを分割したいところに挿入します。 …

(メモ)react-modal でモーダル表示

メモ インストールと使い方 まずは下記をインストール。 $npm install react-modal 使いたいコンポーネントでimportして<Modal></Modal>で挟んだ中身を挟む そしてModal.setAppElement("body")をモーダルを配置する箇所に記述。 ・コンポーネントの中身 import React, { use…

windowオブジェクト触ってみる

windowオブジェクト、 最近まで window.onloadしか使ったことなかったのですが 思ったより面白かったのでまとめました! windowとは windowオブジェクトは画面上に表示されている全てのオブジェクトの親となるオブジェクトです。 下位のオブジェクトとして …

ラスタ画像とベクタ画像

ビットマップ化について前回調べているなかで 最近すごいことに気づいてしました。 画像ってドットの集まりだと思っていましたが 実はそれだけじゃないようです、、、、 画像は大きく分けて二種類 「ラスタ画像」と「ベクタ画像」 にわかれます。 今日は二種…

レンダリングエンジン、、レンダリングって

タイトルからわかる語彙力のなさ笑 chromeなどのブラウザにはレンダリングエンジンというものがあります。 これは、要求されたHTMLとCSSを解析し、表示する役割をになっているのですが 具体的にどのような工程を辿っているのでしょうか、、、 最近よく聞くの…

クリエイターズ定例

いやー今日もわからない言葉てんこ盛りでしたねー!www 今日の会社のクリエイターズミーティングは特に css と ブラウザの仕組みの部分に関しての話が多かったです。 なので今日はブラウザの仕組みを浅堀してみました! ブラウザの仕組み!! web開発者にと…

【css】translate3dを使うとアニメーションのちらつきを抑えることができる

今作っているティザーサイトなのですが、 スクロールを縦じゃなくて横にスクロールできるようにする「水平スクロール」にしました。 translateXでスクロールしていたのですが、スマホでみるとガタガタとチラついてしまいました。 それがtranslate3dにすると…

【css】translate3dを使うとアニメーションのちらつきを抑えることができる

今作っているティザーサイトなのですが、 スクロールを縦じゃなくて横にスクロールできるようにする「水平スクロール」にしました。 translateXでスクロールしていたのですが、スマホでみるとガタガタとチラついてしまいました。 それがtranslate3dにすると…