自己紹介 じゅんじゅんというニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。 HAL大阪の新2回生です👍 (2016.7.18現在) よくstart up系イベントに行くので、大阪らへんの方は会いましょう! では、早速。
![React.jsでループするには。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/55a2568474eae0f07b195300d4d9cc446154f08d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UmVhY3QuanMlRTMlODElQTclRTMlODMlQUIlRTMlODMlQkMlRTMlODMlOTclRTMlODElOTklRTMlODIlOEIlRTMlODElQUIlRTMlODElQUYlRTMlODAlODImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTliY2M5MzMxZTI3MDQyYjQ0NGUyOTA1NjE0YjE3Y2Jj%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb25vanVueWEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWFjOGExYjY1ZGMzODkyZjI2ZWQyY2EyODAzNjhjNjFh%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D2bbdb959d827fe2ef4499b37907700d5)
var arr = ['AAA', 'BBB', 'CCC']; for (const elem of arr) { console.log(elem); } ECMAScript 2015 以降は、配列をループ処理したいときは for-of の構文を使うのがシンプルです。 参考: for…of - JavaScript|MDN forEach を使う方法 (ECMAScript 2015) Array.forEach() を使用すると、指定したコールバック関数が要素ごとに呼び出されます。 const arr = ['AAA', 'BBB', 'CCC']; arr.forEach(function(elem, index) { console.log(index + ': ' + elem); });
はじめに 突然ですが、皆さんはブラウザの表示要素にアニメーションつけていますか?? 私はcss の hover 擬似クラスで簡単に済ましていることが多々あります。 今回は、DOM 要素のアニメーション直感的に選んで簡単に適用できる、Tail-animista という WEB サイトを紹介したいと思います。 Tailwind を導入していることが前提となります。 Tail-animista とは tailwind 用の アニメーションのコードを自動生成する WEB サイトです。 カスタマイズ可能な様々なアニメーションが用意されています。 Tail-animista 好みのアニメーションを見つける Tail-animista の WEB サイトにアクセスします。 ページ上部と左側のメニューからアニメーション項目を選択すると、画面中央にアニメーションのプレビューが表示されます。 いろいろ選択して
今回の記事では、strapiでAPIのドキュメントを自動で生成する方法を解説します。API仕様書の作成がめんどくさいと思う方にオススメです。 設定方法は簡単で、document pluginをインストールするだけです! では、手順を詳しく解説します。 準備:strapiをインストールしてAPIを作成するまず、strapiをインストールしてAPIを作成しましょう。 今回はブログの記事を取得するAPIを想定しております。 「http://localhost:1337/articles」とGETすると下記のような情報が取得できるAPIを作成しましょう。 詳しい作成方法は、こちらの記事で解説しています。 ドキュメントを自動生成するプラグインをつかってみよう! StrapiのAPIの準備ができたら、プラグインをインストールしましょう。 strapiでプラグインをインストールする方法strapiでプラ
配列の length プロパティを参照すると、配列の最後のインデックス に 1 を加え値を取得することができます。この値は通常配列に含まれる要素の数となります(違う場合についても解説します)。ここでは JavaScript で配列の要素の数を取得する方法について解説します。
こんにちは、GIGでメディア周りのお仕事をしている内田(じきるう)です。 GIGは日本最大級のフリーランス向けメディア『Workship MAGAZINE』の運営を行っています。その他に他社メディアのコンサルや、メディア制作&開発、記事コンテンツ制作支援なども行っています。 仕事柄、多くのメディアサイトを日々巡回しては「なるほどこういう機能いいな!」「あああああこの企画はやられたわ!」とのたうち回ってるのですが、よく見かける機能として “人気記事ランキング機能” があります。 人気記事ランキング機能とは、週間や月間などでもっとも読まれた記事から順に、ランキング表示していくものです。端的にいうと、PVランキングですね。 メディアサイト制作の際によく実装される機能なのですが……アレ、なんとなく入れてませんか? なんとなく、見栄えがいいから導入していませんか? あくまでボク個人の感想ですが、人気
npm installで何故かコケた。 原因はsemverがないとのこと(以下のエラーを参照)。 いろいろ調べたんですが、どれも上手くいかず、結局package-lock.json、node_modulesを消して、npm installすることで直りました( @kyome に助けてもらいました)。 いろいろ調べたURLはこの記事の最後の方に貼っておきますので、package-lock.jsonとnode_modulesを消しても上手くいかない人は試してください。 エラーコード 一部加工しています。 MacBook-Pro:yourprogram yourusername$ npm install npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN dep
Reactでフォームの実装をしたことのある、もしくはこれから実装する皆さん。 React-hook-formをご存知ですか? フォームの実装がとても楽になる便利なライブラリです。 この記事ではReact-hook-formの基本的な簡単な使い方と 実装例をソースコードとともに解説しています。 React-hook-formとは? 高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ。(引用) 従来のformライブラリに比べて、以下の特徴があります。1 ・記述量が少ない ・レンダリングが少ない ・マウントが高速 ・hooksで記述がシンプル そして何より。。 バリデーションの実装が楽になります。 使い方 それではReact-hook-formの簡単な使い方を見てみましょう。 以下は公式デモのソースコードです。 import React from 'react' import
プログラム内容パッケージ構成パッケージ構成の「package.json」は、次のようになります。 { "name": "recoil-react-hook-form", "version": "1.0.0", "scripts": { "dev": "next", "build": "next build", "start": "next start" }, "dependencies": { "next": "12.2.0", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "7.32.2", "recoil": "0.7.4" }, "devDependencies": { "@types/node": "14.14.31", "@types/react": "17.0.2", "typescript": "4.
Dockerfileのbuildをしているとno space leftなるエラーが発生してしまいました。 docker system dfでDockerが使っているストレージ容量を確認したところBuild cacheがやたらに大きいことが判明。 $ docker system df TYPE TOTAL ACTIVE SIZE RECLAIMABLE Images 25 6 99.35GB 74.17GB (74%) Containers 8 6 27.06GB 6.004GB (22%) Local Volumes 3 1 0B 0B Build Cache 214 0 41.58GB 41.58GB
Auto Fill Fill in some forms automatically based on the information of the repository. We use cookies in order to measure and imporove the performance of LEADYOU using Google Analytics after your agreement of using them. This site uses Google Fonts after your aggreement of using them because there is a possibility that Google gets your IP address. We also use two no-tracked cookies to control Goog
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く