はてなブックマーク

自ブログからの引用です。 出典: https://seeklogo.com/ 自ブログからの転載です。 初めに 以前から存在し、ネーミングからモダンフロントの近未来を感じさせるWebComponentsに関して、基本的な技術の概観と2021年現在に考えて何を解決してくれる技術なのかを調査してみました。 概要 WebComponentsとはでよくある定義が、Web標準技術を利用して再利用可能なUIコンポーネントを作成する技術で、以下の3つの技術から構成されます。 カスタム要素 Shadow DOM HTML テンプレート イメージとして WebComponents=カスタム要素 と思っている方も多いと思いますが、単なる要素としてではなく、コンポーネントとして再利用可能なUIを定義するために必要な機能が補完される物と考えています。 要素技術の解説 3つの要素技術に関して、それぞれ概要をみていき

う〜ん、とはいえみなさん、ビルドツールってなんか地味な印象ありませんか？私はそうでした。 ビルドツールといえば、フロントオタクがwebpackをゴリゴリチューニングしたり、rollupなどの色々ツールがあるもいまいち根本的にビジネスメリットがあるわけでもないし、 下手に手を出すと技に溺れやすい世界だし(公式ドキュメントにシンプルに保ちなさい的なこと書いてあるよね！)、第一最適化はフレームワークに任せればいいじゃん！っと考えていました。 しかし、今回注目したいesbuildはまさにフロントエンドの次の時代を作ってくれる様な、「すごい」ツールであるとキラキラとした期待を寄せてしまいます。 esbuildとは webpackなどに変わるフロントエンドのコード変換+バンドルツールで、なんとWebpackと比較して10-100倍速度が早いそうです。 これが本当だとすると、フロントの開発効率は根本的に

2021/02/21 10選 => 12選に更新 2021/04/12 おまけを追加 2022/01/04 おまけにThe Modern JavaScript Tutorialを追加 こんにちは、WEBエンジニアのhedrallです。 もう一歩踏み込んでプログラミングに関して勉強をしようと思った時、 世の中には学習のためのレポジトリが存在していて、しかも世界的にはものすごい数のStarを獲得しているものも少なくないことを知りました。 今回はピックアップしてご紹介いたします。 [⭐️ 96.6k]: javascript-algorithms プログラミングで使用されるデータ構造や、一般的なアルゴリズムがまとめられており、全てjsで実装が例示されています。 [⭐️ 149k]: developer-roadmap webやinfraなど各分野のエンジニアになるために知っておくべき技術がロード

概要 これからNuxt.jsで開発を始める方向けに、最初に抑えておきたいポイントを個人的にまとめます。私自身としてはAngularアプリの初期構築業務の経験があるのですが（数万行単位で書いてました）、自分が新チームの技術選定をするタイミングでNuxt.jsを選定しました。ある程度SPA開発の知識はありましたが、最初は各フレームワーク毎に結構抑えどころというか癖見たいのを感じました。そんな、親切で日本語な公式読んでもすぐには手の動かない並エンジニアの自分の様な方向けにまとまったチートシート的な感じになればいいなと思っています。 // 2020/11/26追記 記述内容を現状に合わせて見直しました。 本記事は全体像の把握を目的としており、記述内容の強化が簡便性を損なわない様、最初は読み飛ばしても問題ないと思われるトピックには ⚫️ アイコンをつけております。 Nuxt.jsとは Vueベースの

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日CodePipelineやCodeBuildを初めて触ってみました。初心者がAWSでCIを行う上で考慮するべき点が多くありましたので、実装の道筋を解説した上で、嵌った所や理解に時間がかかった部分などのノウハウを共有させて頂ければと思います。 今回やったこと Vueで開発したSPAアプリをS3にホストするCodeBuildプロジェクトをTerraformで作成しました。 そもそも何を使用すればいいか？ AWSでCIを行うことを検討すると、下記の4つのツールの名前が浮かぶと思います。 CodeCommit CodeBuild CodeD

@Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent { public formGroup: FormGroup; // 全てのコントロールをまとめる為のグループを宣言 // 住所のフォームの数だけ、ラベルを宣言する public addresses = [ '住所1', '住所2' ]; // 電話番号のフォームの数だけ、ラベルを宣言する public phone_numbers = [ '電話番号1', '電話番号2' ]; constructor( private formBuilder: FormBuilder ) { setInterval(