JavaScript関連のことを調べてみた2023年01月05日

【JavaScript】ふわっと画像を表示させる

前回より時間が少し空きましたが、
今回はJavaScriptでスクロールすると、
ふわっと画像が表示されるというアニメーションを作りました。

まず制作したもの↓

See the Pen
Untitled by ri-tama (@ri-tama

【Babylon.js】Reactを使って3Dモデルを表示する

こんな感じでサッカーボールを表示してみました。

https://codesandbox.io/embed/smoosh-silence-rj26ot?fontsize=14&hidenavigation=1&theme=dark&view=preview

# はじめに

ARIの土井です。前回[【Babylon.js】Playgroundで遊んでみよう](https://qiita.com/yuki_doi/items/ac201cac8220d613d819)という記事を書きました。今回はReactを使って実際にWebページに3Dモデルを表示してみたいと思います。
※ Reactの実行環境は、Web上で利用できる統合開発環境の[CodeSandbox](https://codesandbox.io/s/)を使用しました。

# 準備

まず、https://codesandbox.io/s/ にアクセスして`Satrt from a template`から`React`をクリックします。
![画像1.png](https://qiita-image-store.s3.ap-nor

ネストしたObjectをflatにする

参考にした記事
– [JavaScriptでネストされたオブジェクトをフラットにする関数](https://note.com/digiholic_life/n/n583c9356c502)
– [Flatten JavaScript objects into a single-depth Object](https://www.geeksforgeeks.org/flatten-javascript-objects-into-a-single-depth-object/)

## 結果１（自作 冗長）
~~~

export const makeFlatObject = (
preobj: Record,
parentProperty?: string
):Record => {
const initialObject = {};

const makeObject: Record = Object.entries(preobj).reduce(
(previ

Elixirから覚えるJavaScript　〜filter関数〜

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

今日はfilterを見てみたいと思います

お題
[1, 2, 3, 4, 5]の中から[3, 4, 5]を抽出

# Elixir

“`elixir
x = [1, 2, 3, 4, 5]
y = Enum.filter(x, fn x -> x > 2 end)
IO.inspect(x)
IO.inspect(y)
“`

“`elixir:実行結果
[1, 2, 3, 4, 5]
[3, 4, 5]
“`

# JavaScript

“`javascript
x = [1, 2, 3, 4, 5]
y = x.filter((x) => x > 2)
console.log(x)
console.log(y)
“`

“`javascript:実行結果
[ 1, 2, 3, 4, 5 ]
[ 3, 4, 5 ]
“`

無事に同じ結果になりました

配列の重複した要素を取り除く（JavaScript)

JavaScriptで配列の重複した要素を取り除くサンプルコードです

“`JavaScript
const array1 = [10,10,40,20,20,30,50,40,70,60,90,70];
// 重複した値を取り除くSetオブジェクトを呼び出す
let array2 = new Set(array1);
// array2を配列に変換し、array3にする
array3 = Array.from(array2);
array3.forEach((data) => {
document.write(`

${data}

`);
});

“`

Setオブジェクトに引数としてarray1配列を指定し、Array.from関数で配列に変換します。

Yarnは2022年においてきた！！yarnをやめるまでの軌跡

みなさん、JavaScriptのパッケージマネージャーは何を使っていますか？

私は以前は仕事でも個人開発でもyarnをメインで使っていたのですが、2022年5月に転職してから仕事ではnpmを使うようになりました。

それでも個人開発はわざわざnpmに移行するほどでもないと思っていたのでyarnを使い続けていました。
しかし、2022年にyarnがらみのエラーに数回遭遇し、2022年末についにyarnを卒業しました。

ちなみに個人開発ではyarn v1とv2+を使っていましたが、主にv2+で色々ハマりました。

https://yarnpkg.com/

# dependabotが使えない
yarn v2+で[Zero-Installs](https://yarnpkg.com/features/zero-installs/#gatsby-focus-wrapper)を使っていたのでcacheもコミットしていたのですが、GitHubのdependabotがcacheを更新してくれないのでdependabotが使えなりました。

その時のツイート

https://twitter.c

Javascript 関係のツールまとめ(?)

# はじめに

最近趣味で少し ReactJS を触って時があるのですが、その際に Javascript 関係のツールがよくわからなかったのでざっとまとめてみた、というメモです。 もっと分かりやすくて正確な良い記事が他にも色々あると思いますが、自分用のメモということで。

# Javascript 関係のツールたち

– node.js … Javascript ランタイム。ブラウザから独立して動作するので、サーバーサイドや CLI ツールの実行などに使われていると思う、たぶん。
– nvm … node version manager, node.js のバージョン管理ツール。
– npm … A javascript package manager, Javascript のパッケージマネージャー
– npx … パッケージを実行するツール。npm と違うのはパッケージをローカルにインストールしなくてもパッケージを実行できること、らしい。 (参考記事:

「今って令和何年だっけ・・？」は俺に任せろッ！

## 背景

『今って令和何年だっけ・・？』

「ええっと、、、待ってくださいね、、、」
（Googleで「令和　何年」っと）
「5年ですねッ！」

『あぁ、もう分かったからいいよ〜』

## 開発

現在の和暦を返すnpm cliツールを作成しました〜。

https://www.npmjs.com/package/wareki_cli

nodeが入っていれば以下のコマンドで動きます！
“`bash
# return <現在の和暦/mm/dd>
npx wareki_cli
# return 平成12/1/1
npx wareki_cli 2000-01-01
“`

にしてもJavaScriptすごいですね。こんなことが出来るんですね。。。

https://qiita.com/shisama/items/cb0abb5435fac82e87d6

皆さんも和暦聞かれたらコマンドで解決しちゃってください?

## 後日

?「今って令和何年じゃったっけ・・？」
「ばあちゃんのPC、node入っている？」
?「のーど・・・？」
「・・・」

フロント コーディングメモ

# v-onで便利な機能
### v-on:prevent
v-onだけだとページのリロードが発生してしまうが、preventでサブミットだけキャンセルできるあ。
“`:vue

{{pMsg2}}

“`
“`:typescript
const msg = ref(“未送信”)
const onFormSubmit = (): void => {
msg.value = “送信されました”
}
“`

# リンク
[Javascriptで用意されている主なイベント](https://qiita.com/shizen-shin/items/17094a68a0369e126d41)

Screaming Architecture – Reactのディレクトリ構成を進化させる(和訳)

（[この記事](https://dev.to/profydev/screaming-architecture-evolution-of-a-react-folder-structure-4g25)の和訳となっております）

Reactのディレクトリ構成…昔からあるトピックです。しかし、Reactの独創的なアプローチは、頻繁に質問を引き起こします。「どこにファイルを置けばいいのか？どのようにコードを整理すればいいのでしょうか？正直なところ、長年の経験を持ってしても、同じような質問をすることに気づきました。

そこで私は、Reactのプロジェクトを構成する最も一般的なアプローチの概要を知るために調査をしました。その結果は以下の通りです。

・ファイルの種類によるグループ化（例：コンポーネント、コンテキスト、フックに別々のフォルダを設定する）
・コンテキスト、フックなどのグローバルフォルダを使用したページごとのグループ化
・関連するコンポーネント、コンテキスト、フックのコロケーションによるページごとのグループ化
・機能別にグループ化

この記事では、成長するコードベースの中で進化するこれ

年末年始の勉強振り返り　※Python、JavaScript、Reactの本紹介

# 伝えたいこと：業務でプログラムを直接触らない管理職(おじさん)は定期的に学ぶべき！

## 問題（現状とあるべき姿とのギャップ）
おじさんは若者に、「開発」とか「自動化」とか簡単に言う。
しかし、言っているおじさん自身が、全く知識がないと、「言うだけ？」みたいな空気が流れる。

## 課題（ギャップを埋めるためにやるべきこと）
業務で機会がないなら、業務外で学ぶ！おじさんもチャレンジしている姿を見せ続ける！

### 去年(2021-2022)
Udemyの動画を甘く見ていた！
[Udemy「最新版：Python + Django3 Djangoを基礎から応用まで、アプリケーション開発マスターpython付き」を受けてみた！おじさんは動画時間を甘く見ていた。](https://qiita.com/tsunetsune09/items/3502812e8e41750163b7)

### 今年(2022-2023)
本で勉強する。以下、短期集中のために図書館で借りた本

##### 「1日で基本が身につく！Python」
– 単元が8項目に分かれていて、1項目1時間。
– 参考に

Growiの便利な設定

# 概要
社内のWIkiをpukiwikiからGrowiに移行しようかなということで、pukiwikiにはできるけどGrowiのデフォルト設定ではできないことと、Growiでは不便な部分を洗い出して、GrowiのGitHubのIssueにリクエストを出しつつ自分で何とかできる部分はカスタマイズしていこうかなという感じです。その過程を備忘録として残していきます。Growiが広まってもっと使いやすくなっていけばうれしいので…。
ということで、この記事は良い設定を見つけるたびに更新されます。

# 設定
Growiのおすすめ設定です。

## マークダウン設定
### Line Break設定
スペース2つで改行にするか、編集画面で改行したら改行として扱うかの設定。個人的にはスペース2つで改行というのは結構わかりづらいなといつも感じてたので、これはテキスト内の改行を
タグとして扱ってくれたほうが嬉しいなと思いました。ほかのwikiに移行するときとかにちょっと不便なのかなとも思いましたが、最近のwikiとかはどれも割と改行を改行として扱ってくれるのであまり心配しなくてもいいかなと思い

Vite + Vue3 + TypeScriptでAlias pathを設定する方法

# はじめに

`vue`や`react`、`svelte`でコンポーネントを呼び出す際、相対パスで`import`を記述していませんか？

そうしていると、コンポーネントの整理をしている中で動かない箇所が出てきます。
1つ1つチェックするのは非常に手間なので、`Alias`を設定して楽をしましょう～

# ./srcを@に設定

“`typescript: vite.config.ts
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import path from ‘path’ // ・・・・追加

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: { // ・・・・追加
alias: {

オンラインIT講師募集中!

私たちTeamSpartaは、短期間でweb開発系現場で通用する知識を身につけられる、オンライン教育サービス企業です。2019年に韓国ソウルで設立し、現在は世界中で４０万人の生徒を持つ、急成長中のスタートアップ企業です。

現在、Teamspartaの日本進出を計画しており、日本人にプログラミングを教えるパートタイム講師を募集しております。もし詳しい内容、または興味がありましたら、下記のグーグルフォームまで気軽にお問合せください。

Google フォーム:【https://forms.gle/UzRF8nUMuzbkpwtj8】

twitterの埋め込みを軽くする

埋め込むとけっこう重たいみたいですが、調べても`widgets.js`を読み込むスクリプトタグを後から追加くらいしか見当たらなかったのでメモとして書きます。

### 前提となる技術

[IntersectionObserver](https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API)を使います。IEがさよならバイバイしたので便利な世の中になりました。

### コードスニペット

“`html

Tweets by elonmusk