バックエンド出身エンジニアがReact/Next.jsに入門してみた話
今日からあなたはフロントエンドエンジニアです！ え、面接でバックエンド・インフラしかやってなかったって言ったのに！？フロント！？どうしよう 😭 [1] どうも、株式会社カナリーでお部屋探しマーケットプレイスの CANARY を開発している shusann です！ 本エントリーでは、 もしあなたが明日から急にフロントエンドエンジニアを任されることになっても困らないよう、私がこの半年間で何をどうやって学んできたかをシェアすることで道しるべとなれることを目指しています。 これから同じ境遇に立つ人やフロントエンド興味あるけど何から手を付ければいいかわからないようなエンジニアにとって、この記事が参考になれば嬉しいです 😍 とはいえ、本エントリーは半自伝的な記事で「ああ、こんなことやってたんだ」という読み物として話半分に読んでいただければ幸いです。 自己紹介 本題の前に、半年前の入社当時の自分の状
Cloudflare Workers 入門【はじめからそうやって教えてくれればいいのに！】
はじめに 【追記】↓100秒テックでイラスト投稿してます！よかったら見てってください！ Cloudflare Workers とは？ Cloudflare Workers とは、一言で言うと、Cloudflare のエッジで動くサーバーレスの JavaScript 実行環境のことです。 ...と言っても、これだけだとよくわからないですよね。だから、今回は初めて触る人でもわかるように、順序だててわかりやすく解説していきます。 Cloudflare Workers 理解するための道のり Cloudflare Workers を理解するためには以下の3つのキーワードを理解することが重要です。 CDN エッジコンピューティング JavaScript 実行環境 この記事ではこの3つのキーワードを1つ1つ解説した後、最後にデモという形で実際にコードを書いて Cloudflare Workers にデプ
htmxとは何なのか？ その背景にある思想について - Qiita
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
FRONTEND CONFERENCE 2019の登壇資料です。 https://2019.kfug.jp/session/onoueyosuke Webサイト・Webアプリ制作への高まる要求に耐えられるようにJavaScriptは進化を続けてきました。特にこの約5年間で、JavaScriptは…
サーバレス・ネイティブ が お伝えする、フルサーバレス開発の魅力！ | Slides | Riotz.works
「CloudNative Days Tokyo 2019」にて発表した際のスライドです。
繋がりを可視化する グラフ理論入門｜es
個人的に、一番面白いデータ構造であり探索アルゴリズムです。 ここで言うグラフは円グラフや、棒グラフのことではないです。プログラミングで扱うのは、図のように、点と線を繋げたものです。 ズバリ、人と人の繋がりを表現できます。 今回もJavascriptで実装します。 グラフ理論は、SNSだったり、レコメンドだったり、地図の経路だったり ルーティングだったり、点と点の繋がりを可視化します。繋がりを表現するデータ構造です。 巨大なインターネットもそうです。 そいう意味で、すごく身近なアルゴリズムですよ。 グラフの基本は次の２点で構成されています。 ・ノード：node(vertex) - 点（人、物、場所） ・エッジ：edge - 辺(繋がり、経路) 上の図を見ると一目瞭然ですね。ノードを人だとしたら、エッジが関係性です。まずは、これだけ理解できれば大丈夫です。 ちなみに、方向がない辺を無向グラ
Parcel入門 - TypeScriptの導入方法 - ICS MEDIA
「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか？」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか？ 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr
これからのメタプログラミングJavaScriptの正義を語ろう / meta programming JavaScript is Justice - Speaker Deck
コーディングタイムコンパイル 暖かき溢れる手作業による重複を根絶する 生産性を向上して、相対賃金を上げる
「フロントエンド開発に再入門する」タスクフォースの進め方 | MEDLEY Developer Portal
2017-11-09 「フロントエンド開発に再入門する」タスクフォースの進め方 こんにちは。開発本部の宍戸です。 メドレーでは定期的に、テーマに沿って組織の技術的な底上げを行うための機会（タスクフォースと呼んでいます）を行っています。そのタスクフォースの１つとして先日、フロントエンド開発力のベースアップを目的としたタスクフォースを行いました。本記事では、その取組みについてご紹介したいと思います。 背景 メドレーには現在 20 人弱のエンジニアが在籍しており、その約半数がサーバーサイド出身者です。また普段の開発においては、一つの機能をフロントからサーバーサイドまで一貫して一人が担当するケースが多くあります。サーバーサイド出身者のフロントエンド開発のスキルセットには多少ばらつきはあるものの、普段の開発業務ではレビュー等でそれぞれサポートしつつ開発を行っています。 しかし、フロントエンドの基礎的
同僚のコードレビューでこんなにクラスの設計が良くなったという話 - Qiita
弊社では、案件とは関係のないプロジェクトでも業務時間中にみんなにコードレビューを依頼できる時間が確保されています(参加は任意)。案件のコードレビューを依頼したり、ちょっとした個人の制作物を見てらったりと使い方は色々です。 先日、TypeScriptの練習にQiitaのAPIを叩いていて記事を表示するブログウィジェットを作成しました。このウィジェットのレビューを依頼したところ、クラスの設計について具体的な指摘と、それに対する改善を経験できたのでこの記事に記載します。 今回作ったQiitaWidgetの要件 Qiitaの公式APIV2から記事とユーザー情報を取得し、HTMLテンプレートに表示する 投稿の合計いいね数を算出するために、あるユーザーの投稿を全件取得する (このために複数回リクエストの送信とレスポンスデータの結合を行う) パラメータによってユーザー、いいね数によるソート、表示件数、ラ
GitHub - elsewhencode/project-guidelines: A set of best practices for JavaScript projects
While developing a new project is like rolling on a green field for you, maintaining it is a potential dark twisted nightmare for someone else. Here's a list of guidelines we've found, written and gathered that (we think) works really well with most JavaScript projects here at elsewhen. If you want to share a best practice, or think one of these guidelines should be removed, feel free to share it
Superhero.js
Creating, testing and maintaining a large JavaScript code base is not easy — especially since great resources on how to do this are hard to find. This page is a collection of the best articles, videos and presentations we've found on the topic. Follow us on Twitter, GitHub, or check out our newsletter. We'd love to hear your suggestions via e-mail or as Github Issues. We come across a lot of great
ASCII.jp － Web Professional（ウェブ・プロフェッショナル）｜デザインからマーケティングまで、Webを仕事にする人の情報サイト
WebPro KUSANAGI Security Editionが進化！ 新機能「SafeUpgrade」でダウンタイムゼロのnginxアップデートを実現 KUSANAGI Security Editionが新機能「KUSANAGI SafeUpgrade」を導入し、nginxのメジャーバージョンアップを無停⽌で実施可能にする。 0 0 WebPro 高速CMS基盤「KUSANAGI Security Edition」がMicrosoft Azureに登場｜自動アップデートで安全性を確保 プライム・ストラテジーが、新しいセキュリティ基盤「KUSANAGI Security Edition」をMicrosoft Azureで提供開始。セキュリティ向上と運用効率... 0 0 WebPro KUSANAGI 9、新たにOracle CloudにAlmaLinux OS 9を採用し、2032年ま
JavaScript 祭で発表してきました - 若くない何かの悩み
秋のJavaScript祭 in mixi で、「バグの見つけ方」について発表してきました。 speakerdeck.com 過去二つのスライドをくっつけたものなので、既視感があるかもしれませんが気のせいです。 さて、前の発表を終えてから、いくつか直したかった点があったので、その点だけ修正してあります。 例えば、「ステップ実行」→「手動動作確認」のあたりですね。 ステップ実行でバグを見つけるというより、見て触っておかしいと気づいて、ステップ実行へ突入するはずですから、「手動動作確認」の方がふさわしいと思ったためです。 あと、次の2つの感想が特に嬉しかったです。ありがとうございました。 スライドめっちゃすてきだしリントやテストの大事さがすごくわかりやすい… #jsfes— nao (@naoi109) October 15, 2016 これまでの人生で一番簡潔に型検査やリントやテストの重要性
黒魔術（JavaScript）まとめ - Qiita
まえがき JavaScript、書いてますか？ JavaScriptは今や世界中の人々に愛されています。 stackoverflowの2016年の調査によるとJavaScriptは地球上で最も一般的に使用されているプログラミング言語だそうです。 JavaScript is the most commonly used programming language on earth. Even Back-End developers are more likely to use it than any other language. link しかしJavaScriptは愛されすぎているが故、しばしば黒魔術のようだと比喩されることも少なくありません。 愛と憎しみが紙一重とはこのことですね。 ということでそんなこんなはどうでもいいのですが、自分もJavaScriptは大好きです。 今回は黒魔術まと
JavaScript初心者を一気に上級者へ導く海外の無料動画ベスト6を一挙公開！ -
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScript」をどのような方法で学習されているでしょうか？ お手軽な方法としては…、 ・書籍やブログ記事を読む ・勉強会・セミナーへ参加する ・友人や先輩に直接聞く ・学習向けのWebサービスを利用する ・etc... などが一般的でしょうか。 今回は、上記のリストに加えて、もう１つ有効な方法である「海外の無料動画」についてご紹介しようと思います！ 「どうせ、英語だから…」と、つい敬遠しがちですが、海外ユーザーが作るプログラミング学習動画は、国内に比べて圧倒的に「質」が高いのが特徴です。 なかでも、特に解説が丁寧で理解しやすい動画だけを厳選しましたので、ぜひチェックしてみてください！ ■「JavaScript」の基本を徹底的に学ぶ！ まずは、JavaScriptを「どのように書いたら良いのか？」を丁寧に教えてくれる動画のご
Promise-based functions should not throw exceptions
This blog post gives tips for error handling in asynchronous, Promise-based functions. Operational errors vs. programmer errors # In programs, there are two kinds of errors: Operational errors happen when a correct program encounters an exceptional situation that requires deviating from the “normal” algorithm. For example, a storage device may run out of memory while the program is writing data t
How to stub promises using Sinon.JS
Promises are a great way of doing async programming. But testing with promises can be a bit cumbersome, even with the use of the arrow functions syntax. Recently I've found a small and nice package to help to stub tests using Sinon, and the library is sinon-stub-promise. function fetchMovieData() { return fetch("/movies") .then(res => { return res.json(); }) .then(movies => { return movies; }); }
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのレベル別書籍のまとめ
物理サーバを選定する際のポイント – Eureka Engineering – Medium
