代表的なnode.jsのパッケージマネージャにnpmとyarnがあります。 npmよりyarnの方が良い！ と書いてある記事を何回か見かけたので、今回はyarnについてまとめてみました。 npmについては以前の記事でまとめています。 npmとは -Qiita yarnとは JavaScriptのパッケージマネージャ 2016年にFaceBookが公開した npmと互換性がある = 同じpackage.jsonが使える yarnのメリット npmよりインストールが速い 約半分になる場合もあるそう npmより厳密にモジュールのバージョンを固定できる yarn.lockファイルで、各パッケージのインストールバージョンを固定できる。 npmと一緒に使える npmと同じのpackage.jsonが使えるため、同一プロジェクトでnpm or yarnで固定しなくて良い。 yarnの使い方 yarnのイ

「Yarn」は「npm」を改良したツールです。 yarnpkg.com 前提 Yarnのインストール Yarnとnpmの違い まとめ 前提 WindowsにYarnをインストールする場合、事前に Node.js npm がインストールされている必要があります。 Node.jsとnpmまだ入ってない場合は、先にインストールしておきます。 （参考） jsstudy.hatenablog.com Yarnのインストール Windowsでコマンドプロンプトを開き、以下のようにコマンドを入力します。 npm install -g yarn Yarnがインストールされたら、以下のコマンドでYarnのバージョンを確認してみます。 yarn -v 「1.19.1」などとバージョンが表示されたらOKです。 Yarnとnpmの違い npmの代わりにYarnを使うメリットは何でしょうか？ （参考） www.go

2019.11.02 に FRONTEND CONFERENCE 2019 (#frontkansai) にて発表したスライドです。

モダンなJavaScriptの要点について紹介された資料がありました。 speakerdeck.com 要点 アロー関数 クラス 非同期処理 各機能の利便性に注目 要点 モダンJavaScript再入門 / Re-introduction to Modern JavaScript - Speaker Deck [JavaScript] [入門] ?slide=12 アロー関数 ・関数の理解はモダンJS理解への近道 ・functionの必要性が減っている / ?slide=15 クラス ・prototypeのことは忘れよう / ?slide=27 非同期処理とは？ ・モダンなWebフロントエンド開発には必須の知識 2019/11/02 13:05 b.hatena.ne.jp アロー関数 関数の理解はモダンJS理解への近道 functionの必要性が減っている クラス prototypeのこ

またも、まったく目新しいトピックではないです。 個人でメンテしてるWebRTCのモジュールに機能を追加するときに思い出したしせっかくなのでメモ。 方法は2つ SDPによる`b=AS`/`b=TIAS`の指定 `RTCRtpSender`の`getParameters()` + `setParameters()` 短いWebRTCの歴史の中でも、前者は割と昔から使えて、後者は割と新しいめのAPIを使うとできる。 TPOにあわせて選べばよくて、どちらかだけ使え！というものではないです。 SDPによる指定 いわゆるSDP mungingといって、SDPを手動で書き換える必要がある。 普通にブラウザやらが提供するAPIを触ってるだけならそんな機会は不要なはずですが、こればっかりはAPIが用意されてないのでやるしかない。 RFC 3556 - Session Description Protocol

初心者向け解説によくある例です。 これが現時点（2019年5月時点）で非推奨な書き方だと、初心者は気付くことができない。つらい。 【JavaScript初心者のつらいところ】 初心者向け解説（チュートリアル）のvarをconstやletに置き換えなきゃいけない 何も知らずvarで写経すると悪癖がつく 他にも「今は覚えなくていい書き方」がどうやらたくさんある 「歴戦のJavaScripterがモダンJavaScipt知識をアップデートするためのまとめ」を読むには、そもそも必要とされる前提知識を持ってない 「何が正解かわからない→ググる」と、正しい情報探しに時間が消える 解説途中でググらなくても良い、チュートリアル的に読み通せるサイトってどこ！？！？ そんな私のニーズを満たせそうなサイトにたどり着いたので、記事にしてみます。 【js-primer】 js-primer これからJavaScri

FRONTEND CONFERENCE 2019の登壇資料です。 https://2019.kfug.jp/session/onoueyosuke Webサイト・Webアプリ制作への高まる要求に耐えられるようにJavaScriptは進化を続けてきました。特にこの約5年間で、JavaScriptは…

Introducing Phoenix Code Editor Phoenix Code is the next generation of Brackets that Runs everywhere - Windows, macOS, Linux and Web Browsers. Click here to read more.

この記事の要旨 Bracketsを使っていて、ライブプレビューが動作しないという事案が幾度となく発生しました。 色々調べて解決したので、同じことでつまずく人がいないように記事にしておきます。（こんな初歩的な事でつまずくのは私だけだ、なんて話は気にしない方向で） 記事に誤りがあれば、コメント下さい。 ライブプレビューが動作しない原因と解決策 原因1 Chromeとの連携がうまくいっていない 解決策 Bracketsをctrl + F5,F5で読み込みなおす。 その後もう一度ライブプレビューを起動 参考記事↓ https://qiita.com/ko3n/items/71382c3f6418d9702ffd 原因2 シンタックスエラーが発生している シンタックスエラーとは

23 y/o ios developer. I make apps, servers, and sometimes designs.

JavaScript学習マラソンの第18回は、 「現代の JavaScript チュートリアル」パート１の2.15「関数式とアロー」です。 関数式とアロー https://ja.javascript.info/function-expressions-arrows を読んでみます。 JavaScriptの関数の書き方にはバリエーションがある 前回は、JavaScriptの「関数」の書き方（関数宣言）について学びました。 jsstudy.hatenablog.com 今回も、JavaScriptの「関数」の書き方を学びますが、前回の「関数宣言」とは別の書き方を学びます。 関数宣言 関数式　←New！ アロー関数　←New！ 「関数式」と「アロー関数」について、JavaScriptチュートリアルの説明を見てみましょう。 ja.javascript.info 数値aと数値bの合計を求める関数が、

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? みなさん、Optional Chaining使ってますか？　私は先日出たTypeScript 3.7 Betaを小さいプロジェクトに導入して使ってみました。これはとても快適ですね。 例によって、Optional ChainingはECMAScriptに対するプロポーザルの一つです。つまり、もうすぐ入りそうなJavaScriptの新機能です。プロポーザルはたくさんの種類がありますが、その中でもOptional Chainingはその高い有用性からこれまで多くの注目を集めてきました。Optional Chainingは2019年6月のTC3

Netlify is offering all Gatsby Cloud customers easy migration paths to Netlify to unite two industry-leading platforms into one.

パフォーマンスが重視される昨今、サーバサイドレンダリングを採用したり、静的サイトジェネレーターを使用して必要なファイルをあらかじめ生成してからホスティングするサイトが増えてきています。 これまでもJekyllをはじめとして静的サイトジェネレーターはいくつかありましたが、Webフロントエンド界隈では普段から使用しているスキルセットで扱えるジェネレーターとしてNuxt.js、VuePress、GatsbyJSなどが話題を呼んでいます。ジェネレーターの機能をCIに組み込むことで、サイトの構築をVue.jsやReactで行いながら静的ファイルの生成からデプロイまで一気に行うこともできます。 中でもGatsbyJSはテキストなどのデータソースをWordPressやDrupalから取得したうえで静的サイトを生成する機能を持っており、これまでCMSで自分のブログを運用していた方がGatsbyJSに乗り換

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す

目次 はじめに HTMLレンダリング HTMLレンダリング ：ブラウザでHTMLを受け取り画面表示 HTMLレンダリング ：JavaScriptでレンダリングして画面表示 HTMLレンダリング ：WEBページの初期表示の各段階 サーバーサイド側の処理 サーバーサイド側：Node.jsという実行環境＆開発環境 クライアントサイトレンダリング クライアントサイトレンダリング：リアルDOMと仮想DOM サーバーサイドレンダリング おまけ：参考にしたリンクなど はじめに Web開発で「フロントエンドはモダンな感じでやりましょう。jQueryではなしに。」ということになったのですが、その時の僕は「モダンな感じ」なるものが示す「最新の技術動向」に疎くて話についていけませんでした、。 反省し、WEBフロントエンドとサーバーサイドあたりの技術動向のアウトラインをざっくりと整理してみることにしました。 よく

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や