- 1. 未経験からフリーランスエンジニアになって案件を取るまでの流れと訪れる試練
- 2. Reactのコードの書き方のお勉強
- 3. p5.js の createGraphics()（オフスクリーンキャンバス）で translate() などを適用した場合の注意点： reset() によるリセットが必要
- 4. マリオRPGのトライアスロン問題を解くプログラム
- 5. タッチイベント追加（JS）
- 6. ElectronでHello World!（index.htmlのspanタグ操作）
- 7. 【初心者】React アプリの作成方法
- 8. [React×Typescript] setStateした直後に更新後のstate変数を扱う方法
- 9. JavaScript プリミティブ型 オブジェクト
- 10. 【2023年版】pydantic2でFastAPIでスネークケースをキャメルケースに自動変換する
- 11. React×TypeScriptでhtmlのinputタグのonChangeみたいな動作をする入力コンポーネントの作成(備忘録)
- 12. JavaScript まわりの用語あれこれ
- 13. [Vue.js] Vue.jsを学ぶ①
- 14. JavaScriptのURL操作
- 15. 日付を操作するDateオブジェクト
- 16. CSVファイルをFileAPIで読み込む
- 17. TypeScriptの環境構築とコンパイル
- 18. kintone テーブルの変更イベントで行位置を求める
- 19. TypeScript – カレンダー日付の妥当性確認(2)
- 20. jQueryで実行順序を保証する記述方法
未経験からフリーランスエンジニアになって案件を取るまでの流れと訪れる試練
# 結論
**いきなりフリーランスデビューするのは無謀です。ほとんどの場合なれません。**
# Q.泣き寝いりするしかないのか?
A.そんなことはありません。
未経験からフリーランスになりたい人はに与えられた以下の試練を乗り越えればいいだけです。1. フロントエンドからバックエンド・インフラ・データベースまで幅広く深い知識を身につける
1. 地方の企業に非正規でも正規でもとりあえず雇っていただき、使う人がいるシステム/アプリの開発を行う
1. 手取り10万円台を2~3年ほど我慢する
1. 休日も個人開発等でアプリ開発をやめない
1. 勉強時間は1日４時間でも少ないという価値観を身につける(生活費のためにバイトしてても時間的には少ない)# Q.なぜこのような試練が与えられるのか
**業務委託をする側はプロが欲しいから**
**プロにしかお金を払いたくないから**つまり、「スクール卒業しました!まだ現場のこと何もわからないけど仕事ください！！」って人に高い給料払うわけがないってことなんですよね。当たり前ですけど…
# Q.案件を取るために必要なもの（体験談）
–
Reactのコードの書き方のお勉強
こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。昨日Reactを使ったWebアプリの作成方法について初めて学びました。
今回は、その時に使用したコードを分解・精査しどういう書き方をするのか学んでいきたいと思います。
前回の記事は以下となります。https://qiita.com/ohtsuka-shota/items/f3f69a1330e59430ead7
# コード
## App.js
“`App.js
import React from ‘react’;
import ‘./App.css’;
import eyeIcon from ‘./目のアイコン8.jpeg’;
import addUserIcon from ‘./contact_user_add_user_new_user_icon_250756.png’;class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showPasswor
p5.js の createGraphics()（オフスクリーンキャンバス）で translate() などを適用した場合の注意点： reset() によるリセットが必要
Qiita で以下の記事を書いた時などに、記事内で書いている話を、独立した記事に書きます。
●p5.js で createGraphics() の描画領域を見えるようにして利用してみる（＋ 特定の処理に関して明示的なリセットが必要な話）【小ネタ】 #JavaScript – Qiita
https://qiita.com/youtoy/items/5c853cfd5dfe9e94702dたまに、「p5.js の createGraphics() で translate() などを使った時、draw() の冒頭でリセットがかからない場合の対処って、どうやるんだっけ？」と思うことがあるので、見つけやすいように独立させた記事にしました。
## リセットを行うという話
冒頭で紹介した記事の以下で書いているのが、今回の記事のトピックです。
例え
マリオRPGのトライアスロン問題を解くプログラム
## 問題
A,B,C,Dがトライアスロン（※）をしました。
それぞれの証言から順位を推理し、1位から順にA,B,C,Dを並べ替えてください。※：水泳→自転車→マラソンの順で争う競技。マラソンの順位が最終的な順位
【証言】
A「水泳も自転車も順位は同じだったけど、マラソンで二人に抜かれちゃった。」
B「自転車でDを抜いて、そのあとはゴールまで Dには抜かれてないよ。」
C「水泳で3位だったけど、ゴールするまで3位より上になったことはなかったよ。ちぇ。」
D「自転車で調子が悪くて 4位に落ちちゃったけど、結局水泳と同じ順位でゴールできた。」## プログラム
“`js
const 順位 = {
A: { 水泳: 0, 自転車: 0, マラソン: 0 },
B: { 水泳: 0, 自転車: 0, マラソン: 0 },
C: { 水泳: 0, 自転車: 0, マラソン: 0 },
D: { 水泳: 0, 自転車: 0, マラソン: 0 },
};const 満たすべき条件たち = [
// A「水泳も自転車も順位は同じだったけど、マラ
タッチイベント追加（JS）
“`js
// HTML要素を取得
const target = document.querySelector(‘#target’)// タッチイベントを追加
target.addEventListener(‘touchstart’, (event) => {
// タッチが開始された時の処理（指が触れた時）
console.log(‘開始’, event)
})target.addEventListener(‘touchmove’, (event) => {
// タッチが移動した時の処理（指を動かした時）
console.log(‘移動’, event)
})target.addEventListener(‘touchend’, (event) => {
// タッチが終了した時の処理（指を離した時）
console.log(‘終了’, event)
})
“`
ElectronでHello World!（index.htmlのspanタグ操作）
# はじめに
ElectronでHello World!してみました。[Quick-start](https://www.electronjs.org/ja/docs/latest/tutorial/quick-start)では、「Hello World!」はindex.htmlのHタグのリテラル文字列だったので、そのあたりだけちょいとアプリケーション的な感じに書き換えてみました。# Electronとはとかインストールとか
すべて割愛します。Qiita上にたくさん親切に記述された記事がありますので、それらからなるべく新し目の情報を参照するとよいかと思います。
# 配置
“`cmd
C:\electron>dir /B
index.html
main.js
node_modules
package-lock.json
package.json
preload.js
“`# index.html
Quick-start記載のindex.htmlを下記のように変更しました。
従来は\タグの中にリテラルで書かれていましたが、\タグにしました。
“`di
【初心者】React アプリの作成方法
仕事で、`TypeScript`と`React`を使用するプロジェクトに携わる予定なので、それの予習用です。
## コマンド実行
#### プロジェクト作成用コマンド（JavaScript用）
“`
npx create-react-app 「アプリ名」
“`
※事前にNode.js のインストールが必要
※「ユーザー\AppData\Roaming\npm」のディレクトリが無いみたいなエラーが出ますが、「npm」フォルダを作成すれば解消される場合があります。#### プロジェクト作成用コマンド（TypeScript用）
`–template typescript`オプションを引数に追加することで、`TypeScript`用としてプロジェクトを作成することができます。“`
npx create-react-app –template typescript 「アプリ名」
“`#### アプリの開始用コマンド（Node アプリの共通コマンド）
“`
npm start
“`一応これで、サンプルページが表示できます！
[React×Typescript] setStateした直後に更新後のstate変数を扱う方法
# はじめに
### setStateとは?
React hooksの代表的な機能で、主にクラスコンポーネントにおいて用いられるメソッド。
Reactを使うなら `useState`と`this.setState()`は避けれない(やってることは同じ..だと思う)### なぜこんなことを考えたのか
とあるコードにおいて新しい配列をstateに反映し、その直後に更新したstate変数の配列をいじるようなことになった。以下がその例
“`react
//とあるクラスコンポーネント内//選択したタスクアイテムを編集可能にしてフォーカスするためのメソッド
changeItemEditable(id:string){
const items: CheckListItem[] = this.state.checklist.map((item:CheckListItem) => {
return {
id: item.id,
name: item.name,
isChecked: item
JavaScript プリミティブ型 オブジェクト
JavaScriptの型を忘れないようにメモを残します。
#### プリミティブ型
“`
String Null
Number Symbol
Boolean Biglnt
Undefined
“`
#### オブジェクト
“`
Object
プリミティブ型以外
“`
【2023年版】pydantic2でFastAPIでスネークケースをキャメルケースに自動変換する
## はじめに
Pythonがスネークケースが主流であるのに対し、JavaScriptはキャメルケースが主流です。
JSONを返却する際にキャメルケースに変換する方法をまとめました。
FastAPIは、2023年現在ではまだまだ発展途上のフレームワークで、記述方法も都度変わっています。2023年時点での最新情報であることをご了承ください。## 対象者
この記事は下記のような人を対象にしています。– FastAPIでAPI開発をしている人
– pydantic1を使用していたが、## 前提
– **FastAPIのバージョン: 0.103.2**
– **pydanticのバージョン: 2.4.2**pydanticのバージョンが古い場合とは書き方が異なることに十分ご注意ください。
## 結論
データベースからUserデータを取得し、JSON形式で返却する場合を考えます。
`ConfigDict` を使用するのがポイントです。“`python:user_schema.py
from pydantic import BaseModel, ConfigDict
fr
React×TypeScriptでhtmlのinputタグのonChangeみたいな動作をする入力コンポーネントの作成(備忘録)
# めっちゃ簡単
“`react
import {Component, ChangeEvent, KeyboardEvent} form “react”export class TextInput extends Component<{ type?: "text"|"email"|"password", value?: string, className?: string, onChange?: (e:ChangeEvent) => void,
onCommit?:(e:KeyboardEvent) => void
}> {
state: {
isComposition: boolean
} = {
isComposition: false
}
render() {
return <>
JavaScript まわりの用語あれこれ
# 概要
～script だの ～js だのが多すぎたのでまとめ。# ECMAScript
– JavaScript の仕様、構文などをまとめた標準規格
– 要するに JavaScript のバージョンを示す（ 例：ES6 )—
# Browser JS
– ブラウザ上で動作する JavaScript 環境
– 正確にはこんな単語はない（単に「ブラウザ上で動くJS」の意）
– 正確な表現があれば教えてください# Node.js
– サーバー側で動作する JavaScript 環境
– **npm ( Node Package Manager )** と呼ばれるパッケージの管理システムを同梱している—
## CommonJS
– JavaScript において、**モジュール**を使用するためのシステム
– Node.jsではデフォルトで全てのモジュールをこれで扱っている
– `require()`、`module.exports`などを使用## ESModules
– ECMAScript 標準のモジュール管理システム
– 最新版の No
[Vue.js] Vue.jsを学ぶ①
## はじめに
今回はゼロからVue.jsについて学んだため備忘録として書きました。
環境設定からディレクティブまでです。## 環境設定
### 読み込み方法
1. CDN **一番簡単**
HTMLのbodyの終了タグの直前に以下を入力する
“`vuejs:CDN
“`
1. 直接読み込み(ファイルをダウンロードして配置)
1. NPM(パッケージ管理ソフトの利用)
1. Vue CLIを使ってプロジェクトの基礎を作る:::note
Vue.jsを読み込んでからJavaScriptを読み込む
:::### VSコードでオススメの拡張機能
[**Vetur**](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
Vueに特化した拡張機能で以下のことが可能– シンタックスハイライト
– スニペット
– Emmet
– リンティング/エラーチェック
– フォーマット
– インテリセン
JavaScriptのURL操作
JavaScriptはよくWebブラウザやWebサーバーで使われるので、URLを操作することもあります。
URLの値を取得したり、操作したりする方法をメモします。
使用しているのURLは私の過去の投稿記事です。“`js
const url = new URL(‘https://qiita.com/yuta-10112022/items/81e7ac587aaa6afeb3e4’);
console.log(url.href); // https://qiita.com/yuta-10112022/items/090d4f302f1edcefcf86
console.log(url.origin); // https://qiita.com
console.log(url.protocol); // https:
console.log(url.hostname); // qiita.com
“`
urlのプロパティは読み書きすることができ、部分的に変更することができます。
“`js
const url = new URL(‘https://example.com’);
url
日付を操作するDateオブジェクト
良く使う、Dateオブジェクトについて、まとめてみました。
(個人的にはどんどん追記していきたい)
# 目次
1. Dateオブジェクトとは
2. 呼び出し方
3. 日時を読み取るメソッド
4. 日時を変更するメソッド
5. 使い方
6. Reactライブラリ
# 1. Dateオブジェクトとは
カレンダー作成や日付取得に用いるオブジェクトです。
# 2. 呼び出し方
Date型としてDateオブジェクトを呼び出します。
“`
const now :Date = new Date();
“`# 3. 日時を読み取るメソッド
| メソッド名 | 説明 |
|:-:|:-:|
| getFullYear()| 年を4桁で返す(例: 2022) |
|getMonth() | 月(0-11)を返す|
|getDate() | 日(1-31を返す) |
|getDay() | 曜日(0-6)を返す ※0は日曜日 |
|getHours() |時間(0-23)を返す |
|get
CSVファイルをFileAPIで読み込む
言わずと知れたCSVファイルを、EXCEL等で出力されるシフトJIS形式の状態で読み込めるJavaScriptコードを書いてみます。
# 実行条件
– 入力対象となるCSVはソフトJIS形式である。例えば郵便局の[郵便番号データ](https://www.post.japanpost.jp/zipcode/download.html)を加工無しで読めるようにする。
– フレームワークは用いずVanillaJSで書く。
– なるべくシンプルなコードとし装飾も最低限にする。
# 対象コード
シフトJIS形式によるテキストファイルを読み込む場合、問題になるのは **実際のHTML上で使用されているキャラクターコードとの相違をどうするか？** ということです。下記コードにおいては、[encoding.js](https://github.com/polygonplanet/encoding.js/blob/master/README_ja.md)により解決しています。
“`
TypeScriptの環境構築とコンパイルこんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。少しずつ、JavaScriptの勉強をして理解を深めようとしている私ですが、その目的としてDjangoとReact Native(Expo)でWeb/スマホアプリの開発方法を理解しサービスを開発したいというものがあります。
「React Nativeを学べよ！」という声が聞こえたり聞こえなかったりしますが、個人的な感覚で話をすすめると、React Nativeを理解するにはJavaScript/TypeScript/Reactでどういう書き方をするのか、相互の関係性を理解することは避けて通れない気がするのです。そこで今回はTypeScriptの環境セットアップを行い、ChatGPTの力を借りつつ以前作成したJavaScriptをTypeScriptにあえて変換し、どういう書き方の違いがあるのか等を確認してみたいと思います。
# 参考サイト
TypeScriptを使用するためにはNode.js環境が必要になるみたいです。
私の環境は以下のQiitaで記載している通りNVSを使ってNode.js環境を作って
kintone テーブルの変更イベントで行位置を求める
kintone テーブルの変更イベントには、テーブル行位置の情報が無いので、テーブル行位置を求めてみます。
# 概要
テーブルの変更イベント時の情報には、テーブル行のオブジェクトがあるので、テーブルの各行とオブジェクト比較を行うと、テーブル行位置を求めることができます。
例：
table[i] === event.changes.rowcybozu developer network [レコード編集画面でフィールドの値を変更したときのイベント](https://cybozu.dev/ja/kintone/docs/js-api/events/edit/edit-change-event/)
>changes.row オブジェクト 値を変更したテーブルの行データ
行を追加した場合：追加した行のデータ
行を削除した場合：「null」
テーブル外のフィールドを変更した場合：「null」# 確認用アプリ
テーブル内項目を変更したら、テーブル行位置に行位置をセット
FullCalendarライブラリで日付の移動をするときに、2/31や4/31などカレンダー上存在しない日付であるかチェックをする関数をどうやって実装するか調べました。
前回記事：
https://qiita.com/taitaitai55/items/5c0d8e1446474b77b208
■改善点
Dateオブジェクトを生成するときに「new Date(‘1/01/41’)」とすると、2041/1/1(Tue Jan 01 2041 00:00:00 GMT+0900 (日本標準時))で生成されます。
1年1月41日と解釈すると、カレンダーの日付として存在しないため、厳密なチェックをする必要があります。
厳密なチェックとして、文字数のチェックや正規化を使ったカレンダーの日付の範囲であるかのチェックを関数に加えてみました。■関数
“`Typescript:sample1.ts
// 引数は、年・月・日の３つ
// 戻り値は、true:カレンダー日付として存在、false:カレンダー日付として存在しない
const isValidCalendarDate = (year:
jQueryで実行順序を保証する記述方法
※この記事は僕がぶち当たった問題をとりあえずChatGPTくんに丸投げしてライティングしてもらったものです。
jQueryを使用してWeb開発を行う際、時には特定のコードが正確な順序で実行されることが重要です。
これには、異なる要素や処理が依存関係を持っている場合や、特定の初期化手順が必要な場合があります。
この記事では、そのようなケースで実行順序を確実に保証するためのjQueryの記述方法に焦点を当てます。# コードの依存関係を理解する
まず初めに、コード内の異なる部分がどのように依存しているかを理解することが重要です。
例えば、特定のDOM要素が存在するかどうかを確認してから特定の処理を実行する場合などが挙げられます。
“`js
$(document).ready(function() {
// 依存関係を確認
if ($(‘#myElement’).length) {
// 依存関係が満たされたら処理を実行
myFunction();
}
});function myFunction() {
// ここで
