- 1. 【JavaScript】Mastodonで情報収集(コピペでお試し可)
- 2. パッケージ管理を理解したい
- 3. Immer で組み込みクラスや独自クラスなどのインスタンスは扱えるのか
- 4. JavaScript タイマー機能 メモ
- 5. react-native-sqlite-storageとexpo-sqliteの罠
- 6. Fetch APIを使う際のエラーハンドリング
- 7. Railsでjqueryのajaxを使ってCSVインポート・エクスポートを実装
- 8. React + TypeScript: カスタムフックでロジックを再利用する
- 9. モジュールについて理解したい２
- 10. ファンタスティックなテール・コールとその実行方法
- 11. Nuxt3で採用されているサーバーエンジン nitroとは？
- 12. Node.js上のCLIツールで文字列をクリップボードにコピーさせる
- 13. Javascriptにおけるデコレータとは？
- 14. Spring BootとMySQLでメモアプリを開発しました #3【駆け出し】
- 15. なぜ”Hello, World!”なのか
- 16. 30歳から目指すWEB開発者
- 17. 主要言語で任意精度演算
- 18. エクセルLIKEなテーブルフィルタのつくりかた【Javascript】
- 19. Vue RouterでAPIが404エラーになった場合エラー画面を表示する方法
- 20. Twitter Clone まとめ part1-10
【JavaScript】Mastodonで情報収集(コピペでお試し可)
おはようございます！大先生です。
近頃TwitterがAPIの制限を増やしたり、サービス名をXにしたりとやりたい放題で
そろそろ潮時かと思い、Mastodonで情報収集する方向性で持っていこうというお話。## そもそもMastodonって何？
Mastodonとは、Twitterアンチの方が作成した非中央集権型SNSを提供するためのソフトウェアです。
同じ仕組みで動作しているソフトウェアにMisskeyというものがあり、
こちらは日本人のsyuiloさんが作成した非中央集権型SNSです。
~~(実はMisskeyのほうが見やすくてサブカルに強いイメージがあるので個人的にはこっちのほうが好き)~~#### Tips: 非中央集権型SNSとは
サーバーに情報を蓄積していくSNSサービス(TwitterやFacebookなど)とは違い、
ブロックチェーン技術を用いてデータの分散を行ったSNSのこと。
上記の特性上、
– 運営のヘイト買って利用規約違反していないにも関わらずBANされる
– 金曜ロードショーで天空の城ラピュタが放映したときにサーバーがバルスされる
なんてことにならないの
パッケージ管理を理解したい
おはようございます！
昨日の記事ではモジュールの概念と現代の開発における影響というようなところを調べました。
webのコンテンツをよりリッチに作れるようになったので、開発が複雑化してモジュール化の重要性やフレームワークの必要性が増したということでしたね。https://qiita.com/yangyooji1946/items/32541850d97e7e8a0e48
さらに、なぜwebのコンテンツがリッチ化してきたのかというと、その前の回の第二次ブラウザ戦争でブラウザ間の互換性が進み開発がしやすくなったことや、ブラウザの性能が上がったことでJavascriptのポテンシャルを存分に活かせるようになったことなどがありましたね！
https://qiita.com/yangyooji1946/items/703ef69d4502fb92d5ea
今日からはモジュールの続きとしてパッケージ管理について調べていきたいと思います！
### そもそもパッケージ管理とは？
パッケージ管理とは、ソフトウェアのライブラリやツール、**依存関係**などを一元的に管理するプロセスです。開発
Immer で組み込みクラスや独自クラスなどのインスタンスは扱えるのか
# 概要
Immer で何が扱えて何が扱えないのか、特に独自クラスのインスタンスは扱えるのかについて書きます。
https://immerjs.github.io/immer/complex-objects/
これが公式の説明だけど、この文章を読んでいると結構JSの基礎力が試される感じがあったので、細かく解説します。
注釈がない限り以降の引用は上記のページからのものとします。
Immer のバージョンは `10.0.2` です。# 先に結論
– 実用上、基本的に何らかのクラスのインスタンスであっても問題なく使えると思って良い（若干の含みがある理由は以降で解説）。
– カスタムクラスの場合、`immerable`シンボルをキーとするプロパティに `true` を入れる必要はあるが、それ以外は特別な対応は不要。
– ただし、DOMノードやBuffer、Dateなど環境依存なネイティブオブジェクトは扱えない。
# 何もせずにImmerで扱えるもの
> Plain objects (objects without a prototype), arrays, Maps an
JavaScript タイマー機能 メモ
# タイマー機能
– JavaScriptのタイマー機能は`setInterval()`と`crearInterval()`メソッドがある
# setIntervalメソッド
– `setInterval()`メソッドは一定時間ごとに処理を実行する# crearIntervalメソッド
– `crearInterval()`はタイマー機能を止めたい時に用いる
– `clearInterval()`メソッドの引数に`setInterval()`メソッドの戻り値(止めたい処理の変数)を渡すことで、タイマーを止めることができる。# コード
“`time.js
const id = setInterval(() => {
処理;
if(処理したい条件){
crearInterval(id);
}
}, 一定時間);
“`
react-native-sqlite-storageとexpo-sqliteの罠
react-nativeでiosアプリを開発していた時の話
最初は楽だからexpoで開発を進めていたが、ネイティブコードを記述する必要が生じたため急遽RNCLIでの開発環境に移行することになった。
expoではデータベースを用いるのに”expo-sqlite”というライブラリを利用していたが、RNCLIでは使用できないため、”react-native-sqlite-storage”を用いる必要があった。# 生じたトラブル
_SELECTしてきたデータを正しく変数に格納できていない_具体的に見ていきましょう。まず、expo-sqliteのコードを示します。
“`javascript:expo-sqlite
const db = SQLite.openDatabase(‘DATABASENEME.db’);
db.transaction((tx) => {
tx.excuteSql(
“SELECT * FROM TABLENAME;”,
[],
(_, resultSet) => {
var re
Fetch APIを使う際のエラーハンドリング
## はじめに
Fetch APIを使った処理のエラーハンドリングはどうするのが正解なのか、色々調べながら試してみて、とりあえず下記のような形式で落ち着いたので紹介したいと思います。## 実際のコード
今回はReactを使ったPOSTメソッドでの処理を例に挙げてみます。
バリデーションエラーメッセージがあることも考慮して作りました。“`javascript
// APIを叩く関数
export const post = async (apiEndpoint, token, dataBody) => {
try {
const res = await fetch(apiEndpoint, {
method: “POST”,
headers: {
Authorization: `Bearer ${token}`,
“Content-Type”: “application/json”,
},
body: JSON.stringify(dataBody),
});cons
Railsでjqueryのajaxを使ってCSVインポート・エクスポートを実装
## 概要
※初投稿なので読みづらかったらすみません
RailsにてCSVインポートエクスポートをしたかったのですが、
リクエストをjqueryのajaxで行い、json形式でレスポンスを返す必要があり、form_tagなどのヘルパーメソッドで完結できませんでした。
また、エクスポートに関しては、一度CSVファイルを作成し、それをエクスポートする必要がありました。（既存のCSVファイルのエクスポート
実装に時間がかかったので、まとめることにしました。## コード（CSVインポート）
“`ruby:index.html.erb
<%=form_tag'', method: 'post', multipart: true, id:"importForm" do %>
<% end %>
“`“`javascript:import.js
// インポートボタン押下時の処理
let param1
React + TypeScript: カスタムフックでロジックを再利用する
React公式サイトのドキュメントが2023年3月16日に改訂されました(「[Introducing react.dev](https://react.dev/blog/2023/03/16/introducing-react-dev)」参照)。本稿は、応用解説の「[Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。
Reactには、`useState`や`useContext`、`useEffect`などさまざまな組み込みフックが備わっています。けれど、もっと特定の目的に応じたフックが必要になることもあるでしょう。たとえば、つぎのような用途です。
* データの取得。
* ユーザがオンラインかどうかの監視。
* チャットルームへの接続。Reactの組み込みフックには見当たらないかもしれません。けれど、
モジュールについて理解したい２
おはようございます！
昨日の記事では、モジュールとは何か、名前空間の問題、そしてそれらを解決するためのモジュール化の重要性について調べてみました。CommonJS, AMD, ES6モジュールなどの規格があり、モジュールの概念をうまく使うことによって、コードの整理と管理が簡単になることが分かりました！https://qiita.com/yangyooji1946/items/b8dfd322468d10e0cdef
今日はさらに具体的にモジュールがどう利用されてどん便利なのかを調べていきたいと思います！
### 野球的にモジュールを考えてみる
モジュールはコードを小さな部品に分割し、それぞれを独立して開発･テストができる概念です。これを野球的に考えると、例えばピッチャーやキャッチャーなどの守備位置に喩えることができます。
チームとして捉えると、「守備」という1つの処理ですがその中でも各ポジションの選手がそれぞれ別の処理を行っているので、９通りの処理があります。
各ポジションのモジュールが用意されている状態なので、ピッチャーに指示を与えたいときはピッチャーモジュールの処理を変
ファンタスティックなテール・コールとその実行方法
再帰はコンピュータ・サイエンスの基本的なプリミティブのひとつである。多くのアルゴリズムは、一般的な問題を再帰的な部分問題に単純化することによって生まれた。コードの観点からは、再帰は関数がそのロジックの一部として自分自身を呼び出すことを意味する。スタックは関数のインスタンスごとに消費されるため、過剰な再帰の深さはスタックオーバーフローとして知られる問題を引き起こす！
再帰呼び出しがたまたま末尾の位置（つまり関数が戻る直前）にある場合、この問題は末尾再帰を使うことで解決できる。この文脈では、呼び出し側のスタック・フレームを再利用してから呼び出し側にジャンプすることで、呼び出しを末尾呼び出しに変えることができる。これは、関数型プログラミング言語の一部で使用されているCPS（Continuation Passi
Nuxt3で採用されているサーバーエンジン nitroとは？
「Nitro」は、Nuxt.jsの新しいバージョンである「Nuxt 3」で採用されているサーバーエンジンです。Nuxt 3は、Nuxt.jsチームによって開発された、モダンなウェブアプリケーションを構築するためのフレームワークです。Nuxt 3は、従来のNuxt.jsとは異なるアーキテクチャを持ち、高速なサーバーサイドレンダリングとパフォーマンスの向上を重視しています。
Nitroは、Nuxt 3の中核を成すサーバーエンジンで、以下の特徴を持っています
### Nitroの５つの特徴
1. **高速なサーバーサイドレンダリング（SSR）**: Nitroは、高速なSSRを提供することを目指して設計されています。事前レンダリングとクライアントサイドレンダリングの組み合わせにより、快適なユーザーエクスペリエンスを提供します。
2. **インクリメンタルなデータ取得**: Nitroでは、コンポーネントのデータ取得を必要な箇所に適用できる「インクリメンタルデータフェッチ」がサポートされています。これにより、必要なデータだけを取得して効率的にページを更新することができます。
3.
Node.js上のCLIツールで文字列をクリップボードにコピーさせる
# 概要
個人的な用途で、Node.jsのCLIツールを作っていました。求める機能としては、「標準入力した複数行の文字列を、(若干加工した後)1行ずつ逐次クリップボードにコピーさせる」というものでした。クリップボードへのアクセス以外については比較的苦しむことなく実装できたのですが、クリップボードへのアクセスを行う方法について簡単に調べたところ、殆どの記事で「このnpmパッケージを使え」みたいなことが書かれており……「その部分除けば50行もないコードの為にpackage.json書けとでも……？！」という気分になった結果、どうにかNode.jsに付属している機能だけで何とかすることができたので、それについて書いていきたいと思います。
# コード
完成形としては以下のようなものになりました。
“`javascript
const {exec} = require(‘node:child_process’);
function clip(str) {
exec(`echo ${str} | clip`);// ※Windows以外の環境ではここをいじる必要がある
}cons
Javascriptにおけるデコレータとは？
JavaScriptにおけるデコレータは、関数やクラス、メソッドなどの動作を修飾するための仕組みです。デコレータは、他の関数やクラスに適用され、その処理を変更、拡張、またはラップするために使用されます。これにより、コードの再利用性やメンテナンス性を向上させることができます。
デコレータは、通常は関数として定義され、対象となる関数やクラスの定義の前に「@デコレータ名」の形式で記述されます。デコレータが適用された対象に対して、あらかじめ定義された処理が自動的に適用されるという仕組みです。
### JavaScriptにおけるデコレータのサンプル
“`javascript
function logDecorator(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (…args) {
console.log(`Calling ${name} with arguments: ${args}`);
const resu
Spring BootとMySQLでメモアプリを開発しました #3【駆け出し】
# Spring Bootでの開発
Spring Bootで作成した簡易メモアプリにスタイルを当てていなかったため、
CSSを少し学んだ後、アウトプットのためにアプリケーションにスタイルを追加していく過程です。【 前回の記事 】
https://qiita.com/Takatsuna/items/7be62afa19cb2cd92b88## 作ったもの
#### 簡易メモアプリ
リポジトリ: https://github.com/takatsuna113/spring-memo-app[ 前回 ] Home画面と詳細画面のみ
[ 今回 ] 編集・新規作成・ゴミ箱の画面を追加 ← new
## 使用技術
– Spring Boot 2.7.12
– Java 11
– Maven(ビルドツール)
– MySQL(DB)
– Mybatis(O/Rマッパー)## テーブル定義
[こちら](https://qiita.com/Takatsuna/items/31af8b007a44f2c3a900)の記事を参照ください。##
なぜ”Hello, World!”なのか
**なんで”Hello, World!”なの？**
もはや、エンジニアの登竜門、義務教育的な存在になっている”Hello, World!”の出力。使い方としては、標準出力のチュートリアルとして共通となっています。!マークを付けるかどうか、大文字小文字など、微妙な違いや種類はあるものの、なぜかみんな世界に挨拶をしていますよね。
大抵のプログラミング言語の入門書では、このプログラムを作ることを最初の例題としており、新しくプログラミング言語を習得する際に最初に作るのがこのプログラムです。
そのため、「**世界一有名なプログラム**」と呼ばれることもあります。
こんなこと疑問に持つ人も少ないと思いますが、講義や参考書などでも教わっていなくて、気になったので調べてみました。# Hello, World!の目的
以下、Wikipediaから一部抜粋。
> ハロー・ワールドは伝統的にプログラミング言語をプログラム初心者に紹介するために使われる。また、ハロー・ワールドはプログラミング言語が正しくインストールされていること、およびプログラミング言語の使用方法を理解するための健全性テストにも使用さ
30歳から目指すWEB開発者
# はじめに
こんにちは！
早速ですが、まずは簡単に自己紹介させてください。– 大学は都内の理系大に進学しますが、麻雀ばかりにかまけ留年しまくり退学
– 退学後インフラを中心に派遣しているSES企業に入社
– 言われたことだけこなす環境に疑問を覚え、自社サービスを開発している企業に転職
– あまり状況が変わらず、ビジネスに役立っている実感を得られず悩む
– もっとビジネスに貢献できている実感が欲しくてWEB開発者になろうときめる←今ココネットワーク、インフラについては少しだけわかりますが、開発のことはほとんど何も知らないところからスタートします。
# 勉強する言語
javascriptを選びます。
理由はフロントエンド、バックエンドどちらでも利用できるのでコストが低いと考えたからです。# ロードマップ
何から勉強したらいいのか見当もつかないのでchatGPT先生に聞いてみます。
![スクリーンショット 2023-08-15 21.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com
主要言語で任意精度演算
# JavaScript
“`fig.html
```https://jsfiddle.net/orb85g0d/
# Python
Python 3ではintに上限はない模様。```fig.py
# Python 3
a = "3"
b = "3"
for i in
エクセルLIKEなテーブルフィルタのつくりかた【Javascript】
## 目次
[はじめに](#はじめに)
[filter.js キック(vue created)](#filterjs-キックvue-created)
[tFilterInit関数 解説](#tfilterinit関数-解説)
[tFilterCreate関数 解説](#tfiltercreate関数-解説)
[tFilterAllSet関数 解説](#tfilterallset関数-解説)
[tFilterClick関数 解説](#tfilterclick関数-解説)
[tFilterGo関数 解説](#tfiltergo関数-解説)
[tFilterCancel関数 解説](#tfiltercancel関数-解説)
[tFilterSave関数 解説](#tfiltersave関数-解説)
[tFilterCloseOpen関数 解説](#tfiltercloseopen関数-解説)
[filter.js コード全文](#filterjs-コード全文)
[ソースコード（Git）](#ソースコードgit)
[参考サイト](#参考サイト)## はじめに
ここでは以下で紹介した家計簿ア
Vue RouterでAPIが404エラーになった場合エラー画面を表示する方法
## 初めに
Vue.js で 404 エラーが発生した場合、エラー画面を表示するための小ネタです。誰かのお役に立てれば幸いです。## Vue Routerとは
Vue Router（ヴュールーター）は、Vue.js アプリケーション内でクライアント側のルーティングを管理するための公式ルーティングライブラリです。シングルページアプリケーション（SPA）を作成する際に、異なる URL パスに対して異なるコンポーネントを表示するための仕組みを提供します。今回はRouterを利用して動的ルーティングで404エラー画面を表示します。
## 1．Vue Routerをインストール
```bash
npm install vue-router
```
## 2．Vue Routerの設定 (Vue2の場合)
```javascript
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import ErrorPage from '@/view
Twitter Clone まとめ part1-10
# 講座
https://www.udemy.com/course/react-js-tutorial/learn/lecture/32461766?start=60#overview
# 一覧
## Part1 サイドバー作成
https://qiita.com/RYA234/items/1c97f3e81f86e10d0adb
## Part2 ヘッダー作成
https://qiita.com/RYA234/items/be58605
