「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎（gfx）さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT
Parcel入門 - TypeScriptの導入方法 - ICS MEDIA
「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか？」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか？ 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr
1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～ - Qiita
概要 Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。 本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。 Font Awesomeのアイコンを使う（バンドルする）には以下の3ステップを踏みます。 Font Awesome を npm でインストールして、 JavaScriptのコードで必要なアイコンだけを import して Font Awesomeの必要最小限が含まれるように w
フロントエンド開発に迷ったら「Vue.js入門」を読もう - JavaScript関連の書籍とかまとめてみた - Lean Baseball
先日のPyCon JP 2018の野球の話にてVue.js（Nuxt.js）の話をした結果、技術評論社様のご厚意により、一冊頂戴いたしました. Vue.js入門 基礎から実践アプリケーション開発まで 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也出版社/メーカー: 技術評論社発売日: 2018/09/22メディア: 単行本（ソフトカバー）この商品を含むブログを見る 正に欲しかった類の本で大変助かりました、ホントありがとうございます！ 結論から言うと、 Vue.js（またはNuxt.js）で開発するなら一冊持っておけ！（ただし他のFWにもいい本がある） っていうくらい素晴らしい書籍でした、自信を持ってオススメができるレベルです. このエントリーでは、 「 Vue.js入門 基礎から実践アプリケーション開発まで」の簡単な感想 私がフロントエンド開発するまでにやってきたJavaScri
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
【Vue.js】いつから「フロントエンド開発でTDDができない」と錯覚していた？ - Qiita
Vue.jsのコンポーネント開発をTDDでやってみる ※ TDD (test-driven development): テスト駆動開発 ※ テスト駆動開発は文化です。チームの「状況」「納期」「スキルレベル」、その他いろんな要因が絡んできた結果、そのチームが導入するかどうか決めたらいいと思います。 ※ 例えがいいかはわかりませんが、私は「早起き」と「テスト」は同じようなものだと思っています。「早起き」は健康にいいよねって誰でも言うと思うけど、実際に万人がやっているかどうかは別じゃないですか。それと同じで「テストすること」も絶対いいことだと私は思っていますが、やるかどうかはチームの置かれている状況によって決まります。この記事は、その「テストを導入するかどうか」という意思決定の一助にでもなれればいいなと思います。 はじめに こんにちは。ぼくです。 今回はVue.jsでTODOアプリを作ってみよう
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
Google Apps Script をローカル環境で快適に開発するためのテンプレートを作りました - Qiita
gas-clasp-starter という Google Apps Script を ローカル環境で開発するためのテンプレートを作りました。 2018年に登場した、google/clasp をベースに webpack, TypeScript, TSLint, Prettier, Jest を利用したテンプレートになっています。 GAS って新しい構文で書けないしソース管理もできないから微妙 もっと便利に利用できないかな みたいな方に読んでもらえれば幸いです。 本記事では、gas-clasp-starter を使うことによるメリットや、利用する際の流れを解説します。 ブラウザ上のスクリプトエディタで開発するのではだめなの? 小さなコードならスクリプトエディタで十分です。 ただし、ある程度のコードになる場合はローカル環境に切り替えたほうが良いでしょう。 GAS は JavaScript ベース
Google Apps Scriptの新しい3つの機能 その③ CLI Tool Clasp - Qiita
この記事は2018/1/11にGoogle Apps Scriptに新しく追加された3機能の紹介記事の3番目です。 https://gsuite-developers.googleblog.com/2018/01/three-new-tools-to-help-improve-your.html?m=1 新機能 Dashboard Apps Script API CLI Tool clasp (この記事です) 一つ一つが結構しっかりした機能なので記事を分けて説明したいと思います。 今回は3つ目のCLI Tool claspです。 CLI Tool clasp claspはオープンソースのGAS向けCLIツールです。 https://github.com/google/clasp CLI上からGASプロジェクトに対して以下の様なことが行なえます。 GASプロジェクトの新規作成 GASプロジェ
Go言語がWebAssemblyをサポートへ。GOARCHは「wasm」、GOOSは「js」に
Googleが中心となってオープンソースで開発されているGo言語は、WindowsやmacOS、Linux、FreeBSD、iOS、Androidなど、さまざまなOSやCPUに対応したバイナリを生成できることが特長の1つとなっています。 そのGo言語のコンパイラが生成するバイナリにWebAssemblyが追加されました。WebAssemblyは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマットです。 WebAssemblyのサポートは昨年2月から検討がはじまり、先月末に最初のコードがコミットされた状態で、現在も開発が進んでいます。 GOの今後のバージョンアップで正式にWebAssemblyがサポートされる見通しです。 Go言語はサポートするOSやCPUの種類をそれぞれ「GOOS」と「GOARCH」の値で示しています。例えばWindowsのGOOS値は「
Mozillaが「WebAssembly Studio」発表。C/Rust/AssemblyScript対応のオンラインIDE
Mozillaが「WebAssembly Studio」発表。C/Rust/AssemblyScript対応のオンラインIDE Mozillaは、Webブラウザ上で高速に実行できるWebAssemblyに対応したアプリケーションを開発するためのオンラインIDE「WebAssembly Studio」を発表しました。 オンラインIDEのサービスとして「WebAssembly.Studio」でベータ公開され利用できるほか、コードがGitHubでオープンソースとして公開されており、サーバにインストールして実行することも可能です。 WebAssemblyは、Webブラウザ上でネイティブコードに近い実行速度で高速に実行できるバイナリフォーマットです。 マイクロソフト、Google、Mozilla、Appleなどの主要なWebブラウザベンダがW3CのWebAssembly Community Grou
GoogleAppsScriptローカル開発用の公式CLI(node-google-apps-script)がついに登場したので試してみる - Qiita
GoogleAppsScriptローカル開発用の公式CLI(node-google-apps-script)がついに登場したので試してみるGoogleAppsScriptGASgasja はじめに これまで Google Apps Script を開発する方法として公式に提供されているものは Web 上のスクリプトエディタしかなかったんですが、 先日 Google Developer Japan のブログに GAS についての記事が投稿され、その中で node-google-apps-script という CLI が紹介されていました。 Google Developer Japan のブログ記事：Apps Script による高度な開発プロセス 元記事（英語）：Advanced Development Process with Apps Script GAS のファイルをローカルで管理する
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome Chrome 59 でリリースされますChrome ブラウザをヘッドレス環境で実行する方法です。 基本的に Chrome なしで Chrome をご利用いただけます。Google が提供する最新のウェブ プラットフォーム機能をすべて使用可能 をコマンドラインに追加することもできます。 なぜこれが有用なのでしょうか ヘッドレス ブラウザは、自動化されたテストやサーバー環境に最適なツールです。 表示する UI シェルは不要です。たとえば、特定の環境に対する PDF を作成することも、ブラウザで URL がどのようにレンダリングされるのかを調べることもできます。 Headless（CLI）の起動 ヘッドレス モードを開始する最も簡単な方法は、Chrome バイナリを開くことです。 使用できます。Chrome 59 以降をインストールしている場合は、--headle
JavaScriptのUIライブラリはどうあるべきかという話とOnsen UIのアーキテクチャ - id:anatooのブログ
Onsen UI Advent Calendar の12/9の記事です。 Onsen UIは、モバイルアプリのネイティブライクなUIをHTML + CSS + JavaScriptで簡単に構築することを目的としたUIライブラリです(UIフレームワークともたまに呼ばれます)。 ↓みたいなネイティブなモバイルアプリっぽい画面をサクッと作ることができます。 私は数年前から開発メンバーとしてOnsen UIの設計開発を行っています。この記事では、Onsen UIに求められるUIライブラリとしての要件とそれを解決するためにどのようなアーキテクチャを取っているのかについて解説します。 特定のフレームワークに依存しない jQuery UIやReactの上に乗っかっているUIライブラリなどのように特定のフレームワークの仕組みを使って実装されたUIライブラリというのはたくさんありますが、ある特定のフレームワ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpackを使ってReact, Sass, es2015の開発環境を構築してみる - Qiita
1年前に作ったフロントエンド環境を色々新しくした - Qiita
WebUSBでレイヤーが低まるWeb開発(Shibuya.XSS版)
シンプルだけどシッカリ働く最新のECMAScript開発環境 - Qiita
Reactで学ぶ！いまどきのWeb開発
GitBook – Knowledge management for technical teams
