- 1. AG-Gridでヘッダーの下にアクションエリアを表示する方法
- 2. フリーレンの次回予告を再現してみる
- 3. 【Next.js/React】パスは正しいのにコンポーネントがimportできない時に確認すべきこと
- 4. React コンポーネントの属性に渡す値: ダブルクォーテーションと波括弧の違い
- 5. 【kintone】複数のレコードの更新-kintone Rest API(初心者/入門)
- 6. PlunkerでPhaser.Physics その8
- 7. AG-Gridでフィルターされた後の件数をカウントする方法
- 8. JavaScriptとTypeScriptの論理演算子、比較演算子、およびその他の便利な演算子
- 9. Reactでの条件付きイベントハンドラの設定方法
- 10. 【kintone】複数のレコードの取得-kintone Rest API(初心者/入門)
- 11. PlunkerでPhaser.Physics その7
- 12. PlunkerでPhaser.Physics その6
- 13. vue.jsのチュートリアルを整理していく
- 14. headタグにscriptタグを書いても動かなかった #ぼくの大発見日記
- 15. 表示されている画像情報を取得
- 16. Babylon.js の Procedural Texture をさらに試してみる：Brick と Cloud の 2つ
- 17. レストランに例えて学ぶ Next.js の内部構造
- 18. PlunkerでPhaser.Physics その5
- 19. PlunkerでPhaser.Physics その4
- 20. 情報学科OBが考えるエンジニアが苦手にしそうな領域と学習ルート
AG-Gridでヘッダーの下にアクションエリアを表示する方法
AG-Gridでテーブルのヘッダー行の下にアクションができる固定行を表示する方法を解説します。
(React版v28を使用しています。)
※ これは2022/12/13に個人ブログで公開した記事を移植したものです。
## ヘッダー行の下にアクションができる行とは？
正式な名称がわからないので説明的ですが、次のようなUIです。 (もし名前ご存知でしたら教えてください)
AG-Gridではこの機能は搭載されていませんでした。そこで、AG-Gridの様々な機能を活用して無理やり実装してみました。
https://www.ag-grid.com/react-data-grid/full-width
フリーレンの次回予告を再現してみる
## はじめに
アニメ「葬送のフリーレン」の次回予告、毎度見る度にエモいって思うんです。
セリフの切り抜きが無作為に表示され（セリフも流れ）最後に次回タイトルが読み上げられた時、とっても興味をそそられます。
AngelBeatsの次回予告を真似したやつですね。この次回予告、自作できないかと思って試行錯誤してみると案外簡単につくれました。（どこで使うねんっというツッコミは悪しからず却下で！）
### 完成物
Githubのプレビューは以下
[https://ymmy833y.github.io/FreelenNextPreview/](https://ymmy833y.github.io/FreelenNextPreview/
)## ソースコード
全容は [GitHub](https://github.com/Ymm
【Next.js/React】パスは正しいのにコンポーネントがimportできない時に確認すべきこと
# はじめに
とあるNext.jsのサンプルコードを写経していて、Headerコンポーネントをimportしようとしたところ、VSCodeに怒られてimportできませんでした。
こういう時は十中八九、パスのtypoや階層構造のミスなので、入念にチェックしましたが、解決できませんでした。
## 原因
まず赤波線にhoverしてエラーメッセージを確認しました。
> ファイル ‘{省略}/src/app/components/Header.tsx’ はモジュールではありません。
ん？ `モジュールではない`ってどういうこと？？
Headerコンポーネントを確認します。
“`react
const Header = () => {
return (
React コンポーネントの属性に渡す値: ダブルクォーテーションと波括弧の違い
## アジェンダ
ReactでのUI開発において、コンポーネントに属性（props）を渡す方法は、その機能性と柔軟性の核心を成します。特に、属性値をどのようにしてコンポーネントに渡すかは、初心者にとっては少々混乱のもとになることがあります。この記事では、Reactコンポーネントの属性に渡す値の二つの主な形式である、ダブルクォーテーション（`””`）と波括弧（`{}`）の違いに焦点を当てて解説します。## ダブルクォーテーションによる文字列の渡し方
ダブルクォーテーションを使用する方法は、HTMLの属性を指定する方法に最も近いものです。この方法は、文字列リテラルをコンポーネントの属性として直接渡す場合に用います。例えば、あるボタンコンポーネントに `type` 属性を渡す場合、以下のように記述することができます。
“`tsx
“`ここで、`type=”submit”` は文字列 `submit` を `Button` コンポーネントの `type` 属性として渡しています。この形式は静的な文字列を渡す際に適しています。
【kintone】複数のレコードの更新-kintone Rest API(初心者/入門)
# はじめに
[前回](https://qiita.com/pomo/items/623baa1a1e037990366a “複数のレコード取得”)はRESTAPIを使用した`複数のレコードの取得`を試しました。今回は`複数のレコードの更新`のサンプルになります。
## 手順
1. アプリの設定は前回と同じとします。前回の記事と同じように`数値`フィールドを設定してください。
1. 下記コードをコピペ保存してアプリ更新
1. 一覧でボタンを押下して実行## 説明
今回は`数値が1`という値を持つレコード全てを取得し、`数値を２`という値に書き換えるだけのサンプルです。
– putBodyにappと更新するrecordsを記述します
– recordsは,`{id:レコードのID, record:{フィールドコード:{value:値}}}`という各レコードの更新するデータの配列を入れてあげることで、各レコードの指定したフィールドの値を更新できます処理として今回は、
1. 取得してきたレコードをmapでレコード数分回っていき、全て2という値に書き換える
1. putBodyの
PlunkerでPhaser.Physics その8
# 概要
Plunkerで、Phaser.Physicsやってみた。
spriteInfo、使ってみた。# 写真
# サンプルコード
“`
var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.image(‘arrow’, ‘assets/sprites/arrow.png’);
}
var sprite;
function create() {
game.physics.startSyste
AG-Gridでフィルターされた後の件数をカウントする方法
AG-Gridで、フィルター後の件数を取得する方法を解説します。
(React版v28を使用しています。)
※ これは2022/12/12に個人ブログで公開した記事を移植したものです。
## フィルター後の件数を取得する関数がない
AG-Gridにおいて、フィルター後の件数を取得する関数は用意されていないみたいです。
一方、公式デモでは選択中の件数を表示していたのでどのように行なっているのかソースコードを見てみました。
enterprise版で用意されているStatus barの実装では、カウンターを用意し、 `gridApi.forEachNodeAfterFilter()` で回してカウントしていく方法が取られていました。 (ライセンスの都合上引用が出来ないので下記ソースコードをご確認ください。)
https://github.com/ag-grid/ag-grid/blob/fc77919c164fb5bcd66a8b2897b20c318f5dd58e/enterprise-modules/status-bar/src/statusBar/providedPan
JavaScriptとTypeScriptの論理演算子、比較演算子、およびその他の便利な演算子
## アジェンダ
この記事では、TypeScriptで使用される論理演算子、比較演算子、およびプログラミングにおいて非常に便利なその他の演算子について説明します。これらの演算子を理解することで、より効率的に条件分岐やデータ操作を行うことができます。## 論理演算子
1. **AND (`&&`)**: 両方のオペランドが `true` であれば `true` を返します。
“`typescript
if (true && true) {
console.log(“Both are true”);
}
“`2. **OR (`||`)**: 少なくとも一方のオペランドが `true` であれば `true` を返します。
“`typescript
if (true || false) {
console.log(“At least one is true”);
}
“`3. **NOT (`!`)**: オペランドが `false` であれば `true` を返し、`true` であれば `
Reactでの条件付きイベントハンドラの設定方法
## アジェンダ
Reactでのアプリケーション開発では、ユーザーのアクションに応じて特定の関数を実行する必要があります。しかし、全てのアクションで関数を実行したいわけではないかもしれません。このような場合、三項演算子を使用して、条件に応じて関数を実行するかどうかを制御することができます。## 基本構文
Reactの`onClick`イベントハンドラ内で三項演算子を使用する基本構文は以下の通りです。“`ts
onClick={() => 条件式 ? 関数実行() : null}
“`この構文では、`条件式`が`true`の場合に`関数実行()`が呼び出されます。`false`の場合には`null`が返され、実質的には何も行われません。
## 実用例
例えば、ある条件下でのみユーザーのクリックを処理したい場合、以下のようにコードを記述できます。“`ts
“`この例では、`isUserLoggedIn`が
【kintone】複数のレコードの取得-kintone Rest API(初心者/入門)
# はじめに
[前回](https://qiita.com/pomo/items/857c02928da644380242 “1件のレコード取得と値の更新”)は`1件のレコードの取得と値の更新`を行いました。
今回は`複数のレコードの取得`をRESTAPIで行います。# 手順
1. `数値`というフィールドコードを設置
1. 数件、`数値`に値を入れてください。今回のサンプル使用の際、３つレコード作成しそれぞれ1,2,4と設定していただくといいです
1. 下記コードをコピペ保存してアプリ設定で更新
1. 一覧を開きボタンを押して確認してください:::note info
下記のように1以上3以下の数値が入力されているレコードを取得して、数値を合計して表示する単純なサンプルとなります。
画像ですとレコードが３つあり、取得されるのが1と２が入っているレコードのみ。その合計値3をアラートで表示してます。
:::
# サンプルコード
“`
var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.image(‘firstaid’, ‘assets/sprites/firstaid.png’);
game.load.image(‘enemy’, ‘assets/sprites/shmup-baddie3
PlunkerでPhaser.Physics その6
# 概要
Plunkerで、Phaser.Physicsやってみた。
applyForceで、力を加えてみた。# 写真
# サンプルコード
“`
var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, {
create: create,
update: update,
render: render
});
function create() {
game.stage.backgroundColor = ‘#124184’;
game.physics.startSystem(Phaser.Physics.BOX2D);
game.physics.box2d.gravity.y = 400;
vue.jsのチュートリアルを整理していく
Vue.jsの公式ドキュメントを読んでいるが、なんかよくわかんないということで、記事にしながら整理することにした。
公式ドキュメント→https://ja.vuejs.org/guide/introduction.html
## 単一ファイルコンポーネント
HTML,CSS,Javascriptをまとめて持っている一つのファイル。Vue独自のもので、SFCともいわれる。見た目がHTMLファイルっぽいが、HTMLではない。拡張子は「.vue」。
↓単一ファイルコンポーネントの例
“`test.vue
“`
補足）コンポーネントとは？
英語でcomponent。大雑把にい
headタグにscriptタグを書いても動かなかった #ぼくの大発見日記
# はじめに
ナイトウ([@engineer_naito](https://twitter.com/engineer_naito))と申します。
Vueを最近勉強しています。
Vueを勉強しているのですが、それ以前にTypeScript, JavaScriptの基礎知識が不足していることに気づきました。
そこでまずはフレームワークを利用せずに、– HTML
– CSS(JavaScript)
– JavaScript(Vanilla)でTODOアプリを作成してみることにしました。
## コード
– JSFiddle
https://jsfiddle.net/engineer_naito/modrsev9/21/
単純なTODOアプリです。
– タスクを入力して「登録」ボタンを押すとタスクが画面に表示される(箇条書き)
– 「削除」ボタンを押すとそのタスクが画面から消える
– チェックボックスを押すとタスクに取り消し線が入る“`html: index.html
表示されている画像情報を取得
Web上にある画像情報を取得して表示させます。
“`html
“`
“`js
const element = document.getElementById(“target”);const width = element.naturalWidth;
const height = element.naturalHeight;
const alt = element.getAttribute(‘alt’)
const src = element.getAttribute(‘src’)
const resultPath = src.split(“/”).reverse().slice(1).reverse().join(“/”);
const filename = src.split(“/”).reverse()[0].split(‘.’)[0];
const extend = src.split(“/”).reverse()[0].split(‘.’)[1];c
Babylon.js の Procedural Texture をさらに試してみる：Brick と Cloud の 2つ
以下の記事を書いた際に扱った、Babylon.js の Procedural Texture をさらに試して記事を書いてみます。
具体的には、公式ドキュメントに 7つ掲載されているもののうち、「Fire Procedural Texture 以外のもの」を 2つほど選んで試してみようと思います。●Babylon.js の Procedural Texture のアニメーションする炎のテクスチャ（Fire Procedural Texture）を試す – Qiita
https://qiita.com/youtoy/items/0ec43be190f9ebc24aa3## 今回試す内容
前回の記事の以下の部分で、Procedural Texture は Fire Procedural Texture を含めて 7つある、ということを書いていました。
# サンプルコード
“`
var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, {
create: create,
render: render
});
function create() {
game.stage.backgroundColor = ‘#124184’;
game.physics.startSystem(Phaser.Physics.BOX2D);
game.physics.box2d.gravity.y = 500;
game.physics.box2d.setBounds
PlunkerでPhaser.Physics その4
# 概要
Plunkerで、Phaser.Physicsやってみた。
マウスで、オブジェクトにちょっかい出せます。# 写真
# サンプルコード
“`
var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, {
create: create,
render: render
});
function create() {
game.stage.backgroundColor = ‘#124184’;
game.physics.startSystem(Phaser.Physics.BOX2D);
game.physics.box2d.gravity.y = 400;
game.physics.box2d.r
情報学科OBが考えるエンジニアが苦手にしそうな領域と学習ルート
## はじめに
以前、大学でコンピュータを勉強している人たちがどういった内容をどういった順番で学習しているかについて書きました。
https://qiita.com/yngwie6120/items/2d1a730320cee6502b68
ある意味非専門エンジニアの参考書ルートみたいなものだと思っています。今回はこの内容に加え、**「では実際にエンジニアを仕事として始めたら何が足りなくなってくるか？」** について書いてみたいと思います。
***情報学科卒の目線*** から自論を加え、プログラミングスクールや市販の書籍を使って学習して就職したエンジニアと比較を交えつつ ***ここに力を入れると周りから一歩抜きに出るのではないか？*** という点やお勧め本を書いてみたいと思います。私の周りでも別学科卒で社会人からソフトウェア開発を始める人たちがいますが、彼ら彼女らをみて気づいた点も盛り込んでみたいと思います。
本記事の特徴として **いわゆる思想本みたいな概念だけ書いてある本はなるべくお勧めしないようにします。** 具体的にPCで手を動かして実践できそうな本を中心に紹介し
