React2023年度リクルート エンジニアコース新人研修の講義資料です
いちばんやさしい webpack 入門
webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。 複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。 複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめる すでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。 使うメリットは何？ モジュールを 1 つ（もしくは少数）にまとめることでブラウ
イベントループと TypeScript の型から理解する非同期処理
この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl
JavaScriptを完全無料で学習できる最強の厳選コンテンツを大公開！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JavaScript初心者から中級者までをカバーできる学習コンテンツを厳選してご紹介します。 完全無料で公開されているものばかりを集めており、なおかつ質の高いコンテンツを選んでいますので独学したい方にも最適です。テキスト、動画、本、Webアプリなど、さまざまな種類のコンテンツを楽しみながらぜひ学習に役立ててください！ ■学習を始める前に これからJavaScriptの学習コンテンツについて解説をしていく前に、ひとつだけ以下のサイトをご紹介しておきます。 【 The Modern JavaScript Tutorial 】 これはJavaScriptの基礎構文・DOM操作・非同期処理・サーバ通信など、ほとんどの学習項目を網羅したリファレンスのようなサイトです。海外で作られたサイトですが、うれしいことに日本語化されているので初心者にも扱いや
JavaScriptの非同期処理をじっくり理解する (3) async/await
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
JavaScriptの非同期処理をじっくり理解する (1) 実行モデルとタスクキュー
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 入門記事へのリンク プロミスの使用 - JavaScript | MDN Promise, async/await (現代の JavaScript チュートリアル) JSの初心者にPromiseとasync/awaitの使い方
JavaScriptの非同期処理をじっくり理解する (2) Promise
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先順
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2021年度版） | Recruit Tech Blog
こんにちは！ Webフロントエンドエンジニアの眞野 隼輔です。 毎年大きな反響を頂いている、エンジニアコースの新人研修の内容を紹介させていただきます。 研修の概要 リクルートでは、エンジニアコースでスペシャリスト採用された新卒のエンジニアを対象に、現場で培われた「本当に必要な生きた知識・技術」を取り入れた新人研修を開催しています。 前半は研修では各分野に長けた社員による講義形式の技術研修を行い、後半は仮配属という形でそれぞれ別の部署に配属されて実際の業務を経験するOJTとなっています。 この技術研修はそのほとんどが内製されており、ベテラン社員による経験を元にした講義を通して生きた知識・技術を獲得できます。また、実際に手を動かす演習型の講義ではベテラン社員からのレビューやフィードバックを得られるため、知識の定着や更なる成長へと繋がります。 本年度の技術研修も、昨年度に引き続きフルリモートでの
米ハーバード大学のプログラミング授業「CS50x」日本語訳が無料公開
米ハーバード大学がオンラインで無料公開している、PythonやJavaScriptのプログラミング学習とコンピューターサイエンスの入門講座の日本語訳ページ「CS50.jp」が無償公開されました。2022年8月31日に2022年度最新版の日本語化が完了しました。講義動画の日本語字幕の翻訳化を順次すすめています。学生向けですが、年代にかかわらず、コロナ禍で学習環境やキャリアに悩んでいる誰もが学ぶことができます。 ハーバード大学のCS50xとは ハーバード大学のCS50xとは、日本語翻訳ページ「CS50.jp」によると、コンピューターサイエンスとプログラミング技術を紹介するオンラインコースです。この講義がオンライン上で無償公開されており、世界で282万人が履修登録しています。 edX - CS50s Introduction to Computer Science 学べる内容はPythonのプロ
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
2019年5月時点 JavaScript初心者が参考にしていいモダンJavaScript解説サイト2つ - Qiita
初心者向け解説によくある例です。 これが現時点（2019年5月時点）で非推奨な書き方だと、初心者は気付くことができない。つらい。 【JavaScript初心者のつらいところ】 初心者向け解説（チュートリアル）のvarをconstやletに置き換えなきゃいけない 何も知らずvarで写経すると悪癖がつく 他にも「今は覚えなくていい書き方」がどうやらたくさんある 「歴戦のJavaScripterがモダンJavaScipt知識をアップデートするためのまとめ」を読むには、そもそも必要とされる前提知識を持ってない 「何が正解かわからない→ググる」と、正しい情報探しに時間が消える 解説途中でググらなくても良い、チュートリアル的に読み通せるサイトってどこ！？！？ そんな私のニーズを満たせそうなサイトにたどり着いたので、記事にしてみます。 【js-primer】 js-primer これからJavaScri
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
Tesseract.js | Pure Javascript OCR for 100 Languages!
Tesseract.js is a pure Javascript port of the popular Tesseract OCR engine. This library supports more than 100 languages, automatic text orientation and script detection, a simple interface for reading paragraph, word, and character bounding boxes. Tesseract.js can run either in a browser and on a server with NodeJS. Check out the Example code and API docs on GitHub.
JavaScriptの配列操作に役立つ13のヒントとトリック - Qiita
以下はDuomly ( Webサイト / Twitter )による記事、13 useful JavaScript array tips and tricks you should knowの日本語訳です。 Duomlyはプログラミング学習コースを提供しているWebサイトです。 ただランディングページにたいしたことが書いてないので、詳細はよくわかりません。 ここはもう少し書いておいてほしいところ。 13 useful JavaScript array tips and tricks you should know 配列はJavaScriptで最も一般的な概念のひとつであり、内部に格納されたデータを操作する手段は多数存在します。 配列はJavaScriptの最も基本的なトピックであり、プログラミング学習パスの最初に学習するものだという前提のうえで、この記事ではあなたが知らないかもしれない、しか
Puppeteerで不要なCSSを消す - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの穴井（@pirosikick）です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！ フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。 blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。 このブログは、6/19に福岡で開催した「Google I/O '19のWebをまとめる会」で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。 speakerdeck.com きっかけ とあるプロダクトのCS
TypeScript Deep Dive 日本語版 | TypeScript Deep Dive 日本語版
TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。 ~�
textlintで日本語の文章をチェックする
textlintはMarkdownなどテキスト向けのLintツールで、テキスト版ESLintみたいな感じのツールです。 JavaScriptでルールを書けるテキスト/Markdownの校正ツール textlint を作った | Web Scratch 最近azu/JavaScript-Plugin-Architectureという小さな書籍を書いていて、色々簡単に使えるような仕組みを追加しています。 この記事では簡単なtextlintの導入方法について紹介します。 公式サイトには一部ルールを含むオンラインデモが公開されています。 textlint · The pluggable linting tool for text and markdown ドットインストールにてNode.jsのインストール、textlintの利用方法、エディタとの連携などのチュートリアルが公開されています。Node.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
console.log(); しか使えなかった自分へ。。。 - Qiita
GitHub - zgw426/Handling_JSON_with_no_web_server_HTML-JavaScript-
