愛すべきAngularとのお別れ。2,3年後を見据えReactにリプレイスする話｜Yuito Sato
「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 こんにちは、ログラスのエンジニアの佐藤です。 昨年に入社して早2ヶ月経ちましたので、入社記事でも書いていきます。 「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 と、CTOに言ったのは昨年末くらいでした。 入社してまだ1ヶ月経たないくらいです。 ログラスは創業当時からAngularを使って開発をしていました。 正社員のフロントエンドエンジニアは自分が入るまではいなくて、業務委託の方と協働しながら開発をしていました。 そのプロダクトをゼロからこの創業期のタイミングでReactでフロントエンドを作り直そうというお話です。 今回のお話はあくまでログラスのプロダクトチームの目指す理想像とAngularの相性が悪いだけで、AngularがReactより劣っているわけではありません。 Angularはフ
[Angular8]サイトを簡単スタイリング！Angular Flex-Layoutの使い方をまとめてみた | DevelopersIO
inline-flex inline-flexを設定することも可能です。 fxLayout="row inline"のように書くことでinline-flexとすることができます。 fxLayoutAlign 要素の整列順 設定したflex-directionの軸に対して子要素を左、右、中央揃えなど設定できます。 fxLayoutAlignの第1引数にメインの軸（rowであればx軸、columnであればy軸）の設定、第2引数に別軸をプラスして設定（rowであればy軸、columnであればx軸）できます。 デフォルトではfxLayoutAlign="start"が設定されています。 下記にいろんな設定を試した際の画面を載せていきます。 前提としてfxLayout="row wrap"を設定しておきます。 fxLayoutAlign="center" 要素が中央揃えになります。 <div cla
![[Angular8]サイトを簡単スタイリング！Angular Flex-Layoutの使い方をまとめてみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/07aa11b12376196229f0af49b9b58f3d8d0f1b87/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F06%2FAngular8.png)
Flex-Layout と Angular Material でグッバイCSS – 検索フォームを作る ｜ DevelopersIO
Flex-Layout と Angular Material でこれを作りました。 この画面、CSSファイルには何も書いていません。 いい時代になりましたね。ごめんなさい、嘘です。 全体のパディングだけ1行設定しています。それ以外はすべて Flex-Layout と Angular Material の仕組みで完結しています。 ※ Twitter等で「CSSがなくなるわけではないよね」というご指摘をいただき確かにそのとおりですので全体的に誤解を与えぬよう修正しています。ありがとうございました。 自分で書くCSSをなるべく少なくしたい 可能な限りフレームワークやライブラリの仕組みに乗り、CSSファイルの記述量は少なくしたいところです。単純にメンテするコードの量が減りますし、どこに何のCSSが適用されているのか気にしなくてよくなります。 画面を構成していくための道具を選定するにあたり、以下2要
Angular7 で Web アプリを作ろう - mat-menu - ふるてつのぶろぐ
今日すること こんにちは、ふるてつです。 今回のテーマもAngular Materialで、<mat-menu>のお話です。 以前わたしがbootstrapで作っていたメニューと同じものをmaterialで作ろうと思います。 メニューは上記のような感じです（緑色の部分です） mat-menu関連のリファレンスについて リファレンスはこちらです。https://material.angular.io/components/menu/overview リファレンスを参考にして作っていきます。 わたしの場合はヘッダー用のコンポーネントを作っていて、その中にまず<mat-toolbar>を配置しています。 そしてその中に<mat-menu>やmat-buttonを動的に入れています。 サインアウトなど必ず表示するアイコンなどは固定で配置します。 ヘッダー用のコンポーネントについて まずヘッダーのh
Angular7 で Web アプリを作ろう - sidenav - ふるてつのぶろぐ
今日すること こんにちは、ふるてつです。 残念ながらGW10連休はあっというまに終わりました。 今回のテーマもAngular Materialで、sidenavの使い方について少し書きたいと思います。 navigation関連のリファレンスについて リファレンスではnavigation関連で 3 つのコンポーネントが記載されています。 sidenav toolbar menuです。 その中で一番大きなくくりはsidenavになると思います。 今回sidenavの記述はapp.componentに追加します。 そしてsidenav用のコンポーネントsidenav.componentを新たに追加しようと思います。 sidenav関連のモジュールを追加 今回sidenavを使用するにあたり下記のモジュールを使用しました。 MatSidenavModule MatToolbarModule Mat
Angularでの基本的なページレイアウトを理解する - Qiita
前回ではAngularのプロジェクトを構成する、”コンポーネント”、”モジュール”につて解説していきました。 Angularプロジェクトの構成 今回はそれらを使って基本的なページのレイアウトを組んでいきたいと思います！ それではいきましょうーー！ Headerの実装 前回作ったheaderコンポーネント（鬼誤字ってました恥ずかしい。。。）を以下のように修正して実際にヘッダーを作っていきましょう！ 少しみづらいかもしれませんが、上から src/app/header/header.component.ts src/app/app.component.html src/app/header/header.component.html になります！ こんな感じで表示されるはずです！ それではヘッダーを作っていきましょう！ 自分で作ってもいいですし、コピペしてくれても構いません！ <header>
Angularでマテリアルデザインの画面を作成する(Angular Material利用) | 釣りキチエンジニアのブログ
「Angularでマテリアルデザインの画面をどうやって作成するのか？」 「そもそもマテリアルデザインって何？？」 今回はこの辺りについて確認します。 Angularでのマテリアルデザイン画面の作成手順今回はAngularでマテリアルデザイン画面を作成する手順について説明します。マテリアルデザイン作成のためにAngular Materialを利用します。 Material DesignとはGoogleが発表したデザインのガイドラインです。直訳すると物質デザインですが、、画面のコンポーネントが本当の物質みたいに、ボタンを押すことで凹んだり、動いたり、テキストボックスにプリセットされた文字がフォーカスインと同時に端に寄ったり・・・直感的に人が操作できます。 最近よくそんなデザインのWebサイトを見かけます。 ではAngularでそんなおしゃれなMaterial Designを導入した画面を作って
Ionic Frameworkとは
Overview Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as Angular, React, or Vue. Alternatively, it can be used standalone without any frontend framework using a simple script include. If you’d like to learn more about Ionic before diving in, we created a
npmでpermission deniedになった時の対処法[mac] - Qiita
この記事について npmを利用してinstallしたりupgradeしたりする際にpermission deniedと表示されてしまった時に助けになるかもしれない記事です。 現象 npmコマンドを実行すると "EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/<パッケージ名>'" というエラーが表示されてしまう。 npm ERR! Darwin 15.5.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "update" "-g" npm ERR! node v5.6.0 npm ERR! npm v3.7.1 npm ERR! path /usr/local/lib/node_modules/npm/node_m
![npmでpermission deniedになった時の対処法[mac] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/02a98747c5cd1360aee7ac0c2ec8f99eea50040c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9bnBtJUUzJTgxJUE3cGVybWlzc2lvbiUyMGRlbmllZCVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MSVBMyVFMyU4MSU5RiVFNiU5OSU4MiVFMyU4MSVBRSVFNSVBRiVCRSVFNSU4NyVBNiVFNiVCMyU5NSU1Qm1hYyU1RCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTY2MTFiNDM1YzBlZjA4NzBiNDlkYjU1OGIwYmExMDU%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwb2tvaHMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTc5MWJkYjVlOGU3YTIxNGQ2YTMwZGExYjNjNjdkYjA1%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3a40b0441eda5911e1f70e72facdf8b6)
VSCodeを用いたAngular7開発環境構築からアプリケーションの実行まで - Qiita
概要 TesseractやRaspberry Piについての記事が途中なのですが、 急遽Angularを使用することになり、開発中に色々と不明点が多く出てきていました。 一旦開発が落ち着いたので備忘録兼ねてAngularの構築からアプリケーションの実行までを記事にまとめておきたいと思います。 開発中に詰まったことはまた別の記事として投稿したいと思います。 前提 AngularはTypeScriptベースのWebアプリケーションフレームワークです。 よく比較されているものとしてはReactとVue.jsが挙げられると思います。 今回はAngularで開発を行ったのでAngularしか取り上げませんが、他のフレームワークに興味がある場合は調べてみると良いかもしれません。 この記事ではAngularの開発を行うための前提条件および、開発ツールを一通り構築するための手順をまとめています。 なお、こ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular Flex-Layout Demos
Angular Material - Introduction