- 0.1. 【JavaScript】タブメニューの作成
- 0.2. Nuxt3環境上Vuetify3でサイドバーメニューを作成する
- 0.3. JavaScriptのObjectのDeep copyメソッドについて
- 0.4. kintone async/await による非同期処理メモ
- 0.5. javascriptでobjectをjson（文字列）にする
- 0.6. React + TypeScript: Apollo Clientのリアクティブな変数(reactive variables)で複数コンポーネント間の状態を管理する
- 0.7. Classが理解できない、難しい人のために
- 0.8. みんな大好きリーダブルコードまとめ①
- 0.9. 流行りのSolid.js触ってみた
- 0.10. Node.jsでString.ReplaceAllが使えないんだが！！
- 0.11. 【React / Next】POST と PUT をカスタムフックで1つにまとめて、使用側はどちらかを意識しないようにする
- 0.12. TypeScriptでclass名の文字列から動的にclassのインスタンスを生成する
- 0.13. jQuery要素追加、削除 簡易まとめ
- 0.14. チェックボックスが押されたらどこが何番目のチェックボックスなのかを特定し、マークダウンを更新する
- 0.15. input type=”date” iOSの日付入力のクリアボタンが機能しない
- 1. 初めに
- 2. 解決したコード
【JavaScript】タブメニューの作成
# 開発環境
Rails 6.1.4
ruby 2.6.3# 目次
– 目標
– HTMLとCSSファイルの作成
– jQueryの設定## 目標
下記のようなタブメニューを作成します。
タブは選択すると白くなるよう設定します。
## HTMLとCSSファイルの作成
まず、HTMLファイルとCSSファイルを作成します。
“`html:index.html
Nuxt3環境上Vuetify3でサイドバーメニューを作成する#Nuxt3環境上Vuetify3でサイドバーメニューを作成してみました
以下のファイルを作成します。
“`app.vue
“`以下のファイルを作成します。
“`layouts/default.vue
“`以下のファイルを作成します。
“`components/TheHeader.vue
JavaScriptのObjectのDeep copyメソッドについて
# 初めに
今回は[JavaScriptのinheritanceについて part2](https://qiita.com/hu-yu/items/68c6eba22014b08d2d9d)から考えた、オブジェクトのディープコピーメソッドの記録です。まだ予想外もの（undefined, null）の排除の仕方は考えていませんが、これから思い付くときまた更新します。
今回はオブジェクトの中、プリミティブ、配列、関数、オブジェクトが乱立しているのを想定して、ディープコピーをどうやっていくか、試してみたいと思います。まずはJavaScriptで、**Shallow copy**と**Deep copy**の違いの説明から入りたいと思います。
# Shallow copy vs. Deep copy
– **Shallow copy：浅いコピー。コピーと本体が互いを影響しあうコピー方法**
– **Deep copy：深いコピー。コピーと本体がそれぞれ独立しているというコピー方法。**でもそもそもなぜコピーなのに、片方の操作でもう片方も中身が影響されるのです？
JavaScrip
kintone async/await による非同期処理メモ
kintone でもasync/await による非同期処理を実装できるようになりました。
※IE11 を考慮しなくて済むため
これまでの Promise 処理から async/await による非同期処理に移行する場合の変更点をメモ書き# kintone Promise、async/await の基礎知識
kintone Promise は、javaScript 標準のPromiseと同じような機能ですが、IE11 をサポートしていた点が異なる。
– [kintoneにおけるPromiseの書き方の基本](https://developer.cybozu.io/hc/ja/articles/360023047852)
– [mdn Promise](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)
– [mdn await](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Op
javascriptでobjectをjson（文字列）にする
単純に `JSON.stringify` で良いじゃんっていう記事が多いけどできないことがあったので別解。
“`js
const obj = {a: 2, b: 3, c: 5, d:{“x”:200,”v”:300,”z”:800}};
const json = JSON.stringify(Object.fromEntries(Object.entries(obj)));
//{“a”:2,”b”:3,”c”:5,”d”:{“x”:200,”v”:300,”z”:800}}
JSON.parse(json).d.v;
//300
“``toSource` とかも出てきたので非推奨で廃止済みなので論外。
React + TypeScript: Apollo Clientのリアクティブな変数(reactive variables)で複数コンポーネント間の状態を管理する
[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿が解説するのは、GraphQLのクエリは用いず、ローカルの状態を複数コンポーネントの間でどう共有するかです。具体的には、リアクティブな変数(「[Reactive variables](https://www.apollographql.com/docs/react/local-state/reactive-variables/)」)の使い方になります(「[Local State Management with Reactive Variables](https://www.apollographql.com/blog/apollo-client/caching/local-state-management-with-reactive-variables/)」参照)。
Apollo Clientは、データを扱う技術としてGraphQLと並んで注目されています。「[データ層
Classが理解できない、難しい人のために
## この記事を書いた理由
私はエンジニアの学習を始め、一通り文法を勉強しましたが
Classの意味が本当にわからなかったです。
わからない原因をずーっと考えていましたが、自分なりの答えにやっと辿り着きました。
それは『Classの概念がなぜ必要かわからない』というところでした。
## 覚えておいた方が良い前提条件
Classの説明に関してはあらゆるところで見ると思います。
よく見るのが
Classとはモノの設計書です。
Classとは概念です。
Classはインスタンスを生成してから使います、、
そしてこんな設計図をみます、、
こんなこと書かれてあーなるほどね。そう理解する人はごく少数だと思います
そこで、知っておくべきこととして大事なことですが
＊アプリケーションは何百ものソースコードの集合
みんな大好きリーダブルコードまとめ①
# 対象者
当方と同じく、駆け出しエンジニアの皆様。また、初級エンジニアの方もこんな内容だったなと思いながらお読みいただければ幸いです。
※当方、駆け出しエンジニアですので間違いやご指摘あれば、コメントいただければ幸いです。# リーダブルコードとは？
駆け出しエンジニアや、初級エンジニアの方々のバイブル的書物。
以前、エンジニアの方とお話しさせていただく機会がありやはりこちらの本は読んでおいて損はないとのことで、購入して少しずつ読み進めていこうと考えています。# 第1章 理解しやすいコード
#### メインテーマ
本章のメインメッセージは、『良いコードとは、ただ簡潔に書けば良いということではなく、共通認識しやすいコード(著書の中では、「安心」と言われる)が良いコードなんだよ〜。』と4ページほどで説明してくれています。#### ディテール
具体的な例で話すと、本章には動作が同じコードを2種類記載されています。
一方は2行ほどで記述されているがエンジニアの直感で書かれたコードで読めなくはないが、どのような動作が行われるのかを理解するには少し時間がかかります。
他方、7行のある一
流行りのSolid.js触ってみた
## 概要
Solid.jsがReactに変わるライブラリとして注目されてるらしいので流行りに乗っていきます。## Solid.jsとは
Reactに大きく影響を受けたかなり新しいライブラリです。
フロントエンドフレームワークのランキングでは新興ながら満足度はかなりの人気ぶり
[The State of JS 2021](https://2021.stateofjs.com/ja-JP/libraries/front-end-frameworks/#front_end_frameworks_experience_ranking)
### パフォーマンス
[公式サイト](https://www.solidjs.com/)によると他のライブラリと比べてかなり早い。
公式曰く
>頑張らなくても速くなるということです。らしい。
![スクリーン
Node.jsでString.ReplaceAllが使えないんだが！！
## 使えなかった
– とある案件を引き継ぎ、Express.jsで書かれたサーバーサイドを書いていた。
– CSV的にカンマで区切られた数値列をスペース区切りに変更したかったので、“`javascript
const nums = ‘0.0,10.0,20.0,30.0,40.0,50.0,60.0’
// こんな感じの文字列を// 0.0 10.0 20.0 30.0 40.0 50.0 60.0
// ↑こんな感じのスペース区切りにしたい// ということで
const nums_space = nums.replaceAll(‘,’, ‘ ‘)
// こんな感じで処理したい
“`– こんな感じのことをした
– すると `nums.replaceAll(…) is not function` みたいな感じで怒られた
## Node.jsのバージョンが古かった
– 調べてみると単純な話、Node.jsのバージョンが古くて `String` 型に`replaceAll`が実装されていないということだった
– `replaceAll`は比較的新しいES
【React / Next】POST と PUT をカスタムフックで1つにまとめて、使用側はどちらかを意識しないようにする
個人的な備忘録です。
# 環境
– react: 17.0.2
– react-hook-form: 7.28.0
– next: 11.1.3# サンプルコード
“`tsx:postHandler
export const useProfileNew = () => {
const { httpClient } = useHttpClient();const profileNewHandler = async (data: FormData) => {
const requset: Request = {
title: data.title,
body: data.body,
};const response = await httpClient.post
(API_PATH); return response?.data;
};return {
profileNewHandler,
};
};
“`“`tsx:putHandler
export con
TypeScriptでclass名の文字列から動的にclassのインスタンスを生成する
クローラーの開発をしていて、Site1Crawler,Site2Crawlerといった形で数字の違うクローラーを作成、class名から動的に別々のクローラーのインスタンスを生成したかったのでその方法です。
ディレクトリは適当でいいのですが、今回4つのファイルを作成します。
– Crawler.ts
– 量産されたclassをまとめて書いておくファイル
– BaseCrawler.ts
– 継承される元となるclass。インターフェースとして書いてもいいが今回はclassで作成する
– Site1Crawler.ts(Site2Crawler.tsなどこのファイルを量産していく)
– BaseCrawlerを継承した動的に呼び出されるclass
– CrawlerFactory.ts
– 動的に呼び出す部分を記載するFactory classまず最初に継承元となるBaseCrawlerのclassを作成します。
“`Javascript:BaseCrawler.ts
export default class BaseCrawler
{
pu
jQuery要素追加、削除 簡易まとめ
# 初めに
今回の記事ではAjaxを用いたアプリケーション作成を行った際に多用したjQUeryでの要素追加、削除の方法を復習も兼ねて
簡単にまとめていこうと思います。## 1 要素追加
アプリケーション作成の際に`要素追加`で用いたのは下記の4つです
“`js
$(a).append(`HTML要素`);
$(a).prepend(`HTML要素`);
$(a).after(`HTML要素`);
$(a).before(`HTML要素`);
“`
基本的な使い方を説明するとコードの`a`の箇所にはclass名、id名、タグ（div、pなど）を入れて要素をどこに追加するのかを指定します。
具体的な使い方としては下記の通りです。
“`html
- 佐藤さん
- 田中さん
- 加藤さん
“`
上記のようなコードを書くことに
チェックボックスが押されたらどこが何番目のチェックボックスなのかを特定し、マークダウンを更新する
Qiita Teamでは、タスク管理なども行いやすいように、記事中のチェックボックスを押すとマークダウンも変更されるようになっています。
今回、元々この処理の一部がjQueryで書かれていたのをReactで書き直したので、整理も兼ねて記事に起こしています。
構成としてはすごく簡易的に書くと下記の図のような感じになっています（コンフリクトなどによるエラー処理などは説明の簡潔化のため省略）。
“`mermaid
sequenceDiagram
autonumber
actor user as ユーザー
participant browser as ブラウザ
participant server as サーバー
user->>browser: チェックボックスを押す
browser->>browser: 押されたチェックボックスが何番目なのかと押された後の状態を確認する
browser->>browser: 2の情報をもとにマークダウンを変換する
browser->>server: 3で生成したマークダウンをサーバ
input type=”date” iOSの日付入力のクリアボタンが機能しない
初めに
webアプリをReactで作成していまして、` input type =”date” `を使用して日付の値を取得していたのですが、PCだと削除ボタンが機能し、iosだと機能しないという現象がおこりました。
解決するのに時間がかかりましたので忘記録です。解決したコード
“`react:app.jsx
import React,{useState} from ‘react’;
export default function App(props) {
// 日付の値を格納する
const [inputDate, setInputDate] = useState({ date: “” });// 日付の値を取得する処理
const handleOnChange = (e)=>{
const target = e.target;
const { name } = target;
const { value } = target;
//日付のセット
setI
【JavaScript】ヘッダー position:fixed 要素が下に入り込んでしまう件
headerをfixedで固定すると、header以下の要素が下に入り込んでしまいます。
今回はスタイルシートにmargin-topをベタ書きするのではなく、JSで書いてみました。“`js
const header = document.querySelector(‘header’);
const headerHeight = header.offsetHeight;
const main = document.querySelector(“main”);
main.style.marginTop = `${headerHeight}px`;
“`
JavaScriptの.__proto__とprototypeとinstance
# 初めに
inheritanceについて書くとき、自分がプロトタイプチェーンへの認識が足りないと認識したから、もう一度調べてまとめてみました。読みやすくなるため相関図も作ってみました。
主な参考資料はこちらです↓
[How does JavaScript .prototype work? – stackoverflow](https://stackoverflow.com/questions/572897/how-does-javascript-prototype-work)
[__ proto __ VS. prototype in JavaScript](https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript)自分の考えと考察も入れてこの文章を書きましたので、自分勝手の解釈も含みます。
まずは名詞の解釈について：
– `.__proto__`：プロトタイプチェーンの参照（reference）、プロトタイプチェーンの本体です。（隠しプロパティ[[prototype]]を暴くアクセ
[javascript] アロー関数の書き方
書き方
“`
const OpenApp = () => {処理};
“`今まで`function(){処理};`の書き方ばかり見ていて、なにこれ?となりそうなので、メモに残すことにした。
ES6から導入された新しい書き方。ES6は2015年にリリースされたJavasriptの仕様のこと。
レキシカルスコープ 初心者脱退宣言
これが分からないと初心者
“`
let n = 7
func1 = () => nfunc2 = () => {
n = 9
return func1()
}console.log(func2())
“`
初めての案件
こんにちは。
私はA型事業所でプログラミングをしています。
よろしくお願いいたします。来週から、実際の案件に取り掛かる予定です。
今週から出勤が週三日になり、ちょっと負荷が高くなりました。
今週から、月曜日、金曜日に加えて木曜日も出勤になりました。## 実際の案件について
実際の案件ではHTML/CSS/Javascriptという感じのスタートになりそうです。
**コーディングの案件からのスタート**です。
A型事業所のほうに既に案件がはいってきており、そちらをこなす感じになりそうです。
初めての案件で、緊張もありますが、うまく進めていきたいなと思います。案件をこなすにあたり、自分で実際にサイトを作ってから挑もうかなとも考えていました。
その時間はなさそうなので、実際に案件をこなしながら、わからないことは時間をかけて調べてやってみようかなと思います。
最初の案件は少し時間を多めに取り、調べたり、必要に応じて戻って学習しながらやっていこうと思っています。
案件をくださっている方とも連携しながら進めていくことになりますので、コミュニケーション能力も試されそうな気がします。ちょっ
