本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は2020年2月にリリースされたAngularのバージョン9を紹介しました。Angularはその後アップデートを重ね、2020年6月にバージョン10、11月にバージョン11がリリースされています。今回はAngularのバージョン10・11について、主要な変更点や新機能を紹介していきます。 はじめに Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。 前回記事では2020年2月リリースのバージョン9を紹介しましたが、その後2020年6月にバージョン10
Angular v16から、実験的機能として Jest によるユニットテスト実行がサポートされた。この記事では新規に作成した Angular プロジェクトでさっそく Jest を有効化してみた。Angular が Jest サポートを検討している背景などは公式ブログを参照してほしい。 Jest サポートを試す プロジェクト作成 まずはいつもどおり、 ng new コマンドで新しくプロジェクトを作成する。 Jestビルダーに切り替える 次に ng test コマンドで実行されるユニットテスト実行のビルダーをKarmaからJestに切り替える。 @angular-devkit/build-angular:karma に指定されている部分を @angular-devkit/build-angular:jest に変更する。 Jest によるテストはブラウザテストではなくNode.jsによる擬似的
Since January 1, 2022, when Google stopped updating AngularJS to fix security, browser compatibility, or jQuery issues, the Angular team recommends upgrading to Angular (v2+) as the best path forward. From Angular V2 onwards, one of the significant changes was moving toward a component-driven framework. Hence, Angular Components is one of the significant changes in Angular v2 onwards. What Are Com
このチュートリアルでは、簡単なTodoアプリの作成を通してフロントエンドフレームワークAngularを使った基本的な開発を体験することができます。 初心者の方でも習得できる難易度に設定しつつ、UIフレームワークの導入やFirebaseを使ったデータ永続化といった実践的な内容までカバーしました。これを一通りやれば、応用してさらに複雑なアプリの開発に進んでいけると思います。 また、初心者向けのチュートリアルにありがちな「なんとなく真似して書いたら動いたけど、本質的なところはよく分からなかった」といった感想に終始してしまわないよう、「なぜそうなるのか」を丁寧に解説することを心がけています。 自分でも有料級の内容だと思ってますが（笑）、今のところすべて無料で公開しています。 ぜひチャレンジしてみてください！
本稿では 2020 年夏（Angular v10.1） 時点において Angular Elements がどのような状態にあるのかを簡潔にまとめる。すでに達成されていることと、まだ達成されていないことを手早く把握できることを目的とする。Angular Elements の将来については 公式ロードマップ に書かれていないことを独自に述べることはない。 Angular Elements の基本仕様Angular Elements に触れたことがない読者のために、Angular Elements の基本的な仕様を解説する。Angular Elements とは、Angular コンポーネントを Web 標準の Custom Elements にコンバートすることで、Angular アプリケーションの外でも利用できるポータブルなコンポーネントを作る機能のことである。（公式ドキュメント） ライブラ
Ship modern, server-rendered web apps at planet-scale, without managing any of the backend infrastructure. Full-stack Javascript frameworks like Angular and Next.js make it simpler to get the benefits of server-side rendering (improved SEO, faster initial load times) with the ease and familiarity of the tools we use to build frontends. However, because these frameworks need a server, deploying an
この記事はAngular+Firebaseでチャットアプリを作るのエントリーです。 次記事：Angularでビュー（チャット画面）を作る 関連：Angular2の環境構築（yoemanで構築） この記事で行うこと Angular CLIをインストール プロジェクトを作成 「Angular Cli」とは Angularの環境構築に「Angular CLI」は欠かせません。 他のJavaScriptフレームワークと比較して、あえてAngularを選択するという場合、次のような理由が考えられます。 デザイナーとの協業がしやすい。 公式ドキュメントが豊富なため、困ったら公式を頼ることができる。 コンポーネント、サービス、ルーティング、モジュール、パイプ、http通信など、アプリ構築に必要な機能が揃っており、第三者が作ったライブラリを使わなくともよい。 命名規則やディレクトリ構成などがあらかじめ定め
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
開発者のみなさん、普段どんな言語やフレームワークを使って開発していますか？Hubbleのフロントエンドチームでは、Angularを使って開発を行っています。 正直、使っている人口が少なく、古いと思われがちのAngular。なぜこのフレームワークをHubbleでは使っているのか…。このnoteではその謎を解明していきます！ 登場人物 白木：Hubble人事。なぜAngularを使っているのか謎に思っていた。 齋藤：Hubble創業時から開発をリードするエンジニア。Angularが好き。 Angularが好きなのには理由があった白木：Angularって、正直使っている人口はとても少ないですよね。エージェントからも「新規の応募者がかなり少なくて紹介が難しい…。」と共有を受けています。そんな中、なぜHubbleでは数あるフレームワークから、あえてAngularを選んだのでしょうか？ 齋藤：一番の理
はじめに よくAngularのパフォーマンス改善で言われている「Templateからメソッドを直接呼んではいけない」はなぜなのか、をこちらの記事を参考に実際に試して確認、そしてその対策方法を共有する。 注意事項 今回はPipesをメインに紹介したいため、@Input()とChangeDetectionStrategy.OnPushを使った対策は割愛する。 今回使っていくソースコード 1~100までの数値とその数値が偶数かどうかを表示する。 数値の横のボタンがクリックされると、その数値を100倍にして更新する。 import { Component, DoCheck } from '@angular/core'; @Component({ selector: 'app-call-function-from-template', templateUrl: './call-function-fr
Taiga UI —— powerful set of open source components for Angular
はじめに Angular Advent Calendar 2021 20日目の記事です。 前回は @nontangent さんの [SCSS] Host Scoped Custom Property でした。 Angular で setTimeout / Promise / Observable などの非同期処理を扱った時、なんだか良くわからないまま呪文のように fakeAsync や tick を使ってテストを通す事はありませんか？この記事では、そんな非同期処理のテストについて掘り下げた内容を紹介したいと思います。 試した環境 Angular 13.1 Node 16.10 Jasmine 3.10 この記事のサンプルコードは GitHub リポジトリに保存しています。 https://github.com/ringtail003/blog-angular-async-testing/t
Last month marked the 13th anniversary of Angular’s red shield. AngularJS was the starting point for a new wave of JavaScript frameworks emerging to support the increasing need for rich web experiences. Today with a new look and a set of forward-thinking features we bring everyone along to the future with version 17, setting new standards for performance and developer experience. In v17 we’re happ
Six months ago, we reached a significant milestone in Angular’s simplicity and developer experience by graduating the standalone APIs from developer preview. Today, we’re thrilled to share that we’re continuing the Angular Momentum with the biggest release since the initial rollout of Angular; making large leaps in reactivity, server-side rendering, and tooling. All this comes with dozens of quali
前提 本記事の内容は主にAngular v9以上を対象としています。 v9よりIvy（Angularの次世代レンダリングエンジン）がデフォルトで有効になり、Ivyの導入に伴いデバッグAPIの仕様が変更されています。 そのため、v8以前では本記事で紹介するデバッグAPIは利用できません。 ブラウザコンソールからAngularの状態を見る Angularの開発モード（ng serveした状態）では、@angular/core/globalパッケージを使用してコンソールからアプリケーションの状態を見ることができます。 @angular/core/globalパッケージのメンバは、ngという名前空間に属する関数としてグローバル領域（windowオブジェクト内）に公開されます。 コンソールよりng.XXXXと関数を実行することで、コンポーネントのインスタンスなどを取得できます。 以下は使用可能な関数
回答 (5件中の1件目) いわゆる難読化とかでしょうか？あるいは右クリックメニューの無効化とか？自分はフロントエンドエンジニアとしての経験はないので的外れならすみません。ただ、フロントエンドはフロントエンドだけで存在するわけではなく、その部分だけで守らなければいけないようなものってそんなにあるのでしょうか？ 色々対策はあるでしょうが、所詮はイタチごっこです。仮に盗用され、それを見つけたとします。それに対して、実際何か手を打てますか？よほど特徴的なコードでない限りは「それは偶然の一致だ」と言われればどうしようもないと思います。だからこそ、対策すべきという意見はわからなくもないですが、保守...
iOS 12までのiPadはユーザーエージェントに文字列"iPad"が含まれているかで判別できました。 しかしiOS 13以降のiPadのSafariには「デスクトップ用Webサイトを表示」という機能が実装されており、それがオンになっていると（デフォルト）ユーザーエージェントに"iPad"の文字が含まれなくなるようです。 そのためユーザーエージェントでの分岐に追加をする必要があります。 var ua = window.navigator.userAgent.toLowerCase(); if(ua.indexOf('ipad') > -1 || ua.indexOf('macintosh') > -1 && 'ontouchend' in document){ // iPad用の処理 }else{ // それ以外の端末用の処理 } "macintosh"という文字列が含まれており、タッチ操
こんにちは！DA(データアナリティクス)事業本部 インテグレーション部の大高です。 先日、Angular 11がリリースされました。以前からロードマップに上がっていましたが、Angularブログのリリース紹介記事でもLintingについて記載されています。 In previous versions of Angular, we’ve shipped a default implementation for linting (TSLint). Now, TSLint is deprecated by the project creators who recommend migration to ESLint. (中略) We’re deprecating the use of TSLint and Codelyzer in version 11. This means that in fut
フロントエンドエンジニアの皆さん、フルスタック目指しませんか？飲食スタートアップがエンジニア大募集！ 株式会社トレタ @toreta フロントエンド Startup TypeScript I want to hear a detailed フロントエンドをやりたい人、フロントエンド開発全般に興味のある人、トレタでチャレンジしてみませんか？ 株式会社トレタは、飲食店向けの予約サービスを展開しており、業界ではNo.1シェアを獲得しているスタートアップです。弊社は現在、フロントエンドエンジニアの募集を行っています。 モダンなWebサービス開発に特化した体制へ 弊社は長らく、Ruby on Railsによるサービス開発を行ってきました。しかしWeb APIベースのモダンなWebサービス開発が一般的になった昨今では、 Ruby on Railsだと色々と余計な手続きも多いと感じるようになってきました
これはAngular Advent Calendar 2024の12日目の記事です。 昨日は @da1chi さんの ドキュメントの修正から始めるAngularへの貢献 でした。 はじめに エンジニアとして働き始めて約7年弱、今まで当方は知識不足も相まってテストコードとは無縁の開発をしてきたしがないエンジニアだったのですが、転職して1年、ついにテストを書く機運が訪れたため、学び始めました。 その際、まずはHTTP通信を行うコンポーネントのテストをしたいと思い、色々と調べて掴んだ感覚をこの記事に残しておこうと思います。 AngularのテストツールをJestに切り替えてみる この記事を作成するにあたり、前提としてテストツールはJestを採用しました。 Angularの標準はJasmine + Karmaの組み合わせが現在の標準ですが、Angular v16からJestサポートが実験的にサポー
やりたいことと方法を手短に Google の検索欄って、変換を確定する前から検索してくれて便利ですよね。 Angular でこのように変換確定前の入力値を使いたいときには COMPOSITION_BUFFER_MODE が役に立ちます。モジュールやコンポーネントの providers で COMPOSITION_BUFFER_MODE を false にすれば、 IME の変換が確定していなくても input の入力値がモデルに反映されます。 デモページ ソース 詳しい説明 入力された文字を表示するだけの簡単なコードを考えます。 これを PC のブラウザで操作すると、変換を確定するまで入力した文字が表示されないはずです。なぜこのような動作になるかというと、 Angular が変換が確定するまでモデルに入力値を反映させていないからです。具体的な処理は DefaultValueAccessor
Angular Advent Calendar 2020 24日目の記事です。 Angular を使ってチーム開発するときに Storybook を使うと捗るという話です。今年8月に登場した Storybook 6.0 で大幅に使い勝手が良くなっているので、そこについても紹介します。 Storybook について 開発者が複数人いて、デザイナーもいる環境だとします。昨今はデザインシステムの登場で、デザインの時点でコンポーネントが意識されていることもあります。そうなってくると、コンポーネント単位で見た目を確認したいという需要が出てきます。そこで役に立つのが Storybook です。 Storybook は公式には「UIコンポーネント開発ツール」と表現されています。言葉で説明より先に、まずは Docs の Get Started > Examples > Storybook Design S
つい先日、Angular v14がめでたくリリースされました！ アップデートの概要は、こちらの公式ブログをご参照ください。 今回のメジャーアップデート、なんと言っても目玉はTyped Formsの導入でしょう！ これまでのAngularでは、Reactive Formsから得られるvalueの型を指定することができず、その型はすべてanyとなっていました。 TypeScriptを使用しているのにanyなんて……意味ないやん……と全Angularユーザーが不満を抱えていたことでしょう。 Typed Formsの導入で、ついにこの悩みが解消されそうです。 この記事では、Angular v13で作成したデモプロジェクトに、v14を適用してTyped Formsを試してみた結果をお届けします。 Type Formsの概要はAngular公式をご覧ください。この記事で紹介する以外にも有益な情報が載っ
This article is part of a series called “Learn Angular from 0 to 100”. In this article, we will explore Modules in ES6. We're sorry, but the article you are trying to view was deleted at 15 May 2020. Please go to the ECMAScript 6 Table of Contents to view the list of available articles in this section.
The article Building Block of Angular explains what a Component is in AngularJS and why we need those. Now, let us understand more about the component lifecycle hook of Angular. What are Lifecycle Hooks in Angular?In the dynamic world of web applications, components are not static entities. They undergo a life cycle — from their creation, through updates, and eventually to their destruction. To pr
この章では AngularコンポーネントにおいてどのようにObservableを購読すべきなのかについて学びます。単純なsubscribeからはじめ、段階的にAsyncパイプを使ったリアクティブなパターンの使い方へステップアップしていきます。 Angularのコンポーネントの基本とRxJSの基本を習得したら、次に学ぶのは実際にどうやってObservableとコンポーネントを組み合わせるかというプラクティスです。うまくObservableを利用することで、ユーザーインタラクションとリアクティブに協調するコンポーネントを簡単に実装できるようになるでしょう。 最初に解説する方法は明示的な購読です。これはObservableの使い方の中でもっとも基本的で単純な方法です。これは公式チュートリアルの中でも、HeroServiceから値を取得するために学んだはずです。 コンポーネントを実装する前に、まず
JSer.info #565 - React Router v6がリリースされました。 React Router v6 | Remix React Hooksベースで再実装、<Route>のネストの扱いを改善、<Link to>の値に相対パスの解釈を<Route path>を基準にする変更などが含まれています。 合わせてReact Router v5からのマイグレーションガイドも公開されています。 React Router | Upgrading from v5 Angular 13がリリースされました。 Angular v13 is now Available. We’re back with the brand new release… | by Mark Thompson (@marktechson) | Nov, 2021 | Angular Blog Ivyがデフォルトとなったた
僕が案件でAngularを書きまくっていたのは、6とか8の時代ですが、最近のバージョンで気になるアップデートが入っていました。 シグナル(v16から) スタンドアローンコンポーネント(v14から) 他のフレームワークをいろいろ触ると、Angularはかなり独特な雰囲気があります。隠しきれないJava感というか、他のフレームワークでは存在しない様々な概念が見え隠れして、それをキャッチアップするだけでも結構重いです。もちろん、それぞれ意味があって、「きっとこういうことをしたいんだろうな」というニーズがあってのことかとは思いますが、いろんなフレームワークをいったりきたりすると、ストレスが多少あります。 しかし、この新しい機能を使って、他のフレームワークでは見ない要素をそぎ落としてAngularを使ってみると、まあ悪くないんじゃないかと思いました。 モジュールを使わないAngularでアプリケーシ
これは ビットバンク株式会社 Advent Calendar 2020 の 3 日目の記事です。 はじめに ビットバンクでアプリケーション開発をしているおくなもです。 弊社では IPFS は使ってないんですが、前から個人的に面白そうだなと思っていたので今回取り上げてみました。 IPFS とは IPFS は "InterPlanetary File System"の略です。 直訳すると"惑星間ファイルシステム"という壮大な名前ですが、一言で言えばコンテンツ指向のファイルシステムです。 IPFS はただのファイルシステムの枠を超えて異なるアーキテクチャの新しい WEB として注目を集めています。 詳しいことは公式のドキュメントに譲りますが、主な特徴は次の３点です。 コンテンツ指向であること。URI を使用せず、コンテンツ識別子（CID ≒ コンテンツのハッシュ値）をアドレスとして用いる クライ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
