P5.js | 変数、if文、カラー
■位置を変数で置き換える 下記のコードはX座標を変数locationXに格納し、ellipse()のエックス座標に使用しています。 またlocationX +…
2020年
shopify | 返金対応の備忘録
https://help.shopify.com/ja/manual/payments/shopify-payments/faq https://help.s…
P5.js | 入門
P5.jsの基本的な事を書いていきます。 使い方 下記からCDNを読み込むことで簡単に利用できます。 <script src="htt…
React | アウトプット
Reactを学んだので一度アウトプットをしたいと思います。 ■作った物 ・TODOリスト https://react-firebase-hosting-2eb…
shopify debut | Powered by Shopifyを消す方法
shopifyのテーマdebutでフッターのPowered by Shopifyを消す方法を書いてきます。 ・sections/footer.liquidを開…
P5.jsの勉強をライトに始めました
P5.js Processingというアートやデザイン向けに開発された言語を、JavaScriptのライブラリとして使えるようにしたのがP5.jsのようです。…
React | connected react routerでのエラー
connected react routerでpushを使った際に下記のエラーが出ました。 Uncaught Could not find router re…
WordPressでログインURLを変更する方法 | Login rebuilder
WordPressサイトはオープンソースであるため、ドメイン/wp-adminで簡単にログイン画面にたどり着いてしまいます。 セキュリティ対策としてLogin…
React | create-react-appができないパターン
create-react-appができない事例があったので書き残します。 実行すると下記のように出ました。 You are running `create-r…
React | 学習中のエラーまとめ
Reactの学習中で現在Reduxの学習しています。 体験したエラーを随時更新していきます。 今のところほとんど凡ミスです。 ■Module not foun…
JavaScript | 三項演算子
三項演算子はシンプルに条件分岐を書くことができます。 ■基本 const val1 = 1 > 0 ? 'trueです' :…
JavaScript | 単一式省力のアロー関数
一般的なアロー関数 一般的なアロー関数は下記のように書きます。 const name= (fullName) => { return fullN…
デイトラ | shopifyコースを受講開始しました
東京フリーランスが提供しているshopifyコースを現在受講しています。 僕自身shopifyはカスタマイズ経験はあるものの、納品フローの中で知識が怪しい点が…
【GA4】Google Analytics 4でUAコード取得する方法
2020年10月14日よりGoogleからGoogle Analytics4(GA4)がリリースされました。 それにあたり2020年11月23日現在web製作…
React Redux | Reducers
■Reducersの役割 Actionからデータを受け取り Storeのstateをどう変更するか決める →Store内のstateの管理人 ■initial…
React Redux | Actions
■Actionsの役割 ・アプリからStoreへデータを送るためのpayloadを渡す役割 →アプリから受け取ったデータをReducersへ渡す ■paylo…
React | ReduxとFluxフロー
■なぜReduxを使うのか 1.stateの見通しをよくするため 2.どこからでもsataeを参照/変更可能にするため 3.モジュールを疎結合するため Rea…
JavaScript | デフォルト値
JavaScriptの関数の引数にはデフォルト値を設定する事ができます。 まず先にデフォルト値を設定していないと下記ではundefinedが返ってきます。 c…
JavaScript | 分割代入
分割代入構文は、配列、オブジェクトから値を取り出して別個の変数に代入することを可能にするJavaScriptの式です。 https://…
All in One SEO | facebookシェアボタンの埋め込みと動的URLへの変更
All in One SEO を使ってソーシャル設定を行う中で facebookボタンの設置とボタンを動的URLにしている方法を書いていきます。 下記がFac…
React | stateの基本的な書き方
■stateの定義 ・this.stateとし、=でオブジェクトを代入する this.state = {name: ‘もり’}; ■stateの取得 ・thi…
#4 .stateの設計とクラスコンポーネントの作成
トラハックさんの講座を受けての自分用メモになります。 ■App.js ・Appクラスコンポーネントを作成 ■dataset.js ・中身はgithubから追加…
Firebase | RESTAPIの作成とFirestoreでデータを取得する
■REST APIを作る ・dataset.jsをjsonファイルに変える ・Cloud Functionでhttps関数の作成 ・デプロイ ・curlコマン…
Codegridで差がつく表現を
かっこいい表現のチュートリアルは海外のyoutubeサイトの方が充実しています。 中でもCodegridは紹介されているアニメーションや動画のクォリティの高さ…
React | Firebaseでデプロイするまでの注意点(2020.11月現在)
ReactのプロジェクトをFirebaseでデプロイするにあたり いくつか注意点があったので書き残していきます。 ■有料プランに変更 Blazeに変更しなけら…
.gitignoreの書き方 | キャッシュの消去
■.gitignoreとは .gitignoreはgithubへ不要なファイルをプッシュしたくないときに記入したファイルを取り除いてくれるファイルです。 ■使…
MATERIAL-UIをインストールする
■MATERIAL-UIとは ・React向けのUIコンポーネントライブラリ ・手軽にMaterialデザインを取り入れられることができる https://m…
React | 環境構築
■前提 ・node.jsインストール済み ・npmインストール済み ■creat-react-app ・node.jsインストール済み ・npmインストール済…
React | Hooksでstateを使う
■フック(hook)とは ・クラスの機能(stateやライフサイクル)をファンクショナルコンポーネントでも使える ・100%後方互換＝小さく導入できる ■なぜ…
JavaScript | import,export
■モジュール化とは ・JavaScriptではES2015から採用 ・基本的に1ファイル1モジュール ■名前ありexport ・モジュールから複数の関数をex…
レスポンシブのチェックなら「Responsive View」
レスポンシブのチェックができるサイトは色々ありますが 「Responsive View」が使い勝手がいいです。 使い方はURLを入力するだけです。 http:…
React | ライフサイクルについて
■ライフサイクル ・コンポーネントの時間の流れ ・生まれて、成長して、死ぬまで ・それぞれの段階でに必要な処理を記述 ■3種類のライフサイクル ・mounti…
React | stateについて
■stateとは ・コンポーネント内で管理する変数 ・プロップスとして子コンポーネントに渡せる ・ローカルステートと呼ばれる ★Reduxはどのコンポーネント…
React | コンポーネントについて
コンポーネント間でデータの受け渡しをする ■コンポーネントとは 1,見た目(View) 2,機能(Controller) コンポーネント=見た目＋機能 ■コン…
React | 入門の記録
■reactとは ・jsのライブラリ ・webのUIを作る ■JSX ・変数名などはキャメルケース 例 ・class→className ・const top…
JavaScript | 論理演算子
かつ && (アンバサンド) 条件が両方一致した時実行 const x = 20; const xStyle = x &…
git | よく使うコマンドリスト
ターミナルで操作するコマンドを忘れてしまうので自分用メモとして書き残していきます。 全てステージング git add . コミット git commit -m…
JavaScript | webAPIを叩く
今回はJavaScriptで初めてwebAPIを叩いたので書き残していきます。 async await構文 今回はasync await構文でwebAPIを叩…
gulpのインストール Sassを使うまでの手順
gulpを使うことが増えたのですが毎度使うまでの手順を微妙に忘れてしまうため、書き残していきます。大まか流れは下記の手順となります。 ・Node.jsをインス…
GitLabへのssh接続の沼にハマった話
Webデザイナーの森です。 GitLabへの.ssh接続で沼にハマったので、解決した方法を解説します。 Git初心者です。 そもそもssh接続とは 簡単に言う…
【超簡単】CODEPEN | コードペンの埋め込み方法
CODEPEN | コードペンの登録方法から埋め込みの方法までを解説します。 使うまではやや敷居の高いイメージがありましたが、とても簡単です。 CODEPEN…
「初学者向け」JavaScript | DOMとは
JavaScriptの学習を進めていく上で重要な「DOM」について解説します。 > Document Object Mod…
VSCode デザインテーマを変更するなら「vscodethemes」
VSCodeのデザインテーマを一覧できるサイトを紹介します。 簡単に変更できるので、気分を変えたい時にお勧めです。 > vscodethem…
uiGradients | グラデーションを使うならこれ
グラデーションを使いたい時に参考になるサイトを紹介します。 >uiGradients 公式はこちら uiGradients…