【翻訳】より簡潔で高性能なJavascriptを書くための7つの便利なコツ - Qiita
はじめに 読んでいてストックしておきたいなと思ったので、初めて翻訳記事を書きます。 私（@shimonosatoru）が加えたものに関しては斜体で記載しています。 以下、翻訳です。 本文 私たちがJavaScriptを書くとき、私たちは他人のコード、ウェブサイト、そして私たちが使ったチュートリアル以外の場所で見つけたコーディングを効率化するトリックリストを作成しました。 それ以来、私たちはこのリストにトリックを追加してきました。この記事は初心者にも役立つように書かれていますが、JavaScriptを扱えるデザイナーでさえこのリストの中から何か新しいものがないか見つけようとしています。 これらのコードの多くはどのような状況でも役に立ちますが、簡潔さよりも一貫性が重要であることが多いプロダクションレベルのコードにはふさわしくない場合があります。 みなさんにはそれを判断して欲しいと思っています。
【爆速】React+Amplify+AppSyncでリアルタイム掲示板アプリを15分で作り上げる 〜これが最高のDeveloper Experienceだ〜 - Qiita
【爆速】React+Amplify+AppSyncでリアルタイム掲示板アプリを15分で作り上げる 〜これが最高のDeveloper Experienceだ〜JavaScriptAWSReactamplifyAppSync Railsを使って15分でブログアプリを作り上げる動画が一斉を風靡したのはもう何年前でしょうか。 私はまだその頃Developerですらいなかったですが、いまその動画を見ても感動してしまいますね。 Webのアーキテクチャは進化し、API非同期通信、フロントエンドとバックエンドの分離、仮想DOMによるフロントエンド描画、GraphQLバックエンドの台頭といった具合に圧倒的な進化を遂げてきました。 では、この技術スタックを使ってRailsを使ってブログアプリを作り上げることと同様のことがどれだけの開発効率で実装できるのでしょうか？ 今回はAmplifyCLIとReactを使っ
1時間で出来るWordPress環境構築(※永久無料・・・だった)【※2020/7/1より約300円/月が有料になります】 - Qiita
個人用メモです。 !! ======================== !! ※この記事は2019年の記事です。著者はもうWordPressを使用しておりません。この記事で紹介している内容は2019年当時の内容である事を理解した上で、実際に設定する際は最新の情報を確認しながら行ってください。 2019/9/26追記 2020年1月1日より静的IPが有料になる旨Googleから発表がありました。 $0.004/時間=最大約300円/月が有料となります。 それ以外の部分についても無料でなくなり次第記事を更新してまいります。 情報: @mattn 様 2020/3/20追記 まだ請求額が0円だったので「あれ？」って思って調べたら、上記の静的IP有料の変更は1/1から反映されてるものの、キャンペーンで2020/4/1までは割引されている事に気がついたので注釈追記しました。ちなみに割引されなかった
レガシープロジェクトを引き継いだ時、最初にするべき７つのこと - Qiita
営業一課で使っている PHPアプリを保守してくれないかな？ ○○さんが１人で作ってメンテしてたやつなんだけど 皆さんは上司からこんな仕事を振られたことはないでしょうか？私は過去に何度か経験した1のですが、こういった仕事はなぜか： 正確な仕様を知っている人はいない（知ってた人は辞めた） テスト計画書・デプロイ手順書・仕様書といったドキュメントは無い ソースコードはもちろんスパゲッティ でも、業務ではガッツリ使われているので廃止できない というレガシープロジェクトばかりでした。この記事では、レガシープロジェクトを引き継いでしまった時に、最初に何をするべきか書いていきたいと思います。 なお、ここで最悪なのは「とりあえず、緊急の不具合から直してしまおう」と、いきなりコードの修正にかかることです。 ※おことわり： この記事では「遵法的な職場の」「PHPやRailsで書かれた」「社員25人が使う」「業
Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話 - Qiita
誰もが知る(？)プログラミングフォントこと Ricty にインスパイアされ、Ricty のように英文フォントと和文フォントを合成したプログラミングフォントを作りました。 その名も、プログラミングフォント「白源 (はくげん／HackGen)」です！ 白源 (はくげん／HackGen) 通常版 生成元にはプログラミング向け英文フォント Hack と、Adobe 製作の源ノ角ゴシックに丸みを付けた派生フォント 源柔ゴシック を使用させていただきました。 白源の生成元である Hack、及び源柔ゴシックには、いずれも SIL Open Font License Version 1.1 という大らかなライセンスが適用されているため、改変及び配布が自由となっています。したがって、白源の生成済みフォントファイル (ttf ファイル) は GitHub からダウンロードして、すぐにご利用いただけます。 「白
Mac購入後にやりたい設定&入れておきたいアプリ - Qiita
概要 mac買った時にやる初期設定やインストールしたいアプリのまとめ 構築して何しようって人へ少しでもヒントになれば幸いです。 想定読者 windowsPCで開発してきたけどMac買って何からすればいいかイマイチな人 Macちょっと触ってさらに便利にしたい人 基本設定 とりあえずやる基本設定。 ● タッチバーを固定 タッチバーが使いづらい。 外部キーボードは使うとしてもたまにノートで作業する時に不便すぎるので必須の設定 Mac - Touch Barにファンクションキー（Fnキー）を常に表示する ● メニューバー設定 デフォルトでは情報が少し物足りず空白が多いです。 あまり常駐させすぎるとパフォーマンスへ影響が出るので最低限 『日付』『バッテリー状況』『メモリ使用率』を出しています。 Mac - メニューバーにバッテリーの状況を表示/非表示 Mac 使い方 メニューバーの時計に日付と曜日を
JavaScript/TypeScript で Promise を直列実行できるが、結局どう実装すればよいのか？（可読性・実行速度） - Qiita
単位は byte es2016以下の場合 async/await を使用した場合、トランスパイルで polyfill が挿入される よって、 async/await を使用しなければ、polyfill 分のサイズを削減できる ただし、その他の実装でも一切 async/await 使ってない場合に限る src全体で見て、他の実装で async/await を使っている場合、その実装のために polyfill が挿入される そのため、直列実行の実装を工夫しても polyfill 分のサイズは必ず増える es2017以上の場合 いずれの実装も、polyfillは挿入されない よって、書いたコード分のファイルサイズになる 所感 まぁ、妥当な結果 ベンチマーク 各 target の出力結果の JavaScript を実行 1 スレッド、100 Promise の直列処理 * 5 回計測の平均 es5
ReactとVueを改善したSvelteというライブラリーについて - Qiita
海外のフロントエンド界隈で話題になっているSvelte 最近海外のフロントエンド界隈でSvelteが少し話題になっています。 この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。 My talk from @YGLF_IL, 'Rethinking Reactivity', went online yesterday — https://t.co/eoGiBBAkKI. You probably don't have time to watch a 35 minute video though, so I'm going to pull out a few key slides into a quick tweet thread: — Rich Harris (@Rich_H
JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか) - Qiita
JavaScriptでの賢いconsole.log( )の使い方 & その他便利なconsole.xxx( )使い方まとめ (dir・table・warn・groupとか)JavaScriptdebug初心者初心者向けデバッグ方法 更新 2019/5/20 console.trace()、console.time()、 console.timeEnd()、console.clear()を追記しました。 この記事について JavaScript大好きっ子とよももです！ JavaScriptの上手なconsole.log()の使用方法を調べていたらいろんな使い方があること、console.log()の他にも色々なデバッグ方法があることを知りました。 自分の勉強も兼ねてまとめてみることにしました。 賢いconsole.log()の使い方 例えば... 下記のような３つのオブジェクトがあるとします。
サイゼリヤ1000円ガチャをつくってみた(Heroku + Flask + LINEbot) - Qiita
Progateを一度やった程度のプログラミング初心者ですが、 何かWebアプリケーションを作りたいなぁと思い、Flaskを学ぶついでに サイゼリヤのメニューから1000円以内で組合せを出してくれるガチャを作りました。 2022.10.31 追記 Heroku有料化に伴い、以下をお知らせ致します。 LINE Bot版 サービス終了 Web版 旧アドレス（herokuapp.com）からのリダイレクト停止 2019.5.10 追記 Twitterで紹介頂いたようで、たくさんの方から反応を頂いていてびっくりしております！ メニューが古いままだと、何かと店舗側にもご迷惑をおかけしそうだったので、 本日時点でのグランドメニューに更新させていただきました。 非公式であることをご了承の上、店舗ではマナーを守って楽しんで頂ければ本望です！ （たくさん注文して食べ残す・・・などが起こらないことを祈ってます）
私が async/await、promise をちゃんと理解するまでのステップ１，２，３ - Qiita
これは何？ javascript の async/await を使いこなすために必要な事柄について、私なりに説明したものです。 書いてあること ステップ１）await 使えば待ってくれる 必要最小限の async/await、及び、エラーの catch の話 ステップ２）promise というもの promise の中には「正常データ = resolve」と「エラー = reject」のいずれかを保管できるという話 どうすれば、promise から、正常データ(resolve)を取り出せるか？ どうすれば、promise から、エラー(reject)を取り出せるか？ Promise.all の話 ステップ３）promiseを作る方法 callbackスタイルの関数を、promiseスタイルとして使う方法 setTimeout() を promiseスタイルにする async で promi
VSCodeのオススメ拡張機能 24選 (とTipsを少し)
1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく強い。 「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。 git blameする手間なくなる。 3. Prettier コードのフォーマットは自動でやりましょう！ 複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。 関連のTipsはここ 4. Git History Git logが見やすい 5. Bracket Pair Colorizer カッコの対応を色付きで表示してくれる。 ものすごく読みやすくなって最高&最高！！ なおBeta版ですが、後継となるBracket Pair Colorizer 2も出ています。 6. Settings Sync どこでも同じ設定で使いたい人には便利。 ⇧ + ⌥ + U/D で設定をアップロ
Vue.js おすすめライブラリ 21選（おまけ+1） - Qiita
どーも、8ビットエンジニアです。 今更感はいなめませんが、まとめます。 対象者 ・これからVue.jsを勉強する人 ・Vue.jsに興味がある人 ・npm or yarn をある程度理解している人 機能側 1. vue-chartjs vue-chartjsはvueのChart.jsのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 デモ 公式ドキュメント 2. vue-fa Vue.js で使用するアイコンですね。 FontAwesome5 を使用しています。 公式ドキュメント 3. vee-validate vee-validateは、入力を検証してエラーを表示することを可能にする、Vue.js用のテンプレートベースの検証フレームワークです。 テンプレートベースであるため、値が変更された時にどの種類のバリデータを使用するべきかを入力ごとに指定するだけで済みます。
iOS 12.2でWebVRとWebARが半ば終わった件について - Qiita
TL;DR iOS 12.2 の Update でジャイロがデフォルト Kill されていて、ユーザーが自ら設定を変えないと WebVR も WebAR も機能しないことへの言及を完全に忘れていた、ありとあらゆるユーザーにこの設定を変えてもらう所作を求めるのはなかなか厳しいから WebVR/AR を用いたマーケ施策ちょっと面倒になりそう pic.twitter.com/XR2YvaTkSa — いっこう / ikkou @4/20はxRTechTokyo (@ikkou) 2019年4月13日 更新履歴 2019/04/17 8th Wallの事例に見る対応方法を追記しました 2019/09/04 パブリックベータを見る限り iOS 13 でどのような状態になるか既にわかっていますが、例によって NDA の絡みがあるのでまだ具体的なことを Qiita に書けません。近々に控えているであろう
今からでも追いつける！ JavaScriptの「標準ライブラリ」を学ぶ - Qiita
標準ライブラリは、大ざっぱに言えばプログラミング言語に標準で備え付けられている機能群です。多くのプログラミング言語では、形態は様々ですが何らかの形で標準ライブラリが備え付けられています。標準ライブラリはプログラミング言語の一部であり、言語のバージョンアップに伴って標準ライブラリに機能が追加されることは良くあります。 この記事ではJavaScriptにおける「標準ライブラリ」がどんなものなのか、その歴史的経緯なども交えながら解説します。「標準ライブラリ？ 何それ」という方も「そんなの基本だろｗ解説されなくても分かるわｗ」という方もぜひ一読していってください。 なお、記事執筆時点では標準ライブラリに関することは何一つとして標準化が完了しておらず、内容が今後大きく変化する可能性が十分にあります。この記事で概要を理解したあと、いざ使用する際にはご自分で最新の情報を調べたほうがよいでしょう。 お詫び
VSCodeでのGitの基本操作まとめ - Qiita
はじめに 一年前に新人研修でGitを担当してTigの記事を書いたのですが，今年も同じくGitの研修を担当することになりました．新人さんたちにとってはターミナル環境はとっつきにくい人も多いようで，短い研修期間では操作自体に苦戦してしまい，Gitそのものを理解するというところに力を割けない人も少なくありませんでした． それを踏まえて今回はGUIで操作しやすい環境を検討したのですが，以下のポイントを踏まえてVSCodeを使うことに決めました． マルチプラットフォームで使える．（研修はWindows環境で行いますが，業務ではLinuxデスクトップ環境も使うので） Gitの基本的な内容はVSCode上でGUI操作が可能． Gitの内容とあわせて，プログラミング用のテキストエディタの一例として，導入しやすそうなVSCodeを紹介． VSCodeを使ったGitの基本的な操作を一通りまとめていきます． イ
iTerm2 にステータスバーが付いた - Qiita
α版の頃から追っかけてましたが、ついに 3.3.0 正式版がリリースされましたね！ 合わせて以下の記事も続編として公開しております。 iTerm2 のステータスバーで動くコンポーネント作る - Qiita 左から順に今いるディレクトリのブランチ名、実行中のプロセス、バッテリー・CPU・メモリ・ネットワークの状態、現在時刻が表示されています。それぞれの配置や並べるコンポーネントは GUI で簡単に設定できるようになっています（Preferences > Profiles > Session > Status bar enabled > Configure Status Bar から設定できます）。 テキストの字体や色は自由に変更できますが、Auto-Rainbow をクリックすると、いい感じに色をつけてくれます。 tmux Integration と組み合わせると吉 iTerm2 には tm
iTerm2 にステータスバーが付いた - Qiita
α版の頃から追っかけてましたが、ついに 3.3.0 正式版がリリースされましたね！ 合わせて以下の記事も続編として公開しております。 iTerm2 のステータスバーで動くコンポーネント作る - Qiita 左から順に今いるディレクトリのブランチ名、実行中のプロセス、バッテリー・CPU・メモリ・ネットワークの状態、現在時刻が表示されています。それぞれの配置や並べるコンポーネントは GUI で簡単に設定できるようになっています（Preferences > Profiles > Session > Status bar enabled > Configure Status Bar から設定できます）。 テキストの字体や色は自由に変更できますが、Auto-Rainbow をクリックすると、いい感じに色をつけてくれます。 tmux Integration と組み合わせると吉 iTerm2 には tm
HTTPサイトのドメインを奪われてHSTSを有効化されたら - Qiita
はじめに 最近lovelive-anime.jpドメインが何者かによって移管され一時的にその者の手に渡った。もともとの管理者によってすでに取り戻されたが、攻撃者は一時的にこのドメインに対する全権を握った。この記事では、あくまでも思考実験として攻撃者が他人のHTTPサイトを運用しているドメインの全権を握ったときに、攻撃者がHSTS(HTTP Strict Transport Security)を有効にしてしまった場合どうなるかについて考える。まずはHSTSについて簡単に説明し、そしてその後で今回筆者が考えた攻撃について議論し、最後にまとめを述べる。 この記事を読んでわからないことや改善するべき点を見つけた場合は、気軽にコメントなどで指摘してほしい。 攻撃者によるHSTSの有効化 ここではHSTSに関する説明と、筆者が考える攻撃（？）について説明する。 HSTSとは HSTSとは、HTTPのレ
世の中のエンジニアのalias設定 - Qiita
先日、同僚と「世の中のエンジニアはターミナルにどんなalias設定をしているんだろう？」という談義になったので、GitHub上の1000リポジトリのコードから調査してみました。 2019/04/10 コメントを元に微修正しました。コメントくださった方々、ありがとうございます。 2019/04/11 こんなのも書いてみました。 よく使われているvimrcの設定ランキング 2019/04/15 プラグイン版も書きました。よく使われているvimのプラグイン top20 aliasとは wikipediaより UNIXなどにおいてコマンドを別名で登録したもの。別名を登録するコマンド名。 長いコマンドやいつも利用するオプションを毎回入力するのは手間ですよね？ ターミナルの設定ファイルにaliasを記述することで、別名として定義することが可能というわけです。 調査方法 GitHub APIを利用 do
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
