リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1Classi Angular Night #1 -EdTech業界での活用事例とベストプラクティス- https://connpass.com/event/112186/
【超簡単】AngularでFacebook製のJSテストフレームワーク「Jest」を使えるようにしてみる | DevelopersIO
どうも！大阪オフィスの西村祐二です。 最近、Reactでよく使われるテストフレームワーク「Jest」が良さそうだったのでAngularでも使いたいなと思っていました。 下記のライブラリを使えば簡単にAngular+Jestの構成にすることができましたので、ご紹介したいと思います。 https://github.com/briebug/jest-schematic 環境 Angular CLI: 7.2.2 Node: 10.15.0 OS: darwin x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.12.2 @angular-devkit/core 7.2.2 @angular-devkit/schema
Djangoでの環境変数と、Angularを用いたフロントエンドの実装
今回の内容 前回はDjangoの実践的なテストの書き方と、CircleCIを使った継続的インテグレーションについて解説しました。前回までのコードは以下から取得できます。 massa142/modern-django at volume3 第4回となる今回は、まず環境変数について取り上げます。環境変数を用いたsettingsファイルの書き方を紹介した後は、Angularを使ってカンバンボードのUIを実装していきます。 環境変数 環境毎に異なる値としては、データベースの接続に必要な情報やTwitterなど外部サービスの認証情報等が思い浮かぶと思います。これらの設定を定数としてコード上で管理することはもちろん可能ですが、セキュリティと保守性の観点から推奨されません。「The Twelve-Factor App」の教えにのっとり、設定は環境変数から渡すようにしましょう。 「The Twelve-F
GitHubを活用して、クライアントと協働してWebサイトをAngularでつくろう。 - Qiita
この記事はAngular Advent Calendar 2018の6日目の記事です。 概要 GitHubもCMSだよね クライアントがGitHub上で修正したらもっと幸せな世界が待ってる リスク管理や速度の部分はAngularのAOTビルドが担ってくれるよ Webサイト構築でこそ、Angularを使おう CMSに代わるGitHubという見方 CMSって皆さん利用されていますか？Contents Management System、簡単にいうと動的に入出力できるシステムで国内で最も活用されているWordPressもそのひとつです。 ちなみに、よく聞く「導入する理由」は「クライアントが更新できるから」。 ちなみに、CMSがない世界だと受託業務の業務負担はこんな感じです。 まぁ今だと修正依頼はメールがメインだと思いますが、せっかくクライアントが文面をデータ入力してくれても（もうFAXで修正依頼
Angularで同じ絵文字をクリックするだけのクソゲーを作りました - Qiita
この記事は Angular Advent Calendar 2018 の 9 日目の記事です。 クソアプリ Advent Calendarでやってくれとツッコミの入りそうなネタですが、Angular関連なのでこちらで書かせてもらいます。 作ったもの Firebase Hostingにデプロイしてあるので、「 same-emoji 」から遊べます。 (PCのブラウザから遊ぶ際はビューポートをSPサイズにすることを推奨です...) 2つ1組でランダムに表示される絵文字をタップして消し続け、タイムを競うという単純なゲーム(クソゲー)です。 画面構成もシンプルで、次の画面で構成されています。 スタート画面 レベル選択画面 ゲームプレイ画面 ゲーム結果画面 リポジトリ https://github.com/daikiojm/same-emoji モチベーション Angular MokuMoku Ni
フォーム | AngularJS 1.2 日本語リファレンス | js STUDIO
入力要素(input、select、textarea)は、ユーザーにデータを入力してもらうための手段です。 フォームは、関連する入力要素をグループ化するための入力要素の集合です。 Angularはフォームと入力要素の検証サービスを提供するため、ユーザーに不正なデータを気づかせることが可能になっています。 この機能は、ユーザーに対してどのようなエラーなのかが即座に返されるため、より快適なユーザー体験を提供します。 快適なユーザー体験を提供する役割を担うクライアントサイドの検証は、 容易に迂回出来てしまうため、送られてくる値は信用出来ないという事を忘れないで下さい。 サーバーサイドでの検証は、セキュアなアプリケーション構築のため必須です。 シンプルなフォーム CSSクラスの使用 フォームへの紐付けと状態の制御 検証のカスタマイズ カスタムフォーム制御の実装(ngModel使用) シンプルなフォ
20181122 - FROKAN #5 - Google スライド
Tooling in Angular 2018-11-22 FROKAN #5
Angular/React/Vue開発を強力にサポートするデベロッパーツールの紹介 | モナカプレス
Angular/React/Vue開発を強力にサポートするデベロッパーツールの紹介 2018年10月3日 技術情報 Angular, JavaScript, Monaca, react, vue, フレームワーク 中津川篤司 JavaScriptフレームワークのAngular/React/Vueは、コードを変換（トランスパイル）してピュアなHTML/JavaScript/CSS形式にします。そのため、書いているコードと実際にWebブラウザ上で動作するコードとが異なるものになります。ブラウザに搭載されたデフォルトの開発者ツールでは元のコードを見ることができず、デバッグで苦労している方も多いのではないでしょうか。 そこでインストールしたいのが、これらのフレームワークに対応した開発用Webブラウザ拡張機能です。多くはGoogle Chrome、そしてFirefoxに対応しています。 Angula
TypeScriptで実現する型安全な多言語対応（Angularを例に） - 株式会社カブク
フロントエンドエンジニアの今村です。 この記事はAngular Advent Calendar 2018 11日目の記事で、テーマは多言語対応です。 Angular Advent CalendarなのでAngularの話を中心に書きますが、手法としてはAngularに限らず、ひろく（TypeScriptで書かれた）Webフロントエンド全般の多言語対応に適用可能なものです。というのも、私は以前にも似たような記事をQiitaに投稿していて、その時はReactをやっていました。 この記事ではQiitaに投稿した方法を少し改良したやり方をご紹介しますが、TypeScriptの型に甘えて多言語対応を実現したいという気持ちは一貫しています。 TL;DR 辞書ファイルをTypeScriptで書きたいという思いのもと、Angularの標準のi18n機能やその他のライブラリに頼らずに実装した多言語対応を紹介
Angularのシンプルな状態管理ライブラリ Akita について - Qiita
はじめに この記事は、Angular Advent Calendar 2018の7日目の記事です。 ここではngrxと比べればまだ認知度が低い、Akitaという状態管理ライブラリをご紹介します。 Akitaって？ Introduction - State Management Tailored-Made for JS Applications Akita is a state management pattern, built on top of RxJS, which takes the idea of multiple data stores from Flux and the immutable updates from Redux, along with the concept of streaming data, to create the Observable Data Sto
AngularElementsでAMP htmlを動的にロードする - Qiita
本記事ではAngularElementsを使ってAMP htmlをロードするという試みをします。 AMPは、ページを高速に表示してSEOがよくなるやつですね。1 Angular Elementsについて ブートストラップ以下のツリーを通さず直接DOMにAngularComponentを追加できるようになるです。 ユースケースは1年前の記事でごちゃごちゃ書きましたが、相変わらず2つパラレルに走っています。 Angularアプリ内でElementsを使う方法 公式ドキュメントのサンプルが現在このユースケースです。Angularアプリ内で動的コンポーネントをどうやって実現するかという方向です。サンプルでは、AngularComponentでそのままやる方法と、customElementを用いる方法の2つが併記されています。 「サンプル: ポップアップサービス」 単発のcustomElements
Angular Universal on Google App Engine
東京Node学園祭2018での発表資料です。
AngularFireでFirestoreのCRUD処理を実装する【Angular + Firebase】 | maesblog
先日当ブログで、『Angular + Firebase事始め – Firestoreのデータを取得し、Firebase Hostingにデプロイするまで』という記事を投稿しました。この記事では、開発環境の構築方法、AngularとFirebase（Firestore）との連携方法、デプロイ方法など主に開発の前段階の内容を扱いました。今回は少し先に進んで、実際にデータを操作する方法を紹介したいと思います。AngularFire (AngularFire2) というAngular公式のFirebase用ライブラリを使ってCRUDを行う処理をまとめてみました。 目次 はじめに AngularFireを使う準備 Firestoreのデータを扱えるようにする データを参照する（Read） データを生成する（Create） データを更新する（Update） データを削除する（Delete） CRUDを
State of SEO for SPA 2019 - Qiita
メタ この記事はNode学園2018にて話した内容を記事として編纂 +その後の変化を加筆修正したものです。 スライドはこちら。 https://speakerdeck.com/kazuyaseki/seo-for-spa-cfb3706f-ae1d-4c6f-a83f-96dc2452f32b 追記 2019/5/8 遂に Google bot が扱うレンダリングエンジンが Chrome 最新版(現時点では 74)相当となりました！ https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html ただタイムアウトなどのリスクは依然存在するので、信頼性を求めるならやはり Dynamic Rendering や SSR が選択肢になるのかなと言う気はしますが、そこまで要求が強くない場合にはあまり頑張らなくてよ
HTML5 Conference 2018 登壇資料まとめ - Qiita
HTML5 Conference 2018 の登壇資料のまとめです。 資料を発見次第随時アップデートしていきます。 https://events.html5j.org/conference/2018/11/ 2018年11月25日（日） 東京電機大学 千住キャンパス 1号館 タイムテーブル https://events.html5j.org/conference/2018/11/session/ ハッシュタグ 総合: #html5j ホール（2階）: #html5j_h 各ルーム（1階:A-C/2階:D,E）: #html5j_a #html5j_b #html5j_c #html5j_d #html5j_e セッション ZOZOのグローバルECのフロントエンドアーキテクチャ設計 （権守健嗣さん） 光を超えるためのフロントエンドアーキテクチャ （mizchiさん） TypeScript E
今年1年CTOとして行ったことを振り返る - Qiita
この記事は、Business Bank Group Advent Calendar 25日目の記事です。 大手SIerを退職し、Web系スタートアップ企業のCTOとしてJOINしています 元々私自身は大手SIerの研究開発部署に11年半ほど在籍し、様々な新規技術をキャッチアップしながら、現場を支援するという立場にいましたが、今年の1月1日からビジネスバンクグループのCTOとして就任し、ほぼ1年間組織のこと、プロダクトのこと、会社のこと、開発のこと、技術のこと、様々なことについて考え、取り組んできました。アドベントカレンダー最終日に枠をいただき、この1年間取り組んできたことに対する振り返りを書きたいと思います。 CTO is 何? 私自身はこれまでCTO経験は特になく、他の人よりちょっとだけ扱える技術領域が広いぐらいで、CTOが何をする仕事なのかというのもよく分かっておらず、そのあたりは書籍
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
フレームワークとツールの両面で完成度アップ！ 「Angular」バージョン7の新機能
GitHub - cerebral/overmind: Overmind - Frictionless state management
Angular でアプリケーションを作成したらやること 4 点 - Qiita
