すべてのカテゴリ

Facebook投稿支援アプリにReact/Vueは必要か (6)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 これまでに、HTMLファイルをベースとした実装例として、シンプルなHTMLとJavascript、jQuery、CDNをベースにしたReactとVueの実装例を紹介してきました。前回の記事でまとめたように、ReactやVueを使う場合、「npm」を利用してReactやVueのプロジェクトを作成して開発した方が便利です。ReactやVueを利用した開発の殆どは、CDNではなく、「npm」が利用されています。この記事では、「npm」を利用したReactの実装例を紹介しています。パッケージを管理する「npm」Node.jsをインストールすると、合わせてインストールされるのが「npm」というパッケージ管理ツールです。このツールを利用すると、インターネット上で公開されているNode.js（Javascript）のパッケージを自分のWebアプリやサービスに取り込んで簡単に利用できます。少し規模の大きなWebアプリやサービスの場合、そうした既存の公開されているパッケージを利用できるので開発の効率が向上します。もちろん、CDN(Contents Delivery Network)で、HTMLファイルから読み込めばこうしたパッケージも利用できるのですが、規模が大きなアプリやサービスの場合、npmで取り込んでしまった方が便利です。Node.jsは、オフィシャルサイトからダウンロードして簡単にインスト

こんにちは。Stephenです。今日は、私が約1年かけて開発した「Telegram Bot制作の最適なやり方」についてお話ししたいと思います。同じような悩みを持つ方の参考になれば幸いです。 きっかけ：シアヌークビルのビジネスディレクトリを作りたかった シアヌークビルという小さな街の中華系コミュニティのために、Telegram上でレストラン、ホテル、サービスなどをさっと検索できるBot を作りたいと思いました。 「簡単なことだ」と思っていました。 でも現実は…甘くなかった。 最初の試行錯誤：3つのツールを試して、3度挫折した1番目：Botmother（見た目は完璧、中身は…） Botmotherというツールは、ドラッグ&ドロップでBotが作れます。とても優しいUIで、2週間でメニュー全体を完成させました。 「これで完璧だ！」と思ったのですが… 詳細ページを作ろうとした瞬間、壁にぶつかりました。 このツールは「固定的な内容」には強いのですが、データベースから動的に情報を取得して表示するという機能に対応していなかったのです。 ここでの学び： 可視化ツールは便利だけど、複雑なデータ処理には向かない。 2番目：ManyChat（高くて、複雑だった） 次に試したのはManyChat。機能は確かに豊富です。 でも年間$1,500以上の費用がかかる。さらに、ユーザーをメニュー間で移動させるロジックを作るのに、数時間もかかりました。 「これって…過剰に複雑じゃないか？」と気づきました。 ここでの学び： 高いツール＝最適なツールとは限らない。 3番目：Google Apps Script（

CSS設計を学ぶ保守性が高く、きれいなコーディングができるように。BEMはSassと相性が良いので、身につければきれいなコードで今より短時間で記述できるようになるだろう

✅できた・コーディング作業コツコツ ・ウォーキング8409歩 💡学んだ ・ulなんかで、画像に通し番号振って、○○-01.webp～... とかの要素を作るとき、PHPのfor文使うとコード記述量もめっちゃ減って、保守性もかなりアップ imgのaltも配列にして渡してやれば問題なし ・template-partsで、fvなんかのパーツを作るとき、HTMLの方にstyle属性つけてbackground-imageを変数でわたしてやれるようにすれば、保守性ガンアップ ・ボックスの中のテキストをスクロールして読めるようにするのは、overflow-y: scroll; でめちゃ簡単 📍次やる ・しばらくは、楽しいコーディング作業 🐶雑談  コード書いてて、いかに保守性をあげるか？？ って工夫するところに快感を見出してしまいます... 個人的にプログラミング言語全般が好きなのは、人間がいかにズボラをするか？ に頭を使うところです いま、頭と工夫と少しの手間を使って、 未来の膨大な時間を買う... ロマン？？もあるかも？？笑 まあ、けっこう多くの案件で、一回コード書いたら、将来手直しすることあまりなかったりするんで、 ほんと、自己満足なんですけどね...笑