JavaScript関連のことを調べてみた

フロントエンド学習記No.2 TypeScriptで静的型付けの安全性を知る

## はじめに
フロントエンド学習記No.2です！
今回は前回JavaScriptで作成したアプリをTypeScriptで書き換えながら学んでいきます。

静的型付けによる安全性、バグ検知の利点を初学者なりに少しでも実感することが目標です！

https://typescriptbook.jp/overview/features

前回の記事はこちら

https://qiita.com/rikuya98/items/2387352f8d4daeee5c62

## 環境構築
こちらの記事を参考に行いました。
tsc = TypeScriptのコンパイラをターミナル上で実行し、jsファイルを生成して動かしていきます。

## TypeSriptで書いてみる
とりあえず、前回のソースをそのままtsファイルに貼り付け
![スクリーンショット 2023-12-23 16.27.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301763/c1f92184-31ce-a7a6-b07f-562bd611

AstroでハンバーガーボタンをJavaScript/Reactで実装してみた

## はじめに
新規プロダクトのサービスサイトをAstroというフレームワークを使って実装することになりました。

Astroを使うにあたり、公式のチュートリアルで一通り学びました。
そのチュートリアルで、ハンバーガーボタンを実装する章があるのですが、JavaScriptで実装しています。

今回、サービスサイト実装にあたり、Reactでハンバーガーボタンを実装しました。ほとんどチュートリアルの内容と一緒なのですが、実装手順や違いなどを紹介したいと思います。

## Astroチュートリアルについて
公式が提供しているチュートリアルです。簡単なブログサイトを作ります。
やや翻訳が怪しいところはありますが日本語で読めますし、ボリュームもそこまで多くないので、2日あれば十分終わると思います。
※5章から急に難しくなるのでびっくりしないでください。

## 要件
以下のようなハンバーガーボタンをヘッダーに設置します。
ボタンをクリックすると、メニューが開きます。
画面の横幅が、636px以上の時は通常のヘッダーを、636px未満の時はハンバーガーボタンを表示します。

![スクリーンショット

使用してるConsole

デバッグで使用するのに便利なconsole〜です。私がよく使用しているものををまとめる。

“`js
console.log(‘おはよう！’);
console.info(‘こんにちは！’);
console.warn(‘警告！’);
console.error(‘エラーです！’);
console.clear(); // ログを消去します！
“`
上のコンソール関数はどれも似たような動作をします。warnや、errorはエラーを知らせたい時、clearは、これまでのコンソールをクリアします。

“`js
const table = { Num: 123 }
console.table(table);

for (let i = 0; i <= 2; i++) { console.count(); } console.countReset(); ``` tableは配列やオブジェクトを表形式で出力し、まとめて表示することができます。 countは受け取った文字列をログに記録し、この文字列を使って呼び出された回数を出力します。何も指定しない場合、defaultが表示されます。

MSW 2.0 に更新した話

:::note info
この記事は、[LITALICO Engineers Advent Calender 2023](https://qiita.com/advent-calendar/2023/litalico) シリーズ2の9日目の記事です。ただし、12月23日に投稿しています。
:::

# はじめに

LITALICO プロダクトエンジニアリング（PE）部の片桐英人（かたぎり えいと）です。

最近、仕事ナビのフロントエンドのテストや Storybook で使用している Mock Service Worker（msw）を 1.x から 2.0 に更新しました。仕事ナビのメンバーにそのことを伝えるために書いています。


この記事を記載している時点で、最新は、2.0.11 になっていますね…

# Mock Service Work

【来年の目標】2019年ごろに作ったRuby/TKアプリ javascriptで作り直したい（2024年中）

javaspcriptの勉強のモチベーションとして
2019年ごろに作ったRuby/TKアプリ をjavascriptで作り直したい
javaspcript + HTML + css
HTA っていうんですかね？

機能
・指定条件でファイルを検索して登録。（ベースディレクトリ、拡張子、含むワード、無視ワード）
・拡張子別に指定したプログラムに渡して実行。
・実行時間、実行回数を記録。
・ランダムソート、ランダム実行。
・ファイルの移動、リネームを自動検出して実行時間回数などのデータも移行

※開発当時の環境 今はこのバージョンはもうないので自分でruby/TK環境を用意する必要あり
WITHOUT DEVKIT Ruby 2.3.3 ※32ビット
Ruby 2.3.3 (x64) ※64ビット

git hub
https://github.com/majimiki/rubytktest/blob/main/_Random_Launcher.rbw

横スクロール可能な要素にヒントを表示するjsライブラリ

## はじめに
スカラパートナーズAdventcalendar24日目担当です。
今回はスマホなどでスクロール可能な要素を視覚的に示すためのJavaScriptライブラリ「ScrollHint」の使い方について解説します。

## ScrollHintとは？
ScrollHintは、スクロール可能な要素をユーザーに知らせるためのJavaScriptライブラリです。

https://appleple.github.io/scroll-hint/

例えばスマホやタブレットで閲覧時に、横に長いテーブル表示などは横にスクロールしなければ全ての情報を見ることができません。このようなコンテンツをスクロールする必要がある場合に、下記のようなアイコンを表示してくれるものとなります。


## 実装方法

##

Shopifyで企業の採用ページ作ってみた

# Shopifyで企業の採用ページ作ってみた
私はShopifyは **スーパーなんでもできるツール** だなと思っている人間です。

ある日、クライアントから採用ページを新たに作りたいと依頼があり、Shopifyでできないか色々いじっていたらなんとできちゃいました。
Shopifyはやはりスーパーなんでもできるツールであることをたくさんの方に知ってもらいたいということで、実際にどのように作成したのかこの記事に書いてみました。

また、エンジニア学生団体IDEAの運営・渉外も担当しており、約150名以上のエンジニアと一緒に活動しております！
誰でも参加できますのでどんなことしているか気になった方は
ぜひ公式ホームページを覗いてみてください！

https://idea-net.site/

## はじめに
この記事では、Shopifyで企業の採用ページを作成したので、作成方法について解説します。大企業の採用ページを再現するのは難しいですが、**Indeedやバイトルのような採用ページを再現**することはできました。今回は飲食業界の採用ページを作成しましたが基本的にはどのような業界業

Typescriptで美しいORMを作りたい

# はじめに
:::note warn
この記事には
– 主観的な歪んだ美しさ
– 汚いコード
– 単体テストをしない
– それどころかテスト自体しない
– 時間のなさを理由に適当に書いたもの

が含まれます。

またD1を使う前提でコードを書いています。
また美しさと使いやすさは別であり、他のORMを批判する意図はありません
:::
こんにちは、スクーリング中の10分休憩や昼休みにこれを書いてるS高3期生です

突然ですが、みなさん、ORM使いますか?
僕は使いません
昔は使ってたのですが、速度の遅さやJOINなどを使用した複雑なSQLが書きにくいことから最近は使っていません。

そのため長らく下のようなコードを書いていました
“`typescript
const result = await env.DB.prepare(`SELECT id, content FROM article`).bind().first()
“`
ですがそのコードは美しくありません、文字列があります

下記のようにしたらどうでしょう
“`typescript
const result = awai

VueでJointJSを使用する

今回はVue.jsでJointJSを使う方法を紹介します。

サンプルとして、Vueで定義したボタンをクリックすると四角形が追加されていくアプリを作成しました。


ソースはこちら。

https://github.com/acnaman/jointjs-vue-sample

## 導入方法

今回はVue-cliで作成したアプリケーションにJointJSを導入していきます。
以下コマンドでJointJSを導入します。

“`js
npm install –save jointjs
“`

## 使用方法

Vue.jsで使うと言っても、基本的な使用方法はこれまでに紹介してきた方法と変わりません。
今までの紹介内容と異なる部分をかいつまんで紹介します。

### モジュールのimport

Vue.jsというよりもnpm経由で導入し

Next.jsで実現するオニオンアーキテクチャ (4) – Infrastructure

:::note warn
記事におけるNext.jsは、v13以降のApp Router （Server Components）を用いる前提での説明となります。
Pages Routerを用いている場合は、適宜Pages Routerでの書き方として読み替えてください。
:::

## この記事は何
最近Next.jsでウェブアプリケーションを作ることが多いのですが、
その時にオニオンアーキテクチャを採用してアプリケーションを作ることが多く、型も固まってきたので数回の記事にわたり紹介をしていきたいと思っています。

前回は

https://qiita.com/getty104/items/9ded98cd10d3956c4a9f

でApplication Serviceについて紹介しました。

今回は`infrastructures`ディレクトリや`utils`ディレクトリに実装していくInfrastructureについて説明をしていきます。

## Infrastructureとは
Infrastructureとは、アプリケーションを構築する上で必要になる外部システムへのアクセス

JSONって何？

この記事は「[RUNTEQ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/runteq)」の24日目に参加しています🎄🎅✨

# はじめに
現在プログラミングスクールRUNTEQで学習中のhimeです！

以前から気になっていた「JSON」について理解したいと思い、今回テーマに選びました！

JSONについて整理したのち、最後にアプリのプロジェクトを立ち上げた際に生成される
`package.json`というファイルが何なのか理解したいです。
自分が作ったアプリの`package.json`の中身を解説できたらな〜と思います。

# JSON とは
**JSON(ジェイソン)** は **JavaScript Object Notation** の略称です。
日本語訳だと「**JavaScriptオブジェクト記法**」になります。
JSONは、`データの構造化`と`データの交換`を目的とした**軽量なデータ形式**で、
ファイルの拡張子は`.json`です。

まとめると、JSONは「**JavaScriptの

[JavaScript] innerHTMLの使い方

## はじめに
innerHTMLの学習の備忘録として作成しています。

## innerHTMLとは
Element オブジェクトのinnerHTMLプロパティは、**要素の中身を変更するときに使われる**
これにより動的なWebページを作成できる！！

### 書き方
“`javascript:innerHTML
element.innerHTML

// 変数に指定要素のHTMLコードを代入する
let 変数名 = 指定する要素名.innerHTML;

// 指定要素に変数の値を代入
指定する要素名.innerHTML = 変数名2;
“`
:::note
innerHTMLプロパティは、読み込みと書き込みの両方に対応している
:::

### 取得方法
“`javascript:innerHTML

Hello world