- 1. RustとWebAssemblyでFaviconマルチアイコンChecker作ってみた
- 2. RustとWebAssemblyでFaviconGenerator作ってみた
- 3. 【個人開発】旅行やデートのプランを共有するSNS「Go out Planning」を作成しました
- 4. Vue.jsのチュートリアルを触ってみる #入門
- 5. JavaScript、HTML、CSSを使って画面切り替えをつくろう！
- 6. p5.js で p5.tween を使った複数のボールがバウンドするアニメーションを作る
- 7. バックエンド開発入門「コマンド」
- 8. 【初心者向け🔰】CodeWars【学習サイト】
- 9. 【Figma Plugins】Figma PluginsでAnnotationを作成する
- 10. javascript勉強 クラス
- 11. ブラウザの WebHID を p5.js Web Editor上で利用する：デバイスは DualShock 4
- 12. p5.js で様々な画像処理を高速・手軽に行える p5.FIP（Fast Image Processing）を紹介したい！
- 13. 【JavaScript/React】よく使うメソッドや構文25選
- 14. 乱数圧縮もどき
- 15. React19にuseOptimicが出て楽観的更新ができるようになった
- 16. 配列に対する処理 for, forEach, find, filter
- 17. Vue.jsとは ？ #JavaScript初心者
- 18. 山の位置をARで表示する技術ブログ：ロケーションARの基本
- 19. JavaScript入門 #文字列型 #数値型 #配列 #日付型
- 20. JavaScriptにおけるオブジェクト指向プログラミング
RustとWebAssemblyでFaviconマルチアイコンChecker作ってみた
# はじめに
前回作成した「RustとWebAssembly使ってFaviconGenerator」に引き続き同じ構成で
学習用にRustとWebAssembly使ってFaviconのマルチアイコンChecker的なのを作成しようと思います。
https://qiita.com/shisojuice/items/2ce43d25ec48c2c36486
faviconについて
https://developers.google.com/search/docs/appearance/favicon-in-search?hl=ja
# プロジェクトの作成
前回のFaviconGeneratorの続きで書いていく。
今回は、wasmでFaviconのdataを受け取り、icoクレートを使用して
マルチアイコン内の画像数を出力する関数を作成する。
Favicon(.ico)画像を読み取りicoクレートのIconDirに入れる。
IconDir内に含まれるIconの数だけWidthとHeightを表示していくような処理にする。
最後に、出力結果の文字列を返す。
RustとWebAssemblyでFaviconGenerator作ってみた
# はじめに
下記で作成した「RustとWebAssembly使ってAsciiアート」に引き続き同じ構成で
なんとなくですが、学習用にRustとWebAssembly使ってFaviconGenerator的なのを作成しようと思います。
https://qiita.com/shisojuice/items/2413580f72244a4823c7
faviconについて
https://developers.google.com/search/docs/appearance/favicon-in-search?hl=ja
# プロジェクトの作成
wasm-packのテンプレートを作成。
今回は、wasmでimageのdataを受け取り、画像加工しFavicon作成して出力する関数を作成する。
画面のRadioButtonで背景の指定があった場合は、その背景色に合わせて背景を加工する。
背景の判定ロジックは処理を簡単にするため左上Pixelを背景色とした。(どんなアプローチがあるのか勉強したい🐬)
背景色と同じなら指定色にPixelを入替する。
“`r
【個人開発】旅行やデートのプランを共有するSNS「Go out Planning」を作成しました
# はじめに
はじめまして3rararaと申します！
今回は旅行やデートのプランを共有するSNS「Go out Planning」を作成したため、
記事にまとめておこうと思いますこれからポートフォリオを作成しようと考えている方などの一例として、作成の一助となれば幸いです！
AI機能などまだまだ機能を追加予定ですので、その度に記事もアップデートできたらと考えています！✨
【サイトURL】
https://go-out-planning.net
【Github URL】
https://github.com/3rarara/go_out_planning
本記事では、「Go out Planning」の概要やこだわりポイント、
苦労した点などについて書いていきます！
機能の実装につ
Vue.jsのチュートリアルを触ってみる #入門
## はじめに
本記事では、JavaScriptフレームワークの一つであるVue.jsの公式チュートリアルを実行していく中で学んだことを記事にまとめていきたいと思います。
前置きが少しあるのでチュートリアルのコードから見ていきたい方は[コチラ](#APIスタイル)から読み進めてください！
最初に、参考にした公式サイトを載せておきます。
https://ja.vuejs.org/tutorial/#step-1
## 実行方法について
公式のクイックスタートページにてチュートリアル環境以外に３つの実行環境が提供されていましたので紹介します。
### Playground
https://play.vuejs.org/#eNo9jcEKwjAMhl/lt5fpQYfXUQfefAMvvRQbddC1pUuHUPrudg4HIcmXjyRZXEM4zYlEJ+T0iEPgXjn6BB8Zhp46WUZWDjCa9f6w9kAkTtH9CRinV4fmRtZ63H20Ztesqiylphqy3R5UYBqD1UyVAPk+9zkvV1CKbCv9poMLiTEfR2/IXpSo
JavaScript、HTML、CSSを使って画面切り替えをつくろう！
# はじめに
下記画像のように、「Aボタン」をクリックすると「A画面」が、
「Bボタン」をクリックすると「B画面」が表示されるような
画面切り替えをJavaScript、HTML、CSS を使って作成していきます。
# JavaScript、HTML、CSS ファイルの作成
ますはJavaScript、HTML、CSS のファイルを同じ階層に作成します。
##
バックエンド開発入門「コマンド」
#### バックエンド開発入門
サーバーとデータベースの基礎
これから作成するページは動的なページです。
サーバーがリクエストを受け取り、処理を行った結果としてHTML、CSS、JavaScriptをレスポンスとして返します。そのレスポンスをブラウザが受け取り、内容を描画するという流れです。
このプロセスを理解することで、動的なWebアプリケーションを開発できるようになります。## 目次：
– [ターミナルの使用方法](#ターミナルの使用方法)
– [基本コマンド](#基本コマンド)
– [まとめ](#まとめ)## ターミナルの使用方法
ターミナルは、テキストベースでPCとやり取りするツールです。
ターミナルを使うことで、GUIよりも効率的に開発が可能になります。
また、普段は見えない領域にアクセスしたり、サーバーの管理、動いているプロセスの停止、設定ファイルの操作など、さまざまな作業ができます。多くの開発ツールはターミナルから操作する必要があるため、ターミナルの使用に慣れることは重要です。
#### 紛らわしい用語
ターミナル: コンピュータを操作するためのテキ
【初心者向け🔰】CodeWars【学習サイト】
# はじめに
https://www.codewars.com/dashboard
Codewars というサイトをご存知でしょうか
いろんな言語のアルゴリズム問題を解くことができるサイトです。類似するサイトで有名なものだと「AtCoder」や「Paizaラーニング」があります。
# Codewarsのオススメな点
個人的には、アルゴリズム問題サイトで一番オススメです。## 時間制限がないから、学習に集中できる
:::note alert
PaizaラーニングやAtCoderは**時間が計測されます**。
また、Paizaラーニングでは**時間制限があります**。
:::私的な話になりますが、時間が計測されていると集中ができません。
また、
– 「雑に書いても早くしたい」
– 「ミスの可能性とトレードオフに、スピードを求める」ということが起こります。
これは学習とは真逆です。
また、実際の開発においても不要な考えだと思います。
この点、CodeWarsには**時間制限がない**ため、のびのびと学ぶことができます。
## トライ&エラーできて、学びの効率
【Figma Plugins】Figma PluginsでAnnotationを作成する
## はじめに
FigmaのPluginを開発する際、Annotationを作成したいと思ったことはありますか？
この記事では、Figma PluginsでAnnotationを作成する方法を解説します。## Annotationを作成する
:::note warn
Annotationを作成するには、editorType が devの時のみ設定できます。
Anotationを読み取るには、どのモードでも可能です。
:::Annotationを作成するには、`annotations` を利用することで、Annotationが作成されます。
“`ts
annotations: ReadonlyArray
“`annotationsのInterfaceは以下のようになっています。
“`ts
interface Annotat
javascript勉強 クラス
お疲れ様です。
昨日まで編集していた自己紹介ページは、背景画像をjsやjQueryを用いて動きをつけられるようになるまでは一旦置いておき、jsの復習をします。
## p5.js で過去に画像処理をやった時の話
これまで、p5.js で
【JavaScript/React】よく使うメソッドや構文25選
最近Reactを触り始め、Javascriptで使う構文やメソッドをいくつか使ってみたので、アウトプットもかねて整理してみました。
## 1. mapメソッド
与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
“`Javascript
const array1 = [1, 4, 9, 16];// Pass a function to map
const map1 = array1.map((x) => x * 2);console.log(map1);
// Expected output: Array [2, 8, 18, 32]
“`## 2. filterメソッド
配列内の各要素に対して与えられた関数を適用し、条件を満たす要素のみを含む新しい配列を生成します。
“`Javascript
const words = [‘spray’, ‘limit’, ‘elite’, ‘exuberant’, ‘destruction’, ‘present’];const result = words.filter(w
乱数圧縮もどき
乱数列の圧縮についてべらべらと白状していこうと思います。今回は特定の条件を満たす乱数列が対戦相手となります。その条件とは…
* 乱数は重複なく出現(同じ数は出現いない)
* 出現順はどうでもいい例えば以下のような乱数列。256要素あります。211 bytes程度に圧縮できます。
“`
176,83,245,139,239,183,10,26,96,253,111,7,121,59,100,160,86,51,193,181,17,166,67,203,171,161,25,243,237,196,194,62,73,184,226,167,112,34,118,128,174,0,60,195,169,173,211,113,94,145,119,244,123,198,15,68,214,156,109,131,165,140,107,134,150,168,218,240,191,201,197,180,210,44,58,22,35,5,187,47,202,9,78,52,75,163,13,14,27,222,246,16,252,92,200,132,21,114,
React19にuseOptimicが出て楽観的更新ができるようになった
## はじめに
React19で新たに追加された`useOptimistic`フックは、開発者が楽観的なUI更新を簡単に実現できる強力なフックです
本記事では、この新フックの基本的な説明、使用例、利点と注意点、React18以前の実装方法との比較を紹介します## 楽観的更新とは
ユーザーの操作に対して非同期処理の完了を待たずにUIを更新する手法のことです
楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UXの向上につながります## `useOptimistic`フックの基本的な説明
`useOptimistic`フックは次のように使用します
“`jsx
const [optimisticState, updateOptimisticState] = useOptimistic(initialState, (currentState, optimisticValue) => {
// actionに基づいてstateを楽観的更新するロジック
return newState;
});
“`– `initialState`
– 初期状態
配列に対する処理 for, forEach, find, filter
新人エンジニアの三上です。
今回は、配列に対する操作の中で、私が実際に使用したことのあるものをまとめてみようと思う。## for
配列の要素をループごとに変数に代入し、そのループ内で変数を使用する。
以下にサンプルコードを示す。“`Kotlin:for
val sampleList = [0,1,2,3,4,5]for (sample in sampleList) {
if (sample == 2) {
println(sample)
}
}
“`配列 sampleList の要素を 変数 sample に設定し、sample に対し、条件判定を行うことで、任意の要素を出力する。
## forEach
for と処理は同様だが、記載の方法が異なる。
以下にサンプルコードを示す。“`Kotlin:forEach
val sampleList = [0,1,2,3,4,5]sampleList.forEach {sample =>
if (sample
Vue.jsとは ？ #JavaScript初心者
## はじめに
JavaScriptについてチュートリアルを用いて基礎的な部分を中心に学習を進めていく中で少し自信がついてきたので今回はフレームワークの一つであるVue.jsについて触れていきたいと思います！
最初は描き方ではなく、Vue.jsの概要についてまとめ、具体的な記述方法については学習が終わり次第、記事にまとめて公開したいと思います。
本記事の作成にあたって参考にしたサイトのリンクを掲載しておきます。いまいち理解出来なかった方は是非参考にしてみてください。
https://ja.vuejs.org/guide/introduction
https://www.sejuku.net/blog/10766
## Vue.jsとは？
Vue.jsは、標準的な HTML、CSS、JavaScript の上に構築されるユーザーインターフェースの構築のためのJavaScriptフレームワークです。
ほかの開発ツールと組み合わせやすく、保守・運用が簡単に行える（らしい）のでフロントエンド開発を行う方に人気なフレームワークとなっています。
> フレームワーク：
ソフトウェ
山の位置をARで表示する技術ブログ：ロケーションARの基本
# はじめに
現実世界にデジタル情報を重ね合わせる技術、ロケーションAR。今回は、ユーザーの位置情報を基に山の位置をリアルタイムで表示する方法について説明します。この技術を使えば、観光や登山の際に周囲の山々を簡単に識別することができます。# 使用技術とライブラリ
このプロジェクトでは、以下の技術とライブラリを使用します：
– **AFRAME**：3DおよびARコンテンツをウェブ上で作成するフレームワーク
– **AR.js**：ウェブベースのARライブラリ
– **Geolib**：地理座標の計算を簡単にするライブラリ
– **JavaScript**：クライアントサイドのスクリプティング
– **HTML**：ウェブページの構造を定義# HTMLの基本構造
以下は、HTMLの基本構造です。AR.jsとAFRAMEを使用して、ユーザーのカメラビューに方角を示す矢印を配置します。“`html
JavaScript入門 #文字列型 #数値型 #配列 #日付型
## はじめに
本記事では、JavaScriptにおける[数値](#数値型)や[文字列](#文字列)や[日付](#日付と時刻)など様々なデータ型について関わりのあるメソッドを中心に周辺知識をまとめていきます。
今回の記事も[以前書いた記事][記事]と同様に以下のサイトのチュートリアルを進める中で学んだことをまとめていますのでJavaScriptを勉強している、してみたい方は是非参考にしてください！
https://ja.javascript.info/
## プリミティブのメソッド
JavaScriptにおけるプリミティブはオブジェクトとは別物ですがそれぞれメソッドも提供されています。最初にそのメソッドがどのように動作しているのかについて学びます。> このプリミティブなデータとは、文字列、数値、長整数、論理値、`undefind`、シンボル、`null`のことを指します。
[参考][参考１]最初に与えられた文字列をすべて大文字に変換するメソッドを用いて説明します。
“`javascript:プリミティブのメソッド
let str = “Hello”;alert(
JavaScriptにおけるオブジェクト指向プログラミング
JavaScriptにおけるオブジェクト指向プログラミング
JavaScriptのオブジェクト指向プログラミングは、プロトタイプベースの継承を利用しています。これは、オブジェクトが他のオブジェクト（プロトタイプ）から機能を継承する仕組みです。
## 目次：
– [プロトタイプ](#プロトタイプ)
– [ファクトリ関数](#ファクトリ関数)
– [コンストラクタ関数](#コンストラクタ関数)
– [クラス構文](#クラス構文)
– [JavaScriptにおける継承: extendsとsuper](#javascriptにおける継承-extendsとsuper)## プロトタイプ
プロトタイプとは？オブジェクトのプロパティやメソッドを共有するためのテンプレートオブジェクトです。
各オブジェクトは一つのプロトタイプを持ち、そのプロトタイプからメソッドやプロパティを継承します。使い方の例
配列オブジェクトの push や pop メソッドは、各配列が持っているわけではなく、プロトタイプオブジェクトから継承されています。
Array.prototype.push などがその例
