2020年に立ち上げたWebフロントエンド構成の振り返り
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
【JavaScript】FetchAPIとaxiosの違いって？機能やメリットを比較
今回はJavaScriptのFetchAPIとHTTP通信のライブラリであるaxiosの違いについて解説します。 「fetchAPIとaxiosってやってること同じ...？何が違うの？」という疑問から色々調べてみたのでまとめてみました。 なお、基本構文や根底にある非同期通信、Promise自体の解説は割愛します。 FetchAPIとは まずイメージを掴むために、Fetchの語源から確認してみます。 フェッチとは、取りに行く、取ってくる、持ってくる、などの意味を持つ英単語。ITの分野では機器やプログラムなどが特定の場所からデータなどを読み出す動作のことを指すことが多い。 (フェッチとは - IT用語辞典 より) プログラミングではAPIサーバーなどからデータを持ってくる、取ってくるという意味でfetchという単語がよく使われていますね。 次にFetchAPIに関して確認してみましょう。 Fe
オブジェクトリテラルのプロパティ/メソッドのいろんな書き方（ES6版） - Qiita
ECMAScript 6 がいよいよ標準仕様となり、ブラウザでの実装もより一層進んできています。 オブジェクトリテラルの書き方ひとつ取っても、大変多彩になりました。 var d = 42; var obj = { a: 42, "b": 42, 0: 42, ["c"] : 42, d, e(){}, get f(){}, set g(v){}, *h(){} }; これらを全て把握するだけでも一苦労です ここではそれぞれの書き方を、ひとつひとつざっくり見ていきたいと思います。 尚、ここで紹介するコードは、一部のブラウザでは動かないことがあります。 投稿時点で最新の GoogleChrome 44 であればすべて動作することを確認しましたので、よければそちらをお使いください。 var obj = { prop: value }; 一番慣れ親しんできた書き方だと思います。 しかしプロパティ名
Callback を撲滅せよ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート（Node.js）チームの伊藤（@koh110）です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのか ユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのか ちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー
Socket.IOでメッセージが届いたことを確認する - Qiita
WebSocket使ってると、クライアントからサーバーにメッセージ送って、届いたのがはっきりしてから何かしたいことがあったりします。WebSocketの仕様その物にはそういう機能は無いようですが、Socket.IOにはそういう機能があったのでこれが使えました。 （低レベルの話を期待していた方、済みません） ドキュメントに書いてあることそのままではあるんですが：Sending and getting data (acknowledgements) Socket.IOのacknowledgements機能 emitするクライアント側のコード、サーバー側のonで待ち受けるブロックのコード、のそれぞれでコールバック関数を登録することで、クライアントからのメッセージが届いた時の処理を書けます。処理を書けるということは、届いたことが確認できるということです。 // クライアント側 var ws = i
Socket.ioで作ったWebSocketサーバをELBでロードバランスする - Qiita
課題 現在、作っているサービスではsocket.ioを使って作ったWebSocketサーバをELB経由で使っています。 開発環境はELB配下にEC2が1台で、本番環境は複数台です。 これ、どちらも正しく動いているように見えていたんですが、最近セットアップした本番環境の方でWebSocketへのUpgradeがうまくいっておらず、pollingで動いていることに今日気がつきました。 サービスとしてはまぁ一応問題はないんですが、WebSocketで動いていると思っていたものが実はPollingだったというのはわりかし衝撃です。 原因 なんでやねんと思ってググるとわりと簡単に原因に行き当たりました。公式ドキュメントで思いっきり説明されています。 日本語だとこの辺でが参考になります。 Express / Socket.IO をスケールアウトしてみよう Socket.IO or WebSocket
webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編―（本記事） 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― 5. webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境
4歳娘「パパ、Promiseやasync/awaitって何？」〜Promise編〜 - Qiita
スペシャルサンクス @sega_yuu @frodo821 とある休日 娘（4歳）「ねえパパ」 ワイ「なんや、娘ちゃん？」 娘「非同期って何？」 ワイ「ひ、非道鬼！？」 娘「そうそう、非同期処理とかいうやつ」 ワイ「非道鬼を処理やて・・・！？」 非道鬼「ヴォ〜〜〜！！！」 娘「！？」 娘「・・・現れたわね、非道鬼」 娘「処理してあげる」 ワイ「娘ちゃん、まだ4歳なのに、もう厨二病か・・・？」 よめ太郎「おい」 よめ太郎「お前まさか、非同期も知らんのか・・・？」 ワイ「いやいや、まさかまさか」 ワイ「流石に知っとるわ」 ワイ「それはそれは・・・極悪非道な・・・鬼のことや・・・」 よめ太郎「お前が非道鬼に喰われてしまえ」 非同期処理とは よめ太郎「ええか、娘ちゃん」 よめ太郎「まず、同期って言葉は」 よめ太郎「タイミングが合うって意味や」 娘「じゃあ、非同期っていうのはタイミングが合わないって
TypeScript + VSCodeで快適プログラミング｜erukiti
JavaScript大好きの皆様ごきげんよう。 今回は、JavaScriptのスーパー強い版であるTypeScriptとVSCodeの組み合わせがとても快適である！という記事をお送りします。 JavaScriptJavaScriptは、RubyやPHPなどと同じ、いわゆる動的型付け言語です。 const hoge = (arg) => console.log(arg + 1) hoge(1) // 2 hoge('1') // 11 hoge([1, 2]) // 1,21この hoge という関数は引数 arg に、数字、文字、配列などどういう型のデータでも突っ込めますが、配列を入れた場合の挙動とか、誰得な感じがするので、数字だけを入れたいとします。 const hoge = (arg) => { if (typeof arg === 'number') { console.log(ar
次にJSガッツリ書くときはTypeScriptで - Qiita
すっかりTypeScript厨（同僚談）になっているyprestoです。 AndroidでKotlinがどんどん採用されていくのを横で指を加えて見てるわけには行かないので、JSにもTypeScriptをぶち込みました。SwiftかKotlinを書いたことがある人ならばすっと馴染むと思います。 新しく書くJSはもう基本的にTSで書いてます（botすらTypeScriptに書き換えて引かれましたｗ）。ちょうど1年前からガッツリ使っていたので知見を垂れ流すフェーズに入ります。 完全な初級というよりは、ちゃんと使いたい中級な人向けに、基本的な使い方＋最初に引っかかるところという感じで書いたつもりです。どちらでも大丈夫なように書くつもりなので、疑問点をコメント頂けるとうれしいです・・！ なんでそんなにTypeScript使いたいの React使うなら常にTypeScriptという気持ちが高まりました
Node.jsのexportsについて - 30歳からのプログラミング
Node.jsにはモジュール機能があり、他のファイルの内容を読み込むことが出来る。 だが、何となくでしか使い方を理解していなかったので、調べてみた。 このエントリのコードは全て、v4.4.3で動かした。 基本 まず、呼び出される側のファイルで、モジュール化する値やオブジェクトをexportsしておく。 そうすることで、その値やオブジェクトに外部からアクセスすることが可能になる。 呼び出す側ではrequire()関数を使い、ファイルを読み込む。 読み込んだファイルから、exportsされている値やオブジェクトにアクセスできるようになる。 // parts.js var value = '値'; var foo = 'foo'; exports.value = value; // index.js var parts = require('./parts.js'); console.log(p
JavaScript の this を理解する - tacamy--blog
this はインスタンス自身を指す、ただそれだけの話でしょう？ そんなふうに考えていた時期が私にもありました。そう、JavaScript の this に出会うまでは・・。 用語について 私は Java 脳で書いてるので、言葉遣いが JavaScript と若干違う部分があると思います。 下記のようなイメージで言葉を使っています。 用語 意味 クラス インスタンスオブジェクトの元となる設計図 コンストラクタ クラスのコード部分で、new したときにコンストラクタの内容で初期化する インスタンス クラスを元に実体化したオブジェクト メンバ変数 クラスやインスタンスに属するローカル変数 メソッド クラスやインスタンスに属する命令（関数） オブジェクト指向とプロトタイプと this JavaScript のオブジェクト指向開発では、元になるクラスを new することで、インスタンスを生成します。
JavaScript の超便利なメソッド bind で this を制御する
JavaScript の関数オブジェクトには、「bind」という便利なメソッドがあります。このメソッドは関数内で参照できる this を指定のオブジェクトに束縛できるものです。この関数を使うと、this に関連した良く有る問題をスマートに解決できます。 this にまつわるよくある問題 次の例は、実行後に「こんにちわ ぷんちゃん」とアラートするコードです。 var Person = function (name) { this.name = name; } Person.prototype.sayHello = function() { alert('こんにちわ ' + this.name); } var punchan = new Person('プンちゃん'); punchan.sayHello(); //「こんにちわ プンちゃん」と表示される
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
JavaScript の仕組み：メモリ管理+ 4つの共通のメモリリーク処理方法 - Qiita
この記事は sessionstack blog に投稿されている、How JavaScript works シリーズの一記事 "How JavaScript works: memory management + how to handle 4 common memory leaks" の和訳です。投稿されたのは Alexander Zlatkov, 原文はこちらです。翻訳については許諾いただいています。 メモリ管理もしくはC言語におけるメモリ解説他、用語なども怪しい箇所は多分にありますので、間違いがありましたら修正のご指摘・編集リクエスト等ください。 日本語の参考 URL 先に日本語の参考URLを記載しておきます。 JavaScriptで起こるメモリリークのパターン - EagleLand Browser Computing Structure // Speaker Deck Unders
httpからhttpsにJavaScriptでリダイレクトさせる方法 - takekoshi's blog
webサーバに手出しできない、かつ、httpとhttpsで出し分けができない場合にhttpからhttpsにリダイレクトする方法です。 webサーバもmetaタグも使えないので、JavaScriptを使います。 コード<script type="text/javascript"> if(location.protocol == 'http:') { location.replace(location.href.replace(/http:/, 'https:')); } </script> ポイントlocation.replace()を使うJavaScriptのリダイレクトをググるとlocation.hrefを使う方法が出てきますが、この方法ではブラウザのHistoryに残ってしまいます。つまり、外部サイトから遷移してきた場合に 外部サイトhttp://自分のサイト/https://自分のサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ES5とES6の違いをまとめてみた(メモ) - Qiita
ユーザのブラウザで起きた JavaScript のエラーを収集する - Qiita
Way to have fingerprint generation be synchronous? · Issue #269 · fingerprintjs/fingerprintjs