はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
    • はてなブログ(一般)
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
    • はてなブログ(世の中)
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • 相続
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
    • はてなブログ(おもしろ)
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
    • はてなブログ(エンタメ)
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
    • はてなブログ(アニメとゲーム)
    • はてなブログ(ゲーム)
  • おすすめ

    WWDC25

『ペパボテックブログ』

  • 人気
  • 新着
  • すべて
  • フロントエンド・ SPA 研修

    9 users

    pepabo.github.io

    フロントエンド・ SPA 研修フロントエンド・ SPA 研修 このドキュメントは何か GMO ペパボ株式会社エンジニア・デザイナー向けフロントエンド・ SPA (Single Page Application) 講習のドキュメントです。エンジニア・デザイナーがモダンなフロントエンド開発について入門するための教材として書いてありますが、いかんせん著者がエンジニアなのでエンジニアリングについてある程度わかっていることを前提に書いてしまっています。(特にデザイナーで)ここわかりにくかったとかあったら Pull Request して改善してください。お願いします。 この研修プログラムを一巡することで、エンジニアはすでに作っているであろう Rails Tutorial の Micropost アプリから SPA (Single Page Application) バージョンを作り、モダンなフロントエ

    • テクノロジー
    • 2020/09/10 23:41
    • 学習
    • 開発
    • javascript
    • CSS フレームワークとの付き合い方 - ペパボテックブログ

      50 users

      tech.pepabo.com

      フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @horaotoko 1. はじめに 2. CSS フレームワークの分類 (1) "レイヤー" で考えてみよう (2) 2つのグループに分類しよう 3. CSS フレームワークの使い分け - フルスタックと単機能 (1) 使い分けの基本方針 (2) フレームワークの種類ごとの用途 1. はじめに このページでは、身の回りにある多種多様な CSS フレームワークと、私たちはどうやって付き合っていけば幸せになれるのかということについて述

      • テクノロジー
      • 2015/10/14 18:36
      • css
      • framework
      • フレームワーク
      • pepabo
      • Web制作
      • フロントエンド
      • thinking
      • development
      • UI
      • 第2回「コンポーネント」

        10 users

        pepabo.github.io

        100年後も崩れないCSS勉強会、第2回です!というわけで、きょうはコンポーネントについてお話しさせてください。 突然ですが、こちらはなんのへんてつもない Amazon のページです(2015年9月29日現在)。このページをよく見てみると、同じような見た目のものがあると思いませんか? 例えば、ヘッダーのメニューのなかの、右に小さな矢印がついたリンクとか… 例えば、サイドバーのカテゴリーの見出しと各項目が一覧になっているリンクとか… 本の書影とカテゴリーの見出し・本のタイトルが一緒になったリンクもあります。 さらには、ページのなかでオレンジ色の太字の見出しなんかも、文字の大きさは違うけど同じ見た目ですね。 こんなふうに、ウェブページはたくさんの要素があるように見えて、案外おなじ見た目の要素を繰り返したり、組み合わせることで作られています。 このような共通した要素のことを、ここではコンポーネン

        • テクノロジー
        • 2015/10/06 14:18
        • CSS
        • web制作
        • あとで読む
        • 第1回「詳細度」

          65 users

          pepabo.github.io

          さて、唐突にはじまりましたが「100年後も崩れない CSS 勉強会」、きょうは詳細度についてお話しします! あっ 崩れてる! …っていうのは CSS あるあるだと思うんですけど、スタイルシートを書いているときはきちんと表示できてても、あとから見るとあれ?おかしくない?みたいなこと、よくありませんか? なんでスタイルが崩れてしまうんでしょうか。そのことを考えるために、逆になんでスタイルって「当たる」のか、というところを改めて見てみようと思います。 CSS には書かれたスタイルを適用する優先順位があって、まず1番目に上から順番に「当てる」というのと、その次に詳細度という順番によって「当てる」という、ふたつのルールがあります。 まずは、上から順番に「当たる」ことについて見てみます。 GMO Pepabo, Inc. とだけ書かれた div 要素があって、class という名前の class が指

          • テクノロジー
          • 2015/10/05 20:13
          • css
          • design
          • あとで読む
          • 100年後も崩れないCSS勉強会

            25 users

            pepabo.github.io

            GMO ペパボ株式会社の社内で開催している、スタイルシートの勉強会の資料を公開しています。

            • テクノロジー
            • 2015/10/05 19:07
            • css
            • webdesign
            • Web制作
            • Webデザイン
            • ペパボ プロダクトオーナーシップ 勉強会

              14 users

              pepabo.github.io

              活動報告が滞っているペパボプロダクトオーナーシップ勉強会の @kenchan です。 最近のプロダクトオーナーシップ、プロダクトマネジメントの盛り上りに合わせるかのように、今月末に プロダクトオーナー祭り2015 ~世界を変えるのは俺たちだ!~ - POStudy ~プロダクトオーナーシップ勉強会~ | Doorkeeper というイベントが開催されます。 ペパボからは2名登壇、および公式スポンサーというかたちで、このイベントを一緒に盛り上げていきます! 面白そうなセッションが沢山ありますが、このエントリではペパボメンバーのセッションについて、概要よりもちょっと踏み込んだ紹介をしたいと思います。 「新カゴプロジェクトのプロダクトオーナーとしてやってきたこと」山林 茜https://postudy.doorkeeper.jp/events/32808#a2 13:25からのセッションでは、カ

              • テクノロジー
              • 2015/09/11 16:33
              • pepabo
              • CSS 設計の長い夢 - ペパボのフロントエンドスタンダード

                719 users

                tech.pepabo.com

                フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう! (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ(あ

                • テクノロジー
                • 2015/06/10 16:44
                • css
                • 設計
                • Web制作
                • scss
                • あとで読む
                • web
                • design
                • development
                • css3
                • CSS設計
                • Puppet manifest 独自コーディング規約 - ペパボテックブログ

                  3 users

                  tech.pepabo.com

                  manifestのコーディング規約を決めとこう。 基本的には本家のここに従う。Style Guide いくつか気になるのをピックアップすると。 リソースパラメータのデフォルト値はトップレベルスコープにしか置かない(各クラス内で設定しない)。 9.7. Resource Defaults Resource defaults should be used in a very controlled manner, and should only be declared at the edges of your manifest ecosystem. Specifically, they may be declared: At top scope in site.pp In a class which is guaranteed to never declare another class and

                  • 学び
                  • 2014/12/18 18:06
                  • Nagiosの基礎 - ペパボテックブログ

                    31 users

                    tech.pepabo.com

                    この文書は新卒採用エンジニアの研修資料として、アドバンスドシニアエンジニアの黒田 良が社内向けに作成したものです。 サービスモニタリングフレームワーク フレームワーク2大巨頭 フレームワークなので アーキテクチャ 設定の基本 設定ファイルの種類 Nagios自体の設定 監視項目の設定 ファイルレイアウト オブジェクトの種類 nagiosプラグイン よくある監視項目 ウェブインターフェース よくやるオペレーション 運用 アドバンストNagios 参考資料 何のための監視かは今日はもう説明しない。なぜ開発者がNagiosを学ぶのか? 自分が作った物は自分で面倒見たいのが本音だろう。@kyanny さんがいいこと書いてる。 お願いします脳の恐怖 サービスモニタリングフレームワーク nagiosってなんすか? 複数のホスト、サービス、リソース等の状態の監視を効率的に管理するためのもの。 フレームワ

                    • テクノロジー
                    • 2014/12/12 18:27
                    • nagios
                    • サーバ
                    • JavaScript フレームワーク - ペパボテックブログ

                      553 users

                      tech.pepabo.com

                      フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う? (1) ドメインロジックとプレゼンテーションの分離 (2) SPA(シングルページアプリケーション) 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う? どうしてフレームワークを使う? (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ

                      • テクノロジー
                      • 2014/12/10 17:10
                      • javascript
                      • フレームワーク
                      • framework
                      • AngularJS
                      • DOM
                      • react
                      • UI
                      • HTML
                      • SPA
                      • js
                      • JavaScript と altJS - ペパボのフロントエンドスタンダード

                        115 users

                        tech.pepabo.com

                        TypeScript について (1) 利用するメリット Java や C# のような文法の altJS です。下記に当てはまる場合は有力な選択肢です。 既存プロジェクトを altJS に移行したいとき JavaScript の文法そのままコピーして使用できるため 静的型付けをしたいとき 現状 TypeScript 一択です 新規の中・長期に渡る大規模プロジェクトのとき 静的型付やインターフェースを利用できるため (2) 利用上の注意 ただし TypeScript を利用する上で注意する点もあります。 コンパイルが遅い 型チェック等があるため、altJS の中でも特に遅めです this の用法が増える クラスのメンバ変数の参照には this.foo と記述します (3) サンプルコード // sample.ts module Saying { export class Greeter {

                        • テクノロジー
                        • 2014/11/26 18:13
                        • JavaScript
                        • altjs
                        • coffeescript
                        • typescript
                        • case
                        • (1)
                        • guideline
                        • IDE
                        • dev
                        • あとで読む
                        • ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ

                          605 users

                          tech.pepabo.com

                          GMO ペパボのエンジニア・デザイナーによる技術ブログ / ペパボのフロントエンドスタンダード に関する記事一覧

                          • テクノロジー
                          • 2014/11/26 16:33
                          • javascript
                          • フロントエンド
                          • css
                          • コーディング規約
                          • フレームワーク
                          • ペパボ
                          • altJS
                          • web制作
                          • web
                          • あとで読む
                          • GitHub を用いた開発フロー テンプレート - ペパボテックブログ

                            183 users

                            tech.pepabo.com

                            Development (開発の進め方) GitHub Flow の利用 レビューの実施 Testing (テスト) Deployment (リリースの仕方) Releases (リリース後の記録) References(参考文献) Appendix(付録) Release's notes の作成方法 History(更新履歴) 2014/03/15 Development (開発の進め方) GitHub Flow の利用 masterブランチは常にデプロイ可能な状態としなければならない テストが失敗する状態の場合、直ちに修正するべきである テストが失敗する状態の場合、デプロイすることは許されない 「新しい何か」に取り組む際は、 pull request を用いるべきである ブランチは master から作成し、ブランチ名は説明的な名前とすべきである(例: new-oauth2-scope

                            • テクノロジー
                            • 2014/04/19 18:39
                            • github
                            • git-flow
                            • git
                            • development
                            • 開発
                            • team
                            • flow
                            • issue
                            • *tutorial
                            • 技術
                            • Nagiosの基礎 - ペパボテックブログ

                              15 users

                              tech.pepabo.com

                              この文書は新卒採用エンジニアの研修資料として、アドバンスドシニアエンジニアの黒田 良が社内向けに作成したものです。 サービスモニタリングフレームワーク フレームワーク2大巨頭 フレームワークなので アーキテクチャ 設定の基本 設定ファイルの種類 Nagios自体の設定 監視項目の設定 ファイルレイアウト オブジェクトの種類 nagiosプラグイン よくある監視項目 ウェブインターフェース よくやるオペレーション 運用 アドバンストNagios 参考資料 何のための監視かは今日はもう説明しない。なぜ開発者がNagiosを学ぶのか? 自分が作った物は自分で面倒見たいのが本音だろう。@kyanny さんがいいこと書いてる。 お願いします脳の恐怖 サービスモニタリングフレームワーク nagiosってなんすか? 複数のホスト、サービス、リソース等の状態の監視を効率的に管理するためのもの。 フレームワ

                              • テクノロジー
                              • 2014/04/03 00:18
                              • Nagios
                              • インフラ
                              • 監視
                              • ツール
                              • サーバー
                              • 設定
                              • programming
                              • GitHub を用いた開発フロー テンプレート - ペパボテックブログ

                                43 users

                                tech.pepabo.com

                                Development (開発の進め方) GitHub Flow の利用 レビューの実施 Testing (テスト) Deployment (リリースの仕方) Releases (リリース後の記録) References(参考文献) Appendix(付録) Release's notes の作成方法 History(更新履歴) 2014/03/15 Development (開発の進め方) GitHub Flow の利用 masterブランチは常にデプロイ可能な状態としなければならない テストが失敗する状態の場合、直ちに修正するべきである テストが失敗する状態の場合、デプロイすることは許されない 「新しい何か」に取り組む際は、 pull request を用いるべきである ブランチは master から作成し、ブランチ名は説明的な名前とすべきである(例: new-oauth2-scope

                                • テクノロジー
                                • 2014/04/02 21:33
                                • github
                                • git
                                • workflow
                                • development
                                • ペパボテックブログ

                                  22 users

                                  tech.pepabo.com

                                  GMO ペパボのエンジニア・デザイナーによる技術ブログ

                                  • テクノロジー
                                  • 2014/04/01 19:07
                                  • pepabo
                                  • ペパボ
                                  • GitHub
                                  • JavaScript
                                  • ドキュメント
                                  • js
                                  • あとで読む
                                  • IT

                                  このページはまだ
                                  ブックマークされていません

                                  このページを最初にブックマークしてみませんか?

                                  『ペパボテックブログ』の新着エントリーを見る

                                  キーボードショートカット一覧

                                  j次のブックマーク

                                  k前のブックマーク

                                  lあとで読む

                                  eコメント一覧を開く

                                  oページを開く

                                  はてなブックマーク

                                  • 総合
                                  • 一般
                                  • 世の中
                                  • 政治と経済
                                  • 暮らし
                                  • 学び
                                  • テクノロジー
                                  • エンタメ
                                  • アニメとゲーム
                                  • おもしろ
                                  • アプリ・拡張機能
                                  • 開発ブログ
                                  • ヘルプ
                                  • お問い合わせ
                                  • ガイドライン
                                  • 利用規約
                                  • プライバシーポリシー
                                  • 利用者情報の外部送信について
                                  • ガイドライン
                                  • 利用規約
                                  • プライバシーポリシー
                                  • 利用者情報の外部送信について

                                  公式Twitter

                                  • 公式アカウント
                                  • ホットエントリー

                                  はてなのサービス

                                  • はてなブログ
                                  • はてなブログPro
                                  • 人力検索はてな
                                  • はてなブログ タグ
                                  • はてなニュース
                                  • ソレドコ
                                  • App Storeからダウンロード
                                  • Google Playで手に入れよう
                                  Copyright © 2005-2025 Hatena. All Rights Reserved.
                                  設定を変更しましたx