Vue.jsでタスク管理アプリを作ってみた

Vue.js の学習をしています。
練習として、タスク管理アプリを作ってみました。
こんな感じです（スタイルは整えていません:sweat_smile:）

# 概要
入力フォームにタスクを入力、「追加」ボタンを押すと追加されます。
Vue でタスクを格納する配列 `tasks` を作り、そこに追加していくという仕組みです。
`for` ループで1つずつ取り出して表示します。

# HTML を記述する
“`html

Vue-todo-app

Play Console デバイス一括除外スクリプト

Androidアプリ開発において、公開対象のデバイスを制限したい場合があります。
今までは[このページ](https://qiita.com/kookaa/items/1c4e2d674b67fb911250)のスクリプトで一括で行えていたのですが、最近アクセスすると方法が変わっていたのでスクリプトを記載します。（2020/01/27）

A-Frame: パーティクルコンポーネント調査

CGで何かをつくると、見た目をそれらしくする為にエフェクトが求められます。
簡単にエフェクトをつけるにあたって、まずパーティクルを使う事になるかと思うので、A-Frameで利用できるパーティクルコンポーネントにどのようなものがあるか調査しました。

調査対象は、npmで `aframe particle` をキーワードとして検索して表示された10パッケージとしました。
npmでの人気順に紹介します。

### [aframe-particle-system-component](https://www.npmjs.com/package/aframe-particle-system-component)
A-Frameの公式チュートリアルでも利用されているコンポーネントです。
星や埃、雨の画像をパーティクルとして表示してくれます。
demo
[Stars](https:

【JavaScript】関数について知ったことを書く

## はじめに
JavaScriptの関数に関する機能について学んだことを簡単に書き記していきます。

## 関数の引数について

“`JavaScript

fuction sum(a, b) {
return a + b;
}

alert( sum(1, 2, 3, 4, 5));//結果:3

“`

関数が定義された際は、引数を2つとして定義しています。
ここで、**定義された関数を呼び出された際は、5つの引数を指定していますが、必要以上の引数でもエラーになりません。**
エラーにはなりませんが、最初の2つだけが使用されます。

### 任意の数の引数は3つのドットにより、関数定義できる

“`JavaScript

fuction sumAll(…args) {
let sum = 0;

for (let arg of args) sum += arg;

return sum;
}
alert( sumAll(1));//結果:1
alert( sumAll(1, 2)) //結果:3
alert( sumAll(1, 2, 3)

【初学者向け】CodeSandboxでReact学習用の開発環境をサクっと作ろう【教える側にもオススメ】

## 本記事想定読者

– React初学者で、これから勉強を始めたいと思っている方 。
– **初学者にReactを教える立場の方。**

## 前書き
最近Reactを初学者の方に教える機会が多かったです。

初学者、と言ってもどの程度『初学』なのか、具体的には下記の通りです。

・**何らかのプログラミング言語に触れた事はある**
　　→条件分岐や繰り返し等のプログラミングの基礎概念は把握出来ている
・**Windows以外のOSを触った事が無い**
・**node.jsの存在を知らない**
　　→Reactの存在も知らない

数人に教えた時点で気づきましたが、教える際に一番難儀した部分は**開発環境の構築**でした。

というのも、Unix系のOS自体に触れた事が無い方にとって、npmを用いたインストールだったり、node.jsを利用した開発サーバーを構築する時点でハードルがかなり高くなってしまっている事に気づきました。

## CodeSandbox
そんな中で**[CodeSandbox](https://codesandbox.io/)**に出会い、学習に利用して頂い

docker上nestjsとmysqlを接続する

# docker上でnestjsとmysqlを接続する

### table of contents

1. nestjsのアプリケーションを作成する
2. localhostで立ち上げる
3. nestjsのアプリケーションをdockerniseする
4. docker-containerでmysqlを利用する
5. typeormを用いてapplicationを接続する

## 0. 環境

– docker
– nestjs

## 1. nestjsのアプリケーションを作成する

nest g をコマンドを用いてアプリケーションを作成するため、@nest/cliをインストールします。

“`terminal
$ npm i -g @nestjs/cli
“`

成功すると、

“`terminal
$ nest –version
6.12.9
“`
でインストールされたバージョンが表示されます。

コマンドが利用できる状況になったところで新規のアプリケーションを作成します。

“`terminal
$ nest g application my-app
“`

お

背景画像を一定の時間ごとにランダムで表示切り替えする方法

### 概要

とってもニッチな議題なのであまりニーズはなさそうですが、備忘録もかねてかきます。
完成イメージはこんな感じです。
[](https://gyazo.com/cf58dc1bd8a85b78cee3cc4cf570739c)

コードは以下です。

“`HTML:html

“`
“`CSS:css
#randomImg {
width: 100vw;
height: 100vh;
background-image: url(/image01.jpg); //背景画像の初期値
background-position: center center;
background-size: cover;
}
“`
“`javascript:javascript
var images = [ ‘url(/image

【Rails】【非同期通信】create.js.hamlがうまく機能しない=>create.js.erbにすることで解決

## 実装したかった機能
いいね！機能を実装しようと思い、非同期通信でいいね！を送信して結果を部分テンプレートで更新させようとしました。
具体的な流れとしては、部分テンプレートで作成したいいねボタンをクリックすることで非同期通信によりいいねの作成・削除を行い、結果に基づきいいねボタン（部分テンプレート）を更新させるという手順を想定しました。

## 開発環境
Ruby: 2.5.1
Rails: 5.2.3

## うまくいかなかったコード

### モデル
“`rb:app/models/user.rb
class User < ApplicationRecord # (中略) has_many :likes has_many :items end ``` ```rb:app/models/item.rb class Item < ApplicationRecord # (中略) has_many :likes def liked?(user) likes.where(user_id: user.id).exists? end end ``` ``

React で書いたコードを Svelte に書き換えて記述量の少なさを実感

# ユーザーリストアプリを作成する

以前 React を用いて作成した[ユーザーリストを表示するアプリ](https://qiita.com/itizawa/items/075d06fc17f9c5ca5ff7)を Svelte でも作成してみます。

## まずは input form を作成する


“`html:InputForm.svelte

[書評] “ゲーム&モダンJavaScript文法で2倍楽しい” グラフィックスプログラミング入門

著者のdoxas様より御恵贈頂きました。内容のご紹介と感想を記したいと思います。
結論を先に書いておきますが、JavaScriptの初心者の方から、これまでゲームの開発をされたことが無い方、ブラウザ上でのCanvasを用いたプログラミングによる画像生成に興味のある方等にとてもお勧めです:+1:

技術評論社: https://gihyo.jp/book/2020/978-4-297-11085-7/
![表紙](https://gihyo.jp/assets/images/cover/2020/thumb/TH160_9784297110857.jpg
“表紙”)

ソースコード: https://github.com/doxas/graphics-programming-book

本書指定推奨開発環境:
– Chrome
– Visual Studio Code

# 著者doxasさんについて

私とdoxasさんとは直で会ったことは2、3度しかないのですが、初めてお会いしたのは2014年6月のことでした。当時、既に私はdoxasさんのWebGL開発支援サイトに1読者としてかな

Web Animations API

## CSS transition、CSS animationとの比較

キーフレームの制御まで含めてJavaScriptだけで管理可能

[CSSによるアニメーション(CSS Transition、CSS Animation)](https://qiita.com/takeshisakuma/items/e178e545089bce4efdad)もご参照ください。

|Web Animations APIのオプション|CSS Animationsのオプション|
|—|—|
|duration|animation-duration|
|delay|animation-delay|
|fill|animation-fill-mode|
|iterations|animation-iteration-count|
|direction|animation-direction|
|easing|animation-timing-function|
|iterationStart|なし|
|endDelay|なし|

|web animations api独自のオプション|内容|
|-

ajaxで取得したデータでrenderすると、Cannot read property xx of undefined エラーになる

# 問題点

例えば以下のように、バックグラウンドで取得したデータを表示させたいとします。

“`javascript:xxx.js
constructor(props) {
super(props);
this.state = {
result: {}
}

fetch(“http://localhost/api/test”)
.then(response => response.json())
.then(json => this.setState({ result: json }));
// /api/testは、以下のようなレスポンスを返す
// {
// test1 : “aaa”,
// test2 : {
// test3 : “bbb”
// }
// }
}

render() {
return (

{this.state.result.test

モバイル初心者がQiitaのスマホアプリを爆速で個人開発した話【React Native】

# はじめに
## 何についての記事？
React Nativeを使って3週間弱でQiitaの非公式スマホアプリを個人開発・公開したのでその時の所感を書き連ねようと思います．
個人開発する上での反省点や、使用したフレームワークである[React Native](https://facebook.github.io/react-native/)のこと等を書くつもりです．
なお、現状`Android`版しか開発していないので以下はすべて`Android`の話になります．

## 作ったもの
「Qiita API v2」を用いてアプリ上で閲覧や記事のストック、タグのフォロー等、一通りの操作ができるものを作りました．
「Qiita in Mobile App」ということで、アプリ名は「QiiMa!」です．


[Google Play Store

UI設計覚書

ウェブアプリケーションの UI を設計、実装するに当たり、常日頃注意している事等をまとめてみました。

## ボタンは消さない。非活性化する

操作不可能なボタンを画面から消してしまうのは好ましくないと思ってます。ユーザーは完全に操作を理解してアプリケーションを利用しているとは限りません。たとえ自分のアクションが原因で後続の操作ができなかったとしても、いつもある位置にボタンが無い事をすぐに認識できない場合があります。「あのボタンはどこだっけ？」と画面内を探し回る事になり、余計なストレスを与えてしまいます。

### 解決策

利用できないボタンは消すのではなく淡色表示や暗転させて利用できない事をアピールします。ツールチップ（吹き出し）等で操作できない理由を明示してあげるとより親切かも知れません。

## アクションの送信を認識させる

重たい操作を実行する時等、操作が完了するまで画面に何も変化が発生しないのは好ましくありません。ユーザーは自分がボタンクリックを失敗したのかと思い、何度も同じ操作を繰り返してしまう場合があります。

### 解決策

ユーザーのアクションを受領した事を、

各言語で、継承の挙動はかなり違うという話

## はじめに

この記事は、私が色んな言語でひたすら似たようにクラス継承を書いてみて、実際にどんな値が出力されるのかを調査した結果をまとめたものです。時には既知の言語でも「こんな文法あったんだ」と思いながら、時にはHello Worldから頑張りました。

まとめるのが大変だった割に誰得？という内容ですが、同じことが気になった人のために置いておきます。
いやでも新しい発見があるかもしれないのでとりあえず読んでみてください。
意外と面白い結果になったかもしれません。

## 調べた言語

– 静的型付け
– Java (Corretto 1.8.0_232)
– C# (3.4.0)
– C++ (11.0.0)
– Scala (2.13.1)
– Kotlin (1.3.61)
– Swift (5.1.3)

– 動的型付け
– Python (3.7.1)
– Ruby (2.6.5)
– PHP (7.1.32)
– JavaScript (node v12.14.1)

– オプショナルな静的型付け
– TypeScript (3

コード内で環境名 (dev,stg,prod) を使用しないことのすすめ

サービスを運用する場合、開発、運用で複数の環境でサーバーを動かしている場合がよくあると思います。このとき、パラメータ設定の口が柔軟でないと設定値の変更がしにくかったり、サーバーのビルドを環境毎にしなければならなず(特に docker 使っている場合)、デプロイに時間がかかったりします。
そうならないために環境名 (dev,stg,prod) を使用して動作変更するのをやめることをおすすめします。記事内では以下のような環境があると想定し、Javascript (Node.js) でいくつかの例を示します。

– 開発時ローカル PC
– ステージングサーバー環境
– 本番サーバー環境

# 変数を環境名に依存させるのをやめよう
サーバーでエラーが起きたときに管理者にメールを送るというケースで送り先を分ける場合で説明します。

##悪い例（コード内で環境ごとのメールアドレスを決めている）
コード内で設定されているアドレスにしか送ることができません、送信するメールアドレスが変更になったときはコードの変更が必要。

“`js
// process.env.NODE_ENV に環境名が指定され

コッホ曲線 JavaScript

“`